@tailwindcss/jit - npm Package Compare versions

Comparing version 0.0.0-c5ce40c7f2 to 0.0.0-f4e6e109b

package.json

 {
   "name": "@tailwindcss/jit",
-  "version": "0.0.0-c5ce40c7f2",
+  "version": "0.0.0-f4e6e109b",
   "main": "src/index.js",
@@ -16,3 +16,5 @@ "scripts": {
     "chokidar": "^3.5.1",
+    "dlv": "^1.1.3",
     "fast-glob": "^3.2.5",
+    "lodash.topath": "^4.5.2",
     "object-hash": "^2.1.1",
@@ -28,2 +30,3 @@ "postcss-selector-parser": "^6.0.4",
   "devDependencies": {
+    "@tailwindcss/aspect-ratio": "^0.2.0",
     "autoprefixer": "^10.2.4",
@@ -30,0 +33,0 @@ "jest": "^26.6.3",

src/corePlugins/animation.js

@@ -16,2 +16,3 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default
         ],
+        { respectVariants: false },
       ]
@@ -18,0 +19,0 @@ })

src/corePlugins/backgroundColor.js

@@ -6,2 +6,3 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default
 const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor } = require('../pluginUtils')
 
@@ -14,3 +15,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let value = colorPalette[modifier]
+        let value = asColor(modifier, colorPalette)
 
