tailwindcss 0.0.0-insiders.cd5cb00 → 0.0.0-insiders.d50b049

package/CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+Nothing yet!
+
+## [3.0.0-alpha.1] - 2021-10-01
+
 ### Changed
 
 - Remove AOT engine, make JIT the default ([#5340](https://github.com/tailwindlabs/tailwindcss/pull/5340))
@@ -21,14 +25,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add native `aspect-ratio` utilities ([#5359](https://github.com/tailwindlabs/tailwindcss/pull/5359))
 - Unify config callback helpers into single object ([#5382](https://github.com/tailwindlabs/tailwindcss/pull/5382))
 - Preserve original color format when adding opacity whenever possible ([#5154](https://github.com/tailwindlabs/tailwindcss/pull/5154))
+- Add `accent-color` utilities ([#5387](https://github.com/tailwindlabs/tailwindcss/pull/5387))
 - Add `scroll-behavior` utilities ([#5388](https://github.com/tailwindlabs/tailwindcss/pull/5388))
+- Add `will-change` utilities ([#5448](https://github.com/tailwindlabs/tailwindcss/pull/5448))
+- Add `column` utilities ([#5457](https://github.com/tailwindlabs/tailwindcss/pull/5457))
 - Add `border-hidden` utility ([#5485](https://github.com/tailwindlabs/tailwindcss/pull/5485))
 - Add `align-sub` and `align-super` utilities by default ([#5486](https://github.com/tailwindlabs/tailwindcss/pull/5486))
 - Add `break-before`, `break-inside` and `break-after` utilities ([#5530](https://github.com/tailwindlabs/tailwindcss/pull/5530))
 - Add `file` variant for `::file-selector-button` pseudo element ([#4936](https://github.com/tailwindlabs/tailwindcss/pull/4936))
+- Add comprehensive arbitrary value support ([#5568](https://github.com/tailwindlabs/tailwindcss/pull/5568))
 - Add `touch-action` utilities ([#5603](https://github.com/tailwindlabs/tailwindcss/pull/5603))
 - Add `inherit` to default color palette ([#5597](https://github.com/tailwindlabs/tailwindcss/pull/5597))
 - Add `overflow-clip`, `overflow-x-clip` and `overflow-y-clip` utilities ([#5630](https://github.com/tailwindlabs/tailwindcss/pull/5630))
+- Add `[open]` variant ([#5627](https://github.com/tailwindlabs/tailwindcss/pull/5627))
 - Add `scroll-snap` utilities ([#5637](https://github.com/tailwindlabs/tailwindcss/pull/5637))
 - Add `border-x` and `border-y` width and color utilities ([#5639](https://github.com/tailwindlabs/tailwindcss/pull/5639))
 
@@ -1596,7 +1605,8 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.16...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.1...HEAD
+[3.0.0-alpha.1]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.16...v3.0.0-alpha.1
 [2.2.16]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.15...v2.2.16
 [2.2.15]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.14...v2.2.15
 [2.2.14]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.13...v2.2.14

package/lib/cli.js

@@ -400,11 +400,8 @@ async function build() {
         }
         return resolvedConfig;
     }
-    function extractContent(config) {
-        return config.content.content.concat(config.content.safelist);
-    }
     function extractFileGlobs(config) {
-        return extractContent(config).filter((file)=>{
+        return config.content.files.filter((file)=>{
             // Strings in this case are files / globs. If it is something else,
             // like an object it's probably a raw content object. But this object
             // is not watchable, so let's remove it.
@@ -413,7 +410,7 @@ async function build() {
         );
     }
     function extractRawContent(config) {
-        return extractContent(config).filter((file)=>{
+        return config.content.files.filter((file)=>{
             return typeof file === 'object' && file !== null;
         });
     }
@@ -425,7 +422,7 @@ async function build() {
         for (let file of files){
             changedContent.push({
                 content: _fs.default.readFileSync(_path.default.resolve(file), 'utf8'),
-                extension: _path.default.extname(file)
+                extension: _path.default.extname(file).slice(1)
             });
         }
         // Resolve raw content in the tailwind config
@@ -674,7 +671,7 @@ async function build() {
                 chain = chain.then(async ()=>{
                     changedContent.push({
                         content: _fs.default.readFileSync(_path.default.resolve(file), 'utf8'),
-                        extension: _path.default.extname(file)
+                        extension: _path.default.extname(file).slice(1)
                     });
                     await rebuild(config);
                 });
@@ -684,7 +681,7 @@ async function build() {
             chain = chain.then(async ()=>{
                 changedContent.push({
                     content: _fs.default.readFileSync(_path.default.resolve(file), 'utf8'),
-                    extension: _path.default.extname(file)
+                    extension: _path.default.extname(file).slice(1)
                 });
                 await rebuild(config);
             });

package/lib/corePlugins.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.default = void 0;
+exports.variantPlugins = exports.corePlugins = void 0;
 var _fs = _interopRequireDefault(require("fs"));
 var _postcss = _interopRequireDefault(require("postcss"));
 var _createUtilityPlugin = _interopRequireDefault(require("./util/createUtilityPlugin"));
@@ -45,8 +45,7 @@ function _interopRequireWildcard(obj) {
         return newObj;
     }
 }
-var _default = {
-    // Variant plugins
+let variantPlugins = {
     pseudoElementVariants: ({ config , addVariant  })=>{
         addVariant('first-letter', (0, _pluginUtils).transformAllSelectors((selector)=>{
             return (0, _pluginUtils).updateAllClasses(selector, (className, { withPseudo  })=>{
@@ -234,12 +233,22 @@ var _default = {
         }
     },
     directionVariants: ({ config , addVariant  })=>{
-        addVariant('ltr', (0, _pluginUtils).transformAllSelectors((selector)=>`[dir="ltr"] ${(0, _pluginUtils).updateAllClasses(selector, (className)=>`ltr${config('separator')}${className}`
-            )}`
-        ));
-        addVariant('rtl', (0, _pluginUtils).transformAllSelectors((selector)=>`[dir="rtl"] ${(0, _pluginUtils).updateAllClasses(selector, (className)=>`rtl${config('separator')}${className}`
-            )}`
-        ));
+        addVariant('ltr', (0, _pluginUtils).transformAllSelectors((selector)=>{
+            _log.default.warn('rtl-experimental', [
+                'The RTL features in Tailwind CSS are currently in preview.',
+                'Preview features are not covered by semver, and may be improved in breaking ways at any time.', 
+            ]);
+            return `[dir="ltr"] ${(0, _pluginUtils).updateAllClasses(selector, (className)=>`ltr${config('separator')}${className}`
+            )}`;
+        }));
+        addVariant('rtl', (0, _pluginUtils).transformAllSelectors((selector)=>{
+            _log.default.warn('rtl-experimental', [
+                'The RTL features in Tailwind CSS are currently in preview.',
+                'Preview features are not covered by semver, and may be improved in breaking ways at any time.', 
+            ]);
+            return `[dir="rtl"] ${(0, _pluginUtils).updateAllClasses(selector, (className)=>`rtl${config('separator')}${className}`
+            )}`;
+        }));
     },
     reducedMotionVariants: ({ config , addVariant  })=>{
         addVariant('motion-safe', (0, _pluginUtils).transformLastClasses((className)=>{
@@ -264,8 +273,8 @@ var _default = {
         if (mode === false) {
             mode = 'media';
             _log.default.warn('darkmode-false', [
-                '`darkMode` is set to `false` in your config.',
-                'This will behave just like the `media` value.', 
+                'The `darkMode` option in your Tailwind CSS configuration is set to `false`, which now behaves the same as `media`.',
+                'Change `darkMode` to `media` or remove it entirely.', 
             ]);
         }
         if (mode === 'class') {
@@ -303,8 +312,10 @@ var _default = {
                     })
             }));
         }
-    },
-    // Actual plugins
+    }
+};
+exports.variantPlugins = variantPlugins;
+let corePlugins = {
     preflight: ({ addBase  })=>{
         let preflightStyles = _postcss.default.parse(_fs.default.readFileSync(`${__dirname}/css/preflight.css`, 'utf8'));
         addBase([
@@ -1049,31 +1060,26 @@ var _default = {
         }).map(([key, value])=>{
             return [
                 key,
-                [
-                    {
-                        [`@keyframes ${prefixName(key)}`]: value
-                    }
-                ]
+                {
+                    [`@keyframes ${prefixName(key)}`]: value
+                }
             ];
         }));
         matchUtilities({
-            animate: (value, { includeRules  })=>{
+            animate: (value)=>{
                 let animations = (0, _parseAnimationValue).default(value);
-                for (let { name  } of animations){
-                    if (keyframes[name] !== undefined) {
-                        includeRules(keyframes[name], {
-                            respectImportant: false
-                        });
-                    }
-                }
-                return {
-                    animation: animations.map(({ name , value  })=>{
-                        if (name === undefined || keyframes[name] === undefined) {
-                            return value;
-                        }
-                        return value.replace(name, prefixName(name));
-                    }).join(', ')
-                };
+                return [
+                    ...animations.flatMap((animation)=>keyframes[animation.name]
+                    ),
+                    {
+                        animation: animations.map(({ name , value  })=>{
+                            if (name === undefined || keyframes[name] === undefined) {
+                                return value;
+                            }
+                            return value.replace(name, prefixName(name));
+                        }).join(', ')
+                    }, 
+                ];
             }
         }, {
             values: theme('animation')
@@ -3522,4 +3528,4 @@ var _default = {
     ]),
     content: (0, _createUtilityPlugin).default('content')
 };
-exports.default = _default;
+exports.corePlugins = corePlugins;

package/lib/featureFlags.js

@@ -49,7 +49,7 @@ function issueFlagNotices(config) {
         ).join(', ');
         _log.default.warn('experimental-flags-enabled', [
             `You have enabled experimental features: ${changes}`,
-            'Experimental features are not covered by semver, may introduce breaking changes, and can change at any time.', 
+            'Experimental features in Tailwind CSS are not covered by semver, may introduce breaking changes, and can change at any time.', 
         ]);
     }
 }

package/lib/lib/expandTailwindAtRules.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.default = expandTailwindAtRules;
+var _quickLru = _interopRequireDefault(require("quick-lru"));
 var sharedState = _interopRequireWildcard(require("./sharedState"));
 var _generateRules = require("./generateRules");
 var _bigSign = _interopRequireDefault(require("../util/bigSign"));
@@ -36,7 +37,6 @@ function _interopRequireWildcard(obj) {
     }
 }
 let env = sharedState.env;
-let contentMatchCache = sharedState.contentMatchCache;
 const PATTERNS = [
     /([^<>"'`\s]*\[\w*'[^"`\s]*'?\])/.source,
     /([^<>"'`\s]*\[\w*"[^"`\s]*"?\])/.source,
@@ -66,43 +66,30 @@ const builtInTransformers = {
 };
 function getExtractor(tailwindConfig, fileExtension) {
     let extractors = tailwindConfig.content.extract;
-    let contentOptions = tailwindConfig.content.options;
-    if (typeof extractors === 'function') {
-        extractors = {
-            DEFAULT: extractors
-        };
-    }
-    if (contentOptions.defaultExtractor) {
-        extractors.DEFAULT = contentOptions.defaultExtractor;
-    }
-    for (let { extensions , extractor  } of contentOptions.extractors || []){
-        for (let extension of extensions){
-            extractors[extension] = extractor;
-        }
-    }
     return extractors[fileExtension] || extractors.DEFAULT || builtInExtractors[fileExtension] || builtInExtractors.DEFAULT;
 }
 function getTransformer(tailwindConfig, fileExtension) {
     let transformers = tailwindConfig.content.transform;
-    if (typeof transformers === 'function') {
-        transformers = {
-            DEFAULT: transformers
-        };
-    }
     return transformers[fileExtension] || transformers.DEFAULT || builtInTransformers[fileExtension] || builtInTransformers.DEFAULT;
 }
+let extractorCache = new WeakMap();
 // Scans template contents for possible classes. This is a hot path on initial build but
 // not too important for subsequent builds. The faster the better though — if we can speed
 // up these regexes by 50% that could cut initial build time by like 20%.
-function getClassCandidates(content, extractor, contentMatchCache, candidates, seen) {
+function getClassCandidates(content, extractor, candidates, seen) {
+    if (!extractorCache.has(extractor)) {
+        extractorCache.set(extractor, new _quickLru.default({
+            maxSize: 25000
+        }));
+    }
     for (let line of content.split('\n')){
         line = line.trim();
         if (seen.has(line)) {
             continue;
         }
         seen.add(line);
-        if (contentMatchCache.has(line)) {
-            for (let match of contentMatchCache.get(line)){
+        if (extractorCache.get(extractor).has(line)) {
+            for (let match of extractorCache.get(extractor).get(line)){
                 candidates.add(match);
             }
         } else {
@@ -112,7 +99,7 @@ function getClassCandidates(content, extractor, contentMatchCache, candidates, s
             for (let match of lineMatchesSet){
                 candidates.add(match);
             }
-            contentMatchCache.set(line, lineMatchesSet);
+            extractorCache.get(extractor).set(line, lineMatchesSet);
         }
     }
 }
@@ -189,7 +176,7 @@ function expandTailwindAtRules(context) {
         for (let { content , extension  } of context.changedContent){
             let transformer = getTransformer(context.tailwindConfig, extension);
             let extractor = getExtractor(context.tailwindConfig, extension);
-            getClassCandidates(transformer(content), extractor, contentMatchCache, candidates, seen);
+            getClassCandidates(transformer(content), extractor, candidates, seen);
         }
         // ---
         // Generate the actual CSS

package/lib/lib/generateRules.js

@@ -120,13 +120,6 @@ function applyVariant(variant, matches, context) {
         let variantFunctionTuples = context.variantMap.get(variant);
         let result = [];
         for (let [meta, rule] of matches){
-            if (meta.options.respectVariants === false) {
-                result.push([
-                    meta,
-                    rule
-                ]);
-                continue;
-            }
             let container = _postcss.default.root({
                 nodes: [
                     rule.clone()
@@ -322,16 +315,14 @@ function* resolveMatches(candidate, context) {
                         ) // Re-indent
                         .join('\n')
                     ).join('\n\n');
-                    messages.push(`  - Replace "${candidate}" with "${candidate.replace('[', `[${type}:`)}" for:\n${rules}\n`);
+                    messages.push(`  Use \`${candidate.replace('[', `[${type}:`)}\` for \`${rules.trim()}\``);
                     break;
                 }
             }
             _log.default.warn([
-                // TODO: Update URL
-                `The class "${candidate}" is ambiguous and matches multiple utilities. Use a type hint (https://tailwindcss.com/docs/just-in-time-mode#ambiguous-values) to fix this.`,
-                '',
+                `The class \`${candidate}\` is ambiguous and matches multiple utilities.`,
                 ...messages,
-                `If this is just part of your content and not a class, replace it with "${candidate.replace('[', '[').replace(']', ']')}" to silence this warning.`, 
+                `If this is content and not a class, replace it with \`${candidate.replace('[', '[').replace(']', ']')}\` to silence this warning.`, 
             ]);
             continue;
         }

package/lib/lib/normalizeTailwindDirectives.js

@@ -44,7 +44,8 @@ function normalizeTailwindDirectives(root) {
                 'variants'
             ].includes(atRule.name)) {
                 _log.default.warn(`${atRule.name}-at-rule-deprecated`, [
-                    `'@${atRule.name}' is deprecated, use '@layer utilities' or '@layer components' instead.`, 
+                    `The \`@${atRule.name}\` directive has been deprecated in Tailwind CSS v3.0.`,
+                    `Use \`@layer utilities\` or \`@layer components\` instead.`, 
                 ]);
             }
             layerDirectives.add(atRule);