tailwindcss 0.0.0-insiders.429fe07 → 0.0.0-insiders.49f76ed

package/CHANGELOG.md

@@ -9,6 +9,65 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Reduce specificity of `abbr` rule in preflight ([#6671](https://github.com/tailwindlabs/tailwindcss/pull/6671))
+- Support HSL with hue units in arbitrary values ([#6726](https://github.com/tailwindlabs/tailwindcss/pull/6726))
+- Add `node16-linux-arm64` target for standalone CLI ([#6693](https://github.com/tailwindlabs/tailwindcss/pull/6693))
+
+## [3.0.7] - 2021-12-17
+
+### Fixed
+
+- Don't mutate custom color palette when overriding per-plugin colors ([#6546](https://github.com/tailwindlabs/tailwindcss/pull/6546))
+- Improve circular dependency detection when using `@apply` ([#6588](https://github.com/tailwindlabs/tailwindcss/pull/6588))
+- Only generate variants for non-`user` layers ([#6589](https://github.com/tailwindlabs/tailwindcss/pull/6589))
+- Properly extract classes with arbitrary values in arrays and classes followed by escaped quotes ([#6590](https://github.com/tailwindlabs/tailwindcss/pull/6590))
+- Improve jsx interpolation candidate matching ([#6593](https://github.com/tailwindlabs/tailwindcss/pull/6593))
+- Ensure `@apply` of a rule inside an AtRule works ([#6594](https://github.com/tailwindlabs/tailwindcss/pull/6594))
+
+## [3.0.6] - 2021-12-16
+
+### Fixed
+
+- Support square bracket notation in paths ([#6519](https://github.com/tailwindlabs/tailwindcss/pull/6519))
+- Ensure all plugins are executed for a given candidate ([#6540](https://github.com/tailwindlabs/tailwindcss/pull/6540))
+
+## [3.0.5] - 2021-12-15
+
+### Fixed
+
+- Revert: add `li` to list-style reset ([9777562d](https://github.com/tailwindlabs/tailwindcss/commit/9777562da37ee631bbf77374c0d14825f09ef9af))
+
+## [3.0.4] - 2021-12-15
+
+### Fixed
+
+- Insert always-on defaults layer in correct spot ([#6526](https://github.com/tailwindlabs/tailwindcss/pull/6526))
+
+## [3.0.3] - 2021-12-15
+
+### Added
+
+- Warn about invalid globs in `content` ([#6449](https://github.com/tailwindlabs/tailwindcss/pull/6449))
+- Add standalone tailwindcss CLI ([#6506](https://github.com/tailwindlabs/tailwindcss/pull/6506))
+- Add `li` to list-style reset ([00f60e6](https://github.com/tailwindlabs/tailwindcss/commit/00f60e61013c6e4e3419e4b699371a13eb30b75d))
+
+### Fixed
+
+- Don't output unparsable values ([#6469](https://github.com/tailwindlabs/tailwindcss/pull/6469))
+- Fix text decoration utilities from overriding the new text decoration color/style/thickness utilities when used with a modifier ([#6378](https://github.com/tailwindlabs/tailwindcss/pull/6378))
+- Move defaults to their own always-on layer ([#6500](https://github.com/tailwindlabs/tailwindcss/pull/6500))
+- Support negative values in safelist patterns ([#6480](https://github.com/tailwindlabs/tailwindcss/pull/6480))
+
+## [3.0.2] - 2021-12-13
+
+### Fixed
+
+- Temporarily disable optimize universal defaults, fixes issue with transforms/filters/rings not being `@apply`-able in CSS modules/Svelte components/Vue components ([#6461](https://github.com/tailwindlabs/tailwindcss/pull/6461))
+
+## [3.0.1] - 2021-12-10
+
+### Fixed
+
 - Ensure complex variants with multiple classes work ([#6311](https://github.com/tailwindlabs/tailwindcss/pull/6311))
 - Re-add `default` interop to public available functions ([#6348](https://github.com/tailwindlabs/tailwindcss/pull/6348))
 - Detect circular dependencies when using `@apply` ([#6365](https://github.com/tailwindlabs/tailwindcss/pull/6365))
@@ -1686,7 +1745,14 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.7...HEAD
+[3.0.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.6...v3.0.7
+[3.0.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.5...v3.0.6
+[3.0.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.4...v3.0.5
+[3.0.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.3...v3.0.4
+[3.0.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.2...v3.0.3
+[3.0.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.1...v3.0.2
+[3.0.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0...v3.0.1
 [3.0.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.2...v3.0.0
 [3.0.0-alpha.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.1...v3.0.0-alpha.2
 [3.0.0-alpha.1]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.19...v3.0.0-alpha.1

package/README.md

@@ -1,10 +1,14 @@
 <p>
-    <a href="https://tailwindcss.com/" target="_blank">
-      <img alt="Tailwind CSS" width="350" src="https://refactoringui.nyc3.cdn.digitaloceanspaces.com/tailwind-logo-sticker.svg">
-    </a><br>
-    A utility-first CSS framework for rapidly building custom user interfaces.
+  <a href="https://tailwindcss.com/#gh-light-mode-only" target="_blank">
+    <img src="./.github/logo-light.svg" alt="Tailwind CSS" width="350" height="70">
+  </a>
+  <a href="https://tailwindcss.com/#gh-dark-mode-only" target="_blank">
+    <img src="./.github/logo-dark.svg" alt="Tailwind CSS" width="350" height="70">
+  </a>
 </p>
 
+A utility-first CSS framework for rapidly building custom user interfaces.
+
 <p>
     <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/workflow/status/tailwindlabs/tailwindcss/Node.js%20CI" 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>

package/lib/corePlugins.js

@@ -914,26 +914,24 @@ let corePlugins = {
     ], {
         supportsNegativeValues: true
     }),
-    transform: ({ addBase , addUtilities  })=>{
-        addBase({
-            '@defaults transform': {
-                '--tw-translate-x': '0',
-                '--tw-translate-y': '0',
-                '--tw-rotate': '0',
-                '--tw-skew-x': '0',
-                '--tw-skew-y': '0',
-                '--tw-scale-x': '1',
-                '--tw-scale-y': '1',
-                '--tw-transform': [
-                    'translateX(var(--tw-translate-x))',
-                    'translateY(var(--tw-translate-y))',
-                    'rotate(var(--tw-rotate))',
-                    'skewX(var(--tw-skew-x))',
-                    'skewY(var(--tw-skew-y))',
-                    'scaleX(var(--tw-scale-x))',
-                    'scaleY(var(--tw-scale-y))', 
-                ].join(' ')
-            }
+    transform: ({ addDefaults , addUtilities  })=>{
+        addDefaults('transform', {
+            '--tw-translate-x': '0',
+            '--tw-translate-y': '0',
+            '--tw-rotate': '0',
+            '--tw-skew-x': '0',
+            '--tw-skew-y': '0',
+            '--tw-scale-x': '1',
+            '--tw-scale-y': '1',
+            '--tw-transform': [
+                'translateX(var(--tw-translate-x))',
+                'translateY(var(--tw-translate-y))',
+                'rotate(var(--tw-rotate))',
+                'skewX(var(--tw-skew-x))',
+                'skewY(var(--tw-skew-y))',
+                'scaleX(var(--tw-scale-x))',
+                'scaleY(var(--tw-scale-y))', 
+            ].join(' ')
         });
         addUtilities({
             '.transform': {
@@ -1001,14 +999,12 @@ let corePlugins = {
         });
     },
     cursor: (0, _createUtilityPlugin).default('cursor'),
-    touchAction: ({ addBase , addUtilities  })=>{
-        addBase({
-            '@defaults touch-action': {
-                '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)'
-            }
+    touchAction: ({ addDefaults , addUtilities  })=>{
+        addDefaults('touch-action', {
+            '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)'
         });
         addUtilities({
             '.touch-auto': {
@@ -1096,11 +1092,9 @@ let corePlugins = {
             }
         });
     },
-    scrollSnapType: ({ addUtilities , addBase  })=>{
-        addBase({
-            '@defaults scroll-snap-type': {
-                '--tw-scroll-snap-strictness': 'proximity'
-            }
+    scrollSnapType: ({ addDefaults , addUtilities  })=>{
+        addDefaults('scroll-snap-type', {
+            '--tw-scroll-snap-strictness': 'proximity'
         });
         addUtilities({
             '.snap-none': {
@@ -2095,22 +2089,18 @@ let corePlugins = {
             }
         });
     },
-    borderColor: ({ addBase , matchUtilities , theme , corePlugins: corePlugins2  })=>{
+    borderColor: ({ addDefaults , matchUtilities , theme , corePlugins: corePlugins2  })=>{
         if (!corePlugins2('borderOpacity')) {
             let value = theme('borderColor.DEFAULT', 'currentColor');
-            addBase({
-                '@defaults border-width': {
-                    'border-color': (0, _toColorValue).default(value)
-                }
+            addDefaults('border-width', {
+                'border-color': (0, _toColorValue).default(value)
             });
         } else {
-            addBase({
-                '@defaults border-width': (0, _withAlphaVariable).default({
-                    color: theme('borderColor.DEFAULT', 'currentColor'),
-                    property: 'border-color',
-                    variable: '--tw-border-opacity'
-                })
-            });
+            addDefaults('border-width', (0, _withAlphaVariable).default({
+                color: theme('borderColor.DEFAULT', 'currentColor'),
+                property: 'border-color',
+                variable: '--tw-border-opacity'
+            }));
         }
         matchUtilities({
             border: (value)=>{
@@ -2792,16 +2782,16 @@ let corePlugins = {
     textDecoration: ({ addUtilities  })=>{
         addUtilities({
             '.underline': {
-                'text-decoration': 'underline'
+                'text-decoration-line': 'underline'
             },
             '.overline': {
-                'text-decoration': 'overline'
+                'text-decoration-line': 'overline'
             },
             '.line-through': {
-                'text-decoration': 'line-through'
+                'text-decoration-line': 'line-through'
             },
             '.no-underline': {
-                'text-decoration': 'none'
+                'text-decoration-line': 'none'
             }
         });
     },
@@ -3064,14 +3054,12 @@ let corePlugins = {
             `var(--tw-ring-shadow, 0 0 #0000)`,
             `var(--tw-shadow)`, 
         ].join(', ');
-        return function({ matchUtilities , addBase , theme  }) {
-            addBase({
-                '@defaults box-shadow': {
-                    '--tw-ring-offset-shadow': '0 0 #0000',
-                    '--tw-ring-shadow': '0 0 #0000',
-                    '--tw-shadow': '0 0 #0000',
-                    '--tw-shadow-colored': '0 0 #0000'
-                }
+        return function({ matchUtilities , addDefaults , theme  }) {
+            addDefaults(' box-shadow', {
+                '--tw-ring-offset-shadow': '0 0 #0000',
+                '--tw-ring-shadow': '0 0 #0000',
+                '--tw-shadow': '0 0 #0000',
+                '--tw-shadow-colored': '0 0 #0000'
             });
             matchUtilities({
                 shadow: (value)=>{
@@ -3180,20 +3168,18 @@ let corePlugins = {
             ]
         });
     },
-    ringWidth: ({ matchUtilities , addBase , addUtilities , theme  })=>{
+    ringWidth: ({ matchUtilities , addDefaults , addUtilities , theme  })=>{
         let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5');
         let ringColorDefault = (0, _withAlphaVariable).withAlphaValue(theme('ringColor.DEFAULT'), ringOpacityDefault, `rgb(147 197 253 / ${ringOpacityDefault})`);
-        addBase({
-            '@defaults ring-width': {
-                '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
-                '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
-                '--tw-ring-color': ringColorDefault,
-                '--tw-ring-offset-shadow': '0 0 #0000',
-                '--tw-ring-shadow': '0 0 #0000',
-                '--tw-shadow': '0 0 #0000',
-                '--tw-shadow-colored': '0 0 #0000'
-            }
+        addDefaults('ring-width', {
+            '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
+            '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
+            '--tw-ring-color': ringColorDefault,
+            '--tw-ring-offset-shadow': '0 0 #0000',
+            '--tw-ring-shadow': '0 0 #0000',
+            '--tw-shadow': '0 0 #0000',
+            '--tw-shadow-colored': '0 0 #0000'
         });
         matchUtilities({
             ring: (value)=>{
@@ -3396,30 +3382,28 @@ let corePlugins = {
             values: theme('sepia')
         });
     },
-    filter: ({ addBase , addUtilities  })=>{
-        addBase({
-            '@defaults filter': {
-                '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-filter': [
-                    'var(--tw-blur)',
-                    'var(--tw-brightness)',
-                    'var(--tw-contrast)',
-                    'var(--tw-grayscale)',
-                    'var(--tw-hue-rotate)',
-                    'var(--tw-invert)',
-                    'var(--tw-saturate)',
-                    'var(--tw-sepia)',
-                    'var(--tw-drop-shadow)', 
-                ].join(' ')
-            }
+    filter: ({ addDefaults , addUtilities  })=>{
+        addDefaults('filter', {
+            '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-filter': [
+                'var(--tw-blur)',
+                'var(--tw-brightness)',
+                'var(--tw-contrast)',
+                'var(--tw-grayscale)',
+                'var(--tw-hue-rotate)',
+                'var(--tw-invert)',
+                'var(--tw-saturate)',
+                'var(--tw-sepia)',
+                'var(--tw-drop-shadow)', 
+            ].join(' ')
         });
         addUtilities({
             '.filter': {
@@ -3559,30 +3543,28 @@ let corePlugins = {
             values: theme('backdropSepia')
         });
     },
-    backdropFilter: ({ addBase , addUtilities  })=>{
-        addBase({
-            '@defaults backdrop-filter': {
-                '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
-                '--tw-backdrop-filter': [
-                    'var(--tw-backdrop-blur)',
-                    'var(--tw-backdrop-brightness)',
-                    'var(--tw-backdrop-contrast)',
-                    'var(--tw-backdrop-grayscale)',
-                    'var(--tw-backdrop-hue-rotate)',
-                    'var(--tw-backdrop-invert)',
-                    'var(--tw-backdrop-opacity)',
-                    'var(--tw-backdrop-saturate)',
-                    'var(--tw-backdrop-sepia)', 
-                ].join(' ')
-            }
+    backdropFilter: ({ addDefaults , addUtilities  })=>{
+        addDefaults('backdrop-filter', {
+            '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-backdrop-filter': [
+                'var(--tw-backdrop-blur)',
+                'var(--tw-backdrop-brightness)',
+                'var(--tw-backdrop-contrast)',
+                'var(--tw-backdrop-grayscale)',
+                'var(--tw-backdrop-hue-rotate)',
+                'var(--tw-backdrop-invert)',
+                'var(--tw-backdrop-opacity)',
+                'var(--tw-backdrop-saturate)',
+                'var(--tw-backdrop-sepia)', 
+            ].join(' ')
         });
         addUtilities({
             '.backdrop-filter': {

package/lib/css/preflight.css

@@ -58,7 +58,7 @@ hr {
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
-abbr[title] {
+abbr:where([title]) {
   text-decoration: underline dotted;
 }
 
@@ -144,7 +144,7 @@ sup {
 table {
   text-indent: 0; /* 1 */
   border-color: inherit; /* 2 */
-  border-collapse: collapse;  /* 3 */
+  border-collapse: collapse; /* 3 */
 }
 
 /*
@@ -310,7 +310,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  opacity: 1;  /* 1 */
+  opacity: 1; /* 1 */
   color: theme('colors.gray.400', #9ca3af); /* 2 */
 }
 

package/lib/featureFlags.js

@@ -13,7 +13,9 @@ function _interopRequireDefault(obj) {
     };
 }
 let defaults = {
-    optimizeUniversalDefaults: true
+    // TODO: Drop this once we can safely rely on optimizeUniversalDefaults being
+    // the default.
+    optimizeUniversalDefaults: process.env.NODE_ENV === 'test' ? true : false
 };
 let featureFlags = {
     future: [],

package/lib/lib/defaultExtractor.js

@@ -0,0 +1,40 @@
+"use strict";
+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]*'\])/.source,
+    /([^<>"'`\s]*\["[^"'`\s]*"\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source,
+    /([^<>"'`\s]*\[[^"'`\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;
+} // Regular utilities
+ // {{modifier}:}*{namespace}{-{suffix}}*{/{opacityModifier}}?
+ // Arbitrary values
+ // {{modifier}:}*{namespace}-[{arbitraryValue}]{/{opacityModifier}}?
+ // arbitraryValue: no whitespace, balanced quotes unless within quotes, balanced brackets unless within quotes
+ // Arbitrary properties
+ // {{modifier}:}*[{validCssPropertyName}:{arbitraryValue}]

package/lib/lib/evaluateTailwindFunctions.js

@@ -43,7 +43,7 @@ function listKeys(obj) {
 function validatePath(config, path, defaultValue) {
     const pathString = Array.isArray(path) ? pathToString(path) : path.replace(/^['"]+/g, '').replace(/['"]+$/g, '');
     const pathSegments = Array.isArray(path) ? path : (0, _toPath).toPath(pathString);
-    const value = (0, _dlv).default(config.theme, pathString, defaultValue);
+    const value = (0, _dlv).default(config.theme, pathSegments, defaultValue);
     if (value === undefined) {
         let error = `'${pathString}' does not exist in your theme config.`;
         const parentSegments = pathSegments.slice(0, -1);

package/lib/lib/expandApplyAtRules.js

@@ -13,17 +13,28 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function containsBase(selector, classCandidateBase, separator) {
-    return (0, _postcssSelectorParser).default((selectors)=>{
-        let contains = false;
-        selectors.walkClasses((classSelector)=>{
-            if (classSelector.value.split(separator).pop() === classCandidateBase) {
-                contains = true;
-                return false;
-            }
-        });
-        return contains;
-    }).transformSync(selector);
+function extractClasses(node) {
+    let classes = new Set();
+    let container = _postcss.default.root({
+        nodes: [
+            node.clone()
+        ]
+    });
+    container.walkRules((rule)=>{
+        (0, _postcssSelectorParser).default((selectors)=>{
+            selectors.walkClasses((classSelector)=>{
+                classes.add(classSelector.value);
+            });
+        }).processSync(rule.selector);
+    });
+    return Array.from(classes);
+}
+function extractBaseCandidates(candidates, separator) {
+    let baseClasses = new Set();
+    for (let candidate of candidates){
+        baseClasses.add(candidate.split(separator).pop());
+    }
+    return Array.from(baseClasses);
 }
 function prefix(context, selector) {
     let prefix1 = context.tailwindConfig.prefix;
@@ -186,10 +197,36 @@ function processApply(root, context) {
         for (const [parent, candidates] of perParentApplies){
             let siblings = [];
             for (let [applyCandidate, important, rules] of candidates){
-                let base = applyCandidate.split(context.tailwindConfig.separator).pop();
                 for (let [meta, node] of rules){
-                    if (containsBase(parent.selector, base, context.tailwindConfig.separator) && containsBase(node.selector, base, context.tailwindConfig.separator)) {
-                        throw node.error(`Circular dependency detected when using: \`@apply ${applyCandidate}\``);
+                    let parentClasses = extractClasses(parent);
+                    let nodeClasses = extractClasses(node);
+                    // Add base utility classes from the @apply node to the list of
+                    // classes to check whether it intersects and therefore results in a
+                    // circular dependency or not.
+                    //
+                    // E.g.:
+                    // .foo {
+                    //   @apply hover:a; // This applies "a" but with a modifier
+                    // }
+                    //
+                    // We only have to do that with base classes of the `node`, not of the `parent`
+                    // E.g.:
+                    // .hover\:foo {
+                    //   @apply bar;
+                    // }
+                    // .bar {
+                    //   @apply foo;
+                    // }
+                    //
+                    // This should not result in a circular dependency because we are
+                    // just applying `.foo` and the rule above is `.hover\:foo` which is
+                    // unrelated. However, if we were to apply `hover:foo` then we _did_
+                    // have to include this one.
+                    nodeClasses = nodeClasses.concat(extractBaseCandidates(nodeClasses, context.tailwindConfig.separator));
+                    let intersects = parentClasses.some((selector)=>nodeClasses.includes(selector)
+                    );
+                    if (intersects) {
+                        throw node.error(`You cannot \`@apply\` the \`${applyCandidate}\` utility here because it creates a circular dependency.`);
                     }
                     let root = _postcss.default.root({
                         nodes: [
@@ -199,6 +236,42 @@ function processApply(root, context) {
                     let canRewriteSelector = node.type !== 'atrule' || node.type === 'atrule' && node.name !== 'keyframes';
                     if (canRewriteSelector) {
                         root.walkRules((rule)=>{
+                            // Let's imagine you have the following structure:
+                            //
+                            // .foo {
+                            //   @apply bar;
+                            // }
+                            //
+                            // @supports (a: b) {
+                            //   .bar {
+                            //     color: blue
+                            //   }
+                            //
+                            //   .something-unrelated {}
+                            // }
+                            //
+                            // In this case we want to apply `.bar` but it happens to be in
+                            // an atrule node. We clone that node instead of the nested one
+                            // because we still want that @supports rule to be there once we
+                            // applied everything.
+                            //
+                            // However it happens to be that the `.something-unrelated` is
+                            // also in that same shared @supports atrule. This is not good,
+                            // and this should not be there. The good part is that this is
+                            // a clone already and it can be safely removed. The question is
+                            // how do we know we can remove it. Basically what we can do is
+                            // match it against the applyCandidate that you want to apply. If
+                            // it doesn't match the we can safely delete it.
+                            //
+                            // If we didn't do this, then the `replaceSelector` function
+                            // would have replaced this with something that didn't exist and
+                            // therefore it removed the selector altogether. In this specific
+                            // case it would result in `{}` instead of `.something-unrelated {}`
+                            if (!extractClasses(rule).some((candidate)=>candidate === applyCandidate
+                            )) {
+                                rule.remove();
+                                return;
+                            }
                             rule.selector = replaceSelector(parent.selector, rule.selector, applyCandidate);
                             rule.walkDecls((d)=>{
                                 d.important = meta.important || important;
@@ -220,7 +293,6 @@ function processApply(root, context) {
             let nodes = siblings.sort(([a], [z])=>(0, _bigSign).default(a.sort - z.sort)
             ).map((s)=>s[1]
             );
-            // console.log(parent)
             // `parent` refers to the node at `.abc` in: .abc { @apply mt-2 }
             parent.after(nodes);
         }