Fix applying utilities that depend on special resets

Author: adamwathan

src/corePlugins/boxShadow.js

@@ -8,19 +8,19 @@ let shadowReset = {
   },
 }
 
-module.exports = function ({ matchUtilities, jit: { theme } }) {
+module.exports = function ({ addBase, matchUtilities, jit: { theme } }) {
+  addBase(shadowReset)
   matchUtilities({
     shadow: (modifier, { theme }) => {
       modifier = modifier === '' ? 'DEFAULT' : modifier
 
       let value = transformValue(theme.boxShadow[modifier])
 
-      if (modifier === '' || value === undefined) {
+      if (value === undefined) {
         return []
       }
 
       return [
-        [shadowReset, { respectVariants: false }],
         {
           [nameClass('shadow', modifier)]: {
             '--tw-shadow': value === 'none' ? '0 0 #0000' : value,

src/corePlugins/ringWidth.js

@@ -12,7 +12,7 @@ function safeCall(callback, defaultValue) {
   }
 }
 
-module.exports = function ({ matchUtilities, addUtilities, jit: { theme } }) {
+module.exports = function ({ addBase, matchUtilities, addUtilities, jit: { theme } }) {
   let ringColorDefault = (([r, g, b]) => {
     return `rgba(${r}, ${g}, ${b}, ${dlv(theme, ['ringOpacity', 'DEFAULT'], '0.5')})`
   })(safeCall(() => toRgba(dlv(theme, ['ringColor', 'DEFAULT'])), ['147', '197', '253']))
@@ -28,6 +28,8 @@ module.exports = function ({ matchUtilities, addUtilities, jit: { theme } }) {
     },
   }
 
+  addBase(ringReset)
+
   matchUtilities({
     ring: (modifier, { theme }) => {
       let value = asLength(modifier, theme['ringWidth'])
@@ -37,12 +39,6 @@ module.exports = function ({ matchUtilities, addUtilities, jit: { theme } }) {
       }
 
       return [
-        [
-          ringReset,
-          {
-            respectVariants: false,
-          },
-        ],
         {
           [nameClass('ring', modifier)]: {
             '--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,

src/lib/expandApplyAtRules.js

@@ -79,10 +79,20 @@ function expandApplyAtRules(context) {
        * Which means that we can replace `.hover\:font-bold` with `.abc` in `.hover\:font-bold:hover` resulting in `.abc:hover`
        */
       // TODO: Should we use postcss-selector-parser for this instead?
-      function replaceSelector(selector, utilitySelector, candidate) {
+      function replaceSelector(selector, utilitySelectors, candidate) {
         return selector
           .split(/\s*,\s*/g)
-          .map((s) => utilitySelector.replace(`.${escape(candidate)}`, s))
+          .map((s) => {
+            let replaced = []
+            for (let utilitySelector of utilitySelectors.split(/\s*,\s*/g)) {
+              let replacedSelector = utilitySelector.replace(`.${escape(candidate)}`, s)
+              if (replacedSelector === utilitySelector) {
+                continue
+              }
+              replaced.push(replacedSelector)
+            }
+            return replaced.join(', ')
+          })
           .join(', ')
       }
 

src/lib/setupContext.js

@@ -436,6 +436,21 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         context.candidateRuleMap.get(identifier).push([{ sort: offset, layer: 'utilities' }, rule])
       }
     },
+    matchBase: function (base) {
+      let offset = offsets.base++
+
+      for (let identifier in base) {
+        let value = [].concat(base[identifier])
+
+        let withOffsets = value.map((rule) => [{ sort: offset, layer: 'base' }, rule])
+
+        if (!context.candidateRuleMap.has(identifier)) {
+          context.candidateRuleMap.set(identifier, [])
+        }
+
+        context.candidateRuleMap.get(identifier).push(...withOffsets)
+      }
+    },
     matchUtilities: function (utilities) {
       let offset = offsets.utilities++
 

tests/01-sanity.test.css

@@ -126,6 +126,15 @@
     }
   }
 }
+* {
+  --tw-shadow: 0 0 #0000;
+  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(59, 130, 246, 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+}
 h1 {
   font-size: 1.5rem;
   font-weight: 700;
@@ -219,6 +228,24 @@ div {
 .aspect-h-4 {
   --tw-aspect-h: 4;
 }
+.test-apply-font-variant {
+  --tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
+  --tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
+  --tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
+  --tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
+  --tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
+    var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+  --tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
+  --tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
+  --tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
+  --tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
+  --tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
+    var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+  --tw-numeric-spacing: tabular-nums;
+  --tw-ordinal: ordinal;
+}
 .custom-component {
   background: #123456;
 }
@@ -267,9 +294,6 @@ div {
 .font-medium {
   font-weight: 500;
 }
-* {
-  --tw-shadow: 0 0 #0000;
-}
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -280,14 +304,6 @@ div {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-* {
-  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgba(59, 130, 246, 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-}
 .filter-none {
   filter: none;
 }

tests/01-sanity.test.html

@@ -13,6 +13,7 @@
       class="container hover:container sm:container md:container text-center sm:text-center md:text-center"
     ></div>
     <div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
+    <div class="test-apply-font-variant"></div>
     <div class="mt-6"></div>
     <div class="bg-black"></div>
     <div class="custom-util"></div>

tests/01-sanity.test.js

@@ -72,6 +72,9 @@ test('it works', () => {
     }
   }
   @layer components {
+    .test-apply-font-variant {
+      @apply ordinal tabular-nums;
+    }
     .custom-component {
       background: #123456;
     }