Merge pull request #1336 from tailwindcss/support-import-syntax

Support import syntax even if not using postcss-import

__tests__/fixtures/tailwind-input-import.css

@@ -0,0 +1,12 @@
+@import "tailwindcss/base";
+
+@import 'tailwindcss/components';
+
+@import "tailwindcss/utilities";
+
+@responsive {
+  .example {
+    @apply .font-bold;
+    color: theme('colors.red.500');
+  }
+}

__tests__/sanity.test.js

@@ -36,6 +36,22 @@ it('generates the right CSS when "important" is enabled', () => {
     })
 })
 
+it('generates the right CSS when using @import instead of @tailwind', () => {
+  const inputPath = path.resolve(`${__dirname}/fixtures/tailwind-input-import.css`)
+  const input = fs.readFileSync(inputPath, 'utf8')
+
+  return postcss([tailwind()])
+    .process(input, { from: inputPath })
+    .then(result => {
+      const expected = fs.readFileSync(
+        path.resolve(`${__dirname}/fixtures/tailwind-output.css`),
+        'utf8'
+      )
+
+      expect(result.css).toBe(expected)
+    })
+})
+
 it('does not add any CSS if no Tailwind features are used', () => {
   return postcss([tailwind()])
     .process('.foo { color: blue; }', { from: undefined })

src/lib/substituteTailwindAtRules.js

@@ -12,6 +12,34 @@ export default function(
   { base: pluginBase, components: pluginComponents, utilities: pluginUtilities }
 ) {
   return function(css) {
+    css.walkAtRules('import', atRule => {
+      if (atRule.params === '"tailwindcss/base"' || atRule.params === "'tailwindcss/base'") {
+        atRule.name = 'tailwind'
+        atRule.params = 'base'
+      }
+
+      if (
+        atRule.params === '"tailwindcss/components"' ||
+        atRule.params === "'tailwindcss/components'"
+      ) {
+        atRule.name = 'tailwind'
+        atRule.params = 'components'
+      }
+
+      if (
+        atRule.params === '"tailwindcss/utilities"' ||
+        atRule.params === "'tailwindcss/utilities'"
+      ) {
+        atRule.name = 'tailwind'
+        atRule.params = 'utilities'
+      }
+
+      if (atRule.params === '"tailwindcss/screens"' || atRule.params === "'tailwindcss/screens'") {
+        atRule.name = 'tailwind'
+        atRule.params = 'screens'
+      }
+    })
+
     css.walkAtRules('tailwind', atRule => {
       if (atRule.params === 'preflight') {
         // prettier-ignore