Direct support for @import 'tailwindcss/{layer}' syntax (#145)

* Direct support for @import 'tailwindcss/{layer}' syntax

* Ensure imports are rewritten before setting up context

* Avoid executing unnecessary conditionals

Author: adamwathan

src/index.js

@@ -3,6 +3,7 @@ const postcss = require('postcss')
 const evaluateTailwindFunctions = require('tailwindcss/lib/lib/evaluateTailwindFunctions').default
 const substituteScreenAtRules = require('tailwindcss/lib/lib/substituteScreenAtRules').default
 
+const rewriteTailwindImports = require('./lib/rewriteTailwindImports')
 const setupContext = require('./lib/setupContext')
 const removeLayerAtRules = require('./lib/removeLayerAtRules')
 const expandTailwindAtRules = require('./lib/expandTailwindAtRules')
@@ -31,6 +32,8 @@ module.exports = (configOrPath = {}) => {
           })
         }
 
+        rewriteTailwindImports(root)
+
         let context = setupContext(configOrPath)(result, root)
 
         if (context.configPath !== null) {

src/lib/rewriteTailwindImports.js

@@ -0,0 +1,28 @@
+function rewriteTailwindImports(root) {
+  root.walkAtRules('import', (atRule) => {
+    if (atRule.params === '"tailwindcss/base"' || atRule.params === "'tailwindcss/base'") {
+      atRule.name = 'tailwind'
+      atRule.params = 'base'
+    } else if (
+      atRule.params === '"tailwindcss/components"' ||
+      atRule.params === "'tailwindcss/components'"
+    ) {
+      atRule.name = 'tailwind'
+      atRule.params = 'components'
+    } else if (
+      atRule.params === '"tailwindcss/utilities"' ||
+      atRule.params === "'tailwindcss/utilities'"
+    ) {
+      atRule.name = 'tailwind'
+      atRule.params = 'utilities'
+    } else if (
+      atRule.params === '"tailwindcss/screens"' ||
+      atRule.params === "'tailwindcss/screens'"
+    ) {
+      atRule.name = 'tailwind'
+      atRule.params = 'screens'
+    }
+  })
+}
+
+module.exports = rewriteTailwindImports

tests/12-import-syntax.test.css

@@ -0,0 +1,52 @@
+* {
+  --tw-shadow: 0 0 #0000;
+  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(59, 130, 246, 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+}
+h1 {
+  font-size: 32px;
+}
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+.mt-6 {
+  margin-top: 1.5rem;
+}
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
+}
+@media (min-width: 768px) {
+  .md\:hover\:text-center:hover {
+    text-align: center;
+  }
+}

tests/12-import-syntax.test.html

@@ -0,0 +1,5 @@
+<h1>Hello world!</h1>
+<div class="container"></div>
+<div class="mt-6"></div>
+<div class="bg-black"></div>
+<div class="md:hover:text-center"></div>

tests/12-import-syntax.test.js

@@ -0,0 +1,38 @@
+const postcss = require('postcss')
+const tailwind = require('../src/index.js')
+const fs = require('fs')
+const path = require('path')
+
+function run(input, config = {}) {
+  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+}
+
+test('using @import instead of @tailwind', () => {
+  let config = {
+    purge: [path.resolve(__dirname, './12-import-syntax.test.html')],
+    corePlugins: { preflight: false },
+    theme: {},
+    plugins: [
+      function ({ addBase }) {
+        addBase({
+          h1: {
+            fontSize: '32px',
+          },
+        })
+      },
+    ],
+  }
+
+  let css = `
+    @import "tailwindcss/base";
+    @import "tailwindcss/components";
+    @import "tailwindcss/utilities";
+  `
+
+  return run(css, config).then((result) => {
+    let expectedPath = path.resolve(__dirname, './12-import-syntax.test.css')
+    let expected = fs.readFileSync(expectedPath, 'utf8')
+
+    expect(result.css).toMatchCss(expected)
+  })
+})