Skip to content

Commit

Permalink
Merge pull request #201 from ben-rogerson/feature/css-variable-tw-prefix
Browse files Browse the repository at this point in the history 
Add css variable prefixes
  • Loading branch information
@ben-rogerson
ben-rogerson authored Nov 21, 2020
2 parents 4ad5d65 + cb96a1c commit 8d14eb4
Show file tree
Hide file tree
Showing 10 changed files with 2,202 additions and 2,282 deletions.
4,372 changes: 2,143 additions & 2,229 deletions __snapshots__/plugin.test.js.snap
View file

Large diffs are not rendered by default.

22 changes: 11 additions & 11 deletions src/config/dynamicStyles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand All @@ -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',
},
Expand All @@ -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',
},
Expand Down Expand Up @@ -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' },
Expand Down
52 changes: 26 additions & 26 deletions src/config/staticStyles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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,
},
},
},
Expand All @@ -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,
},
},
},
Expand Down Expand Up @@ -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': {
Expand Down Expand Up @@ -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,
},
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/bg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
})
}
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/border.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
})
}
Expand Down
10 changes: 7 additions & 3 deletions src/plugins/divide.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
})

Expand All @@ -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}`,
},
}
}

Expand All @@ -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}`
Expand Down
14 changes: 7 additions & 7 deletions src/plugins/gradient.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
},
}

Expand Down
4 changes: 2 additions & 2 deletions src/plugins/placeholder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
})
}
Expand All @@ -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 => {
Expand Down
4 changes: 3 additions & 1 deletion src/plugins/space.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}`
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
})
}
Expand Down

0 comments on commit 8d14eb4

Please sign in to comment.