Fix issue with utility base styles being omitted when only variants are used

Author: adamwathan

src/corePlugins/index.js

@@ -212,11 +212,11 @@ module.exports = {
   placeholderOpacity: require('./placeholderOpacity'),
   pointerEvents: require('./pointerEvents'),
   resize: require('./resize'),
+  ringWidth: require('./ringWidth'),
+  ringOffsetWidth: require('./ringOffsetWidth'),
   ringColor: require('./ringColor'),
   ringOffsetColor: require('./ringOffsetColor'),
-  ringOffsetWidth: require('./ringOffsetWidth'),
   ringOpacity: require('./ringOpacity'),
-  ringWidth: require('./ringWidth'),
   space: require('./space'),
   stroke: require('./stroke'),
   strokeWidth: require('./strokeWidth'),

src/corePlugins/ringWidth.js

@@ -10,21 +10,25 @@ function safeCall(callback, defaultValue) {
   }
 }
 
-let ringReset = ['*']
-
 module.exports = function ({ jit: { theme, addUtilities } }) {
   let ringColorDefault = (([r, g, b]) => {
     return `rgba(${r}, ${g}, ${b}, ${theme.ringOpacity?.DEFAULT ?? '0.5'})`
   })(safeCall(() => toRgba(theme.ringOpacity?.DEFAULT), ['147', '197', '253']))
 
-  ringReset[1] = {
-    '--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',
-  }
+  let ringReset = [
+    '*',
+    {
+      '--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',
+    },
+    {
+      respectVariants: false,
+    },
+  ]
 
   addUtilities({
     ring: [

src/index.js

@@ -412,6 +412,13 @@ function applyVariant(variant, matches, { variantMap }) {
     let result = []
 
     for (let [sort, rule] of matches) {
+      let [, , options = {}] = rule
+
+      if (options.respectVariants === false) {
+        result.push([sort, rule])
+        continue
+      }
+
       let ruleWithVariant = applyThisVariant(rule)
 
       if (ruleWithVariant === null) {

src/index.test.css

@@ -170,8 +170,13 @@
 .font-medium {
   font-weight: 500;
 }
-.ring-offset-blue-500 {
-  --tw-ring-offset-color: #3b82f6;
+* {
+  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(147, 197, 253, 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
 }
 .text-center {
   text-align: center;
@@ -222,6 +227,17 @@
 .focus\:font-normal:focus {
   font-weight: 400;
 }
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+    var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
+    var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.focus\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity));
+}
 .hover\:focus\:font-light:hover:focus {
   font-weight: 300;
 }

src/index.test.html

@@ -14,7 +14,7 @@
     <div class="focus:font-normal"></div>
     <div class="font-medium"></div>
     <div class="bg-opacity-50"></div>
-    <div class="ring-offset-blue-500"></div>
+    <div class="focus:ring-2 focus:ring-blue-500"></div>
     <div class="hover:font-bold"></div>
     <div class="disabled:font-bold"></div>
     <div class="hover:focus:font-light"></div>