@@ -17,0 +18,0 @@ if (value === undefined) {

src/corePlugins/backgroundImage.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
 
 module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
-  let transformValue = transformThemeValue('backgroundImage')
   addUtilities({
     bg: [
       (modifier, { theme }) => {
-        let value = transformValue(theme.backgroundImage[modifier])
+        let value = theme.backgroundImage[modifier]
 
@@ -11,0 +9,0 @@ if (value === undefined) {

src/corePlugins/backgroundOpacity.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asValue } = require('../pluginUtils')
 
@@ -10,3 +11,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let value = transformValue(theme.backgroundOpacity[modifier])
+        let value = asValue(modifier, theme.backgroundOpacity)
 
@@ -17,8 +18,3 @@ if (value === undefined) {
 
-        return [
-          [
-            nameClass('bg-opacity', modifier),
-            { '--tw-bg-opacity': theme.backgroundOpacity[modifier] },
-          ],
-        ]
+        return [[nameClass('bg-opacity', modifier), { '--tw-bg-opacity': value }]]
       },
@@ -25,0 +21,0 @@ ],

src/corePlugins/borderColor.js

@@ -6,2 +6,3 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default
 const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor } = require('../pluginUtils')
 
@@ -14,6 +15,12 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        if (modifier === 'DEFAULT' || colorPalette[modifier] === undefined) {
+        if (modifier === 'DEFAULT') {
           return []
         }
 
+        let value = asColor(modifier, colorPalette)
+
+        if (value === undefined) {
+          return []
+        }
+
         return [
@@ -20,0 +27,0 @@ [

src/corePlugins/borderOpacity.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asValue } = require('../pluginUtils')
 
@@ -8,4 +8,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('borderOpacity')
-        let value = transformValue(theme.borderOpacity[modifier])
+        let value = asValue(modifier, theme.borderOpacity)
 
@@ -12,0 +11,0 @@ if (value === undefined) {

src/corePlugins/borderRadius.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,7 +8,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        if (modifier === '' || theme.borderRadius[modifier] === undefined) {
+        let value = asLength(modifier, theme['borderRadius'])
+
+        if (value === undefined) {
           return []
         }
 
-        return [[nameClass('rounded', modifier), { 'border-radius': theme.borderRadius[modifier] }]]
+        return [[nameClass('rounded', modifier), { 'border-radius': value }]]
       },
@@ -20,8 +22,8 @@ ],
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('borderRadius')
-        let value = transformValue(theme.borderRadius[modifier])
+        let value = asLength(modifier, theme['borderRadius'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
         }
+
         return [
@@ -37,6 +39,5 @@ [
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('borderRadius')
-        let value = transformValue(theme.borderRadius[modifier])
+        let value = asLength(modifier, theme['borderRadius'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -55,6 +56,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('borderRadius')
-        let value = transformValue(theme.borderRadius[modifier])
+        let value = asLength(modifier, theme['borderRadius'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -73,6 +73,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('borderRadius')
-        let value = transformValue(theme.borderRadius[modifier])
+        let value = asLength(modifier, theme['borderRadius'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -93,6 +92,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('borderRadius')
-        let value = transformValue(theme.borderRadius[modifier])
+        let value = asLength(modifier, theme['borderRadius'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -106,6 +104,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('borderRadius')
-        let value = transformValue(theme.borderRadius[modifier])
+        let value = asLength(modifier, theme['borderRadius'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -119,6 +116,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('borderRadius')
-        let value = transformValue(theme.borderRadius[modifier])
+        let value = asLength(modifier, theme['borderRadius'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -132,6 +128,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('borderRadius')
-        let value = transformValue(theme.borderRadius[modifier])
+        let value = asLength(modifier, theme['borderRadius'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -138,0 +133,0 @@ }

src/corePlugins/borderWidth.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,6 +8,5 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('borderWidth')
-        let value = transformValue(theme.borderWidth[modifier])
+        let value = asLength(modifier, theme['borderWidth'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -23,6 +22,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('borderWidth')
-        let value = transformValue(theme.borderWidth[modifier])
+        let value = asLength(modifier, theme['borderWidth'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -36,6 +34,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('borderWidth')
-        let value = transformValue(theme.borderWidth[modifier])
+        let value = asLength(modifier, theme['borderWidth'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -49,6 +46,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('borderWidth')
-        let value = transformValue(theme.borderWidth[modifier])
+        let value = asLength(modifier, theme['borderWidth'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -62,6 +58,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('borderWidth')
-        let value = transformValue(theme.borderWidth[modifier])
+        let value = asLength(modifier, theme['borderWidth'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -68,0 +63,0 @@ }

src/corePlugins/boxShadow.js

@@ -9,2 +9,3 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default
   },
+  { respectVariants: false },
 ]
@@ -11,0 +12,0 @@

src/corePlugins/cursor.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asValue } = require('../pluginUtils')
 
@@ -8,7 +9,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        if (modifier === undefined || modifier === '' || theme.cursor[modifier] === undefined) {
+        let value = asValue(modifier, theme.cursor)
+
+        if (value === undefined) {
           return []
         }
 
-        return [[nameClass('cursor', modifier), { cursor: theme.cursor[modifier] }]]
+        return [[nameClass('cursor', modifier), { cursor: value }]]
       },
@@ -15,0 +18,0 @@ ],

src/corePlugins/divideColor.js

@@ -6,2 +6,3 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default
 const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor } = require('../pluginUtils')
 
@@ -15,3 +16,5 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        if (modifier === '' || colorPalette[modifier] === undefined) {
+        let value = asColor(modifier, colorPalette)
+
+        if (value === undefined) {
           return []
@@ -18,0 +21,0 @@ }

src/corePlugins/divideOpacity.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asValue } = require('../pluginUtils')
 
@@ -8,4 +9,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('divideOpacity')
-        let value = transformValue(theme.divideOpacity[modifier])
+        let value = asValue(modifier, theme.divideOpacity)
 
@@ -19,3 +19,3 @@ if (value === undefined) {
             `${nameClass('divide-opacity', modifier)} > :not([hidden]) ~ :not([hidden])`,
-            { '--tw-divide-opacity': theme.divideOpacity[modifier] },
+            { '--tw-divide-opacity': value },
           ],
@@ -22,0 +22,0 @@ ]

src/corePlugins/divideWidth.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,4 +8,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('divideWidth')
-        let value = transformValue(theme.divideWidth[modifier])
+        let value = asLength(modifier, theme['divideWidth'])
 
@@ -30,4 +29,3 @@ if (value === undefined) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('divideWidth')
-        let value = transformValue(theme.divideWidth[modifier])
+        let value = asLength(modifier, theme['divideWidth'])
 
@@ -34,0 +32,0 @@ if (value === undefined) {

src/corePlugins/fill.js

@@ -6,2 +6,3 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default
 const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor } = require('../pluginUtils')
 
@@ -14,7 +15,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        if (modifier === '' || colorPalette[modifier] === undefined) {
+        let value = asColor(modifier, colorPalette)
+
+        if (value === undefined) {
           return []
         }
 
-        return [[nameClass('fill', modifier), { fill: toColorValue(colorPalette[modifier]) }]]
+        return [[nameClass('fill', modifier), { fill: toColorValue(value) }]]
       },
@@ -21,0 +24,0 @@ ],

src/corePlugins/flexGrow.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asValue } = require('../pluginUtils')
 
@@ -8,4 +8,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('flexGrow')
-        let value = transformValue(theme.flexGrow[modifier])
+        let value = asValue(modifier, theme.flexGrow)
 
@@ -12,0 +11,0 @@ if (value === undefined) {

src/corePlugins/flexShrink.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asValue } = require('../pluginUtils')
 
@@ -8,4 +8,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('flexShrink')
-        let value = transformValue(theme.flexShrink[modifier])
+        let value = asValue(modifier, theme.flexShrink)
 
@@ -12,0 +11,0 @@ if (value === undefined) {

src/corePlugins/fontSize.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
+const { asLength } = require('../pluginUtils')
 
@@ -14,3 +15,14 @@ function isPlainObject(value) {
         if (value === undefined) {
-          return []
+          value = asLength(modifier, {})
+
+          return value === undefined
+            ? []
+            : [
+                [
+                  nameClass('text', modifier),
+                  {
+                    'font-size': value,
+                  },
+                ],
+              ]
         }
@@ -17,0 +29,0 @@

src/corePlugins/gap.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,6 +8,5 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('gap')
-        let value = transformValue(theme.gap[modifier])
+        let value = asLength(modifier, theme['gap'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -23,6 +22,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('gap')
-        let value = transformValue(theme.gap[modifier])
+        let value = asLength(modifier, theme['gap'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -36,6 +34,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('gap')
-        let value = transformValue(theme.gap[modifier])
+        let value = asLength(modifier, theme['gap'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -42,0 +39,0 @@ }

src/corePlugins/gradientColorStops.js

@@ -6,2 +6,3 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default
 const toRgba = require('tailwindcss/lib/util/withAlphaVariable').toRgba
+const { asColor } = require('../pluginUtils')
 
@@ -27,7 +28,10 @@ function transparentTo(value) {
       (modifier, { theme }) => {
-        let value = colorPalette[modifier]
-        if (modifier === '' || value === undefined) {
+        let value = asColor(modifier, colorPalette)
+
+        if (value === undefined) {
           return []
         }
+
         let transparentToValue = transparentTo(value)
+
         return [
@@ -48,7 +52,10 @@ [
       (modifier, { theme }) => {
-        let value = colorPalette[modifier]
-        if (modifier === '' || value === undefined) {
+        let value = asColor(modifier, colorPalette)
+
+        if (value === undefined) {
           return []
         }
+
         let transparentToValue = transparentTo(value)
+
         return [
@@ -71,6 +78,8 @@ [
       (modifier, { theme }) => {
-        let value = colorPalette[modifier]
-        if (modifier === '' || value === undefined) {
+        let value = asColor(modifier, colorPalette)
+
+        if (value === undefined) {
           return []
         }
+
         return [
@@ -77,0 +86,0 @@ [

src/corePlugins/height.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,7 +9,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        if (modifier === '' || theme.height[modifier] === undefined) {
+        let value = asLength(modifier, theme['height'])
+
+        if (value === undefined) {
           return []
         }
 
-        return [[nameClass('h', modifier), { height: theme.height[modifier] }]]
+        return [[nameClass('h', modifier), { height: value }]]
       },
@@ -15,0 +18,0 @@ ],

src/corePlugins/index.js

@@ -74,2 +74,16 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default
 
+    addVariant(
+      'ltr',
+      transformAllSelectors(
+        (selector) => `[dir="ltr"] ${updateAllClasses(selector, (className) => `ltr:${className}`)}`
+      )
+    )
+
+    addVariant(
+      'rtl',
+      transformAllSelectors(
+        (selector) => `[dir="rtl"] ${updateAllClasses(selector, (className) => `rtl:${className}`)}`
+      )
+    )
+
     if (config.darkMode === 'class') {
@@ -216,7 +230,7 @@ addVariant(
   resize: require('./resize'),
+  ringWidth: require('./ringWidth'),
+  ringOffsetWidth: require('./ringOffsetWidth'),
   ringColor: require('./ringColor'),
   ringOffsetColor: require('./ringOffsetColor'),
-  ringOffsetWidth: require('./ringOffsetWidth'),
   ringOpacity: require('./ringOpacity'),
-  ringWidth: require('./ringWidth'),
   space: require('./space'),
@@ -223,0 +237,0 @@ stroke: require('./stroke'),

src/corePlugins/inset.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,4 +8,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('inset')
-        let value = transformValue(theme.inset[modifier])
+        let value = asLength(modifier, theme['inset'])
 
@@ -25,4 +24,3 @@ if (value === undefined) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('inset')
-        let value = transformValue(theme.inset[modifier])
+        let value = asLength(modifier, theme['inset'])
 
@@ -38,4 +36,3 @@ if (value === undefined) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('inset')
-        let value = transformValue(theme.inset[modifier])
+        let value = asLength(modifier, theme['inset'])
 
@@ -53,4 +50,3 @@ if (value === undefined) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('inset')
-        let value = transformValue(theme.inset[modifier])
+        let value = asLength(modifier, theme['inset'])
 
@@ -66,4 +62,3 @@ if (value === undefined) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('inset')
-        let value = transformValue(theme.inset[modifier])
+        let value = asLength(modifier, theme['inset'])
 
@@ -79,4 +74,3 @@ if (value === undefined) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('inset')
-        let value = transformValue(theme.inset[modifier])
+        let value = asLength(modifier, theme['inset'])
 
@@ -92,4 +86,3 @@ if (value === undefined) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('inset')
-        let value = transformValue(theme.inset[modifier])
+        let value = asLength(modifier, theme['inset'])
 
@@ -96,0 +89,0 @@ if (value === undefined) {

src/corePlugins/letterSpacing.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,9 +8,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        if (modifier === '' || theme.letterSpacing[modifier] === undefined) {
+        let value = asLength(modifier, theme['letterSpacing'])
+
+        if (value === undefined) {
           return []
         }
 
-        return [
-          [nameClass('tracking', modifier), { 'letter-spacing': theme.letterSpacing[modifier] }],
-        ]
+        return [[nameClass('tracking', modifier), { 'letter-spacing': value }]]
       },
@@ -17,0 +17,0 @@ ],

src/corePlugins/lineHeight.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,7 +8,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        if (modifier === '' || theme.lineHeight[modifier] === undefined) {
+        let value = asLength(modifier, theme['lineHeight'])
+
+        if (value === undefined) {
           return []
         }
 
-        return [[nameClass('leading', modifier), { 'line-height': theme.lineHeight[modifier] }]]
+        return [[nameClass('leading', modifier), { 'line-height': value }]]
       },
@@ -15,0 +17,0 @@ ],

src/corePlugins/margin.js

@@ -0,1 +1,3 @@
+const { asLength } = require('../pluginUtils')
+
 module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
@@ -5,4 +7,5 @@ addUtilities({
       (modifier, { theme, candidate }) => {
-        let value = theme.margin[modifier]
-        if (modifier === '' || value === undefined) {
+        let value = asLength(modifier, theme['margin'])
+
+        if (value === undefined) {
           return []
@@ -18,5 +21,5 @@ }
       (modifier, { theme, candidate }) => {
-        let value = theme.margin[modifier]
+        let value = asLength(modifier, theme['margin'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -30,5 +33,5 @@ }
       (modifier, { theme, candidate }) => {
-        let value = theme.margin[modifier]
+        let value = asLength(modifier, theme['margin'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -59,5 +62,5 @@ }
       (modifier, { theme, candidate }) => {
-        let value = theme.margin[modifier]
+        let value = asLength(modifier, theme['margin'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -71,5 +74,5 @@ }
       (modifier, { theme, candidate }) => {
-        let value = theme.margin[modifier]
+        let value = asLength(modifier, theme['margin'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -83,5 +86,5 @@ }
       (modifier, { theme, candidate }) => {
-        let value = theme.margin[modifier]
+        let value = asLength(modifier, theme['margin'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -88,0 +91,0 @@ }

src/corePlugins/maxHeight.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,4 +9,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('maxHeight')
-        let value = transformValue(theme.maxHeight[modifier])
+        let value = asLength(modifier, theme['maxHeight'])
 
@@ -12,0 +12,0 @@ if (value === undefined) {

src/corePlugins/maxWidth.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,4 +9,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('maxWidth')
-        let value = transformValue(theme.maxWidth[modifier])
+        let value = asLength(modifier, theme['maxWidth'])
 
@@ -12,0 +12,0 @@ if (value === undefined) {

src/corePlugins/minHeight.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,4 +9,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('minHeight')
-        let value = transformValue(theme.minHeight[modifier])
+        let value = asLength(modifier, theme['minHeight'])
 
@@ -12,0 +12,0 @@ if (value === undefined) {

src/corePlugins/minWidth.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,4 +9,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('minWidth')
-        let value = transformValue(theme.minWidth[modifier])
+        let value = asLength(modifier, theme['minWidth'])
 
@@ -12,0 +12,0 @@ if (value === undefined) {

src/corePlugins/opacity.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asValue } = require('../pluginUtils')
 
@@ -7,9 +7,11 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
     opacity: (modifier, { theme }) => {
-      if (modifier === '' || theme.opacity[modifier] === undefined) {
+      let value = asValue(modifier, theme.opacity)
+
+      if (value === undefined) {
         return []
       }
 
-      return [[nameClass('opacity', modifier), { opacity: theme.opacity[modifier] }]]
+      return [[nameClass('opacity', modifier), { opacity: value }]]
     },
   })
 }

src/corePlugins/order.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asValue } = require('../pluginUtils')
 
@@ -8,7 +8,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        if (modifier === '' || theme.order[modifier] === undefined) {
+        let value = asValue(modifier, theme.order)
+
+        if (value === undefined) {
           return []
         }
 
-        return [[nameClass('order', modifier), { order: theme.order[modifier] }]]
+        return [[nameClass('order', modifier), { order: value }]]
       },
@@ -15,0 +17,0 @@ ],

src/corePlugins/padding.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,5 +8,5 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('padding')
-        let value = transformValue(theme.padding[modifier])
-        if (modifier === '' || value === undefined) {
+        let value = asLength(modifier, theme['padding'])
+
+        if (value === undefined) {
           return []
@@ -22,6 +22,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('padding')
-        let value = transformValue(theme.padding[modifier])
+        let value = asLength(modifier, theme['padding'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -35,6 +34,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('padding')
-        let value = transformValue(theme.padding[modifier])
+        let value = asLength(modifier, theme['padding'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -50,6 +48,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('padding')
-        let value = transformValue(theme.padding[modifier])
+        let value = asLength(modifier, theme['padding'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -63,6 +60,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('padding')
-        let value = transformValue(theme.padding[modifier])
+        let value = asLength(modifier, theme['padding'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -76,6 +72,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('padding')
-        let value = transformValue(theme.padding[modifier])
+        let value = asLength(modifier, theme['padding'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -89,6 +84,5 @@ }
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('padding')
-        let value = transformValue(theme.padding[modifier])
+        let value = asLength(modifier, theme['padding'])
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -95,0 +89,0 @@ }

src/corePlugins/placeholderColor.js

@@ -6,2 +6,3 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default
 const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor } = require('../pluginUtils')
 
@@ -14,3 +15,5 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        if (modifier === '' || colorPalette[modifier] === undefined) {
+        let value = asColor(modifier, colorPalette)
+
+        if (value === undefined) {
           return []
@@ -23,3 +26,3 @@ }
             withAlphaVariable({
-              color: colorPalette[modifier],
+              color: value,
               property: 'color',
@@ -26,0 +29,0 @@ variable: '--tw-placeholder-opacity',

src/corePlugins/placeholderOpacity.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asValue } = require('../pluginUtils')
 
@@ -8,4 +9,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('placeholderOpacity')
-        let value = transformValue(theme.placeholderOpacity[modifier])
+        let value = asValue(modifier, theme.placeholderOpacity)
 
@@ -12,0 +12,0 @@ if (value === undefined) {

src/corePlugins/ringColor.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
 const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
 const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default
 const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor } = require('../pluginUtils')
 
@@ -13,5 +13,5 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let value = colorPalette[modifier]
+        let value = asColor(modifier, colorPalette)
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -18,0 +18,0 @@ }

src/corePlugins/ringOffsetColor.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
 const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
 const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').default
 const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor } = require('../pluginUtils')
 
@@ -13,5 +13,5 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let value = colorPalette[modifier]
+        let value = asColor(modifier, colorPalette)
 
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -18,0 +18,0 @@ }

src/corePlugins/ringOffsetWidth.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,4 +8,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('ringOffsetWidth')
-        let value = transformValue(theme.ringOffsetWidth[modifier])
+        let value = asLength(modifier, theme['ringOffsetWidth'])
 
@@ -12,0 +11,0 @@ if (value === undefined) {

src/corePlugins/ringOpacity.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asValue } = require('../pluginUtils')
 
@@ -8,4 +8,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('ringOpacity')
-        let value = transformValue(theme.ringOpacity[modifier])
+        let value = asValue(modifier, theme['ringOpacity'])
 
@@ -12,0 +11,0 @@ if (value === undefined) {

src/corePlugins/ringWidth.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
 const toRgba = require('tailwindcss/lib/util/withAlphaVariable').toRgba
+const { asLength } = require('../pluginUtils')
 
@@ -13,4 +14,2 @@ function safeCall(callback, defaultValue) {
 
-let ringReset = ['*']
-
 module.exports = function ({ jit: { theme, addUtilities } }) {
@@ -21,10 +20,16 @@ let ringColorDefault = (([r, g, b]) => {
 
-  ringReset[1] = {
-    '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
-    '--tw-ring-offset-width': theme.ringOffsetWidth?.DEFAULT ?? '0px',
-    '--tw-ring-offset-color': theme.ringOffsetColor?.DEFAULT ?? '#fff',
-    '--tw-ring-color': ringColorDefault,
-    '--tw-ring-offset-shadow': '0 0 #0000',
-    '--tw-ring-shadow': '0 0 #0000',
-  }
+  let ringReset = [
+    '*',
+    {
+      '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-ring-offset-width': theme.ringOffsetWidth?.DEFAULT ?? '0px',
+      '--tw-ring-offset-color': theme.ringOffsetColor?.DEFAULT ?? '#fff',
+      '--tw-ring-color': ringColorDefault,
+      '--tw-ring-offset-shadow': '0 0 #0000',
+      '--tw-ring-shadow': '0 0 #0000',
+    },
+    {
+      respectVariants: false,
+    },
+  ]
 
@@ -34,8 +39,5 @@ addUtilities({
       (modifier, { theme }) => {
-        modifier = modifier === '' ? 'DEFAULT' : modifier
+        let value = asLength(modifier, theme['ringWidth'])
 
-        let transformValue = transformThemeValue('ringWidth')
-        let value = transformValue(theme.ringWidth[modifier])
-
-        if (modifier === '' || value === undefined) {
+        if (value === undefined) {
           return []
@@ -42,0 +44,0 @@ }

src/corePlugins/rotate.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asAngle } = require('../pluginUtils')
 
@@ -8,4 +8,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('rotate')
-        let value = transformValue(theme.rotate[modifier])
+        let value = asAngle(modifier, theme.rotate)
 
@@ -12,0 +11,0 @@ if (value === undefined) {

src/corePlugins/scale.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asValue } = require('../pluginUtils')
 
@@ -8,4 +8,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('scale')
-        let value = transformValue(theme.scale[modifier])
+        let value = asValue(modifier, theme.scale)
 
@@ -23,4 +22,3 @@ if (value === undefined) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('scale')
-        let value = transformValue(theme.scale[modifier])
+        let value = asValue(modifier, theme.scale)
 
@@ -36,4 +34,3 @@ if (value === undefined) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('scale')
-        let value = transformValue(theme.scale[modifier])
+        let value = asValue(modifier, theme.scale)
 
@@ -40,0 +37,0 @@ if (value === undefined) {

src/corePlugins/skew.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asAngle } = require('../pluginUtils')
 
@@ -8,4 +8,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('skew')
-        let value = transformValue(theme.skew[modifier])
+        let value = asAngle(modifier, theme.skew)
 
@@ -21,4 +20,3 @@ if (value === undefined) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('skew')
-        let value = transformValue(theme.skew[modifier])
+        let value = asAngle(modifier, theme.skew)
 
@@ -25,0 +23,0 @@ if (value === undefined) {

src/corePlugins/space.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,4 +9,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('space')
-        let value = transformValue(theme.space[modifier])
+        let value = asLength(modifier, theme['space'])
 
@@ -30,4 +30,3 @@ if (value === undefined) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('space')
-        let value = transformValue(theme.space[modifier])
+        let value = asLength(modifier, theme['space'])
 
@@ -34,0 +33,0 @@ if (value === undefined) {

src/corePlugins/stroke.js

@@ -6,2 +6,3 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default
 const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor } = require('../pluginUtils')
 
@@ -14,7 +15,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        if (modifier === '' || colorPalette[modifier] === undefined) {
+        let value = asColor(modifier, colorPalette)
+
+        if (value === undefined) {
           return []
         }
 
-        return [[nameClass('stroke', modifier), { stroke: toColorValue(colorPalette[modifier]) }]]
+        return [[nameClass('stroke', modifier), { stroke: toColorValue(value) }]]
       },
@@ -21,0 +24,0 @@ ],

src/corePlugins/strokeWidth.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,7 +9,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        if (modifier === '' || theme.strokeWidth[modifier] === undefined) {
+        let value = asLength(modifier, theme['strokeWidth'])
+
+        if (value === undefined) {
           return []
         }
 
-        return [[nameClass('stroke', modifier), { 'stroke-width': theme.strokeWidth[modifier] }]]
+        return [[nameClass('stroke', modifier), { 'stroke-width': value }]]
       },
@@ -15,0 +18,0 @@ ],

src/corePlugins/textColor.js

@@ -6,2 +6,3 @@ const nameClass = require('tailwindcss/lib/util/nameClass').default
 const toColorValue = require('tailwindcss/lib/util/toColorValue').default
+const { asColor } = require('../pluginUtils')
 
@@ -14,3 +15,5 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        if (modifier === '' || colorPalette[modifier] === undefined) {
+        let value = asColor(modifier, colorPalette)
+
+        if (value === undefined) {
           return []
@@ -23,3 +26,3 @@ }
             withAlphaVariable({
-              color: colorPalette[modifier],
+              color: value,
               property: 'color',
@@ -26,0 +29,0 @@ variable: '--tw-text-opacity',

src/corePlugins/textOpacity.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asValue } = require('../pluginUtils')
 
@@ -8,15 +8,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('textOpacity')
-        let value = transformValue(theme.textOpacity[modifier])
+        let value = asValue(modifier, theme.textOpacity)
 
-        if (theme.textOpacity[modifier] === undefined) {
+        if (value === undefined) {
           return []
         }
 
-        return [
-          [
-            nameClass('text-opacity', modifier),
-            { '--tw-text-opacity': theme.textOpacity[modifier] },
-          ],
-        ]
+        return [[nameClass('text-opacity', modifier), { '--tw-text-opacity': value }]]
       },
@@ -23,0 +17,0 @@ ],

src/corePlugins/translate.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,4 +9,3 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('translate')
-        let value = transformValue(theme.translate[modifier])
+        let value = asLength(modifier, theme['translate'])
 
@@ -21,4 +21,3 @@ if (value === undefined) {
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('translate')
-        let value = transformValue(theme.translate[modifier])
+        let value = asLength(modifier, theme['translate'])
 
@@ -25,0 +24,0 @@ if (value === undefined) {

src/corePlugins/width.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asLength } = require('../pluginUtils')
 
@@ -8,7 +9,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        if (modifier === '' || theme.width[modifier] === undefined) {
+        let value = asLength(modifier, theme['width'])
+
+        if (value === undefined) {
           return []
         }
 
-        return [[nameClass('w', modifier), { width: theme.width[modifier] }]]
+        return [[nameClass('w', modifier), { width: value }]]
       },
@@ -15,0 +18,0 @@ ],

src/corePlugins/zIndex.js

 const nameClass = require('tailwindcss/lib/util/nameClass').default
 const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asValue } = require('../pluginUtils')
 
@@ -8,7 +9,9 @@ module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
       (modifier, { theme }) => {
-        if (modifier === '' || theme.zIndex[modifier] === undefined) {
+        let value = asValue(modifier, theme.scale)
+
+        if (value === undefined) {
           return []
         }
 
-        return [[nameClass('z', modifier), { 'z-index': theme.zIndex[modifier] }]]
+        return [[nameClass('z', modifier), { 'z-index': value }]]
       },
@@ -15,0 +18,0 @@ ],

src/index.js

@@ -10,2 +10,5 @@ const fs = require('fs')
 const LRU = require('quick-lru')
+const dlv = require('dlv')
+const Node = require('postcss/lib/node')
+const selectorParser = require('postcss-selector-parser')
 
@@ -15,2 +18,5 @@ const resolveConfig = require('tailwindcss/resolveConfig')
 const evaluateTailwindFunctions = require('tailwindcss/lib/lib/evaluateTailwindFunctions').default
+const parseObjectStyles = require('tailwindcss/lib/util/parseObjectStyles').default
+const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const prefixSelector = require('tailwindcss/lib/util/prefixSelector').default
 
@@ -25,2 +31,6 @@ const corePlugins = require('./corePlugins')
 
+function sign(bigIntValue) {
+  return (bigIntValue > 0n) - (bigIntValue < 0n)
+}
+
 // ---
@@ -261,5 +271,3 @@
 function buildStylesheet(rules, context) {
-  let sortedRules = rules.sort(([a], [z]) => {
-    return Math.sign(Number(a - z))
-  })
+  let sortedRules = rules.sort(([a], [z]) => sign(a - z))
 
@@ -336,9 +344,9 @@ let returnValue = {
 
-      context.watcher.on('add', (path) => {
-        context.changedFiles.add('./' + path)
+      context.watcher.on('add', (file) => {
+        context.changedFiles.add(path.resolve('.', file))
         touch(context.touchFile.name)
       })
 
-      context.watcher.on('change', (path) => {
-        context.changedFiles.add('./' + path)
+      context.watcher.on('change', (file) => {
+        context.changedFiles.add(path.resolve('.', file))
         touch(context.touchFile.name)
@@ -350,5 +358,118 @@ })
 
+function parseLegacyStyles(styles) {
+  if (!Array.isArray(styles)) {
+    return parseLegacyStyles([styles])
+  }
+
+  return styles.flatMap((style) => (style instanceof Node ? style : parseObjectStyles(style)))
+}
+
+function getClasses(selector) {
+  let parser = selectorParser((selectors) => {
+    let allClasses = []
+    selectors.walkClasses((classNode) => {
+      allClasses.push(classNode.value)
+    })
+    return allClasses
+  })
+  return parser.transformSync(selector)
+}
+
+function toPath(value) {
+  if (Array.isArray(value)) {
+    return value
+  }
+
+  let inBrackets = false
+  let parts = []
+  let chunk = ''
+
+  for (let i = 0; i < value.length; i++) {
+    let char = value[i]
+    if (char === '[') {
+      inBrackets = true
+      parts.push(chunk)
+      chunk = ''
+      continue
+    }
+    if (char === ']' && inBrackets) {
+      inBrackets = false
+      parts.push(chunk)
+      chunk = ''
+      continue
+    }
+    if (char === '.' && !inBrackets && chunk.length > 0) {
+      parts.push(chunk)
+      chunk = ''
+      continue
+    }
+    chunk = chunk + char
+  }
+
+  if (chunk.length > 0) {
+    parts.push(chunk)
+  }
+
+  return parts
+}
+
+// { .foo { color: black } }
+// => [ ['foo', ['.foo', { color: 'black' }] ]
+function toStaticRuleArray(legacyStyles) {
+  return parseLegacyStyles(legacyStyles).flatMap((node) => {
+    let nodeMap = new Map()
+    let classes = getClasses(node.selector)
+    return classes.map((c) => {
+      if (!nodeMap.has(node)) {
+        let decls = Object.fromEntries(
+          node.nodes.map(({ prop, value }) => {
+            return [prop, value]
+          })
+        )
+        nodeMap.set(node, [node.selector, decls])
+      }
+      return [c, nodeMap.get(node)]
+    })
+  })
+}
+
 function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offsets }) {
+  function getConfigValue(path, defaultValue) {
+    return path ? dlv(tailwindConfig, path, defaultValue) : tailwindConfig
+  }
+
+  function applyConfiguredPrefix(selector) {
+    return prefixSelector(config.prefix, selector)
+  }
+
   return {
-    addBase(nodes) {
+    // Classic plugin API
+    addVariant() {
+      throw new Error(`Variant plugins aren't supported yet`)
+    },
+    postcss,
+    prefix: applyConfiguredPrefix,
+    e: escape,
+    config: getConfigValue,
+    theme(path, defaultValue) {
+      const [pathRoot, ...subPaths] = toPath(path)
+      const value = getConfigValue(['theme', pathRoot, ...subPaths], defaultValue)
+      return transformThemeValue(pathRoot)(value)
+    },
+    corePlugins: (path) => {
+      if (Array.isArray(tailwindConfig.corePlugins)) {
+        return tailwindConfig.corePlugins.includes(path)
+      }
+
+      return getConfigValue(['corePlugins', path], true)
+    },
+    variants: (path, defaultValue) => {
+      if (Array.isArray(tailwindConfig.variants)) {
+        return tailwindConfig.variants
+      }
+
+      return getConfigValue(['variants', path], defaultValue)
+    },
+    addBase(styles) {
+      let nodes = parseLegacyStyles(styles)
       for (let node of nodes) {
@@ -358,2 +479,51 @@ context.baseRules.add(node)
     },
+    addComponents(components, options) {
+      let defaultOptions = {
+        variants: [],
+        respectPrefix: true,
+        respectImportant: false,
+        respectVariants: true,
+      }
+
+      options = Object.assign(
+        {},
+        defaultOptions,
+        Array.isArray(options) ? { variants: options } : options
+      )
+
+      for (let [identifier, tuple] of toStaticRuleArray(components)) {
+        let offset = offsets.components++
+
+        if (context.componentMap.has(identifier)) {
+          context.componentMap.get(identifier).push([offset, tuple])
+        } else {
+          context.componentMap.set(identifier, [[offset, tuple]])
+        }
+      }
+    },
+    addUtilities(utilities, options) {
+      let defaultOptions = {
+        variants: [],
+        respectPrefix: true,
+        respectImportant: true,
+        respectVariants: true,
+      }
+
+      options = Object.assign(
+        {},
+        defaultOptions,
+        Array.isArray(options) ? { variants: options } : options
+      )
+
+      for (let [identifier, tuple] of toStaticRuleArray(utilities)) {
+        let offset = offsets.utilities++
+
+        if (context.utilityMap.has(identifier)) {
+          context.utilityMap.get(identifier).push([offset, tuple])
+        } else {
+          context.utilityMap.set(identifier, [[offset, tuple]])
+        }
+      }
+    },
+    // ---
     jit: {
@@ -422,2 +592,9 @@ e: escape,
     for (let [sort, rule] of matches) {
+      let [, , options = {}] = rule
+
+      if (options.respectVariants === false) {
+        result.push([sort, rule])
+        continue
+      }
+
       let ruleWithVariant = applyThisVariant(rule)
@@ -455,4 +632,3 @@
 
-  for (let pluginName in plugins) {
-    let plugin = corePlugins[pluginName]
+  for (let plugin of plugins) {
     if (Array.isArray(plugin)) {
@@ -496,2 +672,6 @@ for (let pluginItem of plugin) {
 
+function isPlainObject(value) {
+  return isObject(value) && !Array.isArray(value)
+}
+
 function isEmpty(obj) {
@@ -587,8 +767,31 @@ return Object.keys(obj).length === 0
   }
-
   contextMap.set(configHash, context)
 
   rebootTemplateWatcher(context)
-  registerPlugins(context.tailwindConfig, corePlugins, context)
 
+  let corePluginList = Object.entries(corePlugins)
+    .map(([name, plugin]) => {
+      // TODO: Make variants a real core plugin so we don't special case it
+      if (name === 'variants') {
+        return plugin
+      }
+
+      if (!tailwindConfig.corePlugins.includes(name)) {
+        return null
+      }
+
+      return plugin
+    })
+    .filter(Boolean)
+
+  let userPlugins = tailwindConfig.plugins.map((plugin) => {
+    if (plugin.__isOptionsFunction) {
+      plugin = plugin()
+    }
+
+    return typeof plugin === 'function' ? plugin : plugin.handler
+  })
+
+  registerPlugins(context.tailwindConfig, [...corePluginList, ...userPlugins], context)
+
   return context
@@ -606,2 +809,5 @@ }
       // It hasn't changed (based on timestamp)
+      // TODO: This will be invalid once we start looking at config dependencies, but if
+      // we don't figure out a way to reuse unchanged config files we have to re-resolve
+      // on every build.
       if (modified <= prevModified) {
@@ -848,2 +1054,115 @@ return [prevConfig, configHash]
           },
+          function (root) {
+            let applyCandidates = new Set()
+
+            // Collect all @apply rules and candidates
+            let applies = []
+            root.walkAtRules('apply', (rule) => {
+              for (let util of rule.params.split(/[\s\t\n]+/g)) {
+                applyCandidates.add(util)
+              }
+              applies.push(rule)
+            })
+
+            // Start the @apply process if we have rules with @apply in them
+            if (applies.length > 0) {
+              // Fill up some caches!
+              generateRules(context.tailwindConfig, applyCandidates, context)
+
+              /**
+               * When we have an apply like this:
+               *
+               * .abc {
+               *    @apply hover:font-bold;
+               * }
+               *
+               * What we essentially will do is resolve to this:
+               *
+               * .abc {
+               *    @apply .hover\:font-bold:hover {
+               *      font-weight: 500;
+               *    }
+               * }
+               *
+               * Notice that the to-be-applied class is `.hover\:font-bold:hover` and that the utility candidate was `hover:font-bold`.
+               * What happens in this function is that we prepend a `.` and escape the candidate.
+               * This will result in `.hover\:font-bold`
+               * Which means that we can replace `.hover\:font-bold` with `.abc` in `.hover\:font-bold:hover` resulting in `.abc:hover`
+               */
+              // TODO: Should we use postcss-selector-parser for this instead?
+              function replaceSelector(selector, utilitySelector, candidate) {
+                return selector
+                  .split(/\s*,\s*/g)
+                  .map((s) => utilitySelector.replace(`.${escape(candidate)}`, s))
+                  .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)
+                for (let applyCandidate of applyCandidates) {
+                  // TODO: Check for user css rules?
+                  if (!context.classCache.has(applyCandidate)) {
+                    throw new Error('Utility does not exist!')
+                  }
+
+                  let [layerName, rules] = context.classCache.get(applyCandidate)
+                  for (let [sort, [selector, rule]] of rules) {
+                    // Nested rules...
+                    if (!isPlainObject(rule)) {
+                      siblings.push([
+                        sort,
+                        toPostCssNode(
+                          [selector, updateSelectors(rule, apply, applyCandidate)],
+                          context.postCssNodeCache
+                        ),
+                      ])
+                    } else {
+                      let appliedSelector = replaceSelector(
+                        apply.parent.selector,
+                        selector,
+                        applyCandidate
+                      )
+
+                      if (appliedSelector !== apply.parent.selector) {
+                        siblings.push([
+                          sort,
+                          toPostCssNode([appliedSelector, rule], context.postCssNodeCache),
+                        ])
+                        continue
+                      }
+
+                      // Add declarations directly
+                      for (let property in rule) {
+                        apply.before(postcss.decl({ prop: property, value: rule[property] }))
+                      }
+                    }
+                  }
+                }
+
+                // Inject the rules, sorted, correctly
+                for (let [sort, sibling] of siblings.sort(([a], [z]) => sign(z - a))) {
+                  // `apply.parent` is refering to the node at `.abc` in: .abc { @apply mt-2 }
+                  apply.parent.after(sibling)
+                }
+
+                // If there are left-over declarations, just remove the @apply
+                if (apply.parent.nodes.length > 1) {
+                  apply.remove()
+                } else {
+                  // The node is empty, drop the full node
+                  apply.parent.remove()
+                }
+              }
+            }
+          },
           evaluateTailwindFunctions(context.tailwindConfig),
@@ -850,0 +1169,0 @@ ]).process(root, { from: undefined })

src/index.test.js

@@ -14,3 +14,33 @@ const prettier = require('prettier')
   let config = {
+    darkMode: 'class',
     purge: [path.resolve(__dirname, './index.test.html')],
+    corePlugins: {
+      preflight: false,
+    },
+    plugins: [
+      require('@tailwindcss/aspect-ratio'),
+      function ({ addUtilities, addBase, theme }) {
+        addBase({
+          h1: {
+            fontSize: theme('fontSize.2xl'),
+            fontWeight: theme('fontWeight.bold'),
+            '&:first-child': {
+              marginTop: '0px',
+            },
+          },
+        })
+
+        addUtilities(
+          {
+            '.filter-none': {
+              filter: 'none',
+            },
+            '.filter-grayscale': {
+              filter: 'grayscale(100%)',
+            },
+          },
+          ['responsive', 'hover']
+        )
+      },
+    ],
   }
@@ -24,2 +54,35 @@
     }
+    .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;
+    }
+    .apply-components {
+      @apply container mx-auto;
+    }
+    .drop-empty-rules {
+      @apply hover:font-bold;
+    }
+    .apply-group {
+      @apply group-hover:font-bold;
+    }
+    .apply-dark-mode {
+      @apply dark:font-bold;
+    }
+    .apply-with-existing:hover {
+      @apply font-normal sm:bg-green-500;
+    }
+    .multiple, .selectors {
+      @apply font-bold group-hover:font-normal;
+    }
+    .list {
+      @apply space-x-4;
+    }
+    .nested {
+      .example {
+        @apply font-bold hover:font-normal;
+      }
+    }
+    .crazy-example {
+      @apply sm:motion-safe:group-active:focus:opacity-10;
+    }
+    @tailwind base;
     @tailwind components;
@@ -26,0 +89,0 @@ @tailwind utilities;

src/pluginUtils.js

@@ -110,5 +110,5 @@ const selectorParser = require('postcss-selector-parser')
 
-      if (variantSelector === selector) {
-        return null
-      }
+      // if (variantSelector === selector) {
+      //   return null
+      // }
 
@@ -139,5 +139,5 @@ return [variantSelector, rules]
 
-      if (variantSelector === selector) {
-        return null
-      }
+      // if (variantSelector === selector) {
+      //   return null
+      // }
 
@@ -159,2 +159,31 @@ return [variantSelector, rules]
 
+function asValue(modifier, lookup = {}, validate = () => true) {
+  let value = lookup[modifier]
+
+  if (value !== undefined) {
+    return value
+  }
+
+  if (modifier[0] !== '[' || modifier[modifier.length - 1] !== ']') {
+    return undefined
+  }
+
+  value = modifier.slice(1, -1)
+
+  if (!validate(value)) {
+    return undefined
+  }
+
+  return value
+}
+
+function asUnit(modifier, units, lookup = {}) {
+  return asValue(modifier, lookup, (value) => {
+    let pattern = new RegExp(`.+(${units.join('|')})$`, 'g')
+    return value.match(pattern) !== null
+  })
+}
+
+const { toRgba } = require('tailwindcss/lib/util/withAlphaVariable')
+
 module.exports = {
@@ -177,2 +206,41 @@ updateAllClasses,
   },
+  asValue,
+  asColor(modifier, lookup = {}) {
+    return asValue(modifier, lookup, (value) => {
+      try {
+        toRgba(value)
+        return true
+      } catch (e) {
+        return false
+      }
+    })
+  },
+  asAngle(modifier, lookup = {}) {
+    return asUnit(modifier, ['deg', 'grad', 'rad', 'turn'], lookup)
+  },
+  asLength(modifier, lookup = {}) {
+    return asUnit(
+      modifier,
+      [
+        'cm',
+        'mm',
+        'Q',
+        'in',
+        'pc',
+        'pt',
+        'px',
+        'em',
+        'ex',
+        'ch',
+        'rem',
+        'lh',
+        'vw',
+        'vh',
+        'vmin',
+        'vmax',
+        '%',
+      ],
+      lookup
+    )
+  },
 }

TODO.md

@@ -61,6 +61,15 @@ # To Dos
 
+#### Feb 28
+
+- [x] Basic @apply support
+
+### Mar 1
+
+- [x] Fix bug with focus:ring-2, we need to add the universal selector still not just strip it out, otherwise it's never added
+- [x] Fix cache miss when fetching context for config
+- [x] Make existing official plugins work
+- [x] Add support for classic plugin API
+
 #### Next
 
-- [ ] Add support for plugin API
-- [ ] Make existing official plugins work
 - [ ] Rebuild when config dependencies change
@@ -72,3 +81,3 @@ - [ ] Support container configuration options
 - [ ] Make separator work
-- [ ] Make @apply work
+- [ ] Support @apply with custom CSS
 - [ ] Add support for custom CSS that supports variants (anything in @layer?)
@@ -79,2 +88,3 @@ - [ ] Support square brackets for arbitrary values
 - [ ] Support "dynamic" components
+- [ ] Support "dynamic" variants (like group-2, etc.)
 - [ ] Refactor plugins to an abstraction that handles negative values, transformThemeValue, etc.
@@ -81,0 +91,0 @@ - [ ] Factor the code in a responsible way

No alert changes

Improved metrics

Total package byte prevSize

166967

increased by8.93%

Lines of code

5159

increased by12.89%

Worsened metrics

Dependency count

10

increased by25%

Dev dependency count

6

increased by20%

Dependency changes

• + Addeddlv@^1.1.3

• + Addedlodash.topath@^4.5.2

• + Addedcaniuse-lite@1.0.30001697(transitive)

• + Addedelectron-to-chromium@1.5.92(transitive)

• + Addedfastq@1.19.0(transitive)

• + Addedimport-fresh@3.3.1(transitive)

• - Removedcaniuse-lite@1.0.30001696(transitive)

• - Removedelectron-to-chromium@1.5.88(transitive)

• - Removedfastq@1.18.0(transitive)

• - Removedimport-fresh@3.3.0(transitive)