wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Insert @defaults at start of stylesheet (#14427)

Browse source 
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 commit is contained in:
Adam Wathan 2024-09-17 09:09:08 -04:00 • committed by GitHub
parent 818d10ab84
commit fe48ca83d8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 376 additions and 339 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/lib/expandTailwindAtRules.js
View file

@ -192,7 +192,7 @@ export default function expandTailwindAtRules(context) {
if (layerNodes.base) {
layerNodes.base.before(
cloneNodes([...baseNodes, ...defaultNodes], layerNodes.base.source, {
cloneNodes([...defaultNodes, ...baseNodes], layerNodes.base.source, {
layer: 'base',
})
)

24
src/lib/resolveDefaultsAtRules.js
View file

@ -118,22 +118,20 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
}
}
if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
if (selectorGroups.size === 0) {
universal.remove()
continue
}
if (selectorGroups.size === 0) {
universal.remove()
continue
}
for (let [, selectors] of selectorGroups) {
let universalRule = postcss.rule({
source: universal.source,
})
for (let [, selectors] of selectorGroups) {
let universalRule = postcss.rule({
source: universal.source,
})
universalRule.selectors = [...selectors]
universalRule.selectors = [...selectors]
universalRule.append(universal.nodes.map((node) => node.clone()))
universal.before(universalRule)
}
universalRule.append(universal.nodes.map((node) => node.clone()))
universal.before(universalRule)
}
universal.remove()