Improve arbitrary value support

.eslintrc.js

@@ -23,6 +23,7 @@ module.exports = {
   ],
   plugins: ['chai-friendly', 'jest', 'import'],
   rules: {
+    'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 0, maxBOF: 0 }],
     'no-unused-expressions': 0,
     'no-negated-condition': 0,
     'no-warning-comments': 0,

__fixtures__/!custom.js

@@ -4,9 +4,6 @@ import tw from './macro'
  * Test custom Twin classes
  */
 
-tw`font-customFontWeightAsString`
-tw`font-customFontWeightAsNumber`
-
 tw`group-hocus:bg-red-500`
 tw`group-focus:bg-red-500`
 tw`group-active:bg-red-500`

__fixtures__/config/config.js

@@ -34,3 +34,6 @@ tw`bg-blue-gray-green-200`
 tw`bg-blue-gray-green-deep-dish`
 tw`bg-blue-gray-green-deep-dish-200`
 tw`bg-blue-gray-green-pink`
+
+tw`font-customFontWeightAsString`
+tw`font-customFontWeightAsNumber`

__fixtures__/config/tailwind.config.js

@@ -40,5 +40,11 @@ module.exports = {
       },
       'blue-gray-green-pink': 'blue-gray-green-pink',
     },
+    fontWeight: {
+      customFontWeightAsString: '700',
+      // Tailwind accepts numbers in configuration as well
+      // https://tailwindcss.com/docs/font-weight#font-weights
+      customFontWeightAsNumber: 800,
+    },
   },
 }

__fixtures__/plugins/tailwind.config.js

@@ -0,0 +1,130 @@
+module.exports = {
+  theme: {
+    aspectRatio: {
+      2: '2',
+      4: '4',
+      6: '6',
+    },
+  },
+  plugins: [
+    addUtilitiesTest,
+    addUtilitiesTest2,
+    addComponentsTest,
+    addComponentsTestElementPrefixes,
+    addComponentsTestElementScreenReplacements,
+    pluginBaseSelectors,
+  ],
+}
+
+function addUtilitiesTest({ addUtilities, theme }) {
+  const newUtilities = {
+    '.type-sm': {
+      fontSize: theme('fontSize.sm'),
+      fontWeight: theme('fontWeight.medium'),
+      lineHeight: theme('lineHeight.tight'),
+    },
+  }
+  addUtilities(newUtilities)
+}
+
+function addUtilitiesTest2({ addUtilities }) {
+  const newUtilities = {
+    '.skew-10deg': {
+      transform: 'skewY(-10deg)',
+    },
+    '.skew-15deg': {
+      transform: 'skewY(-15deg)',
+    },
+  }
+
+  addUtilities(newUtilities)
+}
+
+function addComponentsTest({ addComponents }) {
+  const buttons = {
+    '.btn': {
+      padding: '.5rem 1rem',
+      borderRadius: '.25rem',
+      fontWeight: '600',
+    },
+    '.btn-blue': {
+      backgroundColor: '#3490dc',
+      color: '#fff',
+      '&:hover': {
+        backgroundColor: '#2779bd',
+      },
+    },
+    '.btn-red': {
+      backgroundColor: '#e3342f',
+      color: '#fff',
+      '&:hover': {
+        backgroundColor: '#cc1f1a',
+      },
+    },
+  }
+
+  addComponents(buttons)
+}
+
+function addComponentsTestElementPrefixes({ addComponents }) {
+  const styles = [
+    {
+      '.prefixes': {
+        h1: {
+          margin: 'auto',
+          marginRight: '10px',
+        },
+        'h2:hover': {
+          color: 'red',
+        },
+        'h3:hover, h3:active': {
+          color: 'green',
+        },
+        ':focus': {
+          display: 'none',
+        },
+      },
+    },
+  ]
+
+  addComponents(styles)
+}
+
+function addComponentsTestElementScreenReplacements({ addComponents }) {
+  const styles = [
+    {
+      '.screenies': {
+        '@screen sm': {
+          display: 'block',
+        },
+        '@screen lg': {
+          display: 'inline-block',
+        },
+        '@screen md': {
+          display: 'flex',
+        },
+        '@screen xl': {
+          h1: {
+            marginTop: '50px',
+            '&:hover, &:focus': {
+              color: 'blue',
+            },
+          },
+        },
+      },
+    },
+  ]
+
+  addComponents(styles)
+}
+
+// tests introducing a config item and using the items as base selectors
+function pluginBaseSelectors({ addComponents, theme, e }) {
+  const values = theme('aspectRatio')
+
+  const baseSelectors = Object.entries(values)
+    .map(([key]) => `.${e(`aspect-test-${key}`)}`)
+    .join(',\n')
+
+  addComponents([{ [baseSelectors]: { content: 'test' } }])
+}

