Add asList and arbitrary grid support

Author: adamwathan

src/corePlugins/gridAutoColumns.js

@@ -1,12 +1,11 @@
 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asList } = require('../pluginUtils')
 
 module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
   addUtilities({
     'auto-cols': [
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('gridAutoColumns')
-        let value = transformValue(theme.gridAutoColumns[modifier])
+        let value = asList(modifier, theme.gridAutoColumns)
 
         if (value === undefined) {
           return []

src/corePlugins/gridAutoRows.js

@@ -1,12 +1,11 @@
 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asList } = require('../pluginUtils')
 
 module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
   addUtilities({
     'auto-rows': [
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('gridAutoRows')
-        let value = transformValue(theme.gridAutoRows[modifier])
+        let value = asList(modifier, theme.gridAutoRows)
 
         if (value === undefined) {
           return []

src/corePlugins/gridTemplateColumns.js

@@ -1,12 +1,11 @@
 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asList } = require('../pluginUtils')
 
 module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
   addUtilities({
     'grid-cols': [
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('gridTemplateColumns')
-        let value = transformValue(theme.gridTemplateColumns[modifier])
+        let value = asList(modifier, theme.gridTemplateColumns)
 
         if (value === undefined) {
           return []

src/corePlugins/gridTemplateRows.js

@@ -1,12 +1,11 @@
 const nameClass = require('tailwindcss/lib/util/nameClass').default
-const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
+const { asList } = require('../pluginUtils')
 
 module.exports = function ({ jit: { theme, addUtilities, addVariant, e } }) {
   addUtilities({
     'grid-rows': [
       (modifier, { theme }) => {
-        let transformValue = transformThemeValue('gridTemplateRows')
-        let value = transformValue(theme.gridTemplateRows[modifier])
+        let value = asList(modifier, theme.gridTemplateRows)
 
         if (value === undefined) {
           return []

src/index.test.css

@@ -193,6 +193,9 @@ h1:first-child {
 .aspect-h-4 {
   --tw-aspect-h: 4;
 }
+.grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] {
+  grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
+}
 .transform {
   --tw-translate-x: 0;
   --tw-translate-y: 0;

src/index.test.html

@@ -11,6 +11,7 @@
     <div
       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="aspect-w-1 aspect-h-2"></div>
     <div class="aspect-w-3 aspect-h-4"></div>
     <div class="filter-none filter-grayscale"></div>

src/pluginUtils.js

@@ -1,4 +1,5 @@
 const selectorParser = require('postcss-selector-parser')
+const postcss = require('postcss')
 
 function updateAllClasses(selectors, updateClass) {
   let parser = selectorParser((selectors) => {
@@ -154,7 +155,7 @@ function transformLastClasses(transformClass, wrap = null) {
   }
 }
 
-function asValue(modifier, lookup = {}, validate = () => true) {
+function asValue(modifier, lookup = {}, { validate = () => true, transform = (v) => v } = {}) {
   let value = lookup[modifier]
 
   if (value !== undefined) {
@@ -171,13 +172,15 @@ function asValue(modifier, lookup = {}, validate = () => true) {
     return undefined
   }
 
-  return value
+  return transform(value)
 }
 
 function asUnit(modifier, units, lookup = {}) {
-  return asValue(modifier, lookup, (value) => {
-    let pattern = new RegExp(`.+(${units.join('|')})$`, 'g')
-    return value.match(pattern) !== null
+  return asValue(modifier, lookup, {
+    validate: (value) => {
+      let pattern = new RegExp(`.+(${units.join('|')})$`, 'g')
+      return value.match(pattern) !== null
+    },
   })
 }
 
@@ -201,14 +204,26 @@ module.exports = {
     }
   },
   asValue,
+  asList(modifier, lookup = {}) {
+    return asValue(modifier, lookup, {
+      transform: (value) => {
+        return postcss.list
+          .comma(value)
+          .map((v) => v.replace(/,/g, ', '))
+          .join(' ')
+      },
+    })
+  },
   asColor(modifier, lookup = {}) {
-    return asValue(modifier, lookup, (value) => {
-      try {
-        toRgba(value)
-        return true
-      } catch (e) {
-        return false
-      }
+    return asValue(modifier, lookup, {
+      validate: (value) => {
+        try {
+          toRgba(value)
+          return true
+        } catch (e) {
+          return false
+        }
+      },
     })
   },
   asAngle(modifier, lookup = {}) {