Add: Support light-dark() color function

master-co · Nov 22, 2024 · 2875976 · 2875976
1 parent 4157fb2
commit 2875976
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 1 deletion.
diff --git a/packages/core/src/common.ts b/packages/core/src/common.ts
@@ -17,7 +17,7 @@ export const AT_SIGN = '@'
 export const VALUE_UNITS = ['%', 'cm', 'mm', 'q', 'in', 'pt', 'pc', 'px', 'em', 'rem', 'ex', 'rex', 'cap', 'rcap', 'ch', 'rch', 'ic', 'ric', 'lh', 'rlh', 'vw', 'svw', 'lvw', 'dvw', 'vh', 'svh', 'lvh', 'dvh', 'vi', 'svi', 'lvi', 'dvi', 'vb', 'svb', 'lvb', 'dvb', 'vmin', 'svmin', 'lvmin', 'dvmin', 'vmax', 'svmax', 'lvmax', 'dvmax', 'cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax', 'deg', 'grad', 'rad', 'turn', 's', 'ms', 'hz', 'khz', 'dpi', 'dpcm', 'dppx', 'x', 'fr', 'db', 'st']
 export const UNIT_REGEX = /^([+-.]?\d+(\.?\d+)?)(%|cm|mm|q|in|pt|pc|px|em|rem|ex|rex|cap|rcap|ch|rch|ic|ric|lh|rlh|vw|svw|lvw|dvw|vh|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax|cqw|cqh|cqi|cqb|cqmin|cqmax|deg|grad|rad|turn|s|ms|hz|khz|dpi|dpcm|dppx|x|fr|db|st)?$/
 export const IMAGE_VALUE_REGEX = /(?:url|linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient|conic-gradient)\(.*\)/
-export const COLOR_VALUE_REGEX = /(?:#|(?:color|color-contrast|color-mix|hwb|lab|lch|oklab|oklch|rgb|rgba|hsl|hsla)\(.*\)|(?:\$colors)(?![a-zA-Z0-9-]))/
+export const COLOR_VALUE_REGEX = /(?:#|(?:color|color-contrast|color-mix|hwb|lab|lch|oklab|oklch|rgb|rgba|hsl|hsla|light-dark)\(.*\)|(?:\$colors)(?![a-zA-Z0-9-]))/
 export const NUMBER_VALUE_REGEX = /(?:[\d.]|(?:max|min|calc|clamp)\([^|]*\))/
 export const OFFICIAL_URL = new URL('https://rc.css.master.co')
 export const CLASS_ATTRIBUTES = ['class', 'className']

diff --git a/packages/core/src/config/functions.ts b/packages/core/src/config/functions.ts
@@ -249,6 +249,7 @@ const functions: FunctionDefinitions = {
     lch: { unit: '' },
     oklab: { unit: '' },
     oklch: { unit: '' },
+    'light-dark': { unit: '' },
     clamp: { unit: '' },
     repeat: { unit: '' },
     'linear-gradient': {},

diff --git a/packages/core/tests/rules/background.test.ts b/packages/core/tests/rules/background.test.ts
@@ -3,6 +3,7 @@ import { MasterCSS } from '../../src'
 
 test.concurrent('background', () => {
     expect(new MasterCSS().create('bg:black')?.text).toContain('background-color:rgb(0 0 0)')
+    expect(new MasterCSS().create('bg:light-dark(#000,#fff)')?.text).toContain('background-color:light-dark(#000,#fff)')
     expect(new MasterCSS().create('bg:#fff')?.text).toContain('background-color:#fff')
     expect(new MasterCSS().create('bg:black:hover@md&landscape')?.text).toBe('@media (min-width:1024px) and (orientation:landscape){.bg\\:black\\:hover\\@md\\&landscape:hover{background-color:rgb(0 0 0)}}')
     expect(new MasterCSS().create('bg:transparent')?.text).toContain('background-color:transparent')

diff --git a/packages/core/tests/rules/color.test.ts b/packages/core/tests/rules/color.test.ts
@@ -11,3 +11,7 @@ test.concurrent('color', () => {
     expect(new MasterCSS().create('fg:transparent')?.text).toContain('color:transparent')
     expect(new MasterCSS().create('fg:inherit')?.text).toContain('color:inherit')
 })
+
+test.concurrent('light-dark function', () => {
+    expect(new MasterCSS().create('color:light-dark(#000,#fff)')?.text).toContain('color:light-dark(#000,#fff)')
+})