Get shadow lookup working-ish with new apply approach

Author: adamwathan

__tests__/applyComplexClasses.test.js

@@ -4,19 +4,33 @@ import processPlugins from '../src/util/processPlugins'
 import resolveConfig from '../src/util/resolveConfig'
 import corePlugins from '../src/corePlugins'
 import defaultConfig from '../stubs/defaultConfig.stub.js'
+import cloneNodes from '../src/util/cloneNodes'
 
 const resolvedDefaultConfig = resolveConfig([defaultConfig])
 
-const { utilities: defaultUtilities } = processPlugins(
-  corePlugins(resolvedDefaultConfig),
+const defaultProcessedPlugins = processPlugins(
+  [...corePlugins(resolvedDefaultConfig), ...resolvedDefaultConfig.plugins],
   resolvedDefaultConfig
 )
 
-function run(input, config = resolvedDefaultConfig, utilities = defaultUtilities) {
+const defaultGetProcessedPlugins = function() {
+  return {
+    ...defaultProcessedPlugins,
+    base: cloneNodes(defaultProcessedPlugins.base),
+    components: cloneNodes(defaultProcessedPlugins.components),
+    utilities: cloneNodes(defaultProcessedPlugins.utilities),
+  }
+}
+
+function run(
+  input,
+  config = resolvedDefaultConfig,
+  getProcessedPlugins = defaultGetProcessedPlugins
+) {
   config.experimental = {
     applyComplexClasses: true,
   }
-  return postcss([substituteClassApplyAtRules(config, utilities)]).process(input, {
+  return postcss([substituteClassApplyAtRules(config, getProcessedPlugins)]).process(input, {
     from: undefined,
   })
 }
@@ -47,7 +61,7 @@ test('selectors with invalid characters do not need to be manually escaped', ()
   })
 })
 
-test.skip('it removes important from applied classes by default', () => {
+test('it removes important from applied classes by default', () => {
   const input = `
     .a { color: red !important; }
     .b { @apply a; }
@@ -64,7 +78,7 @@ test.skip('it removes important from applied classes by default', () => {
   })
 })
 
-test.skip('applied rules can be made !important', () => {
+test('applied rules can be made !important', () => {
   const input = `
     .a { color: red; }
     .b { @apply a !important; }
@@ -230,7 +244,7 @@ test('it matches classes that have multiple rules', () => {
   })
 })
 
-test.skip('you can apply utility classes that do not actually exist as long as they would exist if utilities were being generated', () => {
+test('you can apply utility classes that do not actually exist as long as they would exist if utilities were being generated', () => {
   const input = `
     .foo { @apply mt-4; }
   `
@@ -293,11 +307,16 @@ test.skip('you can apply utility classes without using the given prefix when usi
 
 test.skip('you can apply utility classes without specificity prefix even if important (selector) is used', () => {
   const input = `
-    .foo { @apply .mt-8 .mb-8; }
+    .foo {
+      @apply mt-8 mb-8;
+    }
   `
 
   const expected = `
-    .foo { margin-top: 2rem; margin-bottom: 2rem; }
+    .foo {
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+    }
   `
 
   const config = resolveConfig([

src/flagged/applyComplexClasses.js

@@ -1,5 +1,12 @@
 import _ from 'lodash'
 import selectorParser from 'postcss-selector-parser'
+import postcss from 'postcss'
+import substituteTailwindAtRules from '../lib/substituteTailwindAtRules'
+import evaluateTailwindFunctions from '../lib/evaluateTailwindFunctions'
+import substituteVariantsAtRules from '../lib/substituteVariantsAtRules'
+import substituteResponsiveAtRules from '../lib/substituteResponsiveAtRules'
+import convertLayerAtRulesToControlComments from '../lib/convertLayerAtRulesToControlComments'
+import substituteScreenAtRules from '../lib/substituteScreenAtRules'
 
 function hasInject(css) {
   let foundInject = false
@@ -146,8 +153,8 @@ function makeExtractUtilityRules(css) {
   }
 }
 
-export default function applyComplexClasses(css) {
-  const extractUtilityRules = makeExtractUtilityRules(css)
+function themagic(css, lookupTree) {
+  const extractUtilityRules = makeExtractUtilityRules(lookupTree)
 
   while (hasInject(css)) {
     css.walkRules(rule => {
@@ -161,7 +168,12 @@ export default function applyComplexClasses(css) {
       })
 
       injectRules.forEach(inject => {
-        const injectUtilityNames = inject.params.split(' ')
+        const [
+          importantEntries,
+          injectUtilityNames,
+          important = importantEntries.length > 0,
+        ] = _.partition(inject.params.split(' '), n => n === '!important')
+
         const currentUtilityNames = extractUtilityNames(rule.selector)
 
         if (_.intersection(injectUtilityNames, currentUtilityNames).length > 0) {
@@ -187,7 +199,11 @@ export default function applyComplexClasses(css) {
           afterRule,
         ]
 
-        const mergedRules = mergeAdjacentRules(rule, rulesToInsert)
+        const root = _.tap(postcss.root({ nodes: rulesToInsert }), root =>
+          root.walkDecls(d => (d.important = important))
+        )
+
+        const mergedRules = mergeAdjacentRules(rule, root.nodes)
 
         inject.remove()
         rule.after(mergedRules)
@@ -203,3 +219,30 @@ export default function applyComplexClasses(css) {
 
   return css
 }
+
+export default function applyComplexClasses(config, getProcessedPlugins) {
+  return function(css) {
+    return postcss([
+      substituteTailwindAtRules(config, getProcessedPlugins()),
+      evaluateTailwindFunctions(config),
+      substituteVariantsAtRules(config, getProcessedPlugins()),
+      substituteResponsiveAtRules(config),
+      convertLayerAtRulesToControlComments(config),
+      substituteScreenAtRules(config),
+    ])
+      .process(
+        `
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+        `,
+        { from: undefined }
+      )
+      .then(result => {
+        // if css already contains tailwind, css is the lookup tree
+        const lookupTree = _.tap(css.clone(), tree => tree.prepend(result.root))
+
+        return themagic(css, lookupTree)
+      })
+  }
+}

src/lib/substituteClassApplyAtRules.js

@@ -56,14 +56,14 @@ function findClass(classToApply, classTable, onError) {
   return match.clone().nodes
 }
 
-export default function(config, generatedUtilities) {
+export default function(config, getProcessedPlugins) {
   if (flagEnabled(config, 'applyComplexClasses')) {
-    return applyComplexClasses
+    return applyComplexClasses(config, getProcessedPlugins)
   }
 
   return function(css) {
     const classLookup = buildClassTable(css)
-    const shadowLookup = buildShadowTable(generatedUtilities)
+    const shadowLookup = buildShadowTable(getProcessedPlugins().utilities)
 
     css.walkRules(rule => {
       rule.walkAtRules('apply', atRule => {

src/processTailwindFeatures.js

@@ -39,7 +39,7 @@ export default function(getConfig) {
       substituteResponsiveAtRules(config),
       convertLayerAtRulesToControlComments(config),
       substituteScreenAtRules(config),
-      substituteClassApplyAtRules(config, getProcessedPlugins().utilities),
+      substituteClassApplyAtRules(config, getProcessedPlugins),
       purgeUnusedStyles(config),
     ]).process(css, { from: _.get(css, 'source.input.file') })
   }