Sync fontVariantNumeric values

ben-rogerson · Apr 25, 2022 · bf38fc9 · bf38fc9
1 parent b6e0f09
commit bf38fc9
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 90 deletions.
diff --git a/__snapshots__/plugin.test.js.snap b/__snapshots__/plugin.test.js.snap
@@ -976,47 +976,6 @@ const Component7 = () => (
 )
 
 
-`;
-
-exports[`twin.macro !screens.js: !screens.js 1`] = `
-
-import tw from './macro'
-
-tw\`sm:block\`
-tw\`md:block\`
-tw\`lg:block\`
-tw\`xl:block\`
-tw\`2xl:block\`
-
-      ↓ ↓ ↓ ↓ ↓ ↓
-
-;({
-  '@media (min-width: 640px)': {
-    display: 'block',
-  },
-})
-;({
-  '@media (min-width: 768px)': {
-    display: 'block',
-  },
-})
-;({
-  '@media (min-width: 1024px)': {
-    display: 'block',
-  },
-})
-;({
-  '@media (min-width: 1280px)': {
-    display: 'block',
-  },
-})
-;({
-  '@media (min-width: 1536px)': {
-    display: 'block',
-  },
-})
-
-
 `;
 
 exports[`twin.macro !variantGrouping.js: !variantGrouping.js 1`] = `
@@ -25807,72 +25766,40 @@ tw\`stacked-fractions\`
 })
 ;({
   '--tw-ordinal': 'ordinal',
-  '--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(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
 })
 ;({
-  '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)',
   '--tw-slashed-zero': 'slashed-zero',
-  '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)',
-  '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)',
-  '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)',
   fontVariantNumeric:
     'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
 })
 ;({
-  '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)',
-  '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)',
   '--tw-numeric-figure': 'lining-nums',
-  '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)',
-  '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)',
   fontVariantNumeric:
     'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
 })
 ;({
-  '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)',
-  '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)',
   '--tw-numeric-figure': 'oldstyle-nums',
-  '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)',
-  '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)',
   fontVariantNumeric:
     'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
 })
 ;({
-  '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)',
-  '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)',
-  '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)',
   '--tw-numeric-spacing': 'proportional-nums',
-  '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)',
   fontVariantNumeric:
     'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
 })
 ;({
-  '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)',
-  '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)',
-  '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)',
   '--tw-numeric-spacing': 'tabular-nums',
-  '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)',
   fontVariantNumeric:
     'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
 })
 ;({
-  '--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': 'diagonal-fractions',
   fontVariantNumeric:
     'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
 })
 ;({
-  '--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': 'stacked-fractions',
   fontVariantNumeric:
     'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',

diff --git a/src/config/corePlugins.js b/src/config/corePlugins.js
@@ -1,15 +1,8 @@
 // https://tailwindcss.com/docs/font-variant-numeric
 // This feature uses var+comment hacks to get around property stripping:
 // https://github.com/tailwindlabs/tailwindcss.com/issues/522#issuecomment-687667238
-const fontVariants = {
-  '--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(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
-}
+const cssFontVariantNumericValue =
+  'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)'
 
 const cssFilterValue = [
   'var(--tw-blur)',
@@ -1325,27 +1318,53 @@ export default {
 
   // https://tailwindcss.com/docs/font-variant-numeric
   'normal-nums': { output: { fontVariantNumeric: 'normal' } },
-  ordinal: { output: { ...fontVariants, '--tw-ordinal': 'ordinal' } },
+  ordinal: {
+    output: {
+      '--tw-ordinal': 'ordinal',
+      fontVariantNumeric: cssFontVariantNumericValue,
+    },
+  },
   'slashed-zero': {
-    output: { ...fontVariants, '--tw-slashed-zero': 'slashed-zero' },
+    output: {
+      '--tw-slashed-zero': 'slashed-zero',
+      fontVariantNumeric: cssFontVariantNumericValue,
+    },
   },
   'lining-nums': {
-    output: { ...fontVariants, '--tw-numeric-figure': 'lining-nums' },
+    output: {
+      '--tw-numeric-figure': 'lining-nums',
+      fontVariantNumeric: cssFontVariantNumericValue,
+    },
   },
   'oldstyle-nums': {
-    output: { ...fontVariants, '--tw-numeric-figure': 'oldstyle-nums' },
+    output: {
+      '--tw-numeric-figure': 'oldstyle-nums',
+      fontVariantNumeric: cssFontVariantNumericValue,
+    },
   },
   'proportional-nums': {
-    output: { ...fontVariants, '--tw-numeric-spacing': 'proportional-nums' },
+    output: {
+      '--tw-numeric-spacing': 'proportional-nums',
+      fontVariantNumeric: cssFontVariantNumericValue,
+    },
   },
   'tabular-nums': {
-    output: { ...fontVariants, '--tw-numeric-spacing': 'tabular-nums' },
+    output: {
+      '--tw-numeric-spacing': 'tabular-nums',
+      fontVariantNumeric: cssFontVariantNumericValue,
+    },
   },
   'diagonal-fractions': {
-    output: { ...fontVariants, '--tw-numeric-fraction': 'diagonal-fractions' },
+    output: {
+      '--tw-numeric-fraction': 'diagonal-fractions',
+      fontVariantNumeric: cssFontVariantNumericValue,
+    },
   },
   'stacked-fractions': {
-    output: { ...fontVariants, '--tw-numeric-fraction': 'stacked-fractions' },
+    output: {
+      '--tw-numeric-fraction': 'stacked-fractions',
+      fontVariantNumeric: cssFontVariantNumericValue,
+    },
   },
 
   // https://tailwindcss.com/docs/line-height