wip

packages/tailwindcss/src/at-import.test.ts

@@ -59,56 +59,6 @@ test('can resolve relative @imports', async () => {
   `)
 })
 
-test('recursively removes style rules for `@import "…" reference`', async () => {
-  let loadStylesheet = async (id: string, base: string) => {
-    if (id === './foo/baz.css') {
-      return {
-        content: css`
-          .foo {
-            color: red;
-          }
-          @utility foo {
-            color: red;
-          }
-          @theme {
-            --breakpoint-md: 768px;
-          }
-          @variant hocus (&:hover, &:focus);
-        `,
-        base: '/root/foo',
-      }
-    }
-    return {
-      content: css`
-        @import './foo/baz.css';
-      `,
-      base: '/root/foo',
-    }
-  }
-
-  await expect(
-    run(
-      css`
-        @import './foo/bar.css' reference;
-
-        .bar {
-          @apply md:hocus:foo;
-        }
-      `,
-      { loadStylesheet, optimize: false },
-    ),
-  ).resolves.toMatchInlineSnapshot(`
-    ".bar {
-      @media (width >= 768px) {
-        &:hover, &:focus {
-          color: red;
-        }
-      }
-    }
-    "
-  `)
-})
-
 test('can recursively resolve relative @imports', async () => {
   let loadStylesheet = async (id: string, base: string) => {
     if (base === '/root' && id === './foo/bar.css') {

packages/tailwindcss/src/at-import.ts

@@ -1,7 +1,6 @@
 import { Features } from '.'
 import { atRule, context, walk, WalkAction, type AstNode } from './ast'
 import * as CSS from './css-parser'
-import { segment } from './utils/segment'
 import * as ValueParser from './value-parser'
 
 type LoadStylesheet = (id: string, basedir: string) => Promise<{ base: string; content: string }>
@@ -46,9 +45,9 @@ export async function substituteAtImports(
           let loaded = await loadStylesheet(uri, base)
           let ast = CSS.parse(loaded.content)
 
-          if (reference) {
-            ast = stripStyleRules(ast)
-          }
+          // if (reference) {
+          //   ast = stripStyleRules(ast)
+          // }
 
           ast = buildImportNodes(
             [context({ base: loaded.base }, ast)],
@@ -179,32 +178,3 @@ function buildImportNodes(
 
   return root
 }
-
-function stripStyleRules(ast: AstNode[]) {
-  let newAst = []
-  for (let node of ast) {
-    if (node.kind !== 'at-rule') {
-      continue
-    }
-    switch (node.name) {
-      case '@theme': {
-        let themeParams = segment(node.params, ' ')
-        if (!themeParams.includes('reference')) {
-          node.params += ' reference'
-        }
-        newAst.push(node)
-        continue
-      }
-      case '@import':
-      case '@config':
-      case '@plugin':
-      case '@variant':
-      case '@utility': {
-        newAst.push(node)
-        continue
-      }
-    }
-  }
-
-  return newAst
-}

packages/tailwindcss/src/index.test.ts

@@ -3088,3 +3088,87 @@ it("should error when `layer(…)` is used, but it's not the first param", async
     `[Error: \`layer(…)\` in an \`@import\` should come before any other functions or conditions]`,
   )
 })
+
+describe('`@import "…" reference`', () => {
+  test('recursively removes styles', async () => {
+    let loadStylesheet = async (id: string, base: string) => {
+      if (id === './foo/baz.css') {
+        return {
+          content: css`
+            .foo {
+              color: red;
+            }
+            @utility foo {
+              color: red;
+            }
+            @theme {
+              --breakpoint-md: 768px;
+            }
+            @variant hocus (&:hover, &:focus);
+          `,
+          base: '/root/foo',
+        }
+      }
+      return {
+        content: css`
+          @import './foo/baz.css';
+        `,
+        base: '/root/foo',
+      }
+    }
+
+    await expect(
+      compileCss(
+        `
+          @import './foo/bar.css' reference;
+
+          .bar {
+            @apply md:hocus:foo;
+          }
+        `,
+        [],
+        { loadStylesheet },
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      "@media (width >= 768px) {
+        .bar:hover, .bar:focus {
+          color: red;
+        }
+      }"
+    `)
+  })
+
+  test.only('removes styles when the import resolver was handled outside of Tailwind CSS', async () => {
+    await expect(
+      compileCss(
+        `
+          @media reference {
+             @media print {
+              .foo {
+                color: red;
+              }
+              @utility foo {
+                color: red;
+              }
+              @theme {
+                --breakpoint-md: 768px;
+              }
+              @variant hocus (&:hover, &:focus);
+            }
+          }
+
+          .bar {
+            @apply md:hocus:foo;
+          }
+        `,
+        [],
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      "@media (width >= 768px) {
+        .bar:hover, .bar:focus {
+          color: red;
+        }
+      }"
+    `)
+  })
+})

packages/tailwindcss/src/index.ts

@@ -364,6 +364,36 @@ async function parseCss(
           important = true
         }
 
+        // Handle `@import "…" reference`
+        else if (param === 'reference') {
+          let newAst = []
+          for (let node of ast) {
+            if (node.kind !== 'at-rule') {
+              continue
+            }
+            switch (node.name) {
+              case '@theme': {
+                let themeParams = segment(node.params, ' ')
+                if (!themeParams.includes('reference')) {
+                  node.params += ' reference'
+                }
+                newAst.push(node)
+                continue
+              }
+              case '@import':
+              case '@config':
+              case '@plugin':
+              case '@variant':
+              case '@utility': {
+                newAst.push(node)
+                continue
+              }
+            }
+          }
+
+          node.nodes = [contextNode({ reference: true }, newAst)]
+        }
+
         //
         else {
           unknownParams.push(param)
@@ -607,3 +637,9 @@ export default function postcssPluginWarning() {
     `It looks like you're trying to use \`tailwindcss\` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install \`@tailwindcss/postcss\` and update your PostCSS configuration.`,
   )
 }
+
+function stripStyleRules(ast: AstNode[]) {
+  let newAst = []
+
+  return newAst
+}