wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions
tailwindcss/tests
History
Exact
Philipp Spiess 680c55c11c
Normalize attribute selector for data-* and aria-* modifiers (#14037) 
Fixes #14026 
See #14040 for the v4 fix

When translating `data-` and `aria-` modifiers with attribute selectors,
we currently do not wrap the target attribute in quotes. This only works
for keywords (purely alphabetic words) but breaks as soon as there are
numbers or things like spaces in the attribute:

```html
<div data-id="foo" class="data-[id=foo]:underline">underlined</div>
<div data-id="f1" class="data-[id=1]:underline">not underlined</div>
<div data-id="foo bar" class="data-[id=foo_bar]:underline">not underlined</div>
```

Since it's fairly common to have attribute selectors with `data-` and
`aria-` modifiers, this PR will now wrap the attribute in quotes unless
these are already wrapped.

| Tailwind Modifier  | CSS Selector |
| ------------- | ------------- |
| `.data-[id=foo]`  | `[data-id='foo']`  |
| `.data-[id='foo']`  | `[data-id='foo']`  |
| `.data-[id=foo_i]`  | `[data-id='foo i']`  |
| `.data-[id='foo'_i]`  | `[data-id='foo' i]`  |
| `.data-[id=123]`  | `[data-id='123']`  |

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2024-07-24 18:46:21 +02:00
..
fixtures remove unused fixture files 2021-12-15 18:13:09 +01:00
plugins Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
postcss-plugins/nesting Improve CSS output in tests to better reflect reality (#10454) 2023-01-31 15:37:49 +01:00
util Loosen :is() wrapping rules in applyImportantSelector for more readable output. (#13900) 2024-07-16 10:51:45 -04:00
animations.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
any-type.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
apply.test.js Change dark selector so @apply works correctly with pseudo elements (#13379) 2024-03-27 11:03:49 -04:00
arbitrary-properties.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
arbitrary-values.test.css Always generate -webkit-backdrop-filter property (#13997) 2024-07-12 20:48:08 -04:00
arbitrary-values.test.html Ensure repeating-conic-gradient is detected as an image (#11180) 2023-07-13 11:48:35 -04:00
arbitrary-values.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
arbitrary-variants.test.js Normalize attribute selector for data-* and aria-* modifiers (#14037) 2024-07-24 18:46:21 +02:00
basic-usage.test.css Use no value instead of blur(0px) for backdrop-blur-none and blur-none utilities (#13830) 2024-06-13 15:49:59 +02:00
basic-usage.test.js Use no value instead of blur(0px) for backdrop-blur-none and blur-none utilities (#13830) 2024-06-13 15:49:59 +02:00
blocklist.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
collapse-adjacent-rules.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
collapse-duplicate-declarations.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
color-opacity-modifiers.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
color.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
combined-selectors.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
configurePlugins.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
containerPlugin.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
context-reuse.test.html inline tests (#10362) 2023-01-19 11:42:52 +01:00
context-reuse.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
custom-extractors.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
custom-plugins.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
custom-separator.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
custom-transformers.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
customConfig.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
dark-mode.test.js Change dark selector so @apply works correctly with pseudo elements (#13379) 2024-03-27 11:03:49 -04:00
default-extractor.test.js Fix class detection in Slim templates with attached attributes and IDs (#14019) 2024-07-18 11:21:20 -04:00
defaultConfig.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
defaultTheme.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
escapeClassName.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
evaluateTailwindFunctions.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
experimental.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
extractor-edge-cases.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
flattenColorPalette.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
format-variant-selector.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
generate-rules.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
getClassList.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
getSortOrder.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
getVariants.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
import-syntax.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
important-boolean.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
important-modifier-prefix.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
important-modifier.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
important-selector.test.js Ensure that arbitrary properties respect important configuration (#13353) 2024-03-26 11:42:41 +01:00
kitchen-sink.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
layer-at-rules.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
layer-without-tailwind.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
match-components.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
match-utilities.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
match-variants.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
min-max-screen-variants.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
minimum-impact-selector.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
modify-selectors.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
mutable.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
negated-content-ignore.test.html Fix using negated content globs (#5625) 2021-09-29 11:15:31 +01:00
negated-content-include.test.html Fix using negated content globs (#5625) 2021-09-29 11:15:31 +01:00
negated-content.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
negateValue.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
negative-prefix.test.js [v3] Support negative values for {col,row}-{start,end} utilities (#13781) 2024-06-03 11:34:27 -04:00
normalize-config.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
normalize-data-types.test.js Disable automatic var() injection for anchor properties (#13826) 2024-06-13 09:19:08 -04:00
normalize-screens.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
opacity.test.js Fix multiple <alpha-value> in color definitions (#13740) 2024-05-29 11:32:48 -04:00
parallel-variants.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
parseAnimationValue.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
parseObjectStyles.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
prefers-contrast.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
prefix.test.js Don't prefix classes in arbitrary values of has-*, group-has-*, and peer-has-* variants (#13770) 2024-05-31 20:01:09 -04:00
prefixSelector.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
preflight.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
raw-content.test.css feat(preflight): simplify sans-serif font stack (#11748) 2023-12-18 13:58:22 -05:00
raw-content.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
relative-purge-paths.test.html inline tests (#10362) 2023-01-19 11:42:52 +01:00
relative-purge-paths.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
resolve-defaults-at-rules.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
resolveConfig.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
responsive-and-variants-atrules.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
safelist.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
screenAtRule.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
shared-state.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
source-maps.test.js Bump deps (#13797) 2024-06-05 12:53:06 -04:00
syntax-lit-html.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
syntax-svelte.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
syntax-svelte.test.svelte Rename svelte tests 2021-09-21 12:37:49 -04:00
tailwind-screens.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
to-path.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
variants.test.css Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
variants.test.html Move forced-colors variant after dark variant (#12582) 2023-12-18 13:58:22 -05:00
variants.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
warnings.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00
withAlphaVariable.test.js Cleanup oxide — Part #2 (#13312) 2024-03-22 17:12:14 +01:00