Improve: Unify rules and variables using kebab-case, resolved #305

master-co · Nov 7, 2023 · b4582db · b4582db
1 parent 5f3989e
commit b4582db
Show file tree

Hide file tree

Showing 9 changed files with 359 additions and 349 deletions.
diff --git a/packages/css/src/config/rules.ts b/packages/css/src/config/rules.ts
diff --git a/packages/css/src/config/variables.ts b/packages/css/src/config/variables.ts
@@ -1,52 +1,54 @@
 import fillColorScale from '../functions/fill-color-scale'
 
 const variables = {
-    fontFamily: {
-        mono: [
-            'ui-monospace',
-            'SFMono-Regular',
-            'Menlo',
-            'Monaco',
-            'Consolas',
-            'Liberation Mono',
-            'Courier New',
-            'monospace'
-        ],
-        sans: [
-            'ui-sans-serif',
-            'system-ui',
-            '-apple-system',
-            'BlinkMacSystemFont',
-            'Segoe UI',
-            'Roboto',
-            'Helvetica Neue',
-            'Arial',
-            'Noto Sans',
-            'sans-serif',
-            'Apple Color Emoji',
-            'Segoe UI Emoji',
-            'Segoe UI Symbol',
-            'Noto Color Emoji'
-        ],
-        serif: [
-            'ui-serif',
-            'Georgia',
-            'Cambria',
-            'Times New Roman',
-            'Times',
-            'serif'
-        ]
-    },
-    fontWeight: {
-        thin: 100,
-        extralight: 200,
-        light: 300,
-        regular: 400,
-        medium: 500,
-        semibold: 600,
-        bold: 700,
-        extrabold: 800,
-        heavy: 900
+    font: {
+        family: {
+            mono: [
+                'ui-monospace',
+                'SFMono-Regular',
+                'Menlo',
+                'Monaco',
+                'Consolas',
+                'Liberation Mono',
+                'Courier New',
+                'monospace'
+            ],
+            sans: [
+                'ui-sans-serif',
+                'system-ui',
+                '-apple-system',
+                'BlinkMacSystemFont',
+                'Segoe UI',
+                'Roboto',
+                'Helvetica Neue',
+                'Arial',
+                'Noto Sans',
+                'sans-serif',
+                'Apple Color Emoji',
+                'Segoe UI Emoji',
+                'Segoe UI Symbol',
+                'Noto Color Emoji'
+            ],
+            serif: [
+                'ui-serif',
+                'Georgia',
+                'Cambria',
+                'Times New Roman',
+                'Times',
+                'serif'
+            ]
+        },
+        weight: {
+            thin: 100,
+            extralight: 200,
+            light: 300,
+            regular: 400,
+            medium: 500,
+            semibold: 600,
+            bold: 700,
+            extrabold: 800,
+            heavy: 900
+        }
     },
     sizing: {
         '4xs': 360,
@@ -65,59 +67,73 @@ const variables = {
         max: 'max-content',
         min: 'min-content'
     },
-    flexDirection: {
-        col: 'column',
-        'col-reverse': 'column-reverse'
+    flex: {
+        direction: {
+            col: 'column',
+            'col-reverse': 'column-reverse'
+        }
     },
-    boxSizing: {
-        content: 'content-box',
-        border: 'border-box'
+    box: {
+        sizing: {
+            content: 'content-box',
+            border: 'border-box'
+        }
     },
     position: {
         abs: 'absolute',
         rel: 'relative'
     },
-    transformBox: {
-        content: 'content-box',
-        border: 'border-box',
-        padding: 'padding-box',
-        fill: 'fill-box',
-        stroke: 'stroke-box',
-        view: 'view-box'
-    },
-    animationDirection: {
-        alt: 'alternate',
-        'alt-reverse': 'alternate-reverse'
+    transform: {
+        box: {
+            content: 'content-box',
+            border: 'border-box',
+            padding: 'padding-box',
+            fill: 'fill-box',
+            stroke: 'stroke-box',
+            view: 'view-box'
+        }
     },
-    backgroundClip: {
-        content: 'content-box',
-        border: 'border-box',
-        padding: 'padding-box'
+    animation: {
+        direction: {
+            alt: 'alternate',
+            'alt-reverse': 'alternate-reverse'
+        }
     },
-    backgroundOrigin: {
-        content: 'content-box',
-        border: 'border-box',
-        padding: 'padding-box'
+    background: {
+        clip: {
+            content: 'content-box',
+            border: 'border-box',
+            padding: 'padding-box'
+        },
+        origin: {
+            content: 'content-box',
+            border: 'border-box',
+            padding: 'padding-box'
+        }
     },
     order: {
         first: -999999,
         last: 999999
     },
-    shapeOutside: {
-        content: 'content-box',
-        border: 'border-box',
-        padding: 'padding-box',
-        margin: 'margin-box'
+    shape: {
+        outside: {
+            content: 'content-box',
+            border: 'border-box',
+            padding: 'padding-box',
+            margin: 'margin-box'
+        }
     },
-    clipPath: {
-        content: 'content-box',
-        border: 'border-box',
-        padding: 'padding-box',
-        margin: 'margin-box',
-        fill: 'fill-box',
-        stroke: 'stroke-box',
-        view: 'view-box',
-        black: '#000000'
+    clip: {
+        path: {
+            content: 'content-box',
+            border: 'border-box',
+            padding: 'padding-box',
+            margin: 'margin-box',
+            fill: 'fill-box',
+            stroke: 'stroke-box',
+            view: 'view-box',
+            black: '#000000'
+        }
     },
     black: '#000000',
     white: '#ffffff',

diff --git a/packages/css/src/core.ts b/packages/css/src/core.ts
@@ -385,14 +385,6 @@ export class MasterCSS {
                 eachRuleOptions.order = this.semanticRuleOptions.length + rulesEntriesLength - 1 - index
                 const match = eachRuleOptions.match
                 eachRuleOptions.id = id
-                if (
-                    eachRuleOptions.layer === Layer.Native ||
-                    eachRuleOptions.layer === Layer.NativeShorthand ||
-                    eachRuleOptions.layer === Layer.CoreNative ||
-                    eachRuleOptions.layer === Layer.CoreNativeShorthand
-                ) {
-                    eachRuleOptions.resolvedPropName = id.replace(/(?!^)[A-Z]/g, m => '-' + m).toLowerCase()
-                }
                 eachRuleOptions.resolvedVariables = {}
                 const addResolvedVariables = (prefix: string) => {
                     Object.assign(
@@ -437,7 +429,8 @@ export class MasterCSS {
                         if (eachRuleOptions.numeric) {
                             valueMatches.push('[\\d\\.]', '(?:max|min|calc|clamp)\\(.*\\)')
                         }
-                        eachRuleOptions.resolvedMatch = new RegExp(`^${key}:(?:${valueMatches.join('|')})[^|]*?(?:@|$)`)
+                        if (valueMatches.length)
+                            eachRuleOptions.resolvedMatch = new RegExp(`^${key}:(?:${valueMatches.join('|')})[^|]*?(?:@|$)`)
                     } else {
                         eachRuleOptions.resolvedMatch = match as RegExp
                     }
@@ -813,7 +806,7 @@ export class MasterCSS {
                     eachRuleOptions.layer === Layer.NativeShorthand ||
                     eachRuleOptions.layer === Layer.CoreNative ||
                     eachRuleOptions.layer === Layer.CoreNativeShorthand
-                ) && syntax.startsWith(eachRuleOptions.resolvedPropName + ':')
+                ) && syntax.startsWith(eachRuleOptions.id + ':')
             ) {
                 return eachRuleOptions
             }

diff --git a/packages/css/src/rule.ts b/packages/css/src/rule.ts
@@ -25,7 +25,7 @@ export class Rule {
         public readonly options: RuleOptions = {},
         public css: MasterCSS
     ) {
-        const { layer, unit, colored: configColored, resolvedPropName, analyze, transform, declare, create, order, id } = options
+        const { layer, unit, colored: configColored, analyze, transform, declare, create, order, id } = options
         this.order = order
         this.layer = layer
         if (!options.unit) options.unit = ''
@@ -374,9 +374,9 @@ export class Rule {
                 let value: string
                 let unit: string
                 this.declarations = declare.call(this, unit ? value : newValue, unit || '')
-            } else if (resolvedPropName) {
+            } else if (id) {
                 this.declarations = {
-                    [resolvedPropName as string]: newValue
+                    [id]: newValue
                 }
             }
         }
@@ -839,7 +839,6 @@ export interface RuleOptions {
     unit?: any
     native?: boolean
     declarations?: CSSDeclarations
-    resolvedPropName?: string
     layer?: Layer,
     analyze?: (this: Rule, className: string) => [valueToken: string, prefixToken?: string]
     transform?(this: Rule, value: string): string

diff --git a/packages/css/tests/config.ts b/packages/css/tests/config.ts
@@ -8,17 +8,17 @@ export default {
         }
     },
     variables: {
-        fontSize: {
+        'font-size': {
             sm: 16,
             md: 20
         },
-        letterSpacing: {
+        'letter-spacing': {
             wide: .4
         },
         border:  {
             'inputborder': '2|solid|red'
         },
-        boxShadow: {
+        'box-shadow': {
             x2: '0 25px 50px -12px rgb(0 0 0 / 25%)'
         },
         inset: {

diff --git a/packages/css/tests/config/variables/number.test.ts b/packages/css/tests/config/variables/number.test.ts
@@ -28,13 +28,13 @@ test('number with themes', () => {
 
     // 無單位屬性不需要 calc
     testCSS('line-height:x1', [
-        ':root{--lineHeight-x1:16}',
-        '.dark{--lineHeight-x1:32}',
-        '.light{--lineHeight-x1:48}',
-        '.line-height\\:x1{line-height:var(--lineHeight-x1)}'
+        ':root{--line-height-x1:16}',
+        '.dark{--line-height-x1:32}',
+        '.light{--line-height-x1:48}',
+        '.line-height\\:x1{line-height:var(--line-height-x1)}'
     ].join(''), {
         variables: {
-            lineHeight: {
+            'line-height': {
                 x1: {
                     '': 16,
                     '@dark': 32,

diff --git a/packages/css/tests/config/variables/test.ts b/packages/css/tests/config/variables/test.ts
@@ -2,19 +2,19 @@ import { testCSS, testProp } from '../../css'
 import config from '../../config'
 
 it('uses with $ function', () => {
-    testProp('font-weight:$(fontWeight-thin)', 'font-weight:100')
-    testProp('font-weight:$(fontWeight-thin,123)', 'font-weight:100')
-    testProp('font-weight:$(fontWeight,fontWeight-thin)', 'font-weight:var(--fontWeight,100)')
+    testProp('font-weight:$(font-weight-thin)', 'font-weight:100')
+    testProp('font-weight:$(font-weight-thin,123)', 'font-weight:100')
+    testProp('font-weight:$(font-weight,font-weight-thin)', 'font-weight:var(--font-weight,100)')
     testProp('background-color:$(gray)', 'background-color:rgb(107 106 109)')
     testProp('background-color:$(my-gray,$(gray))', 'background-color:var(--my-gray,rgb(107 106 109))')
     testProp('background-color:$(my-gray,gray)', 'background-color:var(--my-gray,rgb(107 106 109))')
     testProp('background-color:$(my-gray,$(my-gray-2,gray))', 'background-color:var(--my-gray,var(--my-gray-2,rgb(107 106 109)))')
 })
 
 it('uses with var function', () => {
-    testProp('font-weight:var(--fontWeight-thin)', 'font-weight:var(--fontWeight-thin)')
-    testProp('font-weight:var(--fontWeight-thin,123)', 'font-weight:var(--fontWeight-thin,123)')
-    testProp('font-weight:var(--fontWeight,fontWeight-thin)', 'font-weight:var(--fontWeight,100)')
+    testProp('font-weight:var(--font-weight-thin)', 'font-weight:var(--font-weight-thin)')
+    testProp('font-weight:var(--font-weight-thin,123)', 'font-weight:var(--font-weight-thin,123)')
+    testProp('font-weight:var(--font-weight,font-weight-thin)', 'font-weight:var(--font-weight,100)')
     testProp('background-color:var(--gray)', 'background-color:var(--gray)')
     testProp('background-color:var(--my-gray,$(gray))', 'background-color:var(--my-gray,rgb(107 106 109))')
     testProp('background-color:var(--my-gray,gray)', 'background-color:var(--my-gray,rgb(107 106 109))')

diff --git a/packages/css/tests/design-tokens/fonts.test.ts b/packages/css/tests/design-tokens/fonts.test.ts
@@ -3,20 +3,22 @@ import { MasterCSS, variables } from '../../src'
 it('customizes fonts', () => {
     const css = new MasterCSS({
         variables: {
-            fontFamily: {
-                sans: ['Inter', ...variables.fontFamily.sans],
-                mono: ['Fira Code', ...variables.fontFamily.mono]
+            font: {
+                family: {
+                    sans: ['Inter', ...variables.font.family.sans],
+                    mono: ['Fira Code', ...variables.font.family.mono]
+                }
             }
         }
     })
     expect({
-        sans: css.variables['fontFamily-sans'],
-        mono: css.variables['fontFamily-mono'],
-        serif: css.variables['fontFamily-serif']
+        sans: css.variables['font-family-sans'],
+        mono: css.variables['font-family-mono'],
+        serif: css.variables['font-family-serif']
     }).toEqual({
-        sans: { type: 'string', value: 'Inter,' + variables.fontFamily.sans.join(',') },
-        mono: { type: 'string', value: 'Fira Code,' + variables.fontFamily.mono.join(',') },
-        serif: { type: 'string', value: variables.fontFamily.serif.join(',') }
+        sans: { type: 'string', value: 'Inter,' + variables.font.family.sans.join(',') },
+        mono: { type: 'string', value: 'Fira Code,' + variables.font.family.mono.join(',') },
+        serif: { type: 'string', value: variables.font.family.serif.join(',') }
     })
 })
 

diff --git a/packages/css/tests/font.test.ts b/packages/css/tests/font.test.ts
@@ -2,6 +2,6 @@ import { testCSS } from './css'
 import MasterCSS, { variables } from '../src'
 
 it('font', () => {
-    testCSS('font:italic|1.2rem|sans', `.font\\:italic\\|1\\.2rem\\|sans{font:italic 1.2rem ${variables.fontFamily.sans.join(',')}}`)
-    testCSS('font:italic|semibold|1.2rem|sans', `.font\\:italic\\|semibold\\|1\\.2rem\\|sans{font:italic 600 1.2rem ${variables.fontFamily.sans.join(',')}}`)
+    testCSS('font:italic|1.2rem|sans', `.font\\:italic\\|1\\.2rem\\|sans{font:italic 1.2rem ${variables.font.family.sans.join(',')}}`)
+    testCSS('font:italic|semibold|1.2rem|sans', `.font\\:italic\\|semibold\\|1\\.2rem\\|sans{font:italic 600 1.2rem ${variables.font.family.sans.join(',')}}`)
 })