__fixtures__/utilitiesBackgrounds/backgroundColor.js

@@ -251,3 +251,5 @@ tw`bg-electric/[.555]`
 tw`bg-electric/[var(--myvar)]`
 tw`bg-[theme('colors.electric')]`
 tw`bg-[theme('colors.electric')]/20`
+
+tw`bg-[color:custom]`

__fixtures__/utilitiesBackgrounds/backgroundImage.js

@@ -12,3 +12,5 @@ tw`bg-gradient-to-b`
 tw`bg-gradient-to-bl`
 tw`bg-gradient-to-l`
 tw`bg-gradient-to-tl`
+
+tw`bg-[image:custom]`

__fixtures__/utilitiesBackgrounds/backgroundPosition.js

@@ -10,3 +10,7 @@ tw`bg-right`
 tw`bg-right-bottom`
 tw`bg-right-top`
 tw`bg-top`
+
+tw`bg-[position:200px 100px]`
+tw`bg-[position:var(--value)]`
+tw`bg-[center top 1rem]`

__fixtures__/utilitiesBackgrounds/backgroundSize.js

@@ -6,3 +6,5 @@ theme`backgroundSize`
 tw`bg-auto`
 tw`bg-cover`
 tw`bg-contain`
+
+tw`bg-[length:var(--value)]`

__fixtures__/utilitiesBorders/borderColor.js

@@ -1603,3 +1603,25 @@ tw`border-electric/[.555]`
 tw`border-electric/[var(--myvar)]`
 tw`border-[theme('colors.electric')]`
 tw`border-[theme('colors.electric')]/20`
+
+tw`border-[hsl(60 50% 10% / 50%)]`
+tw`border-[rgba(255, 255, 255, 0)]`
+tw`border-[red_black_white rgb(255, 255,255,0)]`
+tw`border-[red black_blue]`
+tw`border-[red black]`
+tw`border-[hsl(50 50% 50%)]`
+
+tw`border-t-[color:green]`
+tw`border-t-[color:rgba(255, 255, 255, .45)]`
+
+tw`border-r-[color:green]`
+tw`border-r-[color:rgba(255, 255, 255, .45)]`
+
+tw`border-b-[color:green]`
+tw`border-b-[color:rgba(255, 255, 255, .45)]`
+
+tw`border-l-[color:green]`
+tw`border-l-[color:rgba(255, 255, 255, .45)]`
+
+tw`border-[color:green]`
+tw`border-[color:rgba(255, 255, 255, .45)]`

__fixtures__/utilitiesBorders/borderWidth.js

@@ -41,3 +41,9 @@ tw`border-l`
 
 tw`border-[2.5px]`
 tw`border-t-[2.5px]`
+
+tw`border-t-[length:10px]`
+tw`border-r-[length:10px]`
+tw`border-b-[length:10px]`
+tw`border-l-[length:10px]`
+tw`border-[length:10px]`

__fixtures__/utilitiesBorders/divideColor.js

@@ -232,3 +232,5 @@ tw`divide-rose-900`
 tw`divide-y-4 divide-slate-400/25`
 tw`divide-y-4 divide-slate-400/[.24]`
 tw`divide-[#243c5a]`
+
+tw`divide-[color:blue]`

__fixtures__/utilitiesBorders/divideWidth.js

@@ -18,3 +18,9 @@ tw`divide-y-reverse`
 
 tw`divide-x-[3px]`
 tw`divide-y-[3px]`
+
+tw`divide-x-[line-width:3px]`
+tw`divide-x-[length:3px]`
+
+tw`divide-y-[line-width:3px]`
+tw`divide-y-[length:3px]`

__fixtures__/utilitiesBorders/outlineColor.js

@@ -233,3 +233,7 @@ theme`outlineColor`
 // tw`outline-rose-900/[.50]`
 tw`outline-[#243c5a]`
 tw`outline-[var(--outline)]`
+
+tw`outline-[length:500px]`
+tw`outline-[color:red]`
+tw`outline-[percentage:10%]`

