Switch everything to PostCSS nodes instead of custom format

adamwathan · adamwathan · commit 7c1e53e07ab4 · 2021-03-05T13:30:58.000-05:00
diff --git a/TODO.md b/TODO.md
@@ -88,10 +88,14 @@
 - [x] Support "unconditional" rules — styles that should be included in the CSS no matter what
 - [x] Unify components/utilities into single "rules" concept, remove tons of duplication
 
+### Mar 5
+
+- [x] Make rule tuple format support comments and any other node types (@font-face) properly (considering abandoning this entire data structure in favor of PostCSS)
+- [x] Unify base styles into the same "rules" abstraction
+
 #### Next
 
-- [ ] Make rule tuple format support comments and any other node types (@font-face) properly (considering abandoning this entire data structure in favor of PostCSS)
-- [ ] Unify base styles into the same "rules" abstraction
+- [ ] Support `modifySelectors` in variant API
 - [ ] Make prefixes work
 - [ ] Make important work
 - [ ] Make separator work
diff --git a/src/corePlugins/index.js b/src/corePlugins/index.js
@@ -1,10 +1,10 @@
+const postcss = require('postcss')
 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const buildMediaQuery = require('tailwindcss/lib/util/buildMediaQuery').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
 const {
   updateLastClasses,
   updateAllClasses,
-  transformRule,
   transformAllSelectors,
   transformAllClasses,
   transformLastClasses,
@@ -60,16 +60,22 @@ module.exports = {
 
     addVariant(
       'motion-safe',
-      transformLastClasses((className) => {
-        return `motion-safe:${className}`
-      }, '@media (prefers-reduced-motion: no-preference)')
+      transformLastClasses(
+        (className) => {
+          return `motion-safe:${className}`
+        },
+        () => postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: no-preference)' })
+      )
     )
 
     addVariant(
       'motion-reduce',
-      transformLastClasses((className) => {
-        return `motion-reduce:${className}`
-      }, '@media (prefers-reduced-motion: reduce)')
+      transformLastClasses(
+        (className) => {
+          return `motion-reduce:${className}`
+        },
+        () => postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: reduce)' })
+      )
     )
 
     addVariant(
@@ -104,9 +110,12 @@ module.exports = {
     } else if (config.darkMode === 'media') {
       addVariant(
         'dark',
-        transformLastClasses((className) => {
-          return `dark:${className}`
-        }, '@media (prefers-color-scheme: dark)')
+        transformLastClasses(
+          (className) => {
+            return `dark:${className}`
+          },
+          () => postcss.atRule({ name: 'media', params: '(prefers-color-scheme: dark)' })
+        )
       )
     }
 
@@ -116,9 +125,12 @@ module.exports = {
 
       addVariant(
         screen,
-        transformLastClasses((className) => {
-          return `${screen}:${className}`
-        }, `@media ${query}`)
+        transformLastClasses(
+          (className) => {
+            return `${screen}:${className}`
+          },
+          () => postcss.atRule({ name: 'media', params: query })
+        )
       )
     }
   },
diff --git a/src/index.test.adding-a-custom-variant.html b/src/index.test.adding-a-custom-variant.html
@@ -0,0 +1,3 @@
+<div
+  class="opacity-50 custom-util hover:custom-util group-hover:custom-util foo:custom-util foo:hover:custom-util sm:custom-util dark:custom-util motion-safe:custom-util md:dark:motion-safe:foo:active:custom-util"
+></div>
diff --git a/src/index.test.css b/src/index.test.css
@@ -9,6 +9,12 @@
     color: purple;
   }
 }
+.apply-1 {
+  margin-top: 1.5rem;
+}
+.apply-2 {
+  margin-top: 1.5rem;
+}
 .apply-test {
   margin-top: 1.5rem;
   --tw-bg-opacity: 1;
@@ -223,6 +229,9 @@ div {
 * {
   padding: 5px;
 }
+.mt-6 {
+  margin-top: 1.5rem;
+}
 .grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
   grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
 }
diff --git a/src/index.test.html b/src/index.test.html
@@ -13,6 +13,7 @@
       class="container hover:container sm:container md:container text-center sm:text-center md:text-center"
     ></div>
     <div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
+    <div class="mt-6"></div>
     <div class="aspect-w-1 aspect-h-2"></div>
     <div class="aspect-w-3 aspect-h-4"></div>
     <div class="filter-none filter-grayscale"></div>
diff --git a/src/index.test.js b/src/index.test.js
@@ -81,6 +81,12 @@ test('it works', () => {
       color: purple;
     }
   }
+  .apply-1 {
+    @apply mt-6;
+  }
+  .apply-2 {
+    @apply mt-6;
+  }
   .apply-test {
     @apply mt-6 bg-pink-500 hover:font-bold focus:hover:font-bold sm:bg-green-500 sm:focus:even:bg-pink-200;
   }
@@ -138,6 +144,83 @@ test('it works', () => {
   })
 })
 
