tailwindcss 0.0.0-insiders.e361b3a → 0.0.0-insiders.e41bf3d

package/CHANGELOG.md

@@ -9,6 +9,43 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Types: allow for arbitrary theme values (for 3rd party plugins) ([#7926](https://github.com/tailwindlabs/tailwindcss/pull/7926))
+- Don’t split vars with numbers in them inside arbitrary values ([#8091](https://github.com/tailwindlabs/tailwindcss/pull/8091))
+- Require matching prefix when detecting negatives ([#8121](https://github.com/tailwindlabs/tailwindcss/pull/8121))
+- Handle duplicate At Rules without children ([#8122](https://github.com/tailwindlabs/tailwindcss/pull/8122))
+- Allow arbitrary values with commas in `@apply` ([#8125](https://github.com/tailwindlabs/tailwindcss/pull/8125))
+- Fix intellisense for plugins with multiple `@apply` rules ([#8213](https://github.com/tailwindlabs/tailwindcss/pull/8213))
+- Improve type detection for arbitrary color values ([#8201](https://github.com/tailwindlabs/tailwindcss/pull/8201))
+- Support PostCSS config options in config file in CLI ([#8226](https://github.com/tailwindlabs/tailwindcss/pull/8226))
+- Remove default `[hidden]` style in preflight ([#8248](https://github.com/tailwindlabs/tailwindcss/pull/8248))
+- Only check selectors containing base apply candidates for circular dependencies ([#8222](https://github.com/tailwindlabs/tailwindcss/pull/8222))
+- Rewrite default class extractor ([#8204](https://github.com/tailwindlabs/tailwindcss/pull/8204))
+- Move `important` selector to the front when `@apply`-ing selector-modifying variants in custom utilities ([#8313](https://github.com/tailwindlabs/tailwindcss/pull/8313))
+
+### Changed
+
+- Try using local `postcss` installation first in the CLI ([#8270](https://github.com/tailwindlabs/tailwindcss/pull/8270))
+
+### Added
+
+- Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587))
+- Add `rgb` and `hsl` color helpers for CSS variables ([#7665](https://github.com/tailwindlabs/tailwindcss/pull/7665))
+- Support PostCSS `Document` nodes ([#7291](https://github.com/tailwindlabs/tailwindcss/pull/7291))
+- Add `text-start` and `text-end` utilities ([#6656](https://github.com/tailwindlabs/tailwindcss/pull/6656))
+- Support customizing class name when using `darkMode: 'class'` ([#5800](https://github.com/tailwindlabs/tailwindcss/pull/5800))
+- Add `--poll` option to the CLI ([#7725](https://github.com/tailwindlabs/tailwindcss/pull/7725))
+- Add new `border-spacing` utilities ([#7102](https://github.com/tailwindlabs/tailwindcss/pull/7102))
+- Add `enabled` variant ([#7905](https://github.com/tailwindlabs/tailwindcss/pull/7905))
+- Add TypeScript types for the `tailwind.config.js` file ([#7891](https://github.com/tailwindlabs/tailwindcss/pull/7891))
+- Add `backdrop` variant ([#7924](https://github.com/tailwindlabs/tailwindcss/pull/7924))
+- Add `grid-flow-dense` utility ([#8193](https://github.com/tailwindlabs/tailwindcss/pull/8193))
+- Add `mix-blend-plus-lighter` utility ([#8288](https://github.com/tailwindlabs/tailwindcss/pull/8288))
+- Add arbitrary variants ([#8299](https://github.com/tailwindlabs/tailwindcss/pull/8299))
+
+## [3.0.24] - 2022-04-12
+
+### Fixed
+
 - Prevent nesting plugin from breaking other plugins ([#7563](https://github.com/tailwindlabs/tailwindcss/pull/7563))
 - Recursively collapse adjacent rules ([#7565](https://github.com/tailwindlabs/tailwindcss/pull/7565))
 - Preserve source maps for generated CSS ([#7588](https://github.com/tailwindlabs/tailwindcss/pull/7588))
@@ -22,6 +59,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix generation of `div:not(.foo)` if `.foo` is never defined ([#7815](https://github.com/tailwindlabs/tailwindcss/pull/7815))
 - Allow for custom properties in `rgb`, `rgba`, `hsl` and `hsla` colors ([#7933](https://github.com/tailwindlabs/tailwindcss/pull/7933))
 - Remove autoprefixer as explicit peer-dependency to avoid invalid warnings in situations where it isn't actually needed ([#7949](https://github.com/tailwindlabs/tailwindcss/pull/7949))
+- Ensure the `percentage` data type is validated correctly ([#8015](https://github.com/tailwindlabs/tailwindcss/pull/8015))
+- Make sure `font-weight` is inherited by form controls in all browsers ([#8078](https://github.com/tailwindlabs/tailwindcss/pull/8078))
 
 ### Changed
 
@@ -29,19 +68,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Replace `cosmiconfig` with `lilconfig` ([#6039](https://github.com/tailwindlabs/tailwindcss/pull/6038))
 - Update `cssnano` to avoid removing empty variables when minifying ([#7818](https://github.com/tailwindlabs/tailwindcss/pull/7818))
 
-### Added
-
-- Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587))
-- Add `rgb` and `hsl` color helpers for CSS variables ([#7665](https://github.com/tailwindlabs/tailwindcss/pull/7665))
-- Support PostCSS `Document` nodes ([#7291](https://github.com/tailwindlabs/tailwindcss/pull/7291))
-- Add `text-start` and `text-end` utilities ([#6656](https://github.com/tailwindlabs/tailwindcss/pull/6656))
-- Support customizing class name when using `darkMode: 'class'` ([#5800](https://github.com/tailwindlabs/tailwindcss/pull/5800))
-- Add `--poll` option to the CLI ([#7725](https://github.com/tailwindlabs/tailwindcss/pull/7725))
-- Add new `border-spacing` utilities ([#7102](https://github.com/tailwindlabs/tailwindcss/pull/7102))
-- Add `enabled` variant ([#7905](https://github.com/tailwindlabs/tailwindcss/pull/7905))
-- Add TypeScript types for the `tailwind.config.js` file ([#7891](https://github.com/tailwindlabs/tailwindcss/pull/7891))
-- Add `backdrop` variant ([#7924](https://github.com/tailwindlabs/tailwindcss/pull/7924))
-
 ## [3.0.23] - 2022-02-16
 
 ### Fixed
@@ -1907,7 +1933,8 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.23...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.24...HEAD
+[3.0.24]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.23...v3.0.24
 [3.0.23]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.22...v3.0.23
 [3.0.22]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.21...v3.0.22
 [3.0.21]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.20...v3.0.21

package/lib/cli-peer-dependencies.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+exports.lazyPostcss = lazyPostcss;
 exports.lazyAutoprefixer = lazyAutoprefixer;
 exports.lazyCssnano = lazyCssnano;
-exports.postcss = void 0;
-let postcss = require("postcss");
-exports.postcss = postcss;
+function lazyPostcss() {
+    return require("postcss");
+}
 function lazyAutoprefixer() {
     return require("autoprefixer");
 }

package/lib/cli.js

@@ -9,6 +9,8 @@ var _postcssLoadConfig = _interopRequireDefault(require("postcss-load-config"));
 var _lilconfig = require("lilconfig");
 var _plugins // Little bit scary, looking at private/internal API
  = _interopRequireDefault(require("postcss-load-config/src/plugins"));
+var _options // Little bit scary, looking at private/internal API
+ = _interopRequireDefault(require("postcss-load-config/src/options"));
 var _processTailwindFeatures = _interopRequireDefault(require("./processTailwindFeatures"));
 var _resolveConfig = _interopRequireDefault(require("../resolveConfig"));
 var _fastGlob = _interopRequireDefault(require("fast-glob"));
@@ -128,6 +130,13 @@ function oneOf(...options) {
         manualParsing: true
     });
 }
+function loadPostcss() {
+    // Try to load a local `postcss` version first
+    try {
+        return require("postcss");
+    } catch  {}
+    return (0, _indexJs).lazyPostcss();
+}
 let commands = {
     init: {
         run: init,
@@ -384,7 +393,7 @@ async function build() {
     )(_path.default.resolve("./tailwind.config.js"));
     async function loadPostCssPlugins() {
         let customPostCssPath = typeof args["--postcss"] === "string" ? args["--postcss"] : undefined;
-        let { plugins: configPlugins  } = customPostCssPath ? await (async ()=>{
+        let config1 = customPostCssPath ? await (async ()=>{
             let file = _path.default.resolve(customPostCssPath);
             // Implementation, see: https://unpkg.com/browse/postcss-load-config@3.1.0/src/index.js
             let { config ={}  } = await (0, _lilconfig).lilconfig("postcss").load(file);
@@ -397,9 +406,12 @@ async function build() {
                 config.plugins = [];
             }
             return {
-                plugins: (0, _plugins).default(config, file)
+                file,
+                plugins: (0, _plugins).default(config, file),
+                options: (0, _options).default(config, file)
             };
         })() : await (0, _postcssLoadConfig).default();
+        let configPlugins = config1.plugins;
         let configPluginTailwindIdx = configPlugins.findIndex((plugin)=>{
             if (typeof plugin === "function" && plugin.name === "tailwindcss") {
                 return true;
@@ -413,7 +425,8 @@ async function build() {
         let afterPlugins = configPluginTailwindIdx === -1 ? configPlugins : configPlugins.slice(configPluginTailwindIdx + 1);
         return [
             beforePlugins,
-            afterPlugins
+            afterPlugins,
+            config1.options
         ];
     }
     function resolveConfig() {
@@ -489,9 +502,10 @@ async function build() {
             };
         };
         tailwindPlugin.postcss = true;
-        let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() : [
+        let [beforePlugins, afterPlugins, postcssOptions] = includePostCss ? await loadPostCssPlugins() : [
             [],
-            []
+            [],
+            {}
         ];
         let plugins = [
             ...beforePlugins,
@@ -521,13 +535,15 @@ async function build() {
                 return (0, _indexJs).lazyCssnano()(options);
             })(), 
         ].filter(Boolean);
-        let processor = (0, _indexJs).postcss(plugins);
+        let postcss = loadPostcss();
+        let processor = postcss(plugins);
         function processCSS(css) {
             let start = process.hrtime.bigint();
             return Promise.resolve().then(()=>output ? _fs.default.promises.mkdir(_path.default.dirname(output), {
                     recursive: true
                 }) : null
             ).then(()=>processor.process(css, {
+                    ...postcssOptions,
                     from: input,
                     to: output
                 })
@@ -641,7 +657,8 @@ async function build() {
             let tailwindPluginIdx = plugins.indexOf("__TAILWIND_PLUGIN_POSITION__");
             let copy = plugins.slice();
             copy.splice(tailwindPluginIdx, 1, tailwindPlugin);
-            let processor = (0, _indexJs).postcss(copy);
+            let postcss = loadPostcss();
+            let processor = postcss(copy);
             function processCSS(css) {
                 let start = process.hrtime.bigint();
                 return Promise.resolve().then(()=>output ? _fs.default.promises.mkdir(_path.default.dirname(output), {
@@ -694,13 +711,13 @@ async function build() {
             env.DEBUG && console.timeEnd("Finished in");
             return result1;
         }
-        let config1 = refreshConfig(configPath);
+        let config2 = refreshConfig(configPath);
         if (input) {
             contextDependencies.add(_path.default.resolve(input));
         }
         watcher = _chokidar.default.watch([
             ...contextDependencies,
-            ...extractFileGlobs(config1)
+            ...extractFileGlobs(config2)
         ], {
             usePolling: shouldPoll,
             interval: shouldPoll ? pollInterval : undefined,
@@ -715,16 +732,16 @@ async function build() {
             if (contextDependencies.has(file)) {
                 env.DEBUG && console.time("Resolve config");
                 context = null;
-                config1 = refreshConfig(configPath);
+                config2 = refreshConfig(configPath);
                 env.DEBUG && console.timeEnd("Resolve config");
                 env.DEBUG && console.time("Watch new files");
-                let globs = extractFileGlobs(config1);
+                let globs = extractFileGlobs(config2);
                 watcher.add(configDependencies);
                 watcher.add(globs);
                 env.DEBUG && console.timeEnd("Watch new files");
                 chain = chain.then(async ()=>{
-                    changedContent.push(...getChangedContent(config1));
-                    await rebuild(config1);
+                    changedContent.push(...getChangedContent(config2));
+                    await rebuild(config2);
                 });
             } else {
                 chain = chain.then(async ()=>{
@@ -732,7 +749,7 @@ async function build() {
                         content: _fs.default.readFileSync(_path.default.resolve(file), "utf8"),
                         extension: _path.default.extname(file).slice(1)
                     });
-                    await rebuild(config1);
+                    await rebuild(config2);
                 });
             }
         });
@@ -742,12 +759,12 @@ async function build() {
                     content: _fs.default.readFileSync(_path.default.resolve(file), "utf8"),
                     extension: _path.default.extname(file).slice(1)
                 });
-                await rebuild(config1);
+                await rebuild(config2);
             });
         });
         chain = chain.then(()=>{
-            changedContent.push(...getChangedContent(config1));
-            return rebuild(config1);
+            changedContent.push(...getChangedContent(config2));
+            return rebuild(config2);
         });
     }
     if (shouldWatch) {

package/lib/corePlugins.js

@@ -1420,6 +1420,9 @@ let corePlugins = {
             ".grid-flow-col": {
                 gridAutoFlow: "column"
             },
+            ".grid-flow-dense": {
+                gridAutoFlow: "dense"
+            },
             ".grid-flow-row-dense": {
                 gridAutoFlow: "row dense"
             },
@@ -3065,6 +3068,9 @@ let corePlugins = {
             },
             ".mix-blend-luminosity": {
                 "mix-blend-mode": "luminosity"
+            },
+            ".mix-blend-plus-lighter": {
+                "mix-blend-mode": "plus-lighter"
             }
         });
     },

package/lib/css/preflight.css

@@ -160,6 +160,7 @@ select,
 textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
   color: inherit; /* 1 */
   margin: 0; /* 2 */
@@ -357,11 +358,3 @@ video {
   max-width: 100%;
   height: auto;
 }
-
-/*
-Ensure the default browser behavior of the `hidden` attribute.
-*/
-
-[hidden] {
-  display: none;
-}

package/lib/lib/collapseAdjacentRules.js

@@ -21,7 +21,10 @@ function collapseAdjacentRules() {
                 currentRule = node;
             } else if (properties.every((property)=>((_property = node[property]) !== null && _property !== void 0 ? _property : "").replace(/\s+/g, " ") === ((_property1 = currentRule[property]) !== null && _property1 !== void 0 ? _property1 : "").replace(/\s+/g, " ")
             )) {
-                currentRule.append(node.nodes);
+                // An AtRule may not have children (for example if we encounter duplicate @import url(…) rules)
+                if (node.nodes) {
+                    currentRule.append(node.nodes);
+                }
                 node.remove();
             } else {
                 currentRule = node;

package/lib/lib/defaultExtractor.js

@@ -3,38 +3,165 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.defaultExtractor = defaultExtractor;
-const PATTERNS = [
-    /(?:\['([^'\s]+[^<>"'`\s:\\])')/.source,
-    /(?:\["([^"\s]+[^<>"'`\s:\\])")/.source,
-    /(?:\[`([^`\s]+[^<>"'`\s:\\])`)/.source,
-    /([^${(<>"'`\s]*\[\w*'[^"`\s]*'?\])/.source,
-    /([^${(<>"'`\s]*\[\w*"[^'`\s]*"?\])/.source,
-    /([^<>"'`\s]*\[\w*\('[^"'`\s]*'\)\])/.source,
-    /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source,
-    /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source,
-    /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*\('[^"`\s]*'\)+\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*\("[^'`\s]*"\)+\])/.source,
-    /([^${(<>"'`\s]*\['[^"'`\s]*'\])/.source,
-    /([^${(<>"'`\s]*\["[^"'`\s]*"\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*:[^\]\s]*\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source,
-    /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source,
-    /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source,
-    /([^"'`\s]*[^<>"'`\s:\\])/.source,
-    /([^<>"'`\s]*[^"'`\s:\\])/.source, 
-].join("|");
-const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, "g");
-const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g;
-function defaultExtractor(content) {
-    let broadMatches = content.matchAll(BROAD_MATCH_GLOBAL_REGEXP);
-    let innerMatches = content.match(INNER_MATCH_GLOBAL_REGEXP) || [];
-    let results = [
-        ...broadMatches,
-        ...innerMatches
-    ].flat().filter((v)=>v !== undefined
-    );
-    return results;
+var regex = _interopRequireWildcard(require("./regex"));
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
+function defaultExtractor(context) {
+    let patterns = Array.from(buildRegExps(context));
+    /**
+   * @param {string} content
+   */ return (content)=>{
+        /** @type {(string|string)[]} */ let results = [];
+        for (let pattern of patterns){
+            var ref;
+            results.push(...(ref = content.match(pattern)) !== null && ref !== void 0 ? ref : []);
+        }
+        return results.filter((v)=>v !== undefined
+        ).map(clipAtBalancedParens);
+    };
+}
+function* buildRegExps(context) {
+    let separator = context.tailwindConfig.separator;
+    yield regex.pattern([
+        // Variants
+        "((?=((",
+        regex.any([
+            regex.pattern([
+                /\[[^\s"'\\]+\]/,
+                separator
+            ]),
+            regex.pattern([
+                /[^\s"'\[\\]+/,
+                separator
+            ])
+        ], true),
+        ")+))\\2)?",
+        // Important (optional)
+        /!?/,
+        regex.any([
+            // Arbitrary properties
+            /\[[^\s:'"]+:[^\s\]]+\]/,
+            // Utilities
+            regex.pattern([
+                // Utility Name / Group Name
+                /-?(?:\w+)/,
+                // Normal/Arbitrary values
+                regex.optional(regex.any([
+                    regex.pattern([
+                        // Arbitrary values
+                        /-\[[^\s:]+\]/,
+                        // Not immediately followed by an `{[(`
+                        /(?![{([]])/,
+                        // optionally followed by an opacity modifier
+                        /(?:\/[^\s'"\\$]*)?/, 
+                    ]),
+                    regex.pattern([
+                        // Arbitrary values
+                        /-\[[^\s]+\]/,
+                        // Not immediately followed by an `{[(`
+                        /(?![{([]])/,
+                        // optionally followed by an opacity modifier
+                        /(?:\/[^\s'"\\$]*)?/, 
+                    ]),
+                    // Normal values w/o quotes — may include an opacity modifier
+                    /[-\/][^\s'"\\$={]*/, 
+                ])), 
+            ]), 
+        ]), 
+    ]);
+// 5. Inner matches
+// yield /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g
+}
+// We want to capture any "special" characters
+// AND the characters immediately following them (if there is one)
+let SPECIALS = /([\[\]'"`])([^\[\]'"`])?/g;
+let ALLOWED_CLASS_CHARACTERS = /[^"'`\s<>\]]+/;
+/**
+ * Clips a string ensuring that parentheses, quotes, etc… are balanced
+ * Used for arbitrary values only
+ *
+ * We will go past the end of the balanced parens until we find a non-class character
+ *
+ * Depth matching behavior:
+ * w-[calc(100%-theme('spacing[some_key][1.5]'))]']
+ *   ┬    ┬          ┬┬       ┬        ┬┬   ┬┬┬┬┬┬┬
+ *   1    2          3        4        34   3 210 END
+ *   ╰────┴──────────┴────────┴────────┴┴───┴─┴┴┴
+ *
+ * @param {string} input
+ */ function clipAtBalancedParens(input) {
+    // We are care about this for arbitrary values
+    if (!input.includes("-[")) {
+        return input;
+    }
+    let depth = 0;
+    let openStringTypes = [];
+    // Find all parens, brackets, quotes, etc
+    // Stop when we end at a balanced pair
+    // This is naive and will treat mismatched parens as balanced
+    // This shouldn't be a problem in practice though
+    let matches = input.matchAll(SPECIALS);
+    // We can't use lookbehind assertions because we have to support Safari
+    // So, instead, we've emulated it using capture groups and we'll re-work the matches to accommodate
+    matches = Array.from(matches).flatMap((match)=>{
+        const [, ...groups] = match;
+        return groups.map((group, idx)=>Object.assign([], match, {
+                index: match.index + idx,
+                0: group
+            })
+        );
+    });
+    for (let match1 of matches){
+        let char = match1[0];
+        let inStringType = openStringTypes[openStringTypes.length - 1];
+        if (char === inStringType) {
+            openStringTypes.pop();
+        } else if (char === "'" || char === '"' || char === "`") {
+            openStringTypes.push(char);
+        }
+        if (inStringType) {
+            continue;
+        } else if (char === "[") {
+            depth++;
+            continue;
+        } else if (char === "]") {
+            depth--;
+            continue;
+        }
+        // We've gone one character past the point where we should stop
+        // This means that there was an extra closing `]`
+        // We'll clip to just before it
+        if (depth < 0) {
+            return input.substring(0, match1.index);
+        }
+        // We've finished balancing the brackets but there still may be characters that can be included
+        // For example in the class `text-[#336699]/[.35]`
+        // The depth goes to `0` at the closing `]` but goes up again at the `[`
+        // If we're at zero and encounter a non-class character then we clip the class there
+        if (depth === 0 && !ALLOWED_CLASS_CHARACTERS.test(char)) {
+            return input.substring(0, match1.index);
+        }
+    }
+    return input;
 } // Regular utilities
  // {{modifier}:}*{namespace}{-{suffix}}*{/{opacityModifier}}?
  // Arbitrary values