tailwindcss 3.0.0 → 3.0.4

package/src/corePlugins.js

@@ -529,27 +529,26 @@ export let corePlugins = {
     { supportsNegativeValues: true }
   ),
 
-  transform: ({ addBase, addUtilities }) => {
-    addBase({
-      '@defaults transform': {
-        '--tw-translate-x': '0',
-        '--tw-translate-y': '0',
-        '--tw-rotate': '0',
-        '--tw-skew-x': '0',
-        '--tw-skew-y': '0',
-        '--tw-scale-x': '1',
-        '--tw-scale-y': '1',
-        '--tw-transform': [
-          'translateX(var(--tw-translate-x))',
-          'translateY(var(--tw-translate-y))',
-          'rotate(var(--tw-rotate))',
-          'skewX(var(--tw-skew-x))',
-          'skewY(var(--tw-skew-y))',
-          'scaleX(var(--tw-scale-x))',
-          'scaleY(var(--tw-scale-y))',
-        ].join(' '),
-      },
+  transform: ({ addDefaults, addUtilities }) => {
+    addDefaults('transform', {
+      '--tw-translate-x': '0',
+      '--tw-translate-y': '0',
+      '--tw-rotate': '0',
+      '--tw-skew-x': '0',
+      '--tw-skew-y': '0',
+      '--tw-scale-x': '1',
+      '--tw-scale-y': '1',
+      '--tw-transform': [
+        'translateX(var(--tw-translate-x))',
+        'translateY(var(--tw-translate-y))',
+        'rotate(var(--tw-rotate))',
+        'skewX(var(--tw-skew-x))',
+        'skewY(var(--tw-skew-y))',
+        'scaleX(var(--tw-scale-x))',
+        'scaleY(var(--tw-scale-y))',
+      ].join(' '),
     })
+
     addUtilities({
       '.transform': { '@defaults transform': {}, transform: 'var(--tw-transform)' },
       '.transform-cpu': {
@@ -611,14 +610,12 @@ export let corePlugins = {
 
   cursor: createUtilityPlugin('cursor'),
 
-  touchAction: ({ addBase, addUtilities }) => {
-    addBase({
-      '@defaults touch-action': {
-        '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)',
-      },
+  touchAction: ({ addDefaults, addUtilities }) => {
+    addDefaults('touch-action', {
+      '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)',
     })
 
     addUtilities({
@@ -681,11 +678,9 @@ export let corePlugins = {
     })
   },
 
-  scrollSnapType: ({ addUtilities, addBase }) => {
-    addBase({
-      '@defaults scroll-snap-type': {
-        '--tw-scroll-snap-strictness': 'proximity',
-      },
+  scrollSnapType: ({ addDefaults, addUtilities }) => {
+    addDefaults('scroll-snap-type', {
+      '--tw-scroll-snap-strictness': 'proximity',
     })
 
     addUtilities({
@@ -1182,22 +1177,21 @@ export let corePlugins = {
     })
   },
 
-  borderColor: ({ addBase, matchUtilities, theme, corePlugins }) => {
+  borderColor: ({ addDefaults, matchUtilities, theme, corePlugins }) => {
     if (!corePlugins('borderOpacity')) {
       let value = theme('borderColor.DEFAULT', 'currentColor')
-      addBase({
-        '@defaults border-width': {
-          'border-color': toColorValue(value),
-        },
+      addDefaults('border-width', {
+        'border-color': toColorValue(value),
       })
     } else {
-      addBase({
-        '@defaults border-width': withAlphaVariable({
+      addDefaults(
+        'border-width',
+        withAlphaVariable({
           color: theme('borderColor.DEFAULT', 'currentColor'),
           property: 'border-color',
           variable: '--tw-border-opacity',
-        }),
-      })
+        })
+      )
     }
 
     matchUtilities(
@@ -1660,10 +1654,10 @@ export let corePlugins = {
 
   textDecoration: ({ addUtilities }) => {
     addUtilities({
-      '.underline': { 'text-decoration': 'underline' },
-      '.overline': { 'text-decoration': 'overline' },
-      '.line-through': { 'text-decoration': 'line-through' },
-      '.no-underline': { 'text-decoration': 'none' },
+      '.underline': { 'text-decoration-line': 'underline' },
+      '.overline': { 'text-decoration-line': 'overline' },
+      '.line-through': { 'text-decoration-line': 'line-through' },
+      '.no-underline': { 'text-decoration-line': 'none' },
     })
   },
 
@@ -1823,14 +1817,12 @@ export let corePlugins = {
       `var(--tw-shadow)`,
     ].join(', ')
 
-    return function ({ matchUtilities, addBase, theme }) {
-      addBase({
-        '@defaults box-shadow': {
-          '--tw-ring-offset-shadow': '0 0 #0000',
-          '--tw-ring-shadow': '0 0 #0000',
-          '--tw-shadow': '0 0 #0000',
-          '--tw-shadow-colored': '0 0 #0000',
-        },
+    return function ({ matchUtilities, addDefaults, theme }) {
+      addDefaults(' box-shadow', {
+        '--tw-ring-offset-shadow': '0 0 #0000',
+        '--tw-ring-shadow': '0 0 #0000',
+        '--tw-shadow': '0 0 #0000',
+        '--tw-shadow-colored': '0 0 #0000',
       })
 
       matchUtilities(
@@ -1908,7 +1900,7 @@ export let corePlugins = {
     )
   },
 
-  ringWidth: ({ matchUtilities, addBase, addUtilities, theme }) => {
+  ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme }) => {
     let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
     let ringColorDefault = withAlphaValue(
       theme('ringColor.DEFAULT'),
@@ -1916,17 +1908,15 @@ export let corePlugins = {
       `rgb(147 197 253 / ${ringOpacityDefault})`
     )
 
-    addBase({
-      '@defaults ring-width': {
-        '--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',
-        '--tw-shadow': '0 0 #0000',
-        '--tw-shadow-colored': '0 0 #0000',
-      },
+    addDefaults('ring-width', {
+      '--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',
+      '--tw-shadow': '0 0 #0000',
+      '--tw-shadow-colored': '0 0 #0000',
     })
 
     matchUtilities(
@@ -2133,30 +2123,28 @@ export let corePlugins = {
     )
   },
 
-  filter: ({ addBase, addUtilities }) => {
-    addBase({
-      '@defaults filter': {
-        '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-filter': [
-          'var(--tw-blur)',
-          'var(--tw-brightness)',
-          'var(--tw-contrast)',
-          'var(--tw-grayscale)',
-          'var(--tw-hue-rotate)',
-          'var(--tw-invert)',
-          'var(--tw-saturate)',
-          'var(--tw-sepia)',
-          'var(--tw-drop-shadow)',
-        ].join(' '),
-      },
+  filter: ({ addDefaults, addUtilities }) => {
+    addDefaults('filter', {
+      '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-filter': [
+        'var(--tw-blur)',
+        'var(--tw-brightness)',
+        'var(--tw-contrast)',
+        'var(--tw-grayscale)',
+        'var(--tw-hue-rotate)',
+        'var(--tw-invert)',
+        'var(--tw-saturate)',
+        'var(--tw-sepia)',
+        'var(--tw-drop-shadow)',
+      ].join(' '),
     })
     addUtilities({
       '.filter': { '@defaults filter': {}, filter: 'var(--tw-filter)' },
@@ -2299,30 +2287,28 @@ export let corePlugins = {
     )
   },
 
-  backdropFilter: ({ addBase, addUtilities }) => {
-    addBase({
-      '@defaults backdrop-filter': {
-        '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-filter': [
-          'var(--tw-backdrop-blur)',
-          'var(--tw-backdrop-brightness)',
-          'var(--tw-backdrop-contrast)',
-          'var(--tw-backdrop-grayscale)',
-          'var(--tw-backdrop-hue-rotate)',
-          'var(--tw-backdrop-invert)',
-          'var(--tw-backdrop-opacity)',
-          'var(--tw-backdrop-saturate)',
-          'var(--tw-backdrop-sepia)',
-        ].join(' '),
-      },
+  backdropFilter: ({ addDefaults, addUtilities }) => {
+    addDefaults('backdrop-filter', {
+      '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-backdrop-filter': [
+        'var(--tw-backdrop-blur)',
+        'var(--tw-backdrop-brightness)',
+        'var(--tw-backdrop-contrast)',
+        'var(--tw-backdrop-grayscale)',
+        'var(--tw-backdrop-hue-rotate)',
+        'var(--tw-backdrop-invert)',
+        'var(--tw-backdrop-opacity)',
+        'var(--tw-backdrop-saturate)',
+        'var(--tw-backdrop-sepia)',
+      ].join(' '),
     })
     addUtilities({
       '.backdrop-filter': {

package/src/css/preflight.css

@@ -144,7 +144,7 @@ sup {
 table {
   text-indent: 0; /* 1 */
   border-color: inherit; /* 2 */
-  border-collapse: collapse;  /* 3 */
+  border-collapse: collapse; /* 3 */
 }
 
 /*
@@ -289,6 +289,7 @@ legend {
 
 ol,
 ul,
+li,
 menu {
   list-style: none;
   margin: 0;
@@ -310,7 +311,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  opacity: 1;  /* 1 */
+  opacity: 1; /* 1 */
   color: theme('colors.gray.400', #9ca3af); /* 2 */
 }
 

package/src/featureFlags.js

@@ -2,7 +2,11 @@ import chalk from 'chalk'
 import log from './util/log'
 
 let defaults = {
-  optimizeUniversalDefaults: true,
+  // TODO: Drop this once we can safely rely on optimizeUniversalDefaults being
+  // the default.
+  optimizeUniversalDefaults: process.env.NODE_ENV === 'test' ? true : false,
+
+  // optimizeUniversalDefaults: true
 }
 
 let featureFlags = {

package/src/lib/expandApplyAtRules.js

@@ -1,8 +1,24 @@
 import postcss from 'postcss'
+import parser from 'postcss-selector-parser'
 import { resolveMatches } from './generateRules'
 import bigSign from '../util/bigSign'
 import escapeClassName from '../util/escapeClassName'
 
+function containsBase(selector, classCandidateBase, separator) {
+  return parser((selectors) => {
+    let contains = false
+
+    selectors.walkClasses((classSelector) => {
+      if (classSelector.value.split(separator).pop() === classCandidateBase) {
+        contains = true
+        return false
+      }
+    })
+
+    return contains
+  }).transformSync(selector)
+}
+
 function prefix(context, selector) {
   let prefix = context.tailwindConfig.prefix
   return typeof prefix === 'function' ? prefix(selector) : prefix + selector
@@ -129,10 +145,10 @@ function processApply(root, context) {
     // TODO: Should we use postcss-selector-parser for this instead?
     function replaceSelector(selector, utilitySelectors, candidate) {
       let needle = `.${escapeClassName(candidate)}`
-      let utilitySelectorsList = utilitySelectors.split(/\s*,\s*/g)
+      let utilitySelectorsList = utilitySelectors.split(/\s*\,(?![^(]*\))\s*/g)
 
       return selector
-        .split(/\s*,\s*/g)
+        .split(/\s*\,(?![^(]*\))\s*/g)
         .map((s) => {
           let replaced = []
 
@@ -196,7 +212,18 @@ function processApply(root, context) {
       let siblings = []
 
       for (let [applyCandidate, important, rules] of candidates) {
+        let base = applyCandidate.split(context.tailwindConfig.separator).pop()
+
         for (let [meta, node] of rules) {
+          if (
+            containsBase(parent.selector, base, context.tailwindConfig.separator) &&
+            containsBase(node.selector, base, context.tailwindConfig.separator)
+          ) {
+            throw node.error(
+              `Circular dependency detected when using: \`@apply ${applyCandidate}\``
+            )
+          }
+
           let root = postcss.root({ nodes: [node.clone()] })
           let canRewriteSelector =
             node.type !== 'atrule' || (node.type === 'atrule' && node.name !== 'keyframes')

package/src/lib/expandTailwindAtRules.js

@@ -99,6 +99,7 @@ function buildStylesheet(rules, context) {
 
   let returnValue = {
     base: new Set(),
+    defaults: new Set(),
     components: new Set(),
     utilities: new Set(),
     variants: new Set(),
@@ -125,6 +126,11 @@ function buildStylesheet(rules, context) {
       continue
     }
 
+    if (sort & context.layerOrder.defaults) {
+      returnValue.defaults.add(rule)
+      continue
+    }
+
     if (sort & context.layerOrder.components) {
       returnValue.components.add(rule)
       continue
@@ -144,6 +150,8 @@ function buildStylesheet(rules, context) {
   return returnValue
 }
 
+export const DEFAULTS_LAYER = Symbol('defaults-layer')
+
 export default function expandTailwindAtRules(context) {
   return (root) => {
     let layerNodes = {
@@ -202,6 +210,7 @@ export default function expandTailwindAtRules(context) {
     env.DEBUG && console.timeEnd('Build stylesheet')
 
     let {
+      defaults: defaultNodes,
       base: baseNodes,
       components: componentNodes,
       utilities: utilityNodes,
@@ -214,6 +223,20 @@ export default function expandTailwindAtRules(context) {
 
     if (layerNodes.base) {
       layerNodes.base.before(cloneNodes([...baseNodes], layerNodes.base.source))
+    }
+
+    // @defaults rules are unconditionally added first to ensure that
+    // using any utility that relies on defaults will work even when
+    // compiled in an isolated environment like CSS modules
+    if (context.tailwindConfig[DEFAULTS_LAYER] !== false) {
+      if (layerNodes.base) {
+        layerNodes.base.after(cloneNodes([...defaultNodes], root.source))
+      } else {
+        root.prepend(cloneNodes([...defaultNodes], root.source))
+      }
+    }
+
+    if (layerNodes.base) {
       layerNodes.base.remove()
     }
 

package/src/lib/generateRules.js

@@ -248,6 +248,21 @@ function parseRules(rule, cache, options = {}) {
   return [cache.get(rule), options]
 }
 
+const IS_VALID_PROPERTY_NAME = /^[a-z_-]/
+
+function isValidPropName(name) {
+  return IS_VALID_PROPERTY_NAME.test(name)
+}
+
+function isParsableCssValue(property, value) {
+  try {
+    postcss.parse(`a{${property}:${value}}`).toResult()
+    return true
+  } catch (err) {
+    return false
+  }
+}
+
 function extractArbitraryProperty(classCandidate, context) {
   let [, property, value] = classCandidate.match(/^\[([a-zA-Z0-9-_]+):(\S+)\]$/) ?? []
 
@@ -255,9 +270,17 @@ function extractArbitraryProperty(classCandidate, context) {
     return null
   }
 
+  if (!isValidPropName(property)) {
+    return null
+  }
+
+  if (!isValidArbitraryValue(value)) {
+    return null
+  }
+
   let normalized = normalize(value)
 
-  if (!isValidArbitraryValue(normalized)) {
+  if (!isParsableCssValue(property, normalized)) {
     return null
   }
 

package/src/lib/resolveDefaultsAtRules.js

@@ -71,6 +71,8 @@ function extractElementSelector(selector) {
 export default function resolveDefaultsAtRules({ tailwindConfig }) {
   return (root) => {
     let variableNodeMap = new Map()
+
+    /** @type {Set<import('postcss').AtRule>} */
     let universals = new Set()
 
     root.walkAtRules('defaults', (rule) => {
@@ -90,31 +92,50 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
     })
 
     for (let universal of universals) {
-      let selectors = new Set()
+      /** @type {Map<string, Set<string>>} */
+      let selectorGroups = new Map()
 
       let rules = variableNodeMap.get(universal.params) ?? []
 
       for (let rule of rules) {
         for (let selector of extractElementSelector(rule.selector)) {
+          // If selector contains a vendor prefix after a pseudo element or class,
+          // we consider them separately because merging the declarations into
+          // a single rule will cause browsers that do not understand the
+          // vendor prefix to throw out the whole rule
+          let selectorGroupName =
+            selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__'
+
+          let selectors = selectorGroups.get(selectorGroupName) ?? new Set()
+          selectorGroups.set(selectorGroupName, selectors)
+
           selectors.add(selector)
         }
       }
 
-      if (selectors.size === 0) {
+      if (selectorGroups.size === 0) {
         universal.remove()
         continue
       }
 
-      let universalRule = postcss.rule()
-
       if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
-        universalRule.selectors = [...selectors]
+        for (let [, selectors] of selectorGroups) {
+          let universalRule = postcss.rule()
+
+          universalRule.selectors = [...selectors]
+
+          universalRule.append(universal.nodes.map((node) => node.clone()))
+          universal.before(universalRule)
+        }
       } else {
+        let universalRule = postcss.rule()
+
         universalRule.selectors = ['*', '::before', '::after']
+
+        universalRule.append(universal.nodes)
+        universal.before(universalRule)
       }
 
-      universalRule.append(universal.nodes)
-      universal.before(universalRule)
       universal.remove()
     }
   }

package/src/lib/setupContextUtils.js

@@ -233,6 +233,28 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
           .push([{ sort: offset, layer: 'base' }, rule])
       }
     },
+    /**
+     * @param {string} group
+     * @param {Record<string, string | string[]>} declarations
+     */
+    addDefaults(group, declarations) {
+      const groups = {
+        [`@defaults ${group}`]: declarations,
+      }
+
+      for (let [identifier, rule] of withIdentifiers(groups)) {
+        let prefixedIdentifier = prefixIdentifier(identifier, {})
+        let offset = offsets.base++
+
+        if (!context.candidateRuleMap.has(prefixedIdentifier)) {
+          context.candidateRuleMap.set(prefixedIdentifier, [])
+        }
+
+        context.candidateRuleMap
+          .get(prefixedIdentifier)
+          .push([{ sort: offset, layer: 'defaults' }, rule])
+      }
+    },
     addComponents(components, options) {
       let defaultOptions = {
         respectPrefix: true,
@@ -528,6 +550,7 @@ function registerPlugins(plugins, context) {
   let variantList = []
   let variantMap = new Map()
   let offsets = {
+    defaults: 0n,
     base: 0n,
     components: 0n,
     utilities: 0n,
@@ -555,6 +578,7 @@ function registerPlugins(plugins, context) {
 
   let highestOffset = ((args) => args.reduce((m, e) => (e > m ? e : m)))([
     offsets.base,
+    offsets.defaults,
     offsets.components,
     offsets.utilities,
     offsets.user,
@@ -566,13 +590,14 @@ function registerPlugins(plugins, context) {
   context.arbitraryPropertiesSort = ((1n << reservedBits) << 0n) - 1n
 
   context.layerOrder = {
-    base: (1n << reservedBits) << 0n,
-    components: (1n << reservedBits) << 1n,
-    utilities: (1n << reservedBits) << 2n,
-    user: (1n << reservedBits) << 3n,
+    defaults: (1n << reservedBits) << 0n,
+    base: (1n << reservedBits) << 1n,
+    components: (1n << reservedBits) << 2n,
+    utilities: (1n << reservedBits) << 3n,
+    user: (1n << reservedBits) << 4n,
   }
 
-  reservedBits += 4n
+  reservedBits += 5n
 
   let offset = 0
   context.variantOrder = new Map(
@@ -626,7 +651,15 @@ function registerPlugins(plugins, context) {
         let utils = Array.isArray(util)
           ? (() => {
               let [utilName, options] = util
-              return Object.keys(options?.values ?? {}).map((value) => formatClass(utilName, value))
+              let classes = Object.keys(options?.values ?? {}).map((value) =>
+                formatClass(utilName, value)
+              )
+
+              if (options?.supportsNegativeValues) {
+                classes = [...classes, ...classes.map((cls) => '-' + cls)]
+              }
+
+              return classes
             })()
           : [util]
 

package/src/util/defaults.js

@@ -5,6 +5,12 @@ export function defaults(target, ...sources) {
         target[k] = source[k]
       }
     }
+
+    for (let k of Object.getOwnPropertySymbols(source)) {
+      if (!target?.hasOwnProperty?.(k)) {
+        target[k] = source[k]
+      }
+    }
   }
 
   return target

package/src/util/log.js

@@ -12,6 +12,10 @@ function log(chalk, messages, key) {
   messages.forEach((message) => console.warn(chalk, '-', message))
 }
 
+export function dim(input) {
+  return chalk.dim(input)
+}
+
 export default {
   info(key, messages) {
     log(chalk.bold.cyan('info'), ...(Array.isArray(key) ? [key] : [messages, key]))