Add slash alphas

__fixtures__/disableColorVariables/config.json

@@ -0,0 +1,3 @@
+{
+  "disableColorVariables": true
+}

__fixtures__/disableColorVariables/disableColorVariables.js

@@ -0,0 +1,34 @@
+import tw from './macro'
+
+tw`placeholder-red-500`
+tw`placeholder-red-500/25`
+
+tw`bg-red-500`
+tw`bg-red-500/25`
+
+tw`from-red-500`
+tw`from-red-500/25`
+
+tw`via-red-500`
+tw`via-red-500/25`
+
+tw`to-red-500`
+tw`to-red-500/25`
+
+tw`border-red-500`
+tw`border-red-500/25`
+
+tw`ring-red-500`
+tw`ring-red-500/25`
+
+tw`ring-offset-red-500`
+tw`ring-offset-red-500/25`
+
+tw`text-red-500`
+tw`text-red-500/25`
+
+tw`stroke-red-500`
+tw`stroke-red-500/25`
+
+tw`fill-red-500`
+tw`fill-red-500/25`

__fixtures__/disableColorVariables/tailwind.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  theme: {
+    stroke: theme => theme('colors'),
+    fill: theme => theme('colors'),
+  },
+}

__fixtures__/slashAlpha/slashAlpha.js

@@ -0,0 +1,122 @@
+import tw from './macro'
+
+tw`placeholder-red-500`
+tw`placeholder-red-500/25`
+tw`placeholder-red-500/fromConfig`
+tw`placeholder-red-500/[.555]`
+tw`placeholder-red-500/[var(--myvar)]`
+
+tw`placeholder-electric`
+tw`placeholder-electric/25`
+tw`placeholder-electric/[.555]`
+tw`placeholder-electric/[var(--myvar)]`
+
+tw`bg-red-500`
+tw`bg-red-500/25`
+tw`bg-red-500/fromConfig`
+tw`bg-red-500/[.555]`
+tw`bg-red-500/[var(--myvar)]`
+
+tw`bg-electric`
+tw`bg-electric/25`
+tw`bg-electric/[.555]`
+tw`bg-electric/[var(--myvar)]`
+
+tw`from-red-500`
+tw`from-red-500/25`
+tw`from-red-500/fromConfig`
+tw`from-red-500/[.555]`
+tw`from-red-500/[var(--myvar)]`
+
+tw`from-electric`
+tw`from-electric/25`
+tw`from-electric/[.555]`
+tw`from-electric/[var(--myvar)]`
+
+tw`via-red-500`
+tw`via-red-500/25`
+tw`via-red-500/fromConfig`
+tw`via-red-500/[.555]`
+tw`via-red-500/[var(--myvar)]`
+
+tw`via-electric`
+tw`via-electric/25`
+tw`via-electric/[.555]`
+tw`via-electric/[var(--myvar)]`
+
+tw`to-red-500`
+tw`to-red-500/25`
+tw`to-red-500/fromConfig`
+tw`to-red-500/[.555]`
+tw`to-red-500/[var(--myvar)]`
+
+tw`to-electric`
+tw`to-electric/25`
+tw`to-electric/[.555]`
+tw`to-electric/[var(--myvar)]`
+
+tw`border-red-500`
+tw`border-red-500/25`
+tw`border-red-500/fromConfig`
+tw`border-red-500/[.555]`
+tw`border-red-500/[var(--myvar)]`
+
+tw`border-electric`
+tw`border-electric/25`
+tw`border-electric/[.555]`
+tw`border-electric/[var(--myvar)]`
+
+tw`ring-red-500`
+tw`ring-red-500/25`
+tw`ring-red-500/fromConfig`
+tw`ring-red-500/[.555]`
+tw`ring-red-500/[var(--myvar)]`
+
+tw`ring-electric`
+tw`ring-electric/25`
+tw`ring-electric/[.555]`
+tw`ring-electric/[var(--myvar)]`
+
+tw`ring-offset-red-500`
+tw`ring-offset-red-500/25`
+tw`ring-offset-red-500/fromConfig`
+tw`ring-offset-red-500/[.555]`
+tw`ring-offset-red-500/[var(--myvar)]`
+
+tw`ring-offset-electric`
+tw`ring-offset-electric/25`
+tw`ring-offset-electric/[.555]`
+tw`ring-offset-electric/[var(--myvar)]`
+
+tw`text-red-500`
+tw`text-red-500/25`
+tw`text-red-500/fromConfig`
+tw`text-red-500/[.555]`
+tw`text-red-500/[var(--myvar)]`
+
+tw`text-electric`
+tw`text-electric/25`
+tw`text-electric/[.555]`
+tw`text-electric/[var(--myvar)]`
+
+tw`stroke-red-500`
+tw`stroke-red-500/25`
+tw`stroke-red-500/fromConfig`
+tw`stroke-red-500/[.555]`
+tw`stroke-red-500/[var(--myvar)]`
+
+tw`stroke-electric`
+tw`stroke-electric/25`
+tw`stroke-electric/[.555]`
+tw`stroke-electric/[var(--myvar)]`
+
+tw`fill-red-500`
+tw`fill-red-500/25`
+tw`fill-red-500/fromConfig`
+tw`fill-red-500/[.555]`
+tw`fill-red-500/[var(--myvar)]`
+
+tw`fill-electric`
+tw`fill-electric/25`
+tw`fill-electric/[.555]`
+tw`fill-electric/[var(--myvar)]`

__fixtures__/slashAlpha/tailwind.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        'red-500/fromConfig': '#000',
+        electric: ({ opacityVariable, opacityValue }) => {
+          if (opacityValue !== undefined) {
+            return `rgba(219, 0, 255, ${opacityValue})`
+          }
+
+          if (opacityVariable !== undefined) {
+            return `rgba(219, 0, 255, var(${opacityVariable}, 1))`
+          }
+
+          return `rgb(219, 0, 255)`
+        },
+      },
+    },
+    stroke: theme => theme('colors'),
+    fill: theme => theme('colors'),
+  },
+}