tailwindcss 3.4.0 → 3.4.2

package/src/plugin.js

@@ -34,66 +34,6 @@ module.exports = function tailwindcss(configOrPath) {
 
         await processTailwindFeatures(context)(root, result)
       },
-      __OXIDE__ &&
-        function lightningCssPlugin(_root, result) {
-          let postcss = require('postcss')
-          let lightningcss = require('lightningcss')
-          let browserslist = require('browserslist')
-
-          try {
-            let transformed = lightningcss.transform({
-              filename: result.opts.from,
-              code: Buffer.from(result.root.toString()),
-              minify: false,
-              sourceMap: !!result.map,
-              inputSourceMap: result.map ? result.map.toString() : undefined,
-              targets:
-                typeof process !== 'undefined' && process.env.JEST_WORKER_ID
-                  ? { chrome: 106 << 16 }
-                  : lightningcss.browserslistToTargets(
-                      browserslist(require('../package.json').browserslist)
-                    ),
-
-              drafts: {
-                nesting: true,
-                customMedia: true,
-              },
-            })
-
-            result.map = Object.assign(result.map ?? {}, {
-              toJSON() {
-                return transformed.map.toJSON()
-              },
-              toString() {
-                return transformed.map.toString()
-              },
-            })
-
-            result.root = postcss.parse(transformed.code.toString('utf8'))
-          } catch (err) {
-            if (typeof process !== 'undefined' && process.env.JEST_WORKER_ID) {
-              let lines = err.source.split('\n')
-              err = new Error(
-                [
-                  'Error formatting using Lightning CSS:',
-                  '',
-                  ...[
-                    '```css',
-                    ...lines.slice(Math.max(err.loc.line - 3, 0), err.loc.line),
-                    ' '.repeat(err.loc.column - 1) + '^-- ' + err.toString(),
-                    ...lines.slice(err.loc.line, err.loc.line + 2),
-                    '```',
-                  ],
-                ].join('\n')
-              )
-            }
-
-            if (Error.captureStackTrace) {
-              Error.captureStackTrace(err, lightningCssPlugin)
-            }
-            throw err
-          }
-        },
       env.DEBUG &&
         function (root) {
           console.timeEnd('JIT TOTAL')

package/src/processTailwindFeatures.js

@@ -7,7 +7,6 @@ import resolveDefaultsAtRules from './lib/resolveDefaultsAtRules'
 import collapseAdjacentRules from './lib/collapseAdjacentRules'
 import collapseDuplicateDeclarations from './lib/collapseDuplicateDeclarations'
 import partitionApplyAtRules from './lib/partitionApplyAtRules'
-import detectNesting from './lib/detectNesting'
 import { createContext } from './lib/setupContextUtils'
 import { issueFlagNotices } from './featureFlags'
 
@@ -15,8 +14,6 @@ export default function processTailwindFeatures(setupContext) {
   return async function (root, result) {
     let { tailwindDirectives, applyDirectives } = normalizeTailwindDirectives(root)
 
-    detectNesting()(root, result)
-
     // Partition apply rules that are found in the css
     // itself.
     partitionApplyAtRules()(root, result)

package/src/util/dataTypes.js

@@ -106,6 +106,13 @@ function normalizeMathOperatorSpacing(value) {
     'keyboard-inset-left',
     'keyboard-inset-width',
     'keyboard-inset-height',
+
+    'radial-gradient',
+    'linear-gradient',
+    'conic-gradient',
+    'repeating-radial-gradient',
+    'repeating-linear-gradient',
+    'repeating-conic-gradient',
   ]
 
   return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
@@ -161,6 +168,11 @@ function normalizeMathOperatorSpacing(value) {
         result += consumeUntil([')'])
       }
 
+      // Don't break CSS grid track names
+      else if (peek('[')) {
+        result += consumeUntil([']'])
+      }
+
       // Handle operators
       else if (
         ['+', '-', '*', '/'].includes(char) &&
@@ -381,7 +393,7 @@ let absoluteSizes = new Set([
   'medium',
   'large',
   'x-large',
-  'x-large',
+  'xx-large',
   'xxx-large',
 ])
 export function absoluteSize(value) {

package/src/util/pseudoElements.js

@@ -60,6 +60,10 @@ let elementProperties = {
   ':first-letter': ['terminal', 'jumpable'],
   ':first-line': ['terminal', 'jumpable'],
 
+  ':where': [],
+  ':is': [],
+  ':has': [],
+
   // The default value is used when the pseudo-element is not recognized
   // Because it's not recognized, we don't know if it's terminal or not
   // So we assume it can be moved AND can have user-action pseudo classes attached to it

package/types/config.d.ts

@@ -74,6 +74,13 @@ 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[]>

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' | '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' | 'content' | 'forcedColorAdjust'
+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/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/oxide/cli/build/deps.js

@@ -1,89 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    lazyLightningCss: function() {
-        return lazyLightningCss;
-    },
-    lightningcss: function() {
-        return lightningcss;
-    },
-    loadPostcss: function() {
-        return loadPostcss;
-    },
-    loadPostcssImport: function() {
-        return loadPostcssImport;
-    }
-});
-const _packagejson = /*#__PURE__*/ _interop_require_default(require("../../../../package.json"));
-const _browserslist = /*#__PURE__*/ _interop_require_default(require("browserslist"));
-const _index = require("../../../../peers/index");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function lazyLightningCss() {
-    // TODO: Make this lazy/bundled
-    return require("lightningcss");
-}
-let lightningCss;
-function loadLightningCss() {
-    if (lightningCss) {
-        return lightningCss;
-    }
-    // Try to load a local version first
-    try {
-        return lightningCss = require("lightningcss");
-    } catch  {}
-    return lightningCss = lazyLightningCss();
-}
-async function lightningcss(shouldMinify, result) {
-    let css = loadLightningCss();
-    try {
-        let transformed = css.transform({
-            filename: result.opts.from || "input.css",
-            code: Buffer.from(result.css, "utf-8"),
-            minify: shouldMinify,
-            sourceMap: !!result.map,
-            inputSourceMap: result.map ? result.map.toString() : undefined,
-            targets: css.browserslistToTargets((0, _browserslist.default)(_packagejson.default.browserslist)),
-            drafts: {
-                nesting: true
-            }
-        });
-        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;
-    }
-}
-function loadPostcss() {
-    // Try to load a local `postcss` version first
-    try {
-        return require("postcss");
-    } catch  {}
-    return (0, _index.lazyPostcss)();
-}
-function loadPostcssImport() {
-    // Try to load a local `postcss-import` version first
-    try {
-        return require("postcss-import");
-    } catch  {}
-    return (0, _index.lazyPostcssImport)();
-}

package/lib/oxide/cli/build/index.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "build", {
-    enumerable: true,
-    get: function() {
-        return build;
-    }
-});
-const _fs = /*#__PURE__*/ _interop_require_default(require("fs"));
-const _path = /*#__PURE__*/ _interop_require_default(require("path"));
-const _resolveConfigPath = require("../../../util/resolveConfigPath");
-const _plugin = require("./plugin");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-async function build(args) {
-    let input = args["--input"];
-    let shouldWatch = args["--watch"];
-    // 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 && input !== "-" && !_fs.default.existsSync(input = _path.default.resolve(input))) {
-        console.error(`Specified input file ${args["--input"]} does not exist.`);
-        process.exit(9);
-    }
-    if (args["--config"] && !_fs.default.existsSync(args["--config"] = _path.default.resolve(args["--config"]))) {
-        console.error(`Specified config file ${args["--config"]} does not exist.`);
-        process.exit(9);
-    }
-    // TODO: Reference the @config path here if exists
-    let configPath = args["--config"] ? args["--config"] : (0, _resolveConfigPath.resolveDefaultConfigPath)();
-    let processor = await (0, _plugin.createProcessor)(args, configPath);
-    if (shouldWatch) {
-        // Abort the watcher if stdin is closed to avoid zombie processes
-        // You can disable this behavior with --watch=always
-        if (args["--watch"] !== "always") {
-            process.stdin.on("end", ()=>process.exit(0));
-        }
-        process.stdin.resume();
-        await processor.watch();
-    } else {
-        await processor.build().catch((e)=>{
-            console.error(e);
-            process.exit(1);
-        });
-    }
-}