The implementation of v3's math operator normalization uses a safe-list
of function names. Need to add `sibling-index()` and `sibling-count()`
to this list otherwise when used inside math functions like `calc()`
they'll get spaces around the `-`.
Fixes#18678
When given a simple plugin like this:
```js
export default {
content: [{ raw: '!a' },],
plugins: [
({ addBase }) => addBase({
'@media (min-width: 1728px)': {
'.a': { 'padding-top': '1rem !important' },
'.b': { 'padding-right': '1rem !important' },
}
}),
],
}
```
If this plugin saw the utility `!a` it would correctly modify both rules
to eliminate any irrelevant classes. Unfortunately, in the case of the
2nd rule this meant it's left with an empty selector which is invalid.
We now detect this case and remove the rule if that happens.
This works around an issue in Chrome where `::selection` does not read
from variables defined on `::selection` thus breaking all uses of color
utilities with the selection variant. e.g. `selection::bg-red-200`.
We now add a fallback value of `1` to all uses of
`var(--tw-bg-opacity)`, `var(--tw-text-opacity)`,
`var(--tw-border-opacity)`, etc… since Chrome treats the variable as if
it did not exist because it's not defined on the parent.
In Chrome 131 (until the change is rolled back) existing utilities like
these will not work:
- `selection:text-opacity-50`
- `selection:[--tw-text-opacity:0.5]`
Fixes#15000
---------
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
Prior to this PR, we'd put all of the `@defaults` (the CSS variables and
stuff) _after_ the `base` rules. This creates an issue when using
`optimizeUniversalDefaults` with CSS that looks like this:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
input {
@apply shadow;
}
}
```
…because the default shadow stuff ends up after the base `input` rules,
so the generated styles are like this:
```css
input {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
var(--tw-shadow);
}
input {
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
}
```
This means all of the actual shadow values for the input are reset and
the shadow doesn't work.
Fixes https://github.com/tailwindlabs/tailwindcss/issues/14426.
Lots of failing tests right because this changes a ton of stuff, albeit
in a totally inconsequential way. @thecrypticace if you could update
these for me this week that would be a huge help, just banging this fix
out quick while the kids are napping 😴
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
This PR fixes an issue where using `anchor-size` in arbitrary values
resulted in the incorrect css.
Input: `w-[calc(anchor-size(width)+8px)]`
Output:
```css
.w-\[calc\(anchor-size\(width\)\+8px\)\] {
width: calc(anchor - size(width) + 8px);
}
```
This PR fixes that, by generating the correct CSS:
```css
.w-\[calc\(anchor-size\(width\)\+8px\)\] {
width: calc(anchor-size(width) + 8px);
}
```
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>
* 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
* 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>
* 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>
* Extend opacity scale to include all steps of 5
* Update changelog
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* Add `has-*` variants for `:has(...)` pseudo-class
* Update changelog
* Fix mistake in test
---------
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
* add test to verify `["util1","util2"]` works
* update extractor regex, to reduce valid values in the arbitrary value part
Co-authored-by: Autom <mijnnaamis2112@hotmail.com>
* add special case with deeply nested `[]`
* update changelog
* move oxide changelog itemsto the bottom
---------
Co-authored-by: Autom <mijnnaamis2112@hotmail.com>
* Refactor
* Keep traversing sibling nodes
* Make sure the root node has a source location for the end
* Add source map test for at-rule variants
* Update changelog
