tailwindcss 0.0.0-insiders.fda68f7 → 0.0.0-oxide.6bf5e56

package/src/cli.js

@@ -1,112 +1,35 @@
 #!/usr/bin/env node
 
-import { postcss, lazyCssnano, lazyAutoprefixer } from '../peers/index.js'
-
-import chokidar from 'chokidar'
 import path from 'path'
 import arg from 'arg'
 import fs from 'fs'
-import postcssrc from 'postcss-load-config'
-import { cosmiconfig } from 'cosmiconfig'
-import loadPlugins from 'postcss-load-config/src/plugins' // Little bit scary, looking at private/internal API
-import tailwind from './processTailwindFeatures'
-import resolveConfigInternal from '../resolveConfig'
-import fastGlob from 'fast-glob'
-import getModuleDependencies from './lib/getModuleDependencies'
-import log from './util/log'
-import packageJson from '../package.json'
 
-let env = {
-  DEBUG: process.env.DEBUG !== undefined,
-}
+import { build } from './cli/build'
+import { help } from './cli/help'
+import { init } from './cli/init'
 
-// ---
+function isESM() {
+  const pkgPath = path.resolve('./package.json')
 
-function indentRecursive(node, indent = 0) {
-  node.each &&
-    node.each((child, i) => {
-      if (!child.raws.before || !child.raws.before.trim() || child.raws.before.includes('\n')) {
-        child.raws.before = `\n${node.type !== 'rule' && i > 0 ? '\n' : ''}${'  '.repeat(indent)}`
-      }
-      child.raws.after = `\n${'  '.repeat(indent)}`
-      indentRecursive(child, indent + 1)
-    })
-}
-
-function formatNodes(root) {
-  indentRecursive(root)
-  if (root.first) {
-    root.first.raws.before = ''
+  try {
+    let pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'))
+    return pkg.type && pkg.type === 'module'
+  } catch (err) {
+    return false
   }
 }
 
-function help({ message, usage, commands, options }) {
-  let indent = 2
-
-  // Render header
-  console.log()
-  console.log(`${packageJson.name} v${packageJson.version}`)
-
-  // Render message
-  if (message) {
-    console.log()
-    for (let msg of message.split('\n')) {
-      console.log(msg)
+let configs = isESM()
+  ? {
+      tailwind: 'tailwind.config.cjs',
+      postcss: 'postcss.config.cjs',
     }
-  }
-
-  // Render usage
-  if (usage && usage.length > 0) {
-    console.log()
-    console.log('Usage:')
-    for (let example of usage) {
-      console.log(' '.repeat(indent), example)
-    }
-  }
-
-  // Render commands
-  if (commands && commands.length > 0) {
-    console.log()
-    console.log('Commands:')
-    for (let command of commands) {
-      console.log(' '.repeat(indent), command)
+  : {
+      tailwind: 'tailwind.config.js',
+      postcss: 'postcss.config.js',
     }
-  }
-
-  // Render options
-  if (options) {
-    let groupedOptions = {}
-    for (let [key, value] of Object.entries(options)) {
-      if (typeof value === 'object') {
-        groupedOptions[key] = { ...value, flags: [key] }
-      } else {
-        groupedOptions[value].flags.push(key)
-      }
-    }
-
-    console.log()
-    console.log('Options:')
-    for (let { flags, description, deprecated } of Object.values(groupedOptions)) {
-      if (deprecated) continue
 
-      if (flags.length === 1) {
-        console.log(
-          ' '.repeat(indent + 4 /* 4 = "-i, ".length */),
-          flags.slice().reverse().join(', ').padEnd(20, ' '),
-          description
-        )
-      } else {
-        console.log(
-          ' '.repeat(indent),
-          flags.slice().reverse().join(', ').padEnd(24, ' '),
-          description
-        )
-      }
-    }
-  }
-
-  console.log()
-}
+// ---
 
 function oneOf(...options) {
   return Object.assign(
@@ -128,8 +51,8 @@ let commands = {
   init: {
     run: init,
     args: {
-      '--full': { type: Boolean, description: 'Initialize a full `tailwind.config.js` file' },
-      '--postcss': { type: Boolean, description: 'Initialize a `postcss.config.js` file' },
+      '--full': { type: Boolean, description: `Initialize a full \`${configs.tailwind}\` file` },
+      '--postcss': { type: Boolean, description: `Initialize a \`${configs.postcss}\` file` },
       '-f': '--full',
       '-p': '--postcss',
     },
@@ -139,7 +62,14 @@ let commands = {
     args: {
       '--input': { type: String, description: 'Input file' },
       '--output': { type: String, description: 'Output file' },
-      '--watch': { type: Boolean, description: 'Watch for changes and rebuild as needed' },
+      '--watch': {
+        type: oneOf(String, Boolean),
+        description: 'Watch for changes and rebuild as needed',
+      },
+      '--poll': {
+        type: Boolean,
+        description: 'Use polling instead of filesystem events when watching',
+      },
       '--content': {
         type: String,
         description: 'Content paths to use for removing unused classes',
@@ -166,6 +96,7 @@ let commands = {
       '-o': '--output',
       '-m': '--minify',
       '-w': '--watch',
+      '-p': '--poll',
     },
   },
 }
@@ -231,8 +162,8 @@ let args = (() => {
       let flag = result['_'][i]
       if (!flag.startsWith('-')) continue
 
-      let flagName = flag
-      let handler = flags[flag]
+      let [flagName, flagValue] = flag.split('=')
+      let handler = flags[flagName]
 
       // Resolve flagName & handler
       while (typeof handler === 'string') {
@@ -245,19 +176,27 @@ let args = (() => {
       let args = []
       let offset = i + 1
 
-      // Parse args for current flag
-      while (result['_'][offset] && !result['_'][offset].startsWith('-')) {
-        args.push(result['_'][offset++])
-      }
+      // --flag value syntax was used so we need to pull `value` from `args`
+      if (flagValue === undefined) {
+        // Parse args for current flag
+        while (result['_'][offset] && !result['_'][offset].startsWith('-')) {
+          args.push(result['_'][offset++])
+        }
+
+        // Cleanup manually parsed flags + args
+        result['_'].splice(i, 1 + args.length)
 
-      // Cleanup manually parsed flags + args
-      result['_'].splice(i, 1 + args.length)
+        // No args were provided, use default value defined in handler
+        // One arg was provided, use that directly
+        // Multiple args were provided so pass them all in an array
+        flagValue = args.length === 0 ? undefined : args.length === 1 ? args[0] : args
+      } else {
+        // Remove the whole flag from the args array
+        result['_'].splice(i, 1)
+      }
 
       // Set the resolved value in the `result` object
-      result[flagName] = handler.type(
-        args.length === 0 ? undefined : args.length === 1 ? args[0] : args,
-        flagName
-      )
+      result[flagName] = handler.type(flagValue, flagName)
     }
 
     // Ensure that the `command` is always the first argument in the `args`.
@@ -292,468 +231,4 @@ if (args['--help']) {
   process.exit(0)
 }
 
-run()
-
-// ---
-
-function init() {
-  let messages = []
-
-  let tailwindConfigLocation = path.resolve(args['_'][1] ?? './tailwind.config.js')
-  if (fs.existsSync(tailwindConfigLocation)) {
-    messages.push(`${path.basename(tailwindConfigLocation)} already exists.`)
-  } else {
-    let stubFile = fs.readFileSync(
-      args['--full']
-        ? path.resolve(__dirname, '../stubs/defaultConfig.stub.js')
-        : path.resolve(__dirname, '../stubs/simpleConfig.stub.js'),
-      'utf8'
-    )
-
-    // Change colors import
-    stubFile = stubFile.replace('../colors', 'tailwindcss/colors')
-
-    fs.writeFileSync(tailwindConfigLocation, stubFile, 'utf8')
-
-    messages.push(`Created Tailwind CSS config file: ${path.basename(tailwindConfigLocation)}`)
-  }
-
-  if (args['--postcss']) {
-    let postcssConfigLocation = path.resolve('./postcss.config.js')
-    if (fs.existsSync(postcssConfigLocation)) {
-      messages.push(`${path.basename(postcssConfigLocation)} already exists.`)
-    } else {
-      let stubFile = fs.readFileSync(
-        path.resolve(__dirname, '../stubs/defaultPostCssConfig.stub.js'),
-        'utf8'
-      )
-
-      fs.writeFileSync(postcssConfigLocation, stubFile, 'utf8')
-
-      messages.push(`Created PostCSS config file: ${path.basename(postcssConfigLocation)}`)
-    }
-  }
-
-  if (messages.length > 0) {
-    console.log()
-    for (let message of messages) {
-      console.log(message)
-    }
-  }
-}
-
-async function build() {
-  let input = args['--input']
-  let output = args['--output']
-  let shouldWatch = args['--watch']
-  let includePostCss = args['--postcss']
-
-  // TODO: Deprecate this in future versions
-  if (!input && args['_'][1]) {
-    console.error('[deprecation] Running tailwindcss without -i, please provide an input file.')
-    input = args['--input'] = args['_'][1]
-  }
-
-  if (input && !fs.existsSync((input = path.resolve(input)))) {
-    console.error(`Specified input file ${args['--input']} does not exist.`)
-    process.exit(9)
-  }
-
-  if (args['--config'] && !fs.existsSync((args['--config'] = path.resolve(args['--config'])))) {
-    console.error(`Specified config file ${args['--config']} does not exist.`)
-    process.exit(9)
-  }
-
-  let configPath = args['--config']
-    ? args['--config']
-    : ((defaultPath) => (fs.existsSync(defaultPath) ? defaultPath : null))(
-        path.resolve('./tailwind.config.js')
-      )
-
-  async function loadPostCssPlugins() {
-    let customPostCssPath = typeof args['--postcss'] === 'string' ? args['--postcss'] : undefined
-    let { plugins: configPlugins } = customPostCssPath
-      ? await (async () => {
-          let file = path.resolve(customPostCssPath)
-
-          // Implementation, see: https://unpkg.com/browse/postcss-load-config@3.0.1/src/index.js
-          let { config = {} } = await cosmiconfig('postcss').load(file)
-          if (typeof config === 'function') {
-            config = config()
-          } else {
-            config = Object.assign({}, config)
-          }
-
-          if (!config.plugins) {
-            config.plugins = []
-          }
-
-          return { plugins: loadPlugins(config, file) }
-        })()
-      : await postcssrc()
-
-    let configPluginTailwindIdx = configPlugins.findIndex((plugin) => {
-      if (typeof plugin === 'function' && plugin.name === 'tailwindcss') {
-        return true
-      }
-
-      if (typeof plugin === 'object' && plugin !== null && plugin.postcssPlugin === 'tailwindcss') {
-        return true
-      }
-
-      return false
-    })
-
-    let beforePlugins =
-      configPluginTailwindIdx === -1 ? [] : configPlugins.slice(0, configPluginTailwindIdx)
-    let afterPlugins =
-      configPluginTailwindIdx === -1
-        ? configPlugins
-        : configPlugins.slice(configPluginTailwindIdx + 1)
-
-    return [beforePlugins, afterPlugins]
-  }
-
-  function resolveConfig() {
-    let config = configPath ? require(configPath) : {}
-    let resolvedConfig = resolveConfigInternal(config)
-
-    if (args['--purge']) {
-      log.warn(['The `--purge` flag has been deprecated.', 'Please use `--content` instead.'])
-      if (!args['--content']) {
-        args['--content'] = ['--purge']
-      }
-    }
-
-    if (args['--content']) {
-      resolvedConfig.content = args['--content'].split(/(?<!{[^}]+),/)
-    }
-
-    return resolvedConfig
-  }
-
-  function extractContent(config) {
-    return config.content.content.concat(config.content.safelist)
-  }
-
-  function extractFileGlobs(config) {
-    return extractContent(config).filter((file) => {
-      // Strings in this case are files / globs. If it is something else,
-      // like an object it's probably a raw content object. But this object
-      // is not watchable, so let's remove it.
-      return typeof file === 'string'
-    })
-  }
-
-  function extractRawContent(config) {
-    return extractContent(config).filter((file) => {
-      return typeof file === 'object' && file !== null
-    })
-  }
-
-  function getChangedContent(config) {
-    let changedContent = []
-
-    // Resolve globs from the content config
-    let globs = extractFileGlobs(config)
-    let files = fastGlob.sync(globs)
-
-    for (let file of files) {
-      changedContent.push({
-        content: fs.readFileSync(path.resolve(file), 'utf8'),
-        extension: path.extname(file),
-      })
-    }
-
-    // Resolve raw content in the tailwind config
-    for (let { raw: content, extension = 'html' } of extractRawContent(config)) {
-      changedContent.push({ content, extension })
-    }
-
-    return changedContent
-  }
-
-  async function buildOnce() {
-    let config = resolveConfig()
-    let changedContent = getChangedContent(config)
-
-    let tailwindPlugin = () => {
-      return {
-        postcssPlugin: 'tailwindcss',
-        Once(root, { result }) {
-          tailwind(({ createContext }) => {
-            return () => {
-              return createContext(config, changedContent)
-            }
-          })(root, result)
-        },
-      }
-    }
-
-    tailwindPlugin.postcss = true
-
-    let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() : [[], []]
-
-    let plugins = [
-      ...beforePlugins,
-      tailwindPlugin,
-      !args['--minify'] && formatNodes,
-      ...afterPlugins,
-      !args['--no-autoprefixer'] &&
-        (() => {
-          // Try to load a local `autoprefixer` version first
-          try {
-            return require('autoprefixer')
-          } catch {}
-
-          return lazyAutoprefixer()
-        })(),
-      args['--minify'] &&
-        (() => {
-          let options = { preset: ['default', { cssDeclarationSorter: false }] }
-
-          // Try to load a local `cssnano` version first
-          try {
-            return require('cssnano')
-          } catch {}
-
-          return lazyCssnano()(options)
-        })(),
-    ].filter(Boolean)
-
-    let processor = postcss(plugins)
-
-    function processCSS(css) {
-      let start = process.hrtime.bigint()
-      return Promise.resolve()
-        .then(() => (output ? fs.promises.mkdir(path.dirname(output), { recursive: true }) : null))
-        .then(() => processor.process(css, { from: input, to: output }))
-        .then((result) => {
-          if (!output) {
-            return process.stdout.write(result.css)
-          }
-          return Promise.all(
-            [
-              fs.promises.writeFile(output, result.css, () => true),
-              result.map && fs.writeFile(output + '.map', result.map.toString(), () => true),
-            ].filter(Boolean)
-          )
-        })
-        .then(() => {
-          let end = process.hrtime.bigint()
-          console.error()
-          console.error('Done in', (end - start) / BigInt(1e6) + 'ms.')
-        })
-    }
-
-    let css = input
-      ? fs.readFileSync(path.resolve(input), 'utf8')
-      : '@tailwind base; @tailwind components; @tailwind utilities'
-    return processCSS(css)
-  }
-
-  let context = null
-
-  async function startWatcher() {
-    let changedContent = []
-    let configDependencies = []
-    let contextDependencies = new Set()
-    let watcher = null
-
-    function refreshConfig() {
-      env.DEBUG && console.time('Module dependencies')
-      for (let file of configDependencies) {
-        delete require.cache[require.resolve(file)]
-      }
-
-      if (configPath) {
-        configDependencies = getModuleDependencies(configPath).map(({ file }) => file)
-
-        for (let dependency of configDependencies) {
-          contextDependencies.add(dependency)
-        }
-      }
-      env.DEBUG && console.timeEnd('Module dependencies')
-
-      return resolveConfig()
-    }
-
-    let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() : [[], []]
-
-    let plugins = [
-      ...beforePlugins,
-      '__TAILWIND_PLUGIN_POSITION__',
-      !args['--minify'] && formatNodes,
-      ...afterPlugins,
-      !args['--no-autoprefixer'] &&
-        (() => {
-          // Try to load a local `autoprefixer` version first
-          try {
-            return require('autoprefixer')
-          } catch {}
-
-          return lazyAutoprefixer()
-        })(),
-      args['--minify'] &&
-        (() => {
-          let options = { preset: ['default', { cssDeclarationSorter: false }] }
-
-          // Try to load a local `cssnano` version first
-          try {
-            return require('cssnano')
-          } catch {}
-
-          return lazyCssnano()(options)
-        })(),
-    ].filter(Boolean)
-
-    async function rebuild(config) {
-      env.DEBUG && console.time('Finished in')
-
-      let tailwindPlugin = () => {
-        return {
-          postcssPlugin: 'tailwindcss',
-          Once(root, { result }) {
-            env.DEBUG && console.time('Compiling CSS')
-            tailwind(({ createContext }) => {
-              console.error()
-              console.error('Rebuilding...')
-
-              return () => {
-                if (context !== null) {
-                  context.changedContent = changedContent.splice(0)
-                  return context
-                }
-
-                env.DEBUG && console.time('Creating context')
-                context = createContext(config, changedContent.splice(0))
-                env.DEBUG && console.timeEnd('Creating context')
-                return context
-              }
-            })(root, result)
-            env.DEBUG && console.timeEnd('Compiling CSS')
-          },
-        }
-      }
-
-      tailwindPlugin.postcss = true
-
-      let tailwindPluginIdx = plugins.indexOf('__TAILWIND_PLUGIN_POSITION__')
-      let copy = plugins.slice()
-      copy.splice(tailwindPluginIdx, 1, tailwindPlugin)
-      let processor = postcss(copy)
-
-      function processCSS(css) {
-        let start = process.hrtime.bigint()
-        return Promise.resolve()
-          .then(() =>
-            output ? fs.promises.mkdir(path.dirname(output), { recursive: true }) : null
-          )
-          .then(() => processor.process(css, { from: input, to: output }))
-          .then(async (result) => {
-            for (let message of result.messages) {
-              if (message.type === 'dependency') {
-                contextDependencies.add(message.file)
-              }
-            }
-            watcher.add([...contextDependencies])
-
-            if (!output) {
-              return process.stdout.write(result.css)
-            }
-
-            await Promise.all(
-              [
-                fs.promises.writeFile(output, result.css, () => true),
-                result.map && fs.writeFile(output + '.map', result.map.toString(), () => true),
-              ].filter(Boolean)
-            )
-          })
-          .then(() => {
-            let end = process.hrtime.bigint()
-            console.error('Done in', (end - start) / BigInt(1e6) + 'ms.')
-          })
-          .catch((err) => {
-            if (err.name === 'CssSyntaxError') {
-              console.error(err.toString())
-            } else {
-              console.error(err)
-            }
-          })
-      }
-
-      let css = input
-        ? fs.readFileSync(path.resolve(input), 'utf8')
-        : '@tailwind base; @tailwind components; @tailwind utilities'
-      let result = await processCSS(css)
-      env.DEBUG && console.timeEnd('Finished in')
-      return result
-    }
-
-    let config = refreshConfig(configPath)
-
-    if (input) {
-      contextDependencies.add(path.resolve(input))
-    }
-
-    watcher = chokidar.watch([...contextDependencies, ...extractFileGlobs(config)], {
-      ignoreInitial: true,
-    })
-
-    let chain = Promise.resolve()
-
-    watcher.on('change', async (file) => {
-      if (contextDependencies.has(file)) {
-        env.DEBUG && console.time('Resolve config')
-        context = null
-        config = refreshConfig(configPath)
-        env.DEBUG && console.timeEnd('Resolve config')
-
-        env.DEBUG && console.time('Watch new files')
-        let globs = extractFileGlobs(config)
-        watcher.add(configDependencies)
-        watcher.add(globs)
-        env.DEBUG && console.timeEnd('Watch new files')
-
-        chain = chain.then(async () => {
-          changedContent.push(...getChangedContent(config))
-          await rebuild(config)
-        })
-      } else {
-        chain = chain.then(async () => {
-          changedContent.push({
-            content: fs.readFileSync(path.resolve(file), 'utf8'),
-            extension: path.extname(file),
-          })
-
-          await rebuild(config)
-        })
-      }
-    })
-
-    watcher.on('add', async (file) => {
-      chain = chain.then(async () => {
-        changedContent.push({
-          content: fs.readFileSync(path.resolve(file), 'utf8'),
-          extension: path.extname(file),
-        })
-
-        await rebuild(config)
-      })
-    })
-
-    chain = chain.then(() => {
-      changedContent.push(...getChangedContent(config))
-      return rebuild(config)
-    })
-  }
-
-  if (shouldWatch) {
-    /* Abort the watcher if stdin is closed to avoid zombie processes */
-    process.stdin.on('end', () => process.exit(0))
-    process.stdin.resume()
-    startWatcher()
-  } else {
-    buildOnce()
-  }
-}
+run(args, configs)

package/src/corePluginList.js

@@ -1 +1 @@
-export default ["preflight","container","accessibility","pointerEvents","visibility","position","inset","isolation","zIndex","order","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","float","clear","margin","boxSizing","display","aspectRatio","height","maxHeight","minHeight","width","minWidth","maxWidth","flex","flexShrink","flexGrow","tableLayout","borderCollapse","transformOrigin","translate","rotate","skew","scale","transform","animation","cursor","userSelect","resize","listStylePosition","listStyleType","appearance","columns","gridAutoColumns","gridAutoFlow","gridAutoRows","gridTemplateColumns","gridTemplateRows","flexDirection","flexWrap","placeContent","placeItems","alignContent","alignItems","justifyContent","justifyItems","gap","space","divideWidth","divideStyle","divideColor","divideOpacity","placeSelf","alignSelf","justifySelf","overflow","overscrollBehavior","scrollBehavior","textOverflow","whitespace","wordBreak","borderRadius","borderWidth","borderStyle","borderColor","borderOpacity","backgroundColor","backgroundOpacity","backgroundImage","gradientColorStops","boxDecorationBreak","backgroundSize","backgroundAttachment","backgroundClip","backgroundPosition","backgroundRepeat","backgroundOrigin","fill","stroke","strokeWidth","objectFit","objectPosition","padding","textAlign","textIndent","verticalAlign","fontFamily","fontSize","fontWeight","textTransform","fontStyle","fontVariantNumeric","lineHeight","letterSpacing","textColor","textOpacity","textDecoration","fontSmoothing","placeholderColor","placeholderOpacity","caretColor","accentColor","opacity","backgroundBlendMode","mixBlendMode","boxShadow","outline","ringWidth","ringColor","ringOpacity","ringOffsetWidth","ringOffsetColor","blur","brightness","contrast","dropShadow","grayscale","hueRotate","invert","saturate","sepia","filter","backdropBlur","backdropBrightness","backdropContrast","backdropGrayscale","backdropHueRotate","backdropInvert","backdropOpacity","backdropSaturate","backdropSepia","backdropFilter","transitionProperty","transitionDelay","transitionDuration","transitionTimingFunction","willChange","content"]
+export default ["preflight","container","accessibility","pointerEvents","visibility","position","inset","isolation","zIndex","order","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","float","clear","margin","boxSizing","display","aspectRatio","height","maxHeight","minHeight","width","minWidth","maxWidth","flex","flexShrink","flexGrow","flexBasis","tableLayout","borderCollapse","borderSpacing","transformOrigin","translate","rotate","skew","scale","transform","animation","cursor","touchAction","userSelect","resize","scrollSnapType","scrollSnapAlign","scrollSnapStop","scrollMargin","scrollPadding","listStylePosition","listStyleType","appearance","columns","breakBefore","breakInside","breakAfter","gridAutoColumns","gridAutoFlow","gridAutoRows","gridTemplateColumns","gridTemplateRows","flexDirection","flexWrap","placeContent","placeItems","alignContent","alignItems","justifyContent","justifyItems","gap","space","divideWidth","divideStyle","divideColor","divideOpacity","placeSelf","alignSelf","justifySelf","overflow","overscrollBehavior","scrollBehavior","textOverflow","whitespace","wordBreak","borderRadius","borderWidth","borderStyle","borderColor","borderOpacity","backgroundColor","backgroundOpacity","backgroundImage","gradientColorStops","boxDecorationBreak","backgroundSize","backgroundAttachment","backgroundClip","backgroundPosition","backgroundRepeat","backgroundOrigin","fill","stroke","strokeWidth","objectFit","objectPosition","padding","textAlign","textIndent","verticalAlign","fontFamily","fontSize","fontWeight","textTransform","fontStyle","fontVariantNumeric","lineHeight","letterSpacing","textColor","textOpacity","textDecoration","textDecorationColor","textDecorationStyle","textDecorationThickness","textUnderlineOffset","fontSmoothing","placeholderColor","placeholderOpacity","caretColor","accentColor","opacity","backgroundBlendMode","mixBlendMode","boxShadow","boxShadowColor","outlineStyle","outlineWidth","outlineOffset","outlineColor","ringWidth","ringColor","ringOpacity","ringOffsetWidth","ringOffsetColor","blur","brightness","contrast","dropShadow","grayscale","hueRotate","invert","saturate","sepia","filter","backdropBlur","backdropBrightness","backdropContrast","backdropGrayscale","backdropHueRotate","backdropInvert","backdropOpacity","backdropSaturate","backdropSepia","backdropFilter","transitionProperty","transitionDelay","transitionDuration","transitionTimingFunction","willChange","content"]