Remove color opacity when visited variant

ben-rogerson · Apr 25, 2022 · 8b9ea6d · 8b9ea6d
1 parent e8d091b
commit 8b9ea6d
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 14 deletions.
diff --git a/__fixtures__/visitedOpacity/visitedOpacity.js b/__fixtures__/visitedOpacity/visitedOpacity.js
@@ -0,0 +1,6 @@
+import tw from './macro'
+
+tw`visited:border-red-500 visited:bg-red-500 visited:text-red-500`
+tw`visited:border-red-500/20 visited:bg-red-500/20 visited:text-red-500/20`
+tw`visited:border-red-500/[20] visited:bg-red-500/[20] visited:text-red-500/[20]`
+tw`visited:(border-red-500 border-opacity-50) visited:(bg-red-500 bg-opacity-50) visited:(text-red-500 text-opacity-50)`
diff --git a/__snapshots__/plugin.test.js.snap b/__snapshots__/plugin.test.js.snap
@@ -59663,6 +59663,52 @@ tw\`invisible\`
 })
 
 
+`;
+
+exports[`twin.macro visitedOpacity.js: visitedOpacity.js 1`] = `
+
+import tw from './macro'
+
+tw\`visited:border-red-500 visited:bg-red-500 visited:text-red-500\`
+tw\`visited:border-red-500/20 visited:bg-red-500/20 visited:text-red-500/20\`
+tw\`visited:border-red-500/[20] visited:bg-red-500/[20] visited:text-red-500/[20]\`
+tw\`visited:(border-red-500 border-opacity-50) visited:(bg-red-500 bg-opacity-50) visited:(text-red-500 text-opacity-50)\`
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+;({
+  ':visited': {
+    borderColor: '#ef4444',
+    backgroundColor: '#ef4444',
+    color: '#ef4444',
+  },
+})
+;({
+  ':visited': {
+    borderColor: '#ef4444',
+    backgroundColor: '#ef4444',
+    color: '#ef4444',
+  },
+})
+;({
+  ':visited': {
+    borderColor: '#ef4444',
+    backgroundColor: '#ef4444',
+    color: '#ef4444',
+  },
+})
+;({
+  ':visited': {
+    borderColor: '#ef4444',
+    '--tw-border-opacity': '0.5',
+    backgroundColor: '#ef4444',
+    color: '#ef4444',
+    '--tw-text-opacity': '0.5',
+    '--tw-bg-opacity': '0.5',
+  },
+})
+
+
 `;
 
 exports[`twin.macro whitespace.js: whitespace.js 1`] = `

diff --git a/src/coerced.js b/src/coerced.js
@@ -1,7 +1,6 @@
 import deepMerge from 'lodash.merge'
 import {
   throwIf,
-  withAlpha,
   toAlpha,
   splitOnFirst,
   isSpaceSeparatedColor,
@@ -50,12 +49,7 @@ const coercedTypeMap = {
       .map(p =>
         typeof value === 'string' && value.startsWith('var(')
           ? null
-          : withAlpha({
-              color: value,
-              property: p,
-              pieces,
-              ...(variable && { variable }),
-            })
+          : toAlpha({ pieces, variable, property: p })(value, pieces.alpha)
       )
       .filter(Boolean)
 

diff --git a/src/pieces.js b/src/pieces.js
@@ -28,10 +28,7 @@ const fullVariantConfig = variantConfig({
   createPeer,
 })
 
-/**
- * Validate variants against the variants config key
- */
-const validateVariants = ({ variants, state, ...rest }) => {
+const getVariants = ({ variants, state, ...rest }) => {
   if (!variants) return []
 
   const screens = get(state.config, ['theme', 'screens'])
@@ -124,7 +121,7 @@ const splitVariants = ({ classNameRaw, state }) => {
   const hasGroupVariant = variantsList.some(v => v.startsWith('group-'))
 
   // Match the filtered variants
-  const variants = validateVariants({
+  const variants = getVariants({
     variants: variantsList,
     state,
     hasDarkVariant,
@@ -140,6 +137,7 @@ const splitVariants = ({ classNameRaw, state }) => {
     className,
     variants,
     hasVariants,
+    hasVariantVisited: variants.includes(':visited'),
   }
 }
 

diff --git a/src/utils/alpha.js b/src/utils/alpha.js
@@ -21,11 +21,15 @@ const maybeAddAlpha = (value, { pieces, variable = '' }) =>
 const toAlpha =
   ({ pieces, property, variable }) =>
   (color, alpha, fallBackColor) => {
-    const newPieces = alpha ? { ...pieces, alpha, hasAlpha: true } : pieces
+    const newPieces =
+      (pieces.hasVariantVisited && { ...pieces, alpha: '', hasAlpha: false }) ||
+      (alpha && { ...pieces, alpha, hasAlpha: true }) ||
+      pieces
+
     return withAlpha({
       color,
       property,
-      variable,
+      ...(!pieces.hasVariantVisited && { variable }),
       pieces: newPieces,
       fallBackColor,
     })