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 <4323180+adamwathan@users.noreply.github.com> Co-authored-by: Jordan Pittman <jordan@cryptica.me>
tailwindlabs · Sep 17, 2024 · fe48ca8 · fe48ca8
1 parent 818d10a
commit fe48ca8
Show file tree

Hide file tree

Showing 13 changed files with 376 additions and 339 deletions.
diff --git a/CHANGELOG.md b/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
 

diff --git a/src/lib/expandTailwindAtRules.js b/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',
  })
  )

diff --git a/src/lib/resolveDefaultsAtRules.js b/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()

diff --git a/tests/apply.test.js b/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}
  `)
 })
 

diff --git a/tests/basic-usage.test.js b/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;
  }

diff --git a/tests/collapse-adjacent-rules.test.js b/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');

diff --git a/tests/combined-selectors.test.js b/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}
  `)
  })
 })

diff --git a/tests/custom-plugins.test.js b/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}
  `)
  })
 })

diff --git a/tests/import-syntax.test.js b/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%;
  }

diff --git a/tests/kitchen-sink.test.js b/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%;
  }

diff --git a/tests/layer-at-rules.test.js b/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;
  }

diff --git a/tests/resolve-defaults-at-rules.test.js b/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 },