Insert @defaults at start of stylesheet (#14427)

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 #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 <[email protected]>
Co-authored-by: Jordan Pittman <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Ensure using `@apply` with utilities that use `@defaults` works with rules defined in the base layer when using `optimizeUniversalDefaults` ([#14427](https://github.com/tailwindlabs/tailwindcss/pull/14427))
 
 ## [3.4.11] - 2024-09-11
 

src/lib/expandTailwindAtRules.js

@@ -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',
         })
       )

src/lib/resolveDefaultsAtRules.js

@@ -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()

tests/apply.test.js

@@ -1640,6 +1640,7 @@ it('apply partitioning works with media queries', async () => {
   const result = await run(input, config)
 
   expect(result.css).toMatchFormattedCss(css`
+    ${defaults}
     html,
     body {
       --tw-text-opacity: 1;
@@ -1654,7 +1655,6 @@ it('apply partitioning works with media queries', async () => {
         font-size: 2rem;
       }
     }
-    ${defaults}
   `)
 })
 

tests/basic-usage.test.js

@@ -460,11 +460,11 @@ it('does not produce duplicate output when seeing variants preceding a wildcard
       * {
         color: #00f;
       }
+      ${defaults}
       .combined,
       * {
         color: red;
       }
-      ${defaults}
       .underline {
         text-decoration-line: underline;
       }

tests/collapse-adjacent-rules.test.js

@@ -70,6 +70,7 @@ test('collapse adjacent rules', () => {
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       @font-face {
         font-family: Poppins;
         src: url('/fonts/Poppins.woff2') format('woff2'), url('/fonts/Poppins.woff') format('woff');
@@ -79,7 +80,6 @@ test('collapse adjacent rules', () => {
         src: url('/fonts/ProximaNova.woff2') format('woff2'),
           url('/fonts/ProximaNova.woff') format('woff');
       }
-      ${defaults}
       @font-face {
         font-family: Inter;
         src: url('/fonts/Inter.woff2') format('woff2'), url('/fonts/Inter.woff') format('woff');

tests/combined-selectors.test.js

@@ -25,14 +25,14 @@ it('should generate the partial selector, if only a partial is used (base layer)
 
   return run(input, config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       :root {
         font-weight: bold;
       }
       :root,
       .a {
         color: #000;
       }
-      ${defaults}
     `)
   })
 })

tests/custom-plugins.test.js

@@ -239,13 +239,13 @@ test('plugins can add base styles with object syntax', () => {
 
   return run('@tailwind base', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       img {
         max-width: 100%;
       }
       button {
         font-family: inherit;
       }
-      ${defaults}
     `)
   })
 })
@@ -280,13 +280,13 @@ test('plugins can add base styles with raw PostCSS nodes', () => {
 
   return run('@tailwind base', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       img {
         max-width: 100%;
       }
       button {
         font-family: inherit;
       }
-      ${defaults}
     `)
   })
 })

tests/import-syntax.test.js

@@ -33,10 +33,10 @@ test('using @import instead of @tailwind', () => {
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       h1 {
         font-size: 32px;
       }
-      ${defaults}
       .container {
         width: 100%;
       }

tests/kitchen-sink.test.js

@@ -352,6 +352,7 @@ test('it works', () => {
           }
         }
       }
+      ${defaults}
       h1 {
         font-size: 1.5rem;
         font-weight: 700;
@@ -362,7 +363,6 @@ test('it works', () => {
       div {
         background: #654321;
       }
-      ${defaults}
       .container {
         width: 100%;
       }

tests/layer-at-rules.test.js

@@ -90,12 +90,12 @@ test('comments can be used inside layers without crashing', () => {
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       div {
         background-color: #bada55;
       }
-      ${defaults}
       .important-component,
-        .important-utility {
+      .important-utility {
         text-align: banana;
       }
     `)
@@ -144,10 +144,10 @@ test('comments can be used inside layers (with important) without crashing', ()
 
   return run(input, config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
       div {
         background-color: #bada55;
       }
-      ${defaults}
       .important-component {
         text-align: banana;
       }
@@ -245,6 +245,7 @@ test('layers are grouped and inserted at the matching @tailwind rule', () => {
           font-weight: medium;
         }
       }
+      ${defaults}
       body {
         margin: 0;
       }
@@ -254,7 +255,6 @@ test('layers are grouped and inserted at the matching @tailwind rule', () => {
       p {
         font-weight: normal;
       }
-      ${defaults}
       .input {
         background: #fff;
       }

tests/resolve-defaults-at-rules.test.js

@@ -770,6 +770,44 @@ test('no defaults and apply without @tailwind base', () => {
   })
 })
 
+test('apply to rule in base layer puts defaults first with optimizeUniversalDefaults', () => {
+  let config = {
+    experimental: { optimizeUniversalDefaults: true },
+    content: [{ raw: html`<div class="my-card"></div>` }],
+    corePlugins: ['boxShadow'],
+  }
+
+  // Optimize universal defaults doesn't work well with isolated modules
+  // We require you to use @tailwind base to inject the defaults
+  let input = css`
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+
+    @layer base {
+      input {
+        @apply shadow;
+      }
+    }
+  `
+
+  return run(input, config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      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;
+        --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);
+      }
+    `)
+  })
+})
+
 test('optimize universal defaults groups :has separately', () => {
   let config = {
     experimental: { optimizeUniversalDefaults: true },