wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions
tailwindcss/src/util
History
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
..
applyImportantSelector.js Loosen :is() wrapping rules in applyImportantSelector for more readable output. (#13900) 2024-07-16 10:51:45 -04:00
bigSign.js [WIP] Unify JIT and AOT code paths (#4188) 2021-04-30 10:58:40 -04:00
buildMediaQuery.js Add new min and max variants (#9558) 2022-10-14 14:25:25 -04:00
cloneDeep.js Remove lodash (#5390) 2021-09-06 14:15:10 -04:00
cloneNodes.js Fix source maps of variant utilities that come from an @layer rule (#12508) 2023-12-01 11:46:18 -05:00
color.js Handle variable colors that have variable fallback values (#12049) 2023-10-23 15:25:58 -04:00
colorNames.js Drop support for Node.js v12 (#11089) 2023-04-25 16:28:20 -04:00
configurePlugins.js Make it possible to enable caretColor and content core plugins in AOT mode (#4548) 2021-06-03 15:27:22 +02:00
createPlugin.js ensure options for plugins are not stale between builds (#2695) 2020-10-28 13:46:12 -04:00
createUtilityPlugin.js Make negative values a first-class feature, rather than theme-driven (#5709) 2021-10-06 13:42:05 -04:00
dataTypes.js Normalize attribute selector for data-* and aria-* modifiers (#14037) 2024-07-24 18:46:21 +02:00
defaults.js Move defaults to their own always-on layer (#6500) 2021-12-14 12:21:38 -05:00
escapeClassName.js Remove lodash (#5390) 2021-09-06 14:15:10 -04:00
escapeCommas.js [WIP] Unify JIT and AOT code paths (#4188) 2021-04-30 10:58:40 -04:00
flattenColorPalette.js Remove AOT (#5340) 2021-09-01 17:13:59 +02:00
formatVariantSelector.js Eliminate irrelevant rules when applying variants (#12113) 2023-10-23 15:42:47 -04:00
getAllConfigs.js Enable ESM and TS based config files (#10785) 2023-03-15 17:04:18 -04:00
hashConfig.js Ignore unknown types when hashing config 2021-05-06 13:16:32 -04:00
isKeyframeRule.js Fix malformed keyframes when using class variants (#5223) 2021-08-16 12:25:30 -04:00
isPlainObject.js Allow plugins from a parent document to be used in an iframe (#12208) 2023-10-23 15:49:13 -04:00
isSyntacticallyValidPropertyValue.js Rename isValidArbitraryValue 2022-11-17 15:19:31 -05:00
log.js Remove process dependency from log functions (#8530) 2022-06-07 11:23:32 +02:00
nameClass.js Add generalized modifier support to matchUtilities (#9541) 2022-10-13 14:01:17 -04:00
negateValue.js Oxide (#10252) 2023-01-13 12:22:00 +01:00
normalizeConfig.js refactor(util): code refactor (#13872) 2024-06-24 09:13:12 -04:00
normalizeScreens.js Add new min and max variants (#9558) 2022-10-14 14:25:25 -04:00
parseAnimationValue.js fix: typo (#13864) 2024-06-20 06:02:11 -04:00
parseBoxShadowValue.js Improve data type analyses for arbitrary values (#9320) 2022-09-14 14:08:56 +02:00
parseDependency.js Allow resolving content paths relative to the config file (#9396) 2022-09-23 08:09:02 -04:00
parseGlob.js refactor(util): code refactor (#13872) 2024-06-24 09:13:12 -04:00
parseObjectStyles.js Remove lodash (#5390) 2021-09-06 14:15:10 -04:00
pluginUtils.js Fix multiple <alpha-value> in color definitions (#13740) 2024-05-29 11:32:48 -04:00
prefixSelector.js Don't prefix arbitrary classes in peer/group variants (#11454) 2023-07-13 11:50:43 -04:00
pseudoElements.js Restore old behavior for class dark mode, add new selector and variant options for dark mode (#12717) 2024-01-05 15:20:11 -05:00
removeAlphaVariables.js Remove text opacity CSS variables from ::marker (#8622) 2022-06-14 10:09:09 -04:00
resolveConfig.js Cleanup unused variantOrder (#9829) 2022-11-14 12:18:44 +01:00
resolveConfigPath.js Add .mts and .cts config file detection (#13940) 2024-07-03 23:09:35 +02:00
responsive.js Replaces use of Lodash isArray with built-in Array.isArray 2019-07-13 16:52:07 +02:00
splitAtTopLevelOnly.js refactor(util): code refactor (#13872) 2024-06-24 09:13:12 -04:00
tap.js Remove lodash (#5390) 2021-09-06 14:15:10 -04:00
toColorValue.js Remove lodash (#5390) 2021-09-06 14:15:10 -04:00
toPath.js Support alpha values for theme() function (#8416) 2022-05-25 13:54:30 -04:00
transformThemeValue.js Fix theme(fontFamily.*) when family contains fontFeatureSettings config (#9217) 2022-08-30 17:18:41 +01:00
validateConfig.js Fix @tailwindcss/line-clamp warning (#10919) 2023-03-30 15:06:45 -04:00
validateFormalSyntax.js Improve type checking for formal syntax (#9448) 2022-09-29 18:24:51 +02:00
withAlphaVariable.js Replace rgb and hsl helpers with <alpha-value> placeholder for colors with custom properties (#8501) 2022-06-02 10:21:20 -04:00