+test('using postcss for everything wip', () => {
+  let config = {
+    darkMode: 'class',
+    purge: [path.resolve(__dirname, './index.test.adding-a-custom-variant.html')],
+    corePlugins: ['opacity'],
+    theme: {},
+    plugins: [
+      function ({ addVariant }) {
+        addVariant(
+          'foo',
+          ({ container }) => {
+            container.walkRules((rule) => {
+              rule.selector = `.foo\\:${rule.selector.slice(1)}`
+              rule.walkDecls((decl) => {
+                decl.important = true
+              })
+            })
+          },
+          { before: 'sm' }
+        )
+      },
+    ],
+  }
+
+  let css = `
+    @tailwind utilities;
+    @layer utilities {
+      .custom-util {
+        background: #abcdef;
+      }
+    }
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchCss(`
+      .opacity-50 {
+        opacity: 0.5;
+      }
+      .custom-util {
+        background: #abcdef;
+      }
+      .hover\\:custom-util:hover {
+        background: #abcdef;
+      }
+      .group:hover .group-hover\\:custom-util {
+        background: #abcdef;
+      }
+      @media (prefers-reduced-motion: no-preference) {
+        .motion-safe\\:custom-util {
+          background: #abcdef;
+        }
+      }
+      .dark .dark\\:custom-util {
+        background: #abcdef;
+      }
+      .foo\\:custom-util {
+        background: #abcdef !important;
+      }
+      .foo\\:hover\\:custom-util:hover {
+        background: #abcdef !important;
+      }
+      @media (min-width: 640px) {
+        .sm\\:custom-util {
+          background: #abcdef;
+        }
+      }
+      @media (min-width: 768px) {
+        @media (prefers-reduced-motion: no-preference) {
+          .dark .md\\:dark\\:motion-safe\\:foo\\:active\\:custom-util:active {
+            background: #abcdef !important;
+          }
+        }
+      }
+    `)
+  })
+})
+
 function format(input) {
   return prettier.format(input, {
     parser: 'css',
diff --git a/src/lib/expandApplyAtRules.js b/src/lib/expandApplyAtRules.js
@@ -1,5 +1,6 @@
+const postcss = require('postcss')
 const generateRules = require('./generateRules')
-const { bigSign, toPostCssNode, isPlainObject } = require('./utils')
+const { bigSign } = require('./utils')
 const escape = require('tailwindcss/lib/util/escapeClassName').default
 
 function expandApplyAtRules(context) {
@@ -48,15 +49,6 @@ function expandApplyAtRules(context) {
           .join(', ')
       }
 
-      function updateSelectors(rule, apply, candidate) {
-        return rule.map(([selector, rule]) => {
-          if (!isPlainObject(rule)) {
-            return [selector, updateSelectors(rule, apply, candidate)]
-          }
-          return [replaceSelector(apply.parent.selector, selector, candidate), rule]
-        })
-      }
-
       for (let apply of applies) {
         let siblings = []
         let applyCandidates = apply.params.split(/[\s\t\n]+/g)
@@ -67,16 +59,15 @@ function expandApplyAtRules(context) {
           }
 
           let rules = context.classCache.get(applyCandidate)
-          for (let [meta, [selector, rule]] of rules) {
-            siblings.push([
-              meta,
-              toPostCssNode(
-                !isPlainObject(rule)
-                  ? [selector, updateSelectors(rule, apply, applyCandidate)]
-                  : [replaceSelector(apply.parent.selector, selector, applyCandidate), rule],
-                context.postCssNodeCache
-              ),
-            ])
+
+          for (let [meta, node] of rules) {
+            let root = postcss.root({ nodes: [node] })
+
+            root.walkRules((rule) => {
+              rule.selector = replaceSelector(apply.parent.selector, rule.selector, applyCandidate)
+            })
+
+            siblings.push([meta, root.nodes[0]])
           }
         }
 
diff --git a/src/lib/expandTailwindAtRules.js b/src/lib/expandTailwindAtRules.js
@@ -2,7 +2,7 @@ const fs = require('fs')
 const fastGlob = require('fast-glob')
 const sharedState = require('./sharedState')
 const generateRules = require('./generateRules')
-const { bigSign, toPostCssNode } = require('./utils')
+const { bigSign } = require('./utils')
 
 let env = sharedState.env
 let contentMatchCache = sharedState.contentMatchCache
@@ -46,6 +46,7 @@ function buildStylesheet(rules, context) {
   let sortedRules = rules.sort(([a], [z]) => bigSign(a - z))
 
   let returnValue = {
+    base: new Set(),
     components: new Set(),
     utilities: new Set(),
     screens: new Set(),
@@ -57,6 +58,11 @@ function buildStylesheet(rules, context) {
       continue
     }
 
+    if (sort & context.layerOrder.base) {
+      returnValue.base.add(rule)
+      continue
+    }
+
     if (sort & context.layerOrder.components) {
       returnValue.components.add(rule)
       continue
@@ -152,17 +158,18 @@ function expandTailwindAtRules(context, registerDependency) {
     env.DEBUG && console.timeEnd('Generate rules')
 
     // We only ever add to the classCache, so if it didn't grow, there is nothing new.
+    env.DEBUG && console.time('Build stylesheet')
     if (context.stylesheetCache === null || context.classCache.size !== classCacheCount) {
-      env.DEBUG && console.time('Build stylesheet')
       for (let rule of rules) {
         context.ruleCache.add(rule)
       }
 
       context.stylesheetCache = buildStylesheet([...context.ruleCache], context)
-      env.DEBUG && console.timeEnd('Build stylesheet')
     }
+    env.DEBUG && console.timeEnd('Build stylesheet')
 
     let {
+      base: baseNodes,
       components: componentNodes,
       utilities: utilityNodes,
       screens: screenNodes,
@@ -173,7 +180,7 @@ function expandTailwindAtRules(context, registerDependency) {
     // Replace any Tailwind directives with generated CSS
 
     if (layerNodes.base) {
-      layerNodes.base.before([...context.baseRules])
+      layerNodes.base.before([...baseNodes])
       layerNodes.base.remove()
     }
 
diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
@@ -1,3 +1,4 @@
+const postcss = require('postcss')
 const { toPostCssNode } = require('./utils')
 
 // Generate match permutations for a class candidate, like:
@@ -37,21 +38,22 @@ function applyVariant(variant, matches, { variantMap }) {
     let result = []
 
     for (let [{ sort, layer }, rule] of matches) {
-      // TODO: Support these options again
-      // let [, , options = {}] = rule
+      let options = rule.__tailwind ?? {}
 
-      // if (options.respectVariants === false) {
-      //   result.push([{ sort, layer }, rule])
-      //   continue
-      // }
+      if (options.respectVariants === false) {
+        result.push([{ sort, layer }, rule])
+        continue
+      }
+
+      let container = postcss.root({ nodes: [rule] })
 
-      let ruleWithVariant = applyThisVariant(rule)
+      let ruleWithVariant = applyThisVariant({ container })
 
       if (ruleWithVariant === null) {
         continue
       }
 
-      let withOffset = [{ sort: variantSort | sort, layer }, ruleWithVariant]
+      let withOffset = [{ sort: variantSort | sort, layer }, container.nodes[0]]
       result.push(withOffset)
     }
 
@@ -110,15 +112,18 @@ function generateRules(tailwindConfig, candidates, context) {
     let matches = []
     let [plugins, modifier] = matchedPlugins
 
-    // console.log(plugins, modifier)
-
     for (let [sort, plugin] of plugins) {
-      console.log(plugin)
       if (typeof plugin === 'function') {
         for (let result of plugin(modifier, pluginHelpers)) {
+          if (Array.isArray(result)) {
+            result = toPostCssNode(result, context.postCssNodeCache)
+          }
           matches.push([sort, result])
         }
       } else {
+        if (Array.isArray(plugin)) {
+          plugin = toPostCssNode(plugin, context.postCssNodeCache)
+        }
         matches.push([sort, plugin])
       }
     }
diff --git a/src/lib/setupContext.js b/src/lib/setupContext.js
diff --git a/src/lib/utils.js b/src/lib/utils.js
diff --git a/src/pluginUtils.js b/src/pluginUtils.js
diff --git a/src/pluginUtils.test.js b/src/pluginUtils.test.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<div`
	`2`	`+ class="opacity-50 custom-util hover:custom-util group-hover:custom-util foo:custom-util foo:hover:custom-util sm:custom-util dark:custom-util motion-safe:custom-util md:dark:motion-safe:foo:active:custom-util"`
	`3`	`+></div>`
Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,12 @@`
`9`	`9`	`color: purple;`
`10`	`10`	`}`
`11`	`11`	`}`
	`12`	`+.apply-1 {`
	`13`	`+ margin-top: 1.5rem;`
	`14`	`+}`
	`15`	`+.apply-2 {`
	`16`	`+ margin-top: 1.5rem;`
	`17`	`+}`
`12`	`18`	`.apply-test {`
`13`	`19`	`margin-top: 1.5rem;`
`14`	`20`	`--tw-bg-opacity: 1;`
`@@ -223,6 +229,9 @@ div {`
`223`	`229`	`* {`
`224`	`230`	`padding: 5px;`
`225`	`231`	`}`
	`232`	`+.mt-6 {`
	`233`	`+ margin-top: 1.5rem;`
	`234`	`+}`
`226`	`235`	`.grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {`
`227`	`236`	`grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;`
`228`	`237`	`}`