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>
* Avoid over-extracting utilities from candidates with decimal values
Prevent candidates like `px-1.5` from generating both the `px-1.5` class and the `px-1` class.
* Update CHANGELOG.md
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* add `tailwind.config.cts` and `tailwind.config.mts` as default config files
* always use jiti when working with ESM or TS files
* update changelog
* add integration test for `.cts` and `.mts` configuration files
* Added tests to verify that classes are prefixed when using `has-*` variants with arbitrary values
* Fix test
* Don't prefix classes in arbitrary values in `has-*` variants
* Update changelog
---------
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* Fix multiple <alpha-value> in color definitions
Fixes#13716
* Update CHANGELOG.md
* Use `replace` with global regex
---------
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* Revert "Improve glob handling for folders with `(`, `)`, `[` or `]` in the file path (#12715)"
This reverts commit f2a7c2c4532b76d61351f1ca7e26ec8c93729b5d.
* Update changelog
* drop nesting detection for `@tailwind`
* drop separate nesting detection entirely
* detect nesting only when using `@apply` with a class that uses nesting
* drop unnecessary `important` config
* add test to verify applying nested user CSS errors
* add error reason to tests
* update `@apply` error message
* fixing double x-large absolute size
x-large appears twice in the set of absolute sizes.
I believe the second one is meant to be 'xx-large'.
* update changelog
---------
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
* Reset letter spacing for form elements
Some browsers, such as Chrome, set `letter-spacing: normal` for form elements. For consistency with the other styles, it should be set to `inherit` by Preflight.
* wip
* Update changelog
---------
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* remove all oxide related code
* Update lightningcss to version 1.24.1
* update tests to match bumped Lightning CSS output
---------
Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
* swap engines
* remove all oxide related files
* drop swap engine step from CI
* drop oxide tests where we read from a `.oxide.*` file
* drop swap-engines.js file
* drop unused `oxide` variable
Let's make eslint happy!
* feat: add contain utilities
* chore: lint
* Support mulptiple contain properites
Support multiple contain properties, such as "contain-size contain-layout". Drop contain-unset as we haven't added -unset variants for other utilities.
* Update Vite; fix test regex
Vite is generating files like "index--T9oO-MP.css", which required relaxing the regex used in tests.
---------
Co-authored-by: Alexander <github@lichter.io>
* Ensure max specificity of 001 in all Preflight rules
* Update changelog
* Update changelog
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* Reduce specificity of `rtl`, `ltr`, and `dark` variants
Reduce specificity of `rtl`, `ltr`, and `dark` variants (when using `darkMode: 'class'`) to make them the same as other variants. This also sorts the LTR/RTL and dark variants later in the variant plugin list to ensure that the reduced specificity doesn't cause them to start "losing" to other variants to keep things as backwards compatible as possible.
Resolves a long-standing issue where `darkMode: 'media'` and `darkMode: 'class'` had different specificity, which meant switching your dark mode strategy could break your site.
* Update changelog
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* add `*` as child variant
* add `*` as allowed variant character
* update test to reflect Lightning CSS output
* add `childVariant` test
* Update changelog
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
Co-authored-by: Gregor Kaczmarczyk <github@aggreggator.de>
* feat(preflight): simplify sans-serif font stack
`-apple-system` and `BlinkMacSystemFont` were historically needed for
IE11 and chakra-based Edge (The one that wasn't chromium-based).
https://caniuse.com/font-family-system-ui has more details around it.
* further simplify `font-family`
* update tests
* update changelog
---------
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
* Add forced-colors variant
Also add a contrast-custom variant to match custom contrast preferences
* use `toMatchSnapshot` instead of `toMatchFormattedCss`
More info: https://github.com/tailwindlabs/tailwindcss/pull/12170
* remove `contrast-custom` variant
* move `forcedColorsVariants` next to `prefersContrastVariants`
* update changelog
---------
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
* Add forced-colors-adjust utilities
* Update forcedColorsAdjust.test.js
* use `toMatchSnapshot` instead of `toMatchFormattedCss`
More info: https://github.com/tailwindlabs/tailwindcss/pull/12170
* rename `forced-colors-adjust` -> `forced-color-adjust`
Dropped the `s` in `colors`.
* update changelog
* fix typo
* use full `forced-color-adjust-auto` and `forced-color-adjust-none` names
---------
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
* Extend current preflight `html` styles to support other root/host scopes
Supports SVG root scope, ShadowDOM, and presumably other root scopes
* Replace `:root` with `html`
* Update tests
* Update changelog
---------
Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>
* Add `has-*` variants for `:has(...)` pseudo-class
* Update changelog
* Fix mistake in test
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
