WIP

Author: adamwathan

src/lib/generateRules.js

@@ -37,12 +37,13 @@ function applyVariant(variant, matches, { variantMap }) {
     let result = []
 
     for (let [{ sort, layer }, rule] of matches) {
-      let [, , options = {}] = rule
+      // TODO: Support these options again
+      // let [, , options = {}] = rule
 
-      if (options.respectVariants === false) {
-        result.push([{ sort, layer }, rule])
-        continue
-      }
+      // if (options.respectVariants === false) {
+      //   result.push([{ sort, layer }, rule])
+      //   continue
+      // }
 
       let ruleWithVariant = applyThisVariant(rule)
 
@@ -109,13 +110,16 @@ function generateRules(tailwindConfig, candidates, context) {
     let matches = []
     let [plugins, modifier] = matchedPlugins
 
+    // console.log(plugins, modifier)
+
     for (let [sort, plugin] of plugins) {
-      if (Array.isArray(plugin)) {
-        matches.push([sort, plugin])
-      } else {
+      console.log(plugin)
+      if (typeof plugin === 'function') {
         for (let result of plugin(modifier, pluginHelpers)) {
           matches.push([sort, result])
         }
+      } else {
+        matches.push([sort, plugin])
       }
     }
 
@@ -127,12 +131,7 @@ function generateRules(tailwindConfig, candidates, context) {
     allRules.push(matches)
   }
 
-  return allRules
-    .flat(1)
-    .map(([{ sort, layer }, rule]) => [
-      sort | context.layerOrder[layer],
-      toPostCssNode(rule, postCssNodeCache),
-    ])
+  return allRules.flat(1).map(([{ sort, layer }, rule]) => [sort | context.layerOrder[layer], rule])
 }
 
 module.exports = generateRules

src/lib/setupContext.js

@@ -327,6 +327,25 @@ function extractCandidates(node) {
   return classes
 }
 
+function withIdentifiers(styles) {
+  return parseLegacyStyles(styles).flatMap((node) => {
+    let nodeMap = new Map()
+    let candidates = extractCandidates(node)
+
+    // If this isn't "on-demandable", assign it a universal candidate.
+    if (candidates.length === 0) {
+      return [['*', node]]
+    }
+
+    return candidates.map((c) => {
+      if (!nodeMap.has(node)) {
+        nodeMap.set(node, node)
+      }
+      return [c, nodeMap.get(node)]
+    })
+  })
+}
+
 // { .foo { color: black } }
 // => [ ['foo', ['.foo', { color: 'black' }] ]
 function toStaticRuleArray(legacyStyles) {
@@ -431,15 +450,25 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         Array.isArray(options) ? { variants: options } : options
       )
 
-      for (let [identifier, tuple] of toStaticRuleArray(utilities)) {
+      for (let [identifier, node] of withIdentifiers(utilities)) {
         let offset = offsets.utilities++
 
         if (!context.candidateRuleMap.has(identifier)) {
           context.candidateRuleMap.set(identifier, [])
         }
 
-        context.candidateRuleMap.get(identifier).push([{ sort: offset, layer: 'utilities' }, tuple])
+        context.candidateRuleMap.get(identifier).push([{ sort: offset, layer: 'utilities' }, node])
       }
+
+      // for (let [identifier, tuple] of toStaticRuleArray(utilities)) {
+      //   let offset = offsets.utilities++
+
+      //   if (!context.candidateRuleMap.has(identifier)) {
+      //     context.candidateRuleMap.set(identifier, [])
+      //   }
+
+      //   context.candidateRuleMap.get(identifier).push([{ sort: offset, layer: 'utilities' }, tuple])
+      // }
     },
     // ---
     jit: {
@@ -488,6 +517,7 @@ function registerPlugins(tailwindConfig, plugins, context) {
   let variantList = []
   let variantMap = new Map()
   let offsets = {
+    base: 0n,
     components: 0n,
     utilities: 0n,
   }
@@ -508,8 +538,11 @@ function registerPlugins(tailwindConfig, plugins, context) {
     }
   }
 
-  let highestOffset =
-    offsets.utilities > offsets.components ? offsets.utilities : offsets.components
+  let highestOffset = ((...args) => args.reduce((m, e) => (e > m ? e : m)))([
+    offsets.base,
+    offsets.components,
+    offsets.utilities,
+  ])
   let reservedBits = BigInt(highestOffset.toString(2).length)
 
   context.layerOrder = {

src/pluginUtils.test.js

@@ -1,12 +1,21 @@
+const postcss = require('postcss')
 const { updateLastClasses, updateAllClasses, transformRule } = require('./pluginUtils')
 
 test('transforming simple class rule', () => {
-  let simpleClass = [
-    '.bg-black',
-    {
-      'background-color': '#000',
-    },
-  ]
+  // let simpleClass = [
+  //   '.bg-black',
+  //   {
+  //     'background-color': '#000',
+  //   },
+  // ]
+
+  // TODO: Make this work
+  let simpleClass = postcss.rule({
+    selector: '.bg-black',
+    nodes: [postcss.decl({ prop: 'background-color', value: '#000' })],
+  })
+
+  console.log(simpleClass)
 
   expect(transformRule(simpleClass, ([sel, rules]) => ['.transformed', rules])).toEqual([
     '.transformed',