tailwindcss 0.0.0-insiders.f84ee8b → 0.0.0-insiders.f980ca4

package/CHANGELOG.md

@@ -7,15 +7,33 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### 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))
-- Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587))
 - Preserve source maps for generated CSS ([#7588](https://github.com/tailwindlabs/tailwindcss/pull/7588))
 - Split box shadows on top-level commas only ([#7479](https://github.com/tailwindlabs/tailwindcss/pull/7479))
+- Use local user CSS cache for `@apply` ([#7524](https://github.com/tailwindlabs/tailwindcss/pull/7524))
+- Invalidate context when main CSS changes ([#7626](https://github.com/tailwindlabs/tailwindcss/pull/7626))
+- Only add `!` to selector class matching template candidate when using important modifier with mutli-class selectors ([#7664](https://github.com/tailwindlabs/tailwindcss/pull/7664))
+- Correctly parse and prefix animation names with dots ([#7163](https://github.com/tailwindlabs/tailwindcss/pull/7163))
+- Fix extraction from template literal/function with array ([#7481](https://github.com/tailwindlabs/tailwindcss/pull/7481))
+- Don't output unparsable arbitrary values ([#7789](https://github.com/tailwindlabs/tailwindcss/pull/7789))
 
 ### Changed
 
 - Replace `chalk` with `picocolors` ([#6039](https://github.com/tailwindlabs/tailwindcss/pull/6039))
+- Replace `cosmiconfig` with `lilconfig` ([#6039](https://github.com/tailwindlabs/tailwindcss/pull/6038))
+
+### 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))
 
 ## [3.0.23] - 2022-02-16
 
@@ -30,7 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- Temporarily move postcss to dependencies ([#7424](https://github.com/tailwindlabs/tailwindcss/pull/7424))
+- Temporarily move `postcss` to dependencies ([#7424](https://github.com/tailwindlabs/tailwindcss/pull/7424))
 
 ## [3.0.21] - 2022-02-10
 

package/lib/cli.js

@@ -6,7 +6,7 @@ var _path = _interopRequireDefault(require("path"));
 var _arg = _interopRequireDefault(require("arg"));
 var _fs = _interopRequireDefault(require("fs"));
 var _postcssLoadConfig = _interopRequireDefault(require("postcss-load-config"));
-var _cosmiconfig = require("cosmiconfig");
+var _lilconfig = require("lilconfig");
 var _plugins // Little bit scary, looking at private/internal API
  = _interopRequireDefault(require("postcss-load-config/src/plugins"));
 var _processTailwindFeatures = _interopRequireDefault(require("./processTailwindFeatures"));
@@ -159,6 +159,10 @@ let commands = {
                 type: Boolean,
                 description: 'Watch for changes and rebuild as needed'
             },
+            '--poll': {
+                type: Boolean,
+                description: 'Use polling instead of filesystem events when watching'
+            },
             '--content': {
                 type: String,
                 description: 'Content paths to use for removing unused classes'
@@ -187,7 +191,8 @@ let commands = {
             '-i': '--input',
             '-o': '--output',
             '-m': '--minify',
-            '-w': '--watch'
+            '-w': '--watch',
+            '-p': '--poll'
         }
     }
 };
@@ -348,7 +353,12 @@ async function build() {
     let input = args['--input'];
     let output = args['--output'];
     let shouldWatch = args['--watch'];
+    let shouldPoll = args['--poll'];
+    let shouldCoalesceWriteEvents = shouldPoll || process.platform === 'win32';
     let includePostCss = args['--postcss'];
+    // Polling interval in milliseconds
+    // Used only when polling or coalescing add/change events on Windows
+    let pollInterval = 10;
     // TODO: Deprecate this in future versions
     if (!input && args['_'][1]) {
         console.error('[deprecation] Running tailwindcss without -i, please provide an input file.');
@@ -368,8 +378,8 @@ async function build() {
         let customPostCssPath = typeof args['--postcss'] === 'string' ? args['--postcss'] : undefined;
         let { plugins: configPlugins  } = customPostCssPath ? await (async ()=>{
             let file = _path.default.resolve(customPostCssPath);
-            // Implementation, see: https://unpkg.com/browse/postcss-load-config@3.0.1/src/index.js
-            let { config ={}  } = await (0, _cosmiconfig).cosmiconfig('postcss').load(file);
+            // Implementation, see: https://unpkg.com/browse/postcss-load-config@3.1.0/src/index.js
+            let { config ={}  } = await (0, _lilconfig).lilconfig('postcss').load(file);
             if (typeof config === 'function') {
                 config = config();
             } else {
@@ -684,10 +694,12 @@ async function build() {
             ...contextDependencies,
             ...extractFileGlobs(config1)
         ], {
+            usePolling: shouldPoll,
+            interval: shouldPoll ? pollInterval : undefined,
             ignoreInitial: true,
-            awaitWriteFinish: process.platform === 'win32' ? {
+            awaitWriteFinish: shouldCoalesceWriteEvents ? {
                 stabilityThreshold: 50,
-                pollInterval: 10
+                pollInterval: pollInterval
             } : false
         });
         let chain = Promise.resolve();

package/lib/corePluginList.js

@@ -38,6 +38,7 @@ var _default = [
     "flexBasis",
     "tableLayout",
     "borderCollapse",
+    "borderSpacing",
     "transformOrigin",
     "translate",
     "rotate",

package/lib/corePlugins.js

@@ -8,6 +8,7 @@ var path = _interopRequireWildcard(require("path"));
 var _postcss = _interopRequireDefault(require("postcss"));
 var _createUtilityPlugin = _interopRequireDefault(require("./util/createUtilityPlugin"));
 var _buildMediaQuery = _interopRequireDefault(require("./util/buildMediaQuery"));
+var _escapeClassName = _interopRequireDefault(require("./util/escapeClassName"));
 var _parseAnimationValue = _interopRequireDefault(require("./util/parseAnimationValue"));
 var _flattenColorPalette = _interopRequireDefault(require("./util/flattenColorPalette"));
 var _withAlphaVariable = _interopRequireWildcard(require("./util/withAlphaVariable"));
@@ -209,7 +210,7 @@ let variantPlugins = {
         addVariant('motion-reduce', '@media (prefers-reduced-motion: reduce)');
     },
     darkVariants: ({ config , addVariant  })=>{
-        let mode = config('darkMode', 'media');
+        let [mode, className = '.dark'] = [].concat(config('darkMode', 'media'));
         if (mode === false) {
             mode = 'media';
             _log.default.warn('darkmode-false', [
@@ -219,7 +220,7 @@ let variantPlugins = {
             ]);
         }
         if (mode === 'class') {
-            addVariant('dark', '.dark &');
+            addVariant('dark', `${className} &`);
         } else if (mode === 'media') {
             addVariant('dark', '@media (prefers-color-scheme: dark)');
         }
@@ -820,6 +821,38 @@ let corePlugins = {
             }
         });
     },
+    borderSpacing: ({ addDefaults , matchUtilities , theme  })=>{
+        addDefaults('border-spacing', {
+            '--tw-border-spacing-x': 0,
+            '--tw-border-spacing-y': 0
+        });
+        matchUtilities({
+            'border-spacing': (value)=>{
+                return {
+                    '--tw-border-spacing-x': value,
+                    '--tw-border-spacing-y': value,
+                    '@defaults border-spacing': {},
+                    'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'
+                };
+            },
+            'border-spacing-x': (value)=>{
+                return {
+                    '--tw-border-spacing-x': value,
+                    '@defaults border-spacing': {},
+                    'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'
+                };
+            },
+            'border-spacing-y': (value)=>{
+                return {
+                    '--tw-border-spacing-y': value,
+                    '@defaults border-spacing': {},
+                    'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)'
+                };
+            }
+        }, {
+            values: theme('borderSpacing')
+        });
+    },
     transformOrigin: (0, _createUtilityPlugin).default('transformOrigin', [
         [
             'origin',
@@ -989,8 +1022,8 @@ let corePlugins = {
             }
         });
     },
-    animation: ({ matchUtilities , theme , prefix  })=>{
-        let prefixName = (name)=>prefix(`.${name}`).slice(1)
+    animation: ({ matchUtilities , theme , config  })=>{
+        let prefixName = (name)=>`${config('prefix')}${(0, _escapeClassName).default(name)}`
         ;
         var ref;
         let keyframes = Object.fromEntries(Object.entries((ref = theme('keyframes')) !== null && ref !== void 0 ? ref : {}).map(([key, value])=>{
@@ -2531,6 +2564,12 @@ let corePlugins = {
             },
             '.text-justify': {
                 'text-align': 'justify'
+            },
+            '.text-start': {
+                'text-align': 'start'
+            },
+            '.text-end': {
+                'text-align': 'end'
             }
         });
     },
@@ -3185,9 +3224,14 @@ let corePlugins = {
             }
         });
     },
-    ringColor: ({ matchUtilities , theme  })=>{
+    ringColor: ({ matchUtilities , theme , corePlugins: corePlugins6  })=>{
         matchUtilities({
             ring: (value)=>{
+                if (!corePlugins6('ringOpacity')) {
+                    return {
+                        '--tw-ring-color': (0, _toColorValue).default(value)
+                    };
+                }
                 return (0, _withAlphaVariable).default({
                     color: value,
                     property: '--tw-ring-color',

package/lib/index.js

@@ -17,7 +17,18 @@ module.exports = function tailwindcss(configOrPath) {
                 return root;
             },
             function(root, result) {
-                (0, _processTailwindFeatures).default((0, _setupTrackingContext).default(configOrPath))(root, result);
+                let context = (0, _setupTrackingContext).default(configOrPath);
+                if (root.type === 'document') {
+                    let roots = root.nodes.filter((node)=>node.type === 'root'
+                    );
+                    for (const root1 of roots){
+                        if (root1.type === 'root') {
+                            (0, _processTailwindFeatures).default(context)(root1, result);
+                        }
+                    }
+                    return;
+                }
+                (0, _processTailwindFeatures).default(context)(root, result);
             },
             _sharedState.env.DEBUG && function(root) {
                 console.timeEnd('JIT TOTAL');

package/lib/lib/cacheInvalidation.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.hasContentChanged = hasContentChanged;
+var _crypto = _interopRequireDefault(require("crypto"));
+var sharedState = _interopRequireWildcard(require("./sharedState"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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;
+    }
+}
+/**
+ * Calculate the hash of a string.
+ *
+ * This doesn't need to be cryptographically secure or
+ * anything like that since it's used only to detect
+ * when the CSS changes to invalidate the context.
+ *
+ * This is wrapped in a try/catch because it's really dependent
+ * on how Node itself is build and the environment and OpenSSL
+ * version / build that is installed on the user's machine.
+ *
+ * Based on the environment this can just outright fail.
+ *
+ * See https://github.com/nodejs/node/issues/40455
+ *
+ * @param {string} str
+ */ function getHash(str) {
+    try {
+        return _crypto.default.createHash('md5').update(str, 'utf-8').digest('binary');
+    } catch (err) {
+        return '';
+    }
+}
+function hasContentChanged(sourcePath, root) {
+    let css = root.toString();
+    // We only care about files with @tailwind directives
+    // Other files use an existing context
+    if (!css.includes('@tailwind')) {
+        return false;
+    }
+    let existingHash = sharedState.sourceHashMap.get(sourcePath);
+    let rootHash = getHash(css);
+    let didChange = existingHash !== rootHash;
+    sharedState.sourceHashMap.set(sourcePath, rootHash);
+    return didChange;
+}

package/lib/lib/defaultExtractor.js

@@ -7,16 +7,16 @@ 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]*\[\w*\('[^"`\s]*'\)\])/.source,
     /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source,
     /([^<>"'`\s]*\[[^<>"'`\s]*\('[^"`\s]*'\)+\])/.source,
     /([^<>"'`\s]*\[[^<>"'`\s]*\("[^'`\s]*"\)+\])/.source,
-    /([^<>"'`\s]*\['[^"'`\s]*'\])/.source,
-    /([^<>"'`\s]*\["[^"'`\s]*"\])/.source,
+    /([^${(<>"'`\s]*\['[^"'`\s]*'\])/.source,
+    /([^${(<>"'`\s]*\["[^"'`\s]*"\])/.source,
     /([^<>"'`\s]*\[[^<>"'`\s]*:[^\]\s]*\])/.source,
     /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source,
     /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source,

package/lib/lib/expandApplyAtRules.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function extractClasses(node) {
+/** @typedef {Map<string, [any, import('postcss').Rule[]]>} ApplyCache */ function extractClasses(node) {
     let classes = new Set();
     let container = _postcss.default.root({
         nodes: [
@@ -40,7 +40,114 @@ function prefix(context, selector) {
     let prefix1 = context.tailwindConfig.prefix;
     return typeof prefix1 === 'function' ? prefix1(selector) : prefix1 + selector;
 }
-function buildApplyCache(applyCandidates, context) {
+function* pathToRoot(node) {
+    yield node;
+    while(node.parent){
+        yield node.parent;
+        node = node.parent;
+    }
+}
+/**
+ * Only clone the node itself and not its children
+ *
+ * @param {*} node
+ * @param {*} overrides
+ * @returns
+ */ function shallowClone(node, overrides = {}) {
+    let children = node.nodes;
+    node.nodes = [];
+    let tmp = node.clone(overrides);
+    node.nodes = children;
+    return tmp;
+}
+/**
+ * Clone just the nodes all the way to the top that are required to represent
+ * this singular rule in the tree.
+ *
+ * For example, if we have CSS like this:
+ * ```css
+ * @media (min-width: 768px) {
+ *   @supports (display: grid) {
+ *     .foo {
+ *       display: grid;
+ *       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ *     }
+ *   }
+ *
+ *   @supports (backdrop-filter: blur(1px)) {
+ *     .bar {
+ *       backdrop-filter: blur(1px);
+ *     }
+ *   }
+ *
+ *   .baz {
+ *     color: orange;
+ *   }
+ * }
+ * ```
+ *
+ * And we're cloning `.bar` it'll return a cloned version of what's required for just that single node:
+ *
+ * ```css
+ * @media (min-width: 768px) {
+ *   @supports (backdrop-filter: blur(1px)) {
+ *     .bar {
+ *       backdrop-filter: blur(1px);
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @param {import('postcss').Node} node
+ */ function nestedClone(node) {
+    for (let parent of pathToRoot(node)){
+        if (node === parent) {
+            continue;
+        }
+        if (parent.type === 'root') {
+            break;
+        }
+        node = shallowClone(parent, {
+            nodes: [
+                node
+            ]
+        });
+    }
+    return node;
+}
+/**
+ * @param {import('postcss').Root} root
+ */ function buildLocalApplyCache(root, context) {
+    /** @type {ApplyCache} */ let cache = new Map();
+    let highestOffset = context.layerOrder.user >> 4n;
+    root.walkRules((rule, idx)=>{
+        // Ignore rules generated by Tailwind
+        for (let node of pathToRoot(rule)){
+            var ref;
+            if (((ref = node.raws.tailwind) === null || ref === void 0 ? void 0 : ref.layer) !== undefined) {
+                return;
+            }
+        }
+        // Clone what's required to represent this singular rule in the tree
+        let container = nestedClone(rule);
+        for (let className of extractClasses(rule)){
+            let list = cache.get(className) || [];
+            cache.set(className, list);
+            list.push([
+                {
+                    layer: 'user',
+                    sort: BigInt(idx) + highestOffset,
+                    important: false
+                },
+                container, 
+            ]);
+        }
+    });
+    return cache;
+}
+/**
+ * @returns {ApplyCache}
+ */ function buildApplyCache(applyCandidates, context) {
     for (let candidate of applyCandidates){
         if (context.notClassCache.has(candidate) || context.applyClassCache.has(candidate)) {
             continue;
@@ -62,6 +169,39 @@ function buildApplyCache(applyCandidates, context) {
     }
     return context.applyClassCache;
 }
+/**
+ * Build a cache only when it's first used
+ *
+ * @param {() => ApplyCache} buildCacheFn
+ * @returns {ApplyCache}
+ */ function lazyCache(buildCacheFn) {
+    let cache = null;
+    return {
+        get: (name)=>{
+            cache = cache || buildCacheFn();
+            return cache.get(name);
+        },
+        has: (name)=>{
+            cache = cache || buildCacheFn();
+            return cache.has(name);
+        }
+    };
+}
+/**
+ * Take a series of multiple caches and merge
+ * them so they act like one large cache
+ *
+ * @param {ApplyCache[]} caches
+ * @returns {ApplyCache}
+ */ function combineCaches(caches) {
+    return {
+        get: (name)=>caches.flatMap((cache)=>cache.get(name) || []
+            )
+        ,
+        has: (name)=>caches.some((cache)=>cache.has(name)
+            )
+    };
+}
 function extractApplyCandidates(params) {
     let candidates = params.split(/[\s\t\n]+/g);
     if (candidates[candidates.length - 1] === '!important') {
@@ -75,7 +215,7 @@ function extractApplyCandidates(params) {
         false
     ];
 }
-function processApply(root, context) {
+function processApply(root, context, localCache) {
     let applyCandidates = new Set();
     // Collect all @apply rules and candidates
     let applies = [];
@@ -89,7 +229,10 @@ function processApply(root, context) {
     // Start the @apply process if we have rules with @apply in them
     if (applies.length > 0) {
         // Fill up some caches!
-        let applyClassCache = buildApplyCache(applyCandidates, context);
+        let applyClassCache = combineCaches([
+            localCache,
+            buildApplyCache(applyCandidates, context)
+        ]);
         /**
      * When we have an apply like this:
      *
@@ -277,11 +420,14 @@ function processApply(root, context) {
             }
         }
         // Do it again, in case we have other `@apply` rules
-        processApply(root, context);
+        processApply(root, context, localCache);
     }
 }
 function expandApplyAtRules(context) {
     return (root)=>{
-        processApply(root, context);
+        // Build a cache of the user's CSS so we can use it to resolve classes used by @apply
+        let localCache = lazyCache(()=>buildLocalApplyCache(root, context)
+        );
+        processApply(root, context, localCache);
     };
 }

package/lib/lib/expandTailwindAtRules.js

@@ -191,19 +191,25 @@ function expandTailwindAtRules(context) {
             layerNodes.base.before((0, _cloneNodes).default([
                 ...baseNodes,
                 ...defaultNodes
-            ], layerNodes.base.source));
+            ], layerNodes.base.source, {
+                layer: 'base'
+            }));
             layerNodes.base.remove();
         }
         if (layerNodes.components) {
             layerNodes.components.before((0, _cloneNodes).default([
                 ...componentNodes
-            ], layerNodes.components.source));
+            ], layerNodes.components.source, {
+                layer: 'components'
+            }));
             layerNodes.components.remove();
         }
         if (layerNodes.utilities) {
             layerNodes.utilities.before((0, _cloneNodes).default([
                 ...utilityNodes
-            ], layerNodes.utilities.source));
+            ], layerNodes.utilities.source, {
+                layer: 'utilities'
+            }));
             layerNodes.utilities.remove();
         }
         // We do post-filtering to not alter the emitted order of the variants
@@ -219,10 +225,14 @@ function expandTailwindAtRules(context) {
             return true;
         });
         if (layerNodes.variants) {
-            layerNodes.variants.before((0, _cloneNodes).default(variantNodes, layerNodes.variants.source));
+            layerNodes.variants.before((0, _cloneNodes).default(variantNodes, layerNodes.variants.source, {
+                layer: 'variants'
+            }));
             layerNodes.variants.remove();
         } else if (variantNodes.length > 0) {
-            root.append((0, _cloneNodes).default(variantNodes, root.source));
+            root.append((0, _cloneNodes).default(variantNodes, root.source, {
+                layer: 'variants'
+            }));
         }
         // If we've got a utility layer and no utilities are generated there's likely something wrong
         const hasUtilityVariants = variantNodes.some((node)=>{