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>
* 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!
* add missing `workflow_dispatch`
* re-add `ci-stable.yml`, purely to fix a broken badge on npmjs.com
* update badge in README to point to `ci.yml` instead of `ci-stable.yml`
* Update vite to version 5.1.6
* Fix regex
---------
Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* CI: Add provenance to all published packages
This commit adds provenance for all published packages. See the NPM documentation [0].
Provenance will allow people to verify that the tailwindcss packages were actually built on GH Actions and with the content of the corresponding commit. This will help with supply chain security.
For this to work, the `id-token` permission was added only where necessary.
[0]: https://docs.npmjs.com/generating-provenance-statements
* chore: Add missing repository links to packages
This is needed for provenance, to link the repository to the build accoring to the NPM docs [0].
[0]: https://docs.npmjs.com/generating-provenance-statements#prerequisites
