tailwindcss 0.0.0-insiders.bd970d0 → 0.0.0-insiders.bda8421

package/resolveConfig.d.ts

@@ -1,11 +1,30 @@
-import type { Config, ResolvableTo } from './types/config'
+import { Config, ResolvableTo, ThemeConfig } from './types/config'
+import { DefaultTheme } from './types/generated/default-theme'
+import { DefaultColors } from './types/generated/colors'
+
+type ResolvedConfig<T extends Config> = Omit<T, 'theme'> & {
+  theme: MergeThemes<
+    UnwrapResolvables<Omit<T['theme'], 'extend'>>,
+    T['theme'] extends { extend: infer TExtend } ? UnwrapResolvables<TExtend> : {}
+  >
+}
 
 type UnwrapResolvables<T> = {
   [K in keyof T]: T[K] extends ResolvableTo<infer R> ? R : T[K]
 }
 
-type ResolvedConfig<T extends Config> = Omit<T, 'theme'> & {
-  theme: UnwrapResolvables<T['theme']>
+type ThemeConfigResolved = UnwrapResolvables<ThemeConfig>
+type DefaultThemeFull = DefaultTheme & { colors: DefaultColors }
+
+type MergeThemes<Overrides extends object, Extensions extends object> = {
+  [K in keyof ThemeConfigResolved | keyof Overrides]: (K extends keyof Overrides
+    ? Overrides[K]
+    : K extends keyof DefaultThemeFull
+    ? DefaultThemeFull[K]
+    : K extends keyof ThemeConfigResolved
+    ? ThemeConfigResolved[K]
+    : never) &
+    (K extends keyof Extensions ? Extensions[K] : {})
 }
 
 declare function resolveConfig<T extends Config>(config: T): ResolvedConfig<T>

package/scripts/generate-types.js

@@ -91,9 +91,8 @@ fs.writeFileSync(
   path.join(process.cwd(), 'types', 'generated', 'default-theme.d.ts'),
   prettier.format(
     `
-    import { Config } from '../../types'
     type CSSDeclarationList = Record<string, string>
-    export type DefaultTheme = Config['theme'] & { ${defaultThemeTypes} }
+    export type DefaultTheme = { ${defaultThemeTypes} }
   `,
     {
       semi: false,

package/scripts/release-notes.js

@@ -1,5 +1,5 @@
 // Given a version, figure out what the release notes are so that we can use this to pre-fill the
-// release notes on a GitHub release for the current version.
+// relase notes on a GitHub release for the current version.
 
 let path = require('path')
 let fs = require('fs')

package/src/cli/build/deps.js

@@ -0,0 +1,56 @@
+// @ts-check
+
+import {
+  // @ts-ignore
+  lazyPostcss,
+
+  // @ts-ignore
+  lazyPostcssImport,
+
+  // @ts-ignore
+  lazyCssnano,
+
+  // @ts-ignore
+  lazyAutoprefixer,
+} from '../../../peers/index.js'
+
+/**
+ * @returns {import('postcss')}
+ */
+export function loadPostcss() {
+  // Try to load a local `postcss` version first
+  try {
+    return require('postcss')
+  } catch {}
+
+  return lazyPostcss()
+}
+
+export function loadPostcssImport() {
+  // Try to load a local `postcss-import` version first
+  try {
+    return require('postcss-import')
+  } catch {}
+
+  return lazyPostcssImport()
+}
+
+export function loadCssNano() {
+  let options = { preset: ['default', { cssDeclarationSorter: false }] }
+
+  // Try to load a local `cssnano` version first
+  try {
+    return require('cssnano')
+  } catch {}
+
+  return lazyCssnano()(options)
+}
+
+export function loadAutoprefixer() {
+  // Try to load a local `autoprefixer` version first
+  try {
+    return require('autoprefixer')
+  } catch {}
+
+  return lazyAutoprefixer()
+}

package/src/cli/build/index.js

@@ -25,10 +25,6 @@ export async function build(args) {
     process.exit(9)
   }
 
-  if (args['--no-autoprefixer']) {
-    console.error('[deprecation] The --no-autoprefixer flag is deprecated and has no effect.')
-  }
-
   // TODO: Reference the @config path here if exists
   let configPath = args['--config'] ? args['--config'] : resolveDefaultConfigPath()
 

package/src/cli/build/plugin.js

@@ -1,17 +1,14 @@
 // @ts-check
 
-import pkg from '../../../package.json'
 import path from 'path'
 import fs from 'fs'
-import postcss from 'postcss'
 import postcssrc from 'postcss-load-config'
-import browserslist from 'browserslist'
-import lightning, { Features } from 'lightningcss'
 import { lilconfig } from 'lilconfig'
 import loadPlugins from 'postcss-load-config/src/plugins' // Little bit scary, looking at private/internal API
 import loadOptions from 'postcss-load-config/src/options' // Little bit scary, looking at private/internal API
 
 import tailwind from '../../processTailwindFeatures'
+import { loadAutoprefixer, loadCssNano, loadPostcss, loadPostcssImport } from './deps'
 import { formatNodes, drainStdin, outputFile } from './utils'
 import { env } from '../../lib/sharedState'
 import resolveConfig from '../../../resolveConfig.js'
@@ -22,53 +19,6 @@ import { findAtConfigPath } from '../../lib/findAtConfigPath.js'
 import log from '../../util/log'
 import { loadConfig } from '../../lib/load-config'
 import getModuleDependencies from '../../lib/getModuleDependencies'
-import { validateConfig } from '../../util/validateConfig'
-import { handleImportAtRules } from '../../lib/handleImportAtRules'
-import { flagEnabled } from '../../featureFlags'
-
-function license() {
-  return `/* ! tailwindcss v${pkg.version} | MIT License | https://tailwindcss.com */\n`
-}
-
-async function lightningcss(result, { map = true, minify = true } = {}) {
-  try {
-    let resolvedBrowsersListConfig = browserslist.findConfig(
-      result.opts.from ?? process.cwd()
-    )?.defaults
-    let defaultBrowsersListConfig = pkg.browserslist
-    let browsersListConfig = resolvedBrowsersListConfig ?? defaultBrowsersListConfig
-
-    let transformed = lightning.transform({
-      filename: result.opts.from || 'input.css',
-      code: Buffer.from(result.css, 'utf-8'),
-      minify,
-      sourceMap: result.map === undefined ? map : !!result.map,
-      inputSourceMap: result.map ? result.map.toString() : undefined,
-      targets: lightning.browserslistToTargets(browserslist(browsersListConfig)),
-      drafts: {
-        nesting: true,
-      },
-      include: Features.Nesting,
-      exclude: Features.LogicalProperties,
-    })
-
-    return Object.assign(result, {
-      css: transformed.code.toString('utf8'),
-      map: result.map
-        ? Object.assign(result.map, {
-            toString() {
-              return transformed.map?.toString()
-            },
-          })
-        : result.map,
-    })
-  } catch (err) {
-    console.error('Unable to use Lightning CSS. Using raw version instead.')
-    console.error(err)
-
-    return result
-  }
-}
 
 /**
  *
@@ -125,6 +75,39 @@ async function loadPostCssPlugins(customPostCssPath) {
   return [beforePlugins, afterPlugins, config.options]
 }
 
+function loadBuiltinPostcssPlugins() {
+  let postcss = loadPostcss()
+  let IMPORT_COMMENT = '__TAILWIND_RESTORE_IMPORT__: '
+  return [
+    [
+      (root) => {
+        root.walkAtRules('import', (rule) => {
+          if (rule.params.slice(1).startsWith('tailwindcss/')) {
+            rule.after(postcss.comment({ text: IMPORT_COMMENT + rule.params }))
+            rule.remove()
+          }
+        })
+      },
+      loadPostcssImport(),
+      (root) => {
+        root.walkComments((rule) => {
+          if (rule.text.startsWith(IMPORT_COMMENT)) {
+            rule.after(
+              postcss.atRule({
+                name: 'import',
+                params: rule.text.replace(IMPORT_COMMENT, ''),
+              })
+            )
+            rule.remove()
+          }
+        })
+      },
+    ],
+    [],
+    {},
+  ]
+}
+
 let state = {
   /** @type {any} */
   context: null,
@@ -135,7 +118,7 @@ let state = {
   /** @type {{content: string, extension: string}[]} */
   changedContent: [],
 
-  /** @type {{config: import('../../../types').Config, dependencies: Set<string>, dispose: Function } | null} */
+  /** @type {ReturnType<typeof load> | null} */
   configBag: null,
 
   contextDependencies: new Set(),
@@ -177,7 +160,8 @@ let state = {
       },
     }
 
-    this.configBag.config = validateConfig(resolveConfig(this.configBag.config))
+    // @ts-ignore
+    this.configBag.config = resolveConfig(this.configBag.config, { content: { files: [] } })
 
     // Override content files if `--content` has been passed explicitly
     if (content?.length > 0) {
@@ -201,17 +185,10 @@ let state = {
     let files = fastGlob.sync(this.contentPatterns.all)
 
     for (let file of files) {
-      if (flagEnabled(this.config, 'oxideParser')) {
-        content.push({
-          file,
-          extension: path.extname(file).slice(1),
-        })
-      } else {
-        content.push({
-          content: fs.readFileSync(path.resolve(file), 'utf8'),
-          extension: path.extname(file).slice(1),
-        })
-      }
+      content.push({
+        content: fs.readFileSync(path.resolve(file), 'utf8'),
+        extension: path.extname(file).slice(1),
+      })
     }
 
     // Resolve raw content in the tailwind config
@@ -227,16 +204,16 @@ let state = {
   },
 
   getContext({ createContext, cliConfigPath, root, result, content }) {
+    env.DEBUG && console.time('Searching for config')
+    let configPath = findAtConfigPath(root, result) ?? cliConfigPath
+    env.DEBUG && console.timeEnd('Searching for config')
+
     if (this.context) {
       this.context.changedContent = this.changedContent.splice(0)
 
       return this.context
     }
 
-    env.DEBUG && console.time('Searching for config')
-    let configPath = findAtConfigPath(root, result) ?? cliConfigPath
-    env.DEBUG && console.timeEnd('Searching for config')
-
     env.DEBUG && console.time('Loading config')
     let config = this.loadConfig(configPath, content)
     env.DEBUG && console.timeEnd('Loading config')
@@ -267,6 +244,8 @@ let state = {
 }
 
 export async function createProcessor(args, cliConfigPath) {
+  let postcss = loadPostcss()
+
   let input = args['--input']
   let output = args['--output']
   let includePostCss = args['--postcss']
@@ -274,9 +253,7 @@ export async function createProcessor(args, cliConfigPath) {
 
   let [beforePlugins, afterPlugins, postcssOptions] = includePostCss
     ? await loadPostCssPlugins(customPostCssPath)
-    : [[], [], {}]
-
-  beforePlugins.unshift(...handleImportAtRules())
+    : loadBuiltinPostcssPlugins()
 
   if (args['--purge']) {
     log.warn('purge-flag-deprecated', [
@@ -322,6 +299,8 @@ export async function createProcessor(args, cliConfigPath) {
     tailwindPlugin,
     !args['--minify'] && formatNodes,
     ...afterPlugins,
+    !args['--no-autoprefixer'] && loadAutoprefixer(),
+    args['--minify'] && loadCssNano(),
   ].filter(Boolean)
 
   /** @type {import('postcss').Processor} */
@@ -345,20 +324,9 @@ export async function createProcessor(args, cliConfigPath) {
 
   async function build() {
     let start = process.hrtime.bigint()
-    let options = {
-      ...postcssOptions,
-      from: input,
-      to: output,
-    }
 
     return readInput()
-      .then((css) => processor.process(css, options))
-      .then((result) =>
-        lightningcss(result, {
-          ...options,
-          minify: !!args['--minify'],
-        })
-      )
+      .then((css) => processor.process(css, { ...postcssOptions, from: input, to: output }))
       .then((result) => {
         if (!state.watcher) {
           return result
@@ -381,12 +349,12 @@ export async function createProcessor(args, cliConfigPath) {
       })
       .then((result) => {
         if (!output) {
-          process.stdout.write(license() + result.css)
+          process.stdout.write(result.css)
           return
         }
 
         return Promise.all([
-          outputFile(result.opts.to, license() + result.css),
+          outputFile(result.opts.to, result.css),
           result.map && outputFile(result.opts.to + '.map', result.map.toString()),
         ])
       })

package/src/cli/build/watching.js

@@ -164,7 +164,7 @@ export function createWatcher(args, { state, rebuild }) {
   // This is very likely a chokidar bug but it's one we need to work around
   // We treat this as a change event and rebuild the CSS
   watcher.on('raw', (evt, filePath, meta) => {
-    if (evt !== 'rename') {
+    if (evt !== 'rename' || filePath === null) {
       return
     }
 

package/src/cli/index.js

@@ -70,7 +70,6 @@ let commands = {
         description: 'Path to a custom config file',
       },
       '--no-autoprefixer': {
-        deprecated: true,
         type: Boolean,
         description: 'Disable autoprefixer',
       },

package/src/cli-peer-dependencies.js

@@ -0,0 +1,15 @@
+export function lazyPostcss() {
+  return require('postcss')
+}
+
+export function lazyPostcssImport() {
+  return require('postcss-import')
+}
+
+export function lazyAutoprefixer() {
+  return require('autoprefixer')
+}
+
+export function lazyCssnano() {
+  return require('cssnano')
+}

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","lineClamp","display","aspectRatio","height","maxHeight","minHeight","width","minWidth","maxWidth","flex","flexShrink","flexGrow","flexBasis","tableLayout","captionSide","borderCollapse","borderSpacing","transformOrigin","translate","rotate","skew","scale","transform","animation","cursor","touchAction","userSelect","resize","scrollSnapType","scrollSnapAlign","scrollSnapStop","scrollMargin","scrollPadding","listStylePosition","listStyleType","listStyleImage","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","hyphens","whitespace","textWrap","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"]
+export default ["preflight","container","accessibility","pointerEvents","visibility","position","inset","isolation","zIndex","order","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","float","clear","margin","boxSizing","lineClamp","display","aspectRatio","size","height","maxHeight","minHeight","width","minWidth","maxWidth","flex","flexShrink","flexGrow","flexBasis","tableLayout","captionSide","borderCollapse","borderSpacing","transformOrigin","translate","rotate","skew","scale","transform","animation","cursor","touchAction","userSelect","resize","scrollSnapType","scrollSnapAlign","scrollSnapStop","scrollMargin","scrollPadding","listStylePosition","listStyleType","listStyleImage","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","hyphens","whitespace","textWrap","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","contain","content","forcedColorAdjust"]