tailwindcss 0.0.0-insiders.45e17dd → 0.0.0-insiders.48728ed

package/CHANGELOG.md

@@ -9,8 +9,71 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### 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))
+- 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))
+- Fix generation of `div:not(.foo)` if `.foo` is never defined ([#7815](https://github.com/tailwindlabs/tailwindcss/pull/7815))
+
+### 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))
+- 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))
+
+## [3.0.23] - 2022-02-16
+
+### Fixed
+
+- Remove opacity variables from `:visited` pseudo class ([#7458](https://github.com/tailwindlabs/tailwindcss/pull/7458))
+- Support arbitrary values + calc + theme with quotes ([#7462](https://github.com/tailwindlabs/tailwindcss/pull/7462))
+- Don't duplicate layer output when scanning content with variants + wildcards ([#7478](https://github.com/tailwindlabs/tailwindcss/pull/7478))
+- Implement `getClassOrder` instead of `sortClassList` ([#7459](https://github.com/tailwindlabs/tailwindcss/pull/7459))
+
+## [3.0.22] - 2022-02-11
+
+### Fixed
+
+- Temporarily move `postcss` to dependencies ([#7424](https://github.com/tailwindlabs/tailwindcss/pull/7424))
+
+## [3.0.21] - 2022-02-10
+
+### Fixed
+
+- Move prettier plugin to dev dependencies ([#7418](https://github.com/tailwindlabs/tailwindcss/pull/7418))
+
+## [3.0.20] - 2022-02-10
+
+### Added
+
+- Expose `context.sortClassList(classes)` ([#7412](https://github.com/tailwindlabs/tailwindcss/pull/7412))
+
+## [3.0.19] - 2022-02-07
+
+### Fixed
+
 - Fix preflight border color fallback ([#7288](https://github.com/tailwindlabs/tailwindcss/pull/7288))
 - Correctly parse shadow lengths without a leading zero ([#7289](https://github.com/tailwindlabs/tailwindcss/pull/7289))
+- Don't crash when scanning extremely long class candidates ([#7331](https://github.com/tailwindlabs/tailwindcss/pull/7331))
+- Use less hacky fix for URLs detected as custom properties ([#7275](https://github.com/tailwindlabs/tailwindcss/pull/7275))
+- Correctly generate negative utilities when dash is before the prefix ([#7295](https://github.com/tailwindlabs/tailwindcss/pull/7295))
+- Detect prefixed negative utilities in the safelist ([#7295](https://github.com/tailwindlabs/tailwindcss/pull/7295))
 
 ## [3.0.18] - 2022-01-28
 
@@ -1839,7 +1902,12 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.18...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.23...HEAD
+[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
+[3.0.20]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.19...v3.0.20
+[3.0.19]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.18...v3.0.19
 [3.0.18]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.17...v3.0.18
 [3.0.17]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.16...v3.0.17
 [3.0.16]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.15...v3.0.16

package/LICENSE

@@ -1,7 +1,6 @@
 MIT License
 
-Copyright (c) Adam Wathan <adam.wathan@gmail.com>
-Copyright (c) Jonathan Reinink <jonathan@reinink.ca>
+Copyright (c) Tailwind Labs, Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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"));
@@ -116,7 +117,28 @@ let variantPlugins = {
             'last-of-type',
             'only-of-type',
             // State
-            'visited',
+            [
+                'visited',
+                ({ container  })=>{
+                    let toRemove = [
+                        '--tw-text-opacity',
+                        '--tw-border-opacity',
+                        '--tw-bg-opacity'
+                    ];
+                    container.walkDecls((decl)=>{
+                        if (toRemove.includes(decl.prop)) {
+                            decl.remove();
+                            return;
+                        }
+                        for (const varName of toRemove){
+                            if (decl.value.includes(`/ var(${varName})`)) {
+                                decl.value = decl.value.replace(`/ var(${varName})`, '');
+                            }
+                        }
+                    });
+                    return ':visited';
+                }, 
+            ],
             'target',
             [
                 'open',
@@ -149,13 +171,22 @@ let variantPlugins = {
             ]
         );
         for (let [variantName, state] of pseudoVariants){
-            addVariant(variantName, `&${state}`);
+            addVariant(variantName, (ctx)=>{
+                let result = typeof state === 'function' ? state(ctx) : state;
+                return `&${result}`;
+            });
         }
         for (let [variantName1, state1] of pseudoVariants){
-            addVariant(`group-${variantName1}`, `:merge(.group)${state1} &`);
+            addVariant(`group-${variantName1}`, (ctx)=>{
+                let result = typeof state1 === 'function' ? state1(ctx) : state1;
+                return `:merge(.group)${result} &`;
+            });
         }
         for (let [variantName2, state2] of pseudoVariants){
-            addVariant(`peer-${variantName2}`, `:merge(.peer)${state2} ~ &`);
+            addVariant(`peer-${variantName2}`, (ctx)=>{
+                let result = typeof state2 === 'function' ? state2(ctx) : state2;
+                return `:merge(.peer)${result} ~ &`;
+            });
         }
     },
     directionVariants: ({ addVariant  })=>{
@@ -179,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', [
@@ -189,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)');
         }
@@ -790,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',
@@ -959,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])=>{
@@ -2501,6 +2564,12 @@ let corePlugins = {
             },
             '.text-justify': {
                 'text-align': 'justify'
+            },
+            '.text-start': {
+                'text-align': 'start'
+            },
+            '.text-end': {
+                'text-align': 'end'
             }
         });
     },
@@ -3118,8 +3187,9 @@ let corePlugins = {
         });
     },
     ringWidth: ({ matchUtilities , addDefaults , addUtilities , theme  })=>{
+        var ref;
         let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5');
-        let ringColorDefault = (0, _withAlphaVariable).withAlphaValue(theme('ringColor.DEFAULT'), ringOpacityDefault, `rgb(147 197 253 / ${ringOpacityDefault})`);
+        let ringColorDefault = (0, _withAlphaVariable).withAlphaValue((ref = theme('ringColor')) === null || ref === void 0 ? void 0 : ref.DEFAULT, ringOpacityDefault, `rgb(147 197 253 / ${ringOpacityDefault})`);
         addDefaults('ring-width', {
             '--tw-ring-inset': ' ',
             '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
@@ -3154,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/featureFlags.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.flagEnabled = flagEnabled;
 exports.issueFlagNotices = issueFlagNotices;
 exports.default = void 0;
-var _chalk = _interopRequireDefault(require("chalk"));
+var _picocolors = _interopRequireDefault(require("picocolors"));
 var _log = _interopRequireDefault(require("./util/log"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -47,7 +47,7 @@ function issueFlagNotices(config) {
         return;
     }
     if (experimentalFlagsEnabled(config).length > 0) {
-        let changes = experimentalFlagsEnabled(config).map((s)=>_chalk.default.yellow(s)
+        let changes = experimentalFlagsEnabled(config).map((s)=>_picocolors.default.yellow(s)
         ).join(', ');
         _log.default.warn('experimental-flags-enabled', [
             `You have enabled experimental features: ${changes}`,

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/collapseAdjacentRules.js

@@ -14,7 +14,7 @@ let comparisonMap = {
 };
 let types = new Set(Object.keys(comparisonMap));
 function collapseAdjacentRules() {
-    return (root)=>{
+    function collapseRulesIn(root) {
         let currentRule = null;
         root.each((node)=>{
             if (!types.has(node.type)) {
@@ -37,5 +37,18 @@ function collapseAdjacentRules() {
                 currentRule = node;
             }
         });
+        // After we've collapsed adjacent rules & at-rules, we need to collapse
+        // adjacent rules & at-rules that are children of at-rules.
+        // We do not care about nesting rules because Tailwind CSS
+        // explicitly does not handle rule nesting on its own as
+        // the user is expected to use a nesting plugin
+        root.each((node)=>{
+            if (node.type === 'atrule') {
+                collapseRulesIn(node);
+            }
+        });
+    }
+    return (root)=>{
+        collapseRulesIn(root);
     };
 }

package/lib/lib/defaultExtractor.js

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