__fixtures__/utilitiesBorders/ringColor.js

@@ -250,3 +250,7 @@ tw`ring-electric/[.555]`
 tw`ring-electric/[var(--myvar)]`
 tw`ring-[theme('colors.electric')]`
 tw`ring-[theme('colors.electric')]/20`
+
+tw`ring-[color:green]`
+tw`ring-[color:rgba(255, 255, 255, .45)]`
+tw`ring-[length:10px]`

__fixtures__/utilitiesBorders/ringOffsetColor.js

@@ -255,3 +255,7 @@ tw`ring-offset-electric/[.555]`
 tw`ring-offset-electric/[var(--myvar)]`
 tw`ring-offset-[theme('colors.electric')]`
 tw`ring-offset-[theme('colors.electric')]/20`
+
+tw`ring-offset-[color:green]`
+tw`ring-offset-[color:rgba(255, 255, 255, .45)]`
+tw`ring-offset-[length:10px]`

__fixtures__/utilitiesLayout/tailwind.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+  theme: {
+    container: {
+      padding: {
+        DEFAULT: ['1rem', '2rem'],
+        sm: ['2rem'],
+        lg: '4rem',
+        xl: '6rem',
+        object: '8rem',
+        'object-width': '10rem',
+        'object-min-max': '12rem',
+      },
+      margin: {
+        DEFAULT: ['2rem', '3rem'],
+        sm: ['auto'],
+        lg: '5rem',
+        xl: '7rem',
+      },
+    },
+    extend: {
+      screens: {
+        object: { min: '968px' },
+        'object-width': { 'min-width': '992px' },
+        'object-min-max': { min: '1200px', max: '1600px' },
+      },
+    },
+  },
+}

__fixtures__/utilitiesSvg/stroke.js

@@ -253,3 +253,7 @@ tw`stroke-electric/[.555]`
 tw`stroke-electric/[var(--myvar)]`
 tw`stroke-[theme('colors.electric')]`
 tw`stroke-[theme('colors.electric')]/20`
+
+tw`stroke-[color:green]`
+tw`stroke-[color:rgba(255, 255, 255, .45)]`
+tw`stroke-[length:10px]`

__fixtures__/utilitiesSvg/strokeWidth.js

@@ -8,3 +8,9 @@ tw`stroke-1`
 tw`stroke-2`
 
 tw`stroke-[2px]`
+
+tw`stroke-[color:red]`
+tw`stroke-[length:2px]`
+tw`stroke-[number:10]`
+tw`stroke-[percentage:10%]`
+tw`stroke-[url:url(hand.cur)_2_2, pointer]`

__fixtures__/utilitiesTransitionsAnimation/transitionProperty.js

@@ -12,3 +12,5 @@ tw`transition-shadow`
 tw`transition-transform`
 
 tw`transition-[height]`
+
+tw`transition-[lookup:green]`

__fixtures__/utiltiesFlexboxGrid/flexShrink.js

@@ -8,5 +8,5 @@ theme`flexShrink`
 tw`flex-shrink-0` // Deprecated
 tw`flex-shrink` // Deprecated
 
-// tw`shrink-[2]`
 tw`flex-shrink-[var(--shrink)]` // Deprecated
+tw`shrink-[var(--shrink)]`

__fixtures__/utiltiesInteractivity/accentColor.js

@@ -233,3 +233,6 @@ tw`accent-auto`
 tw`accent-[#50d71e]`
 tw`accent-[theme('colors.red.500')]`
 tw`accent-[theme('colors.red.500')]/20`
+
+tw`accent-[color:red]`
+tw`accent-[any:red]`

__fixtures__/utiltiesInteractivity/caretColor.js

@@ -247,3 +247,7 @@ tw`caret-electric/[.555]`
 tw`caret-electric/[var(--myvar)]`
 tw`caret-[theme('colors.electric')]`
 tw`caret-[theme('colors.electric')]/20`
+
+tw`caret-[color:green]`
+tw`caret-[color:rgba(255, 255, 255, .45)]`
+tw`caret-[any:blah]`

__fixtures__/utiltiesTypography/fontFamily.js

@@ -6,3 +6,6 @@ tw`font-serif`
 tw`font-mono`
 
 tw`font-['Open Sans']`
+
+tw`font-[generic-name:fantasy]`
+tw`font-[family-name:'this and that', this]`