Add PostCSS 7 support (maybe)

Author: adamwathan

jit/index.js

@@ -1,4 +1,5 @@
 const postcss = require('postcss')
+const dlv = require('dlv')
 
 const evaluateTailwindFunctions = require('../lib/lib/evaluateTailwindFunctions').default
 const substituteScreenAtRules = require('../lib/lib/substituteScreenAtRules').default
@@ -13,6 +14,50 @@ const collapseAdjacentRules = require('./lib/collapseAdjacentRules')
 const { env } = require('./lib/sharedState')
 
 module.exports = (configOrPath = {}) => {
+  return [
+    env.DEBUG &&
+      function (root) {
+        console.log('\n')
+        console.time('JIT TOTAL')
+        return root
+      },
+    function (root, result) {
+      function registerDependency(fileName, type = 'dependency') {
+        result.messages.push({
+          type,
+          plugin: 'tailwindcss-jit',
+          parent: result.opts.from,
+          file: fileName,
+        })
+      }
+
+      rewriteTailwindImports(root)
+
+      let context = setupContext(configOrPath)(result, root)
+
+      if (!env.TAILWIND_DISABLE_TOUCH) {
+        if (context.configPath !== null) {
+          registerDependency(context.configPath)
+        }
+      }
+
+      return postcss([
+        removeLayerAtRules(context),
+        expandTailwindAtRules(context, registerDependency),
+        expandApplyAtRules(context),
+        evaluateTailwindFunctions(context.tailwindConfig),
+        substituteScreenAtRules(context.tailwindConfig),
+        collapseAdjacentRules(context),
+      ]).process(root, { from: undefined })
+    },
+    env.DEBUG &&
+      function (root) {
+        console.timeEnd('JIT TOTAL')
+        console.log('\n')
+        return root
+      },
+  ].filter(Boolean)
+
   return {
     postcssPlugin: 'tailwindcss-jit',
     plugins: [

src/index.js

@@ -80,7 +80,11 @@ module.exports = function (config) {
       ])
       warned = true
     }
-    return require('../jit/index.js')(config)
+
+    return {
+      postcssPlugin: 'tailwindcss',
+      plugins: require('../jit/index.js')(config),
+    }
   }
 
   const plugins = []

src/index.postcss7.js

@@ -12,6 +12,7 @@ import resolveConfig from './util/resolveConfig'
 import getAllConfigs from './util/getAllConfigs'
 import { supportedConfigFiles } from './constants'
 import defaultConfig from '../stubs/defaultConfig.stub.js'
+import log from './util/log'
 
 function resolveConfigPath(filePath) {
   // require('tailwindcss')({ theme: ..., variants: ... })
@@ -65,19 +66,31 @@ const getConfigFunction = (config) => () => {
   return resolveConfig([...getAllConfigs(configObject)])
 }
 
+let warned = false
+
 const plugin = postcss.plugin('tailwindcss', (config) => {
-  const plugins = []
   const resolvedConfigPath = resolveConfigPath(config)
+  const getConfig = getConfigFunction(resolvedConfigPath || config)
+  const mode = _.get(getConfig(), 'mode', 'aot')
+
+  if (mode === 'jit') {
+    if (!warned) {
+      log.warn([
+        `You have enabled the JIT engine which is currently in preview.`,
+        'Preview features are not covered by semver, may introduce breaking changes, and can change at any time.',
+      ])
+      warned = true
+    }
 
+    return postcss(require('../jit/index.js')(config))
+  }
+
+  const plugins = []
   if (!_.isUndefined(resolvedConfigPath)) {
     plugins.push(registerConfigAsDependency(resolvedConfigPath))
   }
 
-  return postcss([
-    ...plugins,
-    processTailwindFeatures(getConfigFunction(resolvedConfigPath || config)),
-    formatCSS,
-  ])
+  return postcss([...plugins, processTailwindFeatures(getConfig), formatCSS])
 })
 
 module.exports = plugin