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

package/stubs/postcss.config.cjs

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
+    autoprefixer: {},
   },
 }

package/stubs/postcss.config.js

@@ -1,5 +1,6 @@
 export default {
   plugins: {
     tailwindcss: {},
+    autoprefixer: {},
   },
 }

package/types/config.d.ts

@@ -60,11 +60,10 @@ type FutureConfigValues =
   | 'respectDefaultRingColorOpacity'
   | 'disableColorOpacityUtilitiesByDefault'
   | 'relativeContentPathsByDefault'
-  | 'logicalSiblingUtilities'
 type FutureConfig = Expand<'all' | Partial<Record<FutureConfigValues, boolean>>> | []
 
 // Experimental related config
-type ExperimentalConfigValues = 'optimizeUniversalDefaults' | 'oxideParser'
+type ExperimentalConfigValues = 'optimizeUniversalDefaults' | 'matchVariant'
 type ExperimentalConfig = Expand<'all' | Partial<Record<ExperimentalConfigValues, boolean>>> | []
 
 // DarkMode related config
@@ -75,12 +74,19 @@ type DarkModeConfig =
   | 'class'
   // Use the `class` strategy with a custom class instead of `.dark`.
   | ['class', string]
+  // Use the `selector` strategy — same as `class` but uses `:where()` for more predicable behavior
+  | 'selector'
+  // Use the `selector` strategy with a custom selector instead of `.dark`.
+  | ['selector', string]
+  // Use the `variant` strategy, which allows you to completely customize the selector
+  // It takes a string or an array of strings, which are passed directly to `addVariant()`
+  | ['variant', string | string[]]
 
 type Screen = { raw: string } | { min: string } | { max: string } | { min: string; max: string }
 type ScreensConfig = string[] | KeyValuePair<string, string | Screen | Screen[]>
 
 // Theme related config
-interface ThemeConfig {
+export interface ThemeConfig {
   // Responsiveness
   screens: ResolvableTo<ScreensConfig>
   supports: ResolvableTo<Record<string, string>>
@@ -235,8 +241,9 @@ interface ThemeConfig {
   transitionDuration: ResolvableTo<KeyValuePair>
   willChange: ResolvableTo<KeyValuePair>
   content: ResolvableTo<KeyValuePair>
+}
 
-  // Custom
+interface CustomThemeConfig extends ThemeConfig {
   [key: string]: any
 }
 
@@ -359,7 +366,7 @@ interface OptionalConfig {
   future: Partial<FutureConfig>
   experimental: Partial<ExperimentalConfig>
   darkMode: Partial<DarkModeConfig>
-  theme: Partial<ThemeConfig & { extend: Partial<ThemeConfig> }>
+  theme: Partial<CustomThemeConfig & { extend: Partial<CustomThemeConfig> }>
   corePlugins: Partial<CorePluginsConfig>
   plugins: Partial<PluginsConfig>
   // Custom

package/types/generated/corePluginList.d.ts

@@ -1 +1 @@
-export type CorePluginList = '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 type CorePluginList = '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'

package/types/generated/default-theme.d.ts

@@ -1,6 +1,5 @@
-import { Config } from '../../types'
 type CSSDeclarationList = Record<string, string>
-export type DefaultTheme = Config['theme'] & {
+export type DefaultTheme = {
   animation: Record<'none' | 'spin' | 'ping' | 'pulse' | 'bounce', string>
   aria: Record<
     | 'busy'
@@ -207,16 +206,38 @@ export type DefaultTheme = Config['theme'] & {
     string
   >
   gridRow: Record<
-    'auto' | 'span-1' | 'span-2' | 'span-3' | 'span-4' | 'span-5' | 'span-6' | 'span-full',
+    | 'auto'
+    | 'span-1'
+    | 'span-2'
+    | 'span-3'
+    | 'span-4'
+    | 'span-5'
+    | 'span-6'
+    | 'span-7'
+    | 'span-8'
+    | 'span-9'
+    | 'span-10'
+    | 'span-11'
+    | 'span-12'
+    | 'span-full',
+    string
+  >
+  gridRowEnd: Record<
+    '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | 'auto',
+    string
+  >
+  gridRowStart: Record<
+    '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | 'auto',
     string
   >
-  gridRowEnd: Record<'1' | '2' | '3' | '4' | '5' | '6' | '7' | 'auto', string>
-  gridRowStart: Record<'1' | '2' | '3' | '4' | '5' | '6' | '7' | 'auto', string>
   gridTemplateColumns: Record<
-    '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'none',
+    '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'none' | 'subgrid',
+    string
+  >
+  gridTemplateRows: Record<
+    '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'none' | 'subgrid',
     string
   >
-  gridTemplateRows: Record<'1' | '2' | '3' | '4' | '5' | '6' | 'none', string>
   hueRotate: Record<'0' | '15' | '30' | '60' | '90' | '180', string>
   invert: Record<'0' | 'DEFAULT', string>
   keyframes: Record<'spin' | 'ping' | 'pulse' | 'bounce', Record<string, CSSDeclarationList>>
@@ -241,8 +262,6 @@ export type DefaultTheme = Config['theme'] & {
   listStyleType: Record<'none' | 'disc' | 'decimal', string>
   listStyleImage: Record<'none', string>
   lineClamp: Record<'1' | '2' | '3' | '4' | '5' | '6', string>
-  minHeight: Record<'0' | 'full' | 'screen' | 'svh' | 'lvh' | 'dvh' | 'min' | 'max' | 'fit', string>
-  minWidth: Record<'0' | 'full' | 'min' | 'max' | 'fit', string>
   objectPosition: Record<
     | 'bottom'
     | 'center'

package/types/index.d.ts

@@ -1,7 +1,11 @@
-import { PluginCreator } from 'postcss'
+import type { PluginCreator } from 'postcss'
 import type { Config } from './config.d'
 
 declare const plugin: PluginCreator<string | Config | { config: string | Config }>
 
-export { Config }
-export default plugin
+declare type _Config = Config
+declare namespace plugin {
+  export type { _Config as Config }
+}
+
+export = plugin

package/index.css

@@ -1,5 +0,0 @@
-@tailwind base;
-
-@tailwind components;
-
-@tailwind utilities;

package/lib/lib/detectNesting.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return _default;
-    }
-});
-function isRoot(node) {
-    return node.type === 'root';
-}
-function isAtLayer(node) {
-    return node.type === 'atrule' && node.name === 'layer';
-}
-function _default(_context) {
-    return (root, result)=>{
-        let found = false;
-        root.walkAtRules('tailwind', (node)=>{
-            if (found) return false;
-            if (node.parent && !(isRoot(node.parent) || isAtLayer(node.parent))) {
-                found = true;
-                node.warn(result, [
-                    'Nested @tailwind rules were detected, but are not supported.',
-                    "Consider using a prefix to scope Tailwind's classes: https://tailwindcss.com/docs/configuration#prefix",
-                    'Alternatively, use the important selector strategy: https://tailwindcss.com/docs/configuration#selector-strategy'
-                ].join('\n'));
-                return false;
-            }
-        });
-        root.walkRules((rule)=>{
-            if (found) return false;
-            rule.walkRules((nestedRule)=>{
-                found = true;
-                nestedRule.warn(result, [
-                    'Nested CSS was detected, but CSS nesting has not been configured correctly.',
-                    'Please enable a CSS nesting plugin *before* Tailwind in your configuration.',
-                    'See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting'
-                ].join('\n'));
-                return false;
-            });
-        });
-    };
-}

package/lib/lib/handleImportAtRules.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "handleImportAtRules", {
-    enumerable: true,
-    get: function() {
-        return handleImportAtRules;
-    }
-});
-const _postcss = /*#__PURE__*/ _interop_require_default(require("postcss"));
-const _postcssimport = /*#__PURE__*/ _interop_require_default(require("postcss-import"));
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-const TAILWIND = Symbol();
-function handleImportAtRules() {
-    let RESTORE_ATRULE_COMMENT = '__TAILWIND_RESTORE__';
-    let atRulesToRestore = [
-        'tailwind',
-        'config'
-    ];
-    return [
-        (root)=>{
-            root.walkAtRules((rule)=>{
-                if (!atRulesToRestore.includes(rule.name)) return rule;
-                rule.after(_postcss.default.comment({
-                    text: RESTORE_ATRULE_COMMENT,
-                    raws: {
-                        [TAILWIND]: {
-                            rule
-                        }
-                    }
-                }));
-                rule.remove();
-            });
-        },
-        (0, _postcssimport.default)(),
-        (root)=>{
-            root.walkComments((rule)=>{
-                if (rule.text === RESTORE_ATRULE_COMMENT) {
-                    rule.after(rule.raws[TAILWIND].rule);
-                    rule.remove();
-                }
-            });
-        }
-    ];
-}

package/src/lib/detectNesting.js

@@ -1,47 +0,0 @@
-function isRoot(node) {
-  return node.type === 'root'
-}
-
-function isAtLayer(node) {
-  return node.type === 'atrule' && node.name === 'layer'
-}
-
-export default function (_context) {
-  return (root, result) => {
-    let found = false
-
-    root.walkAtRules('tailwind', (node) => {
-      if (found) return false
-
-      if (node.parent && !(isRoot(node.parent) || isAtLayer(node.parent))) {
-        found = true
-        node.warn(
-          result,
-          [
-            'Nested @tailwind rules were detected, but are not supported.',
-            "Consider using a prefix to scope Tailwind's classes: https://tailwindcss.com/docs/configuration#prefix",
-            'Alternatively, use the important selector strategy: https://tailwindcss.com/docs/configuration#selector-strategy',
-          ].join('\n')
-        )
-        return false
-      }
-    })
-
-    root.walkRules((rule) => {
-      if (found) return false
-
-      rule.walkRules((nestedRule) => {
-        found = true
-        nestedRule.warn(
-          result,
-          [
-            'Nested CSS was detected, but CSS nesting has not been configured correctly.',
-            'Please enable a CSS nesting plugin *before* Tailwind in your configuration.',
-            'See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting',
-          ].join('\n')
-        )
-        return false
-      })
-    })
-  }
-}

package/src/lib/handleImportAtRules.js

@@ -1,34 +0,0 @@
-import postcss from 'postcss'
-import postcssImport from 'postcss-import'
-
-const TAILWIND = Symbol()
-
-export function handleImportAtRules() {
-  let RESTORE_ATRULE_COMMENT = '__TAILWIND_RESTORE__'
-  let atRulesToRestore = ['tailwind', 'config']
-
-  return [
-    (root) => {
-      root.walkAtRules((rule) => {
-        if (!atRulesToRestore.includes(rule.name)) return rule
-
-        rule.after(
-          postcss.comment({
-            text: RESTORE_ATRULE_COMMENT,
-            raws: { [TAILWIND]: { rule } },
-          })
-        )
-        rule.remove()
-      })
-    },
-    postcssImport(),
-    (root) => {
-      root.walkComments((rule) => {
-        if (rule.text === RESTORE_ATRULE_COMMENT) {
-          rule.after(rule.raws[TAILWIND].rule)
-          rule.remove()
-        }
-      })
-    },
-  ]
-}