ben-rogerson · ben-rogerson · Nov 21, 2020 · Nov 21, 2020
diff --git a/__snapshots__/plugin.test.js.snap b/__snapshots__/plugin.test.js.snap
diff --git a/src/config/dynamicStyles.js b/src/config/dynamicStyles.js
@@ -203,7 +203,7 @@ export default {
   // https://tailwindcss.com/docs/text-color
   // https://tailwindcss.com/docs/font-size
   'text-opacity': {
-    prop: '--text-opacity',
+    prop: '--tw-text-opacity',
     config: 'textOpacity',
     configFallback: 'opacity',
   },
@@ -228,7 +228,7 @@ export default {
 
   // https://tailwindcss.com/docs/background-opacity
   'bg-opacity': {
-    prop: '--bg-opacity',
+    prop: '--tw-bg-opacity',
     config: 'backgroundOpacity',
     configFallback: 'opacity',
   },
@@ -255,7 +255,7 @@ export default {
   'border-r': { prop: 'borderRightWidth', config: 'borderWidth' },
 
   'border-opacity': {
-    prop: '--border-opacity',
+    prop: '--tw-border-opacity',
     config: 'borderOpacity',
     configFallback: 'opacity',
   },
@@ -330,23 +330,23 @@ export default {
    */
 
   // https://tailwindcss.com/docs/scale
-  'scale-x': { prop: '--transform-scale-x', config: 'scale' },
-  'scale-y': { prop: '--transform-scale-y', config: 'scale' },
+  'scale-x': { prop: '--tw-transform-scale-x', config: 'scale' },
+  'scale-y': { prop: '--tw-transform-scale-y', config: 'scale' },
   scale: {
-    prop: ['--transform-scale-x', '--transform-scale-y'],
+    prop: ['--tw-transform-scale-x', '--tw-transform-scale-y'],
     config: 'scale',
   },
 
   // https://tailwindcss.com/docs/rotate
-  rotate: { prop: '--transform-rotate', config: 'rotate' },
+  rotate: { prop: '--tw-rotate', config: 'rotate' },
 
   // https://tailwindcss.com/docs/translate
-  'translate-x': { prop: '--transform-translate-x', config: 'translate' },
-  'translate-y': { prop: '--transform-translate-y', config: 'translate' },
+  'translate-x': { prop: '--tw-translate-x', config: 'translate' },
+  'translate-y': { prop: '--tw-translate-y', config: 'translate' },
 
   // https://tailwindcss.com/docs/skew
-  'skew-x': { prop: '--transform-skew-x', config: 'skew' },
-  'skew-y': { prop: '--transform-skew-y', config: 'skew' },
+  'skew-x': { prop: '--tw-skew-x', config: 'skew' },
+  'skew-y': { prop: '--tw-skew-y', config: 'skew' },
 
   // https://tailwindcss.com/docs/transform-origin
   origin: { prop: 'transformOrigin', config: 'transformOrigin' },

diff --git a/src/config/staticStyles.js b/src/config/staticStyles.js
@@ -2,13 +2,13 @@
 // This feature uses var+comment hacks to get around property stripping:
 // https://github.com/tailwindlabs/tailwindcss.com/issues/522#issuecomment-687667238
 const fontVariants = {
-  '--font-variant-numeric-ordinal': 'var(--twin-empty,/*!*/ /*!*/)',
-  '--font-variant-numeric-slashed-zero': 'var(--twin-empty,/*!*/ /*!*/)',
-  '--font-variant-numeric-figure': 'var(--twin-empty,/*!*/ /*!*/)',
-  '--font-variant-numeric-spacing': 'var(--twin-empty,/*!*/ /*!*/)',
-  '--font-variant-numeric-fraction': 'var(--twin-empty,/*!*/ /*!*/)',
+  '--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,/*!*/ /*!*/)',
   fontVariantNumeric:
-    'var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction)',
+    'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
 }
 
 export default {
@@ -120,14 +120,14 @@ export default {
   'space-x-reverse': {
     output: {
       '> :not(template) ~ :not(template)': {
-        '--space-x-reverse': 1,
+        '--tw-space-x-reverse': 1,
       },
     },
   },
   'space-y-reverse': {
     output: {
       '> :not(template) ~ :not(template)': {
-        '--space-y-reverse': 1,
+        '--tw-space-y-reverse': 1,
       },
     },
   },
@@ -137,14 +137,14 @@ export default {
   'divide-x-reverse': {
     output: {
       '> :not(template) ~ :not(template)': {
-        '--divide-x-reverse': 1,
+        '--tw-divide-x-reverse': 1,
       },
     },
   },
   'divide-y-reverse': {
     output: {
       '> :not(template) ~ :not(template)': {
-        '--divide-y-reverse': 1,
+        '--tw-divide-y-reverse': 1,
       },
     },
   },
@@ -339,45 +339,45 @@ export default {
 
   // https://tailwindcss.com/docs/font-variant-numeric
   ordinal: {
-    output: { ...fontVariants, '--font-variant-numeric-ordinal': 'ordinal' },
+    output: { ...fontVariants, '--tw-ordinal': 'ordinal' },
   },
   'slashed-zero': {
     output: {
       ...fontVariants,
-      '--font-variant-numeric-slashed-zero': 'slashed-zero',
+      '--tw-slashed-zero': 'slashed-zero',
     },
   },
   'lining-nums': {
-    output: { ...fontVariants, '--font-variant-numeric-figure': 'lining-nums' },
+    output: { ...fontVariants, '--tw-numeric-figure': 'lining-nums' },
   },
   'oldstyle-nums': {
     output: {
       ...fontVariants,
-      '--font-variant-numeric-figure': 'oldstyle-nums',
+      '--tw-numeric-figure': 'oldstyle-nums',
     },
   },
   'proportional-nums': {
     output: {
       ...fontVariants,
-      '--font-variant-numeric-spacing': 'proportional-nums',
+      '--tw-numeric-spacing': 'proportional-nums',
     },
   },
   'tabular-nums': {
     output: {
       ...fontVariants,
-      '--font-variant-numeric-spacing': 'tabular-nums',
+      '--tw-numeric-spacing': 'tabular-nums',
     },
   },
   'diagonal-fractions': {
     output: {
       ...fontVariants,
-      '--font-variant-numeric-fraction': 'diagonal-fractions',
+      '--tw-numeric-fraction': 'diagonal-fractions',
     },
   },
   'stacked-fractions': {
     output: {
       ...fontVariants,
-      '--font-variant-numeric-fraction': 'stacked-fractions',
+      '--tw-numeric-fraction': 'stacked-fractions',
     },
   },
   'normal-nums': {
@@ -700,15 +700,15 @@ export default {
 
   transform: {
     output: {
-      '--transform-translate-x': '0',
-      '--transform-translate-y': '0',
-      '--transform-rotate': '0',
-      '--transform-skew-x': '0',
-      '--transform-skew-y': '0',
-      '--transform-scale-x': '1',
-      '--transform-scale-y': '1',
+      '--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',
       transform:
-        'translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y))',
+        '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))',
     },
     config: false,
   },

diff --git a/src/plugins/bg.js b/src/plugins/bg.js
@@ -7,7 +7,7 @@ const handleColor = ({ configValue, important, disableColorVariables }) => {
   return withAlpha({
     color: value,
     property: 'backgroundColor',
-    variable: !disableColorVariables && '--bg-opacity',
+    variable: !disableColorVariables && '--tw-bg-opacity',
     important,
   })
 }

diff --git a/src/plugins/border.js b/src/plugins/border.js
@@ -16,7 +16,7 @@ const handleColor = ({ configValue, important, disableColorVariables }) => {
   return withAlpha({
     color: value,
     property: 'borderColor',
-    variable: !disableColorVariables && '--border-opacity',
+    variable: !disableColorVariables && '--tw-border-opacity',
     important,
   })
 }

diff --git a/src/plugins/divide.js b/src/plugins/divide.js
@@ -10,7 +10,7 @@ const handleColor = ({ configValue, important, disableColorVariables }) => {
   const borderColor = withAlpha({
     color: value,
     property: 'borderColor',
-    variable: !disableColorVariables && '--divide-opacity',
+    variable: !disableColorVariables && '--tw-divide-opacity',
     important,
   })
 
@@ -22,7 +22,9 @@ const handleOpacity = ({ configValue }) => {
   if (!opacity) return
 
   return {
-    '> :not(template) ~ :not(template)': { '--divide-opacity': `${opacity}` },
+    '> :not(template) ~ :not(template)': {
+      '--tw-divide-opacity': `${opacity}`,
+    },
   }
 }
 
@@ -35,7 +37,9 @@ const handleWidth = ({
 
   const value = `${negative}${addPxTo0(width)}`
   const isDivideX = className.startsWith('divide-x')
-  const cssVariableKey = isDivideX ? '--divide-x-reverse' : '--divide-y-reverse'
+  const cssVariableKey = isDivideX
+    ? '--tw-divide-x-reverse'
+    : '--tw-divide-y-reverse'
 
   const borderFirst = `calc(${value} * var(${cssVariableKey}))${important}`
   const borderSecond = `calc(${value} * calc(1 - var(${cssVariableKey})))${important}`

diff --git a/src/plugins/gradient.js b/src/plugins/gradient.js
@@ -35,19 +35,19 @@ export default properties => {
 
   const styleDefinitions = {
     from: {
-      '--gradient-from-color': getColorValue(value, 'from'),
-      '--gradient-color-stops': `var(--gradient-from-color), var(--gradient-to-color, ${transparentTo(
+      '--tw-gradient-from': getColorValue(value, 'from'),
+      '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentTo(
         value
       )})`,
     },
     via: {
-      '--gradient-via-color': getColorValue(value, 'via'),
-      '--gradient-color-stops': `var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, ${transparentTo(
-        value
-      )})`,
+      '--tw-gradient-stops': `var(--tw-gradient-from), ${getColorValue(
+        value,
+        'via'
+      )}, var(--tw-gradient-to, ${transparentTo(value)})`,
     },
     to: {
-      '--gradient-to-color': getColorValue(value, 'to'),
+      '--tw-gradient-to': getColorValue(value, 'to'),
     },
   }
 

diff --git a/src/plugins/placeholder.js b/src/plugins/placeholder.js
@@ -7,7 +7,7 @@ const handleColor = ({ configValue, important, disableColorVariables }) => {
   return withAlpha({
     color: value,
     property: 'color',
-    variable: !disableColorVariables && '--placeholder-opacity',
+    variable: !disableColorVariables && '--tw-placeholder-opacity',
     important,
   })
 }
@@ -16,7 +16,7 @@ const handleOpacity = ({ configValue }) => {
   const value = configValue('placeholderOpacity') || configValue('opacity')
   if (!value) return
 
-  return { '--placeholder-opacity': `${value}` }
+  return { '--tw-placeholder-opacity': `${value}` }
 }
 
 export default properties => {

diff --git a/src/plugins/space.js b/src/plugins/space.js
@@ -17,7 +17,9 @@ export default ({
 
   const value = `${negative}${addPxTo0(configValue)}`
   const isSpaceX = className.startsWith('space-x-') // 🚀
-  const cssVariableKey = isSpaceX ? '--space-x-reverse' : '--space-y-reverse'
+  const cssVariableKey = isSpaceX
+    ? '--tw-space-x-reverse'
+    : '--tw-space-y-reverse'
 
   const marginFirst = `calc(${value} * var(${cssVariableKey}))${important}`
   const marginSecond = `calc(${value} * calc(1 - var(${cssVariableKey})))${important}`

diff --git a/src/plugins/text.js b/src/plugins/text.js
@@ -7,7 +7,7 @@ const handleColor = ({ configValue, important, disableColorVariables }) => {
   return withAlpha({
     color: value,
     property: 'color',
-    variable: !disableColorVariables && '--text-opacity',
+    variable: !disableColorVariables && '--tw-text-opacity',
     important,
   })
 }