tailwindcss 0.0.0-insiders.e4a37ce → 0.0.0-insiders.e572dc6

package/README.md

@@ -14,7 +14,7 @@
 
 
 <p align="center">
-    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci-stable.yml?branch=master" alt="Build Status"></a>
+    <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=master" alt="Build Status"></a>
     <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
     <a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
     <a href="https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>

package/index.css

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

package/lib/cli/build/index.js

@@ -34,6 +34,9 @@ async function build(args) {
         console.error(`Specified config file ${args["--config"]} does not exist.`);
         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"] : (0, _resolveConfigPath.resolveDefaultConfigPath)();
     let processor = await (0, _plugin.createProcessor)(args, configPath);

package/lib/cli/build/plugin.js

@@ -9,16 +9,19 @@ Object.defineProperty(exports, "createProcessor", {
         return createProcessor;
     }
 });
+const _packagejson = /*#__PURE__*/ _interop_require_default(require("../../../package.json"));
 const _path = /*#__PURE__*/ _interop_require_default(require("path"));
 const _fs = /*#__PURE__*/ _interop_require_default(require("fs"));
+const _postcss = /*#__PURE__*/ _interop_require_default(require("postcss"));
 const _postcssloadconfig = /*#__PURE__*/ _interop_require_default(require("postcss-load-config"));
+const _browserslist = /*#__PURE__*/ _interop_require_default(require("browserslist"));
+const _lightningcss = /*#__PURE__*/ _interop_require_default(require("lightningcss"));
 const _lilconfig = require("lilconfig");
 const _plugins = /*#__PURE__*/ _interop_require_default(require("postcss-load-config/src/plugins" // Little bit scary, looking at private/internal API
 ));
 const _options = /*#__PURE__*/ _interop_require_default(require("postcss-load-config/src/options" // Little bit scary, looking at private/internal API
 ));
 const _processTailwindFeatures = /*#__PURE__*/ _interop_require_default(require("../../processTailwindFeatures"));
-const _deps = require("./deps");
 const _utils = require("./utils");
 const _sharedState = require("../../lib/sharedState");
 const _resolveConfig = /*#__PURE__*/ _interop_require_default(require("../../../resolveConfig.js"));
@@ -29,11 +32,42 @@ const _findAtConfigPath = require("../../lib/findAtConfigPath.js");
 const _log = /*#__PURE__*/ _interop_require_default(require("../../util/log"));
 const _loadconfig = require("../../lib/load-config");
 const _getModuleDependencies = /*#__PURE__*/ _interop_require_default(require("../../lib/getModuleDependencies"));
+const _validateConfig = require("../../util/validateConfig");
+const _handleImportAtRules = require("../../lib/handleImportAtRules");
+const _featureFlags = require("../../featureFlags");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
+async function lightningcss(result, { map =true , minify =true  } = {}) {
+    try {
+        let transformed = _lightningcss.default.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: _lightningcss.default.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 () {
+                    var _transformed_map;
+                    return (_transformed_map = transformed.map) === null || _transformed_map === void 0 ? void 0 : _transformed_map.toString();
+                }
+            }) : result.map
+        });
+    } catch (err) {
+        console.error("Unable to use Lightning CSS. Using raw version instead.");
+        console.error(err);
+        return result;
+    }
+}
 /**
  *
  * @param {string} [customPostCssPath ]
@@ -76,43 +110,11 @@ function _interop_require_default(obj) {
         config.options
     ];
 }
-function loadBuiltinPostcssPlugins() {
-    let postcss = (0, _deps.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();
-                    }
-                });
-            },
-            (0, _deps.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,
     /** @type {ReturnType<typeof createWatcher> | null} */ watcher: null,
     /** @type {{content: string, extension: string}[]} */ changedContent: [],
-    /** @type {ReturnType<typeof load> | null} */ configBag: null,
+    /** @type {{config: import('../../../types').Config, dependencies: Set<string>, dispose: Function } | null} */ configBag: null,
     contextDependencies: new Set(),
     /** @type {import('../../lib/content.js').ContentPath[]} */ contentPaths: [],
     refreshContentPaths () {
@@ -143,12 +145,7 @@ let state = {
                 }
             }
         };
-        // @ts-ignore
-        this.configBag.config = (0, _resolveConfig.default)(this.configBag.config, {
-            content: {
-                files: []
-            }
-        });
+        this.configBag.config = (0, _validateConfig.validateConfig)((0, _resolveConfig.default)(this.configBag.config));
         // Override content files if `--content` has been passed explicitly
         if ((content === null || content === void 0 ? void 0 : content.length) > 0) {
             this.configBag.config.content.files = content;
@@ -167,7 +164,7 @@ let state = {
         // TODO: When we make the postcss plugin async-capable this can become async
         let files = _fastglob.default.sync(this.contentPatterns.all);
         for (let file of files){
-            if (false) {
+            if ((0, _featureFlags.flagEnabled)(this.config, "oxideParser")) {
                 content.push({
                     file,
                     extension: _path.default.extname(file).slice(1)
@@ -225,12 +222,16 @@ let state = {
 };
 async function createProcessor(args, cliConfigPath) {
     var _args_content;
-    let postcss = (0, _deps.loadPostcss)();
     let input = args["--input"];
     let output = args["--output"];
     let includePostCss = args["--postcss"];
     let customPostCssPath = typeof args["--postcss"] === "string" ? args["--postcss"] : undefined;
-    let [beforePlugins, afterPlugins, postcssOptions] = includePostCss ? await loadPostCssPlugins(customPostCssPath) : loadBuiltinPostcssPlugins();
+    let [beforePlugins, afterPlugins, postcssOptions] = includePostCss ? await loadPostCssPlugins(customPostCssPath) : [
+        [],
+        [],
+        {}
+    ];
+    beforePlugins.unshift(...(0, _handleImportAtRules.handleImportAtRules)());
     if (args["--purge"]) {
         _log.default.warn("purge-flag-deprecated", [
             "The `--purge` flag has been deprecated.",
@@ -269,12 +270,10 @@ async function createProcessor(args, cliConfigPath) {
         ...beforePlugins,
         tailwindPlugin,
         !args["--minify"] && _utils.formatNodes,
-        ...afterPlugins,
-        !args["--no-autoprefixer"] && (0, _deps.loadAutoprefixer)(),
-        args["--minify"] && (0, _deps.loadCssNano)()
+        ...afterPlugins
     ].filter(Boolean);
     /** @type {import('postcss').Processor} */ // @ts-ignore
-    let processor = postcss(plugins);
+    let processor = (0, _postcss.default)(plugins);
     async function readInput() {
         // Piping in data, let's drain the stdin
         if (input === "-") {
@@ -289,10 +288,14 @@ async function createProcessor(args, cliConfigPath) {
     }
     async function build() {
         let start = process.hrtime.bigint();
-        return readInput().then((css)=>processor.process(css, {
-                ...postcssOptions,
-                from: input,
-                to: output
+        let options = {
+            ...postcssOptions,
+            from: input,
+            to: output
+        };
+        return readInput().then((css)=>processor.process(css, options)).then((result)=>lightningcss(result, {
+                ...options,
+                minify: !!args["--minify"]
             })).then((result)=>{
             if (!state.watcher) {
                 return result;

package/lib/cli/index.js

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

package/lib/cli.js

@@ -1,7 +1,3 @@
 #!/usr/bin/env node
 "use strict";
-if (false) {
-    module.exports = require("./oxide/cli");
-} else {
-    module.exports = require("./cli/index");
-}
+module.exports = require("./cli/index");

package/lib/corePluginList.js

@@ -98,6 +98,7 @@ const _default = [
     "textOverflow",
     "hyphens",
     "whitespace",
+    "textWrap",
     "wordBreak",
     "borderRadius",
     "borderWidth",

package/lib/corePlugins.js

@@ -415,6 +415,17 @@ let variantPlugins = {
             values: (_theme = theme("supports")) !== null && _theme !== void 0 ? _theme : {}
         });
     },
+    hasVariants: ({ matchVariant  })=>{
+        matchVariant("has", (value)=>`&:has(${(0, _dataTypes.normalize)(value)})`, {
+            values: {}
+        });
+        matchVariant("group-has", (value, { modifier  })=>modifier ? `:merge(.group\\/${modifier}):has(${(0, _dataTypes.normalize)(value)}) &` : `:merge(.group):has(${(0, _dataTypes.normalize)(value)}) &`, {
+            values: {}
+        });
+        matchVariant("peer-has", (value, { modifier  })=>modifier ? `:merge(.peer\\/${modifier}):has(${(0, _dataTypes.normalize)(value)}) ~ &` : `:merge(.peer):has(${(0, _dataTypes.normalize)(value)}) ~ &`, {
+            values: {}
+        });
+    },
     ariaVariants: ({ matchVariant , theme  })=>{
         var _theme;
         matchVariant("aria", (value)=>`&[aria-${(0, _dataTypes.normalize)(value)}]`, {
@@ -1935,11 +1946,11 @@ let corePlugins = {
             ]
         ]
     ]),
-    space: ({ matchUtilities , addUtilities , theme  })=>{
+    space: ({ matchUtilities , addUtilities , theme , config  })=>{
         matchUtilities({
             "space-x": (value)=>{
                 value = value === "0" ? "0px" : value;
-                if (false) {
+                if ((0, _featureFlags.flagEnabled)(config(), "logicalSiblingUtilities")) {
                     return {
                         "& > :not([hidden]) ~ :not([hidden])": {
                             "--tw-space-x-reverse": "0",
@@ -1979,11 +1990,11 @@ let corePlugins = {
             }
         });
     },
-    divideWidth: ({ matchUtilities , addUtilities , theme  })=>{
+    divideWidth: ({ matchUtilities , addUtilities , theme , config  })=>{
         matchUtilities({
             "divide-x": (value)=>{
                 value = value === "0" ? "0px" : value;
-                if (false) {
+                if ((0, _featureFlags.flagEnabled)(config(), "logicalSiblingUtilities")) {
                     return {
                         "& > :not([hidden]) ~ :not([hidden])": {
                             "@defaults border-width": {},
@@ -2293,6 +2304,19 @@ let corePlugins = {
             }
         });
     },
+    textWrap: ({ addUtilities  })=>{
+        addUtilities({
+            ".text-wrap": {
+                "text-wrap": "wrap"
+            },
+            ".text-nowrap": {
+                "text-wrap": "nowrap"
+            },
+            ".text-balance": {
+                "text-wrap": "balance"
+            }
+        });
+    },
     wordBreak: ({ addUtilities  })=>{
         addUtilities({
             ".break-normal": {

package/lib/css/preflight.css

@@ -163,6 +163,8 @@ optgroup,
 select,
 textarea {
   font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
   font-size: 100%; /* 1 */
   font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
@@ -264,7 +266,7 @@ summary {
 }
 
 /*
-Removes the default spacing and border for appropriate elements.
+Removes the default spacing for appropriate elements.
 */
 
 blockquote,
@@ -300,6 +302,10 @@ menu {
   padding: 0;
 }
 
+dialog {
+  padding: 0;
+}
+
 /*
 Prevent resizing textareas horizontally by default.
 */

package/lib/featureFlags.js

@@ -28,24 +28,22 @@ function _interop_require_default(obj) {
 }
 let defaults = {
     optimizeUniversalDefaults: false,
-    generalizedModifiers: true,
-    get disableColorOpacityUtilitiesByDefault () {
-        return false;
-    },
-    get relativeContentPathsByDefault () {
-        return false;
-    }
+    disableColorOpacityUtilitiesByDefault: false,
+    relativeContentPathsByDefault: false,
+    oxideParser: false,
+    logicalSiblingUtilities: false
 };
 let featureFlags = {
     future: [
         "hoverOnlyWhenSupported",
         "respectDefaultRingColorOpacity",
         "disableColorOpacityUtilitiesByDefault",
-        "relativeContentPathsByDefault"
+        "relativeContentPathsByDefault",
+        "logicalSiblingUtilities"
     ],
     experimental: [
         "optimizeUniversalDefaults",
-        "generalizedModifiers"
+        "oxideParser"
     ]
 };
 function flagEnabled(config, flag) {

package/lib/lib/content.js

@@ -24,13 +24,39 @@ const _fastglob = /*#__PURE__*/ _interop_require_default(require("fast-glob"));
 const _normalizepath = /*#__PURE__*/ _interop_require_default(require("normalize-path"));
 const _parseGlob = require("../util/parseGlob");
 const _sharedState = require("./sharedState");
+const _oxide = require("@tailwindcss/oxide");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
+/** @typedef {import('../../types/config.js').RawFile} RawFile */ /** @typedef {import('../../types/config.js').FilePath} FilePath */ /*
+ * @param {import('tailwindcss').Config} tailwindConfig
+ * @param {{skip:string[]}} options
+ * @returns {ContentPath[]}
+ */ function resolveContentFiles(tailwindConfig, { skip =[]  } = {}) {
+    if (Array.isArray(tailwindConfig.content.files) && tailwindConfig.content.files.includes("auto")) {
+        let idx = tailwindConfig.content.files.indexOf("auto");
+        if (idx !== -1) {
+            _sharedState.env.DEBUG && console.time("Calculating resolve content paths");
+            let resolved = (0, _oxide.resolveContentPaths)({
+                base: process.cwd()
+            });
+            _sharedState.env.DEBUG && console.timeEnd("Calculating resolve content paths");
+            tailwindConfig.content.files.splice(idx, 1, ...resolved);
+        }
+    }
+    if (skip.length > 0) {
+        tailwindConfig.content.files = tailwindConfig.content.files.filter((filePath)=>!skip.includes(filePath));
+    }
+    return tailwindConfig.content.files;
+}
 function parseCandidateFiles(context, tailwindConfig) {
-    let files = tailwindConfig.content.files;
+    let files = resolveContentFiles(tailwindConfig, {
+        skip: [
+            context.userConfigPath
+        ]
+    });
     // Normalize the file globs
     files = files.filter((filePath)=>typeof filePath === "string");
     files = files.map(_normalizepath.default);

package/lib/lib/evaluateTailwindFunctions.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "default", {
 const _dlv = /*#__PURE__*/ _interop_require_default(require("dlv"));
 const _didyoumean = /*#__PURE__*/ _interop_require_default(require("didyoumean"));
 const _transformThemeValue = /*#__PURE__*/ _interop_require_default(require("../util/transformThemeValue"));
-const _postcssvalueparser = /*#__PURE__*/ _interop_require_default(require("postcss-value-parser"));
+const _index = /*#__PURE__*/ _interop_require_default(require("../value-parser/index"));
 const _normalizeScreens = require("../util/normalizeScreens");
 const _buildMediaQuery = /*#__PURE__*/ _interop_require_default(require("../util/buildMediaQuery"));
 const _toPath = require("../util/toPath");
@@ -121,7 +121,7 @@ function extractArgs(node, vNodes, functions) {
         if (vNode.type === "div" && vNode.value === ",") {
             args.push("");
         } else {
-            args[args.length - 1] += _postcssvalueparser.default.stringify(vNode);
+            args[args.length - 1] += _index.default.stringify(vNode);
         }
     }
     return args;
@@ -135,7 +135,9 @@ function resolveVNode(node, vNode, functions) {
     return vNode;
 }
 function resolveFunctions(node, input, functions) {
-    return (0, _postcssvalueparser.default)(input).walk((vNode)=>{
+    let hasAnyFn = Object.keys(functions).some((fn)=>input.includes(`${fn}(`));
+    if (!hasAnyFn) return input;
+    return (0, _index.default)(input).walk((vNode)=>{
         resolveVNode(node, vNode, functions);
     }).toString();
 }

package/lib/lib/expandTailwindAtRules.js

@@ -10,11 +10,13 @@ Object.defineProperty(exports, "default", {
 });
 const _fs = /*#__PURE__*/ _interop_require_default(require("fs"));
 const _quicklru = /*#__PURE__*/ _interop_require_default(require("@alloc/quick-lru"));
+const _oxide = require("@tailwindcss/oxide");
 const _sharedState = /*#__PURE__*/ _interop_require_wildcard(require("./sharedState"));
 const _generateRules = require("./generateRules");
 const _log = /*#__PURE__*/ _interop_require_default(require("../util/log"));
 const _cloneNodes = /*#__PURE__*/ _interop_require_default(require("../util/cloneNodes"));
 const _defaultExtractor = require("./defaultExtractor");
+const _featureFlags = require("../featureFlags");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -69,7 +71,12 @@ const builtInTransformers = {
 };
 function getExtractor(context, fileExtension) {
     let extractors = context.tailwindConfig.content.extract;
-    return extractors[fileExtension] || extractors.DEFAULT || builtInExtractors[fileExtension] || builtInExtractors.DEFAULT(context);
+    return extractors[fileExtension] || extractors.DEFAULT || builtInExtractors[fileExtension] || // Because we call `DEFAULT(context)`, the returning function is always a new function without a
+    // stable identity. Marking it with `DEFAULT_EXTRACTOR` allows us to check if it is the default
+    // extractor without relying on the function identity.
+    Object.assign(builtInExtractors.DEFAULT(context), {
+        DEFAULT_EXTRACTOR: true
+    });
 }
 function getTransformer(tailwindConfig, fileExtension) {
     let transformers = tailwindConfig.content.transform;
@@ -154,16 +161,35 @@ function expandTailwindAtRules(context) {
         ]);
         let seen = new Set();
         env.DEBUG && console.time("Reading changed files");
-        if (false) {
-            // TODO: Pass through or implement `extractor`
-            for (let candidate of require("@tailwindcss/oxide").parseCandidateStringsFromFiles(context.changedContent)){
-                candidates.add(candidate);
+        if ((0, _featureFlags.flagEnabled)(context.tailwindConfig, "oxideParser")) {
+            let rustParserContent = [];
+            let regexParserContent = [];
+            for (let item of context.changedContent){
+                let transformer = getTransformer(context.tailwindConfig, item.extension);
+                let extractor = getExtractor(context, item.extension);
+                if (transformer === builtInTransformers.DEFAULT && (extractor === null || extractor === void 0 ? void 0 : extractor.DEFAULT_EXTRACTOR) === true) {
+                    rustParserContent.push(item);
+                } else {
+                    regexParserContent.push([
+                        item,
+                        {
+                            transformer,
+                            extractor
+                        }
+                    ]);
+                }
+            }
+            if (rustParserContent.length > 0) {
+                for (let candidate of (0, _oxide.parseCandidateStrings)(rustParserContent, _oxide.IO.Parallel | _oxide.Parsing.Parallel)){
+                    candidates.add(candidate);
+                }
+            }
+            if (regexParserContent.length > 0) {
+                for (let [{ file , content  }, { transformer , extractor  }] of regexParserContent){
+                    content = file ? _fs.default.readFileSync(file, "utf8") : content;
+                    getClassCandidates(transformer(content), extractor, candidates, seen);
+                }
             }
-        // for (let { file, content, extension } of context.changedContent) {
-        //   let transformer = getTransformer(context.tailwindConfig, extension)
-        //   let extractor = getExtractor(context, extension)
-        //   getClassCandidatesOxide(file, transformer(content), extractor, candidates, seen)
-        // }
         } else {
             for (let { file , content , extension  } of context.changedContent){
                 let transformer = getTransformer(context.tailwindConfig, extension);
@@ -178,7 +204,10 @@ function expandTailwindAtRules(context) {
         let classCacheCount = context.classCache.size;
         env.DEBUG && console.time("Generate rules");
         env.DEBUG && console.time("Sorting candidates");
-        let sortedCandidates = false ? candidates : new Set([
+        // TODO: only sort if we are not using the oxide parser (flagEnabled(context.tailwindConfig,
+        // 'oxideParser')) AND if we got all the candidates form the oxideParser alone. This will not
+        // be the case currently if you have custom transformers / extractors.
+        let sortedCandidates = new Set([
             ...candidates
         ].sort((a, z)=>{
             if (a === z) return 0;
@@ -242,9 +271,20 @@ function expandTailwindAtRules(context) {
             }));
             layerNodes.variants.remove();
         } else if (variantNodes.length > 0) {
-            root.append((0, _cloneNodes.default)(variantNodes, root.source, {
+            let cloned = (0, _cloneNodes.default)(variantNodes, undefined, {
                 layer: "variants"
-            }));
+            });
+            cloned.forEach((node)=>{
+                var _node_raws_tailwind;
+                var _node_raws_tailwind_parentLayer;
+                let parentLayer = (_node_raws_tailwind_parentLayer = (_node_raws_tailwind = node.raws.tailwind) === null || _node_raws_tailwind === void 0 ? void 0 : _node_raws_tailwind.parentLayer) !== null && _node_raws_tailwind_parentLayer !== void 0 ? _node_raws_tailwind_parentLayer : null;
+                node.walk((n)=>{
+                    if (!n.source) {
+                        n.source = layerNodes[parentLayer].source;
+                    }
+                });
+            });
+            root.append(cloned);
         }
         // If we've got a utility layer and no utilities are generated there's likely something wrong
         const hasUtilityVariants = variantNodes.some((node)=>{

package/lib/lib/generateRules.js

@@ -215,9 +215,6 @@ function applyVariant(variant, matches, context) {
         if (modifiers.length && !context.variantMap.has(variant)) {
             variant = baseVariant;
             args.modifier = modifiers[0];
-            if (!(0, _featureFlags.flagEnabled)(context.tailwindConfig, "generalizedModifiers")) {
-                return [];
-            }
         }
     }
     // Retrieve "arbitrary value"
@@ -231,12 +228,12 @@ function applyVariant(variant, matches, context) {
         //   group[:hover]    (`-` is missing)
         let match = /(.)(-?)\[(.*)\]/g.exec(variant);
         if (match) {
-            let [, char, seperator, value] = match;
+            let [, char, separator, value] = match;
             // @-[200px] case
-            if (char === "@" && seperator === "-") return [];
+            if (char === "@" && separator === "-") return [];
             // group[:hover] case
-            if (char !== "@" && seperator === "") return [];
-            variant = variant.replace(`${seperator}[${value}]`, "");
+            if (char !== "@" && separator === "") return [];
+            variant = variant.replace(`${separator}[${value}]`, "");
             args.value = value;
         }
     }

package/lib/lib/handleImportAtRules.js

@@ -0,0 +1,50 @@
+"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/lib/lib/normalizeTailwindDirectives.js

@@ -22,21 +22,6 @@ function normalizeTailwindDirectives(root) {
         if (atRule.name === "apply") {
             applyDirectives.add(atRule);
         }
-        if (atRule.name === "import") {
-            if (atRule.params === '"tailwindcss/base"' || atRule.params === "'tailwindcss/base'") {
-                atRule.name = "tailwind";
-                atRule.params = "base";
-            } else if (atRule.params === '"tailwindcss/components"' || atRule.params === "'tailwindcss/components'") {
-                atRule.name = "tailwind";
-                atRule.params = "components";
-            } else if (atRule.params === '"tailwindcss/utilities"' || atRule.params === "'tailwindcss/utilities'") {
-                atRule.name = "tailwind";
-                atRule.params = "utilities";
-            } else if (atRule.params === '"tailwindcss/screens"' || atRule.params === "'tailwindcss/screens'" || atRule.params === '"tailwindcss/variants"' || atRule.params === "'tailwindcss/variants'") {
-                atRule.name = "tailwind";
-                atRule.params = "variants";
-            }
-        }
         if (atRule.name === "tailwind") {
             if (atRule.params === "screens") {
                 atRule.params = "variants";