feat: allow to use hyphens and numbers in theme config

MellowCo · May 27, 2023 · b985052 · b985052
1 parent 6cce37b
commit b985052
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/src/utils/utilities.ts b/src/utils/utilities.ts
@@ -104,6 +104,12 @@ export function parseColor(body: string, theme: Theme): ParsedColorValue | undef
 
   color = color || bracket
 
+  if (!color) {
+    const colorData = getThemeColor(theme, [main])
+    if (typeof colorData === 'string')
+      color = colorData
+  }
+
   let no = 'DEFAULT'
   if (!color) {
     let colorData

diff --git a/test/__snapshots__/preset-mini.test.ts.snap b/test/__snapshots__/preset-mini.test.ts.snap
@@ -24,6 +24,14 @@ exports[`preset-mini > nested theme colors 1`] = `
 .text-a-camel-case{--licl-text-opacity:1;color:rgba(34,51,68,var(--licl-text-opacity));}"
 `;
 
+exports[`preset-mini > non-nested theme colors with hyphens and/or numbers 1`] = `
+"/* layer: default */
+.bg-numbered321{--licl-bg-opacity:1;background-color:rgba(51,34,17,var(--licl-bg-opacity));}
+.bg-with-hyphen{--licl-bg-opacity:1;background-color:rgba(18,52,86,var(--licl-bg-opacity));}
+.text-numbered-123{--licl-text-opacity:1;color:rgba(17,34,51,var(--licl-text-opacity));}
+.text-with-hyphen{--licl-text-opacity:1;color:rgba(18,52,86,var(--licl-text-opacity));}"
+`;
+
 exports[`preset-mini > preflight root can be customized with array 1`] = `
 "/* layer: preflights */
 .scope-1{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset:var(--un-empty,/*!*/ /*!*/);--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset:var(--un-empty,/*!*/ /*!*/);--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}[data-scope-2]{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset:var(--un-empty,/*!*/ /*!*/);--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset:var(--un-empty,/*!*/ /*!*/);--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);}"

diff --git a/test/preset-mini.test.ts b/test/preset-mini.test.ts
@@ -13,16 +13,19 @@ const uno = createGenerator({
   ],
   theme: {
     colors: {
-      custom: {
+      'custom': {
         a: 'var(--custom)',
         b: 'rgba(var(--custom), %alpha)',
       },
-      a: {
+      'a': {
         b: {
           c: '#514543',
         },
         camelCase: '#234',
       },
+      'with-hyphen': '#123456',
+      'numbered-123': '#123',
+      'numbered321': '#321',
     },
     spacing: {
       safe: 'max(env(safe-area-inset-left), env(safe-area-inset-right))',
@@ -168,4 +171,16 @@ describe('preset-mini', () => {
 
     expect(css).toMatchSnapshot()
   })
+
+  test('non-nested theme colors with hyphens and/or numbers', async () => {
+    const { css, matched } = await uno.generate([
+      'text-with-hyphen',
+      'bg-with-hyphen',
+      'text-numbered-123',
+      'bg-numbered321',
+    ], { preflights: false })
+
+    expect(css).toMatchSnapshot()
+    expect(matched.size).toBe(4)
+  })
 })