feat: Font Variant Numeric

tw-in-js · Dec 9, 2020 · 809cbf1 · 809cbf1
1 parent 1817e7d
commit 809cbf1
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 20 deletions.
diff --git a/examples/svelte/README.md b/examples/svelte/README.md
@@ -1,7 +1,6 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [New Project](#new-project)
   - [Available Scripts](#available-scripts)
 

diff --git a/packages/core/src/__tests__/api.json b/packages/core/src/__tests__/api.json
@@ -683,5 +683,19 @@
       "@media (min-width: 768px){@media (min-width: 1280px){.md\\:container{max-width:1280px}}}",
       "@media (min-width: 768px){@media (min-width: 1536px){.md\\:container{max-width:1536px}}}"
     ]
-  ]
+  ],
+  "ordinal slashed-zero tabular-nums md:normal-nums": [
+    "ordinal slashed-zero tabular-nums md:normal-nums",
+    [
+      ".slashed-zero{--tw-slashed-zero:slashed-zero;font-variant-numeric:var(--tw-ordinal,/*!*/ /*!*/) var(--tw-slashed-zero,/*!*/ /*!*/) var(--tw-numeric-figure,/*!*/ /*!*/) var(--tw-numeric-spacing,/*!*/ /*!*/) var(--tw-numeric-fraction,/*!*/ /*!*/)}",
+      ".tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,/*!*/ /*!*/) var(--tw-slashed-zero,/*!*/ /*!*/) var(--tw-numeric-figure,/*!*/ /*!*/) var(--tw-numeric-spacing,/*!*/ /*!*/) var(--tw-numeric-fraction,/*!*/ /*!*/)}",
+      ".ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,/*!*/ /*!*/) var(--tw-slashed-zero,/*!*/ /*!*/) var(--tw-numeric-figure,/*!*/ /*!*/) var(--tw-numeric-spacing,/*!*/ /*!*/) var(--tw-numeric-fraction,/*!*/ /*!*/)}",
+      "@media (min-width: 768px){.md\\:normal-nums{font-variant-numeric:normal}}"
+    ]
+  ],
+  "lining-nums": ".lining-nums{--tw-numeric-figure:lining-nums;font-variant-numeric:var(--tw-ordinal,/*!*/ /*!*/) var(--tw-slashed-zero,/*!*/ /*!*/) var(--tw-numeric-figure,/*!*/ /*!*/) var(--tw-numeric-spacing,/*!*/ /*!*/) var(--tw-numeric-fraction,/*!*/ /*!*/)}",
+  "oldstyle-nums": ".oldstyle-nums{--tw-numeric-figure:oldstyle-nums;font-variant-numeric:var(--tw-ordinal,/*!*/ /*!*/) var(--tw-slashed-zero,/*!*/ /*!*/) var(--tw-numeric-figure,/*!*/ /*!*/) var(--tw-numeric-spacing,/*!*/ /*!*/) var(--tw-numeric-fraction,/*!*/ /*!*/)}",
+  "proportional-nums": ".proportional-nums{--tw-numeric-spacing:proportional-nums;font-variant-numeric:var(--tw-ordinal,/*!*/ /*!*/) var(--tw-slashed-zero,/*!*/ /*!*/) var(--tw-numeric-figure,/*!*/ /*!*/) var(--tw-numeric-spacing,/*!*/ /*!*/) var(--tw-numeric-fraction,/*!*/ /*!*/)}",
+  "diagonal-fractions": ".diagonal-fractions{--tw-numeric-fraction:diagonal-fractions;font-variant-numeric:var(--tw-ordinal,/*!*/ /*!*/) var(--tw-slashed-zero,/*!*/ /*!*/) var(--tw-numeric-figure,/*!*/ /*!*/) var(--tw-numeric-spacing,/*!*/ /*!*/) var(--tw-numeric-fraction,/*!*/ /*!*/)}",
+  "stacked-fractions": ".stacked-fractions{--tw-numeric-fraction:stacked-fractions;font-variant-numeric:var(--tw-ordinal,/*!*/ /*!*/) var(--tw-slashed-zero,/*!*/ /*!*/) var(--tw-numeric-figure,/*!*/ /*!*/) var(--tw-numeric-spacing,/*!*/ /*!*/) var(--tw-numeric-fraction,/*!*/ /*!*/)}"
 }
diff --git a/packages/core/src/__tests__/tailwind-compat.test.ts b/packages/core/src/__tests__/tailwind-compat.test.ts
@@ -11,21 +11,8 @@ test('all tailwind directives are available', async () => {
     try {
       expect(tw(directive)).toBeTruthy()
     } catch (error) {
-      if (isFontVariantNumeric(directive)) {
-        // TODO https://tailwindcss.com/docs/font-variant-numeric
-      } else {
-        console.warn(directive, directives[directive])
-        throw error
-      }
+      console.warn(directive, directives[directive])
+      throw error
     }
   }
 })
-
-function isFontVariantNumeric(directive: string): boolean {
-  return (
-    directive === 'ordinal' ||
-    directive.endsWith('-zero') ||
-    directive.endsWith('-nums') ||
-    directive.endsWith('-fractions')
-  )
-}
diff --git a/packages/core/src/internal/presedence.ts b/packages/core/src/internal/presedence.ts
@@ -143,9 +143,7 @@ const propertyPrecedence = (property: string): number => {
   _ = PROPERTY_PRECEDENCE_CORRECTION_GROUPS.exec(unprefixedProperty)
 
   return (
-    seperatorPrecedence(unprefixedProperty) +
-    (_ ? +!!_[1] /* +1 */ || -!!_[2] /* -1 */ : 0) +
-    1
+    seperatorPrecedence(unprefixedProperty) + (_ ? +!!_[1] /* +1 */ || -!!_[2] /* -1 */ : 0) + 1
   )
 }
 

diff --git a/packages/core/src/tailwind/plugins.ts b/packages/core/src/tailwind/plugins.ts
@@ -49,6 +49,12 @@ const position = property('position')
 const textTransform = property('textTransform')
 const textDecoration = property('textDecoration')
 const fontStyle = property('fontStyle')
+const fontVariantNumeric = (key: string): DirectiveHandler => (params, context, id) => ({
+  ['--tw-' + key]: id,
+  fontVariantNumeric:
+    'var(--tw-ordinal,/*!*/ /*!*/) var(--tw-slashed-zero,/*!*/ /*!*/) var(--tw-numeric-figure,/*!*/ /*!*/) var(--tw-numeric-spacing,/*!*/ /*!*/) var(--tw-numeric-fraction,/*!*/ /*!*/)',
+})
+
 const inset: DirectiveHandler = (params, { theme }, id) => ({ [id]: theme('inset', params) })
 
 const opacityProperty = (
@@ -517,6 +523,16 @@ export const corePlugins: Plugins = {
 
   whitespace: propertyValue('whiteSpace'),
 
+  'normal-nums': { fontVariantNumeric: 'normal' },
+  ordinal: fontVariantNumeric('ordinal'),
+  'slashed-zero': fontVariantNumeric('slashed-zero'),
+  'lining-nums': fontVariantNumeric('numeric-figure'),
+  'oldstyle-nums': fontVariantNumeric('numeric-figure'),
+  'proportional-nums': fontVariantNumeric('numeric-spacing'),
+  'tabular-nums': fontVariantNumeric('numeric-spacing'),
+  'diagonal-fractions': fontVariantNumeric('numeric-fraction'),
+  'stacked-fractions': fontVariantNumeric('numeric-fraction'),
+
   // 'overflow-visible'
   // 'overflow-x-hidden'
   overflow: (params) =>