Merge branch 'beta' of https://github.com/master-co/css into beta

master-co · Sep 26, 2023 · 9b18fbe · 9b18fbe
2 parents 9fe627a + 09f1b80
commit 9b18fbe
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 90 deletions.
diff --git a/docs/installation/svelte/content.mdx b/docs/installation/svelte/content.mdx
@@ -79,7 +79,7 @@
             `@master/css.svelte` and `master.css.ts` will not be included in the page's initial JavaScript bundle.
         </StepL>
         <StepR>
-            ```svelte name=src/routes/+layout.svelte
+            ```svelte name=src/routes/%2Blayout.svelte
             <script lang="ts">
             +    import { onMount, type ComponentType } from "svelte";
             +    import { Fragment } from "@master/css.svelte";
@@ -132,7 +132,7 @@
     <Step>
         ### <StepNum />Start using Master CSS
         Now style your first element using Master CSS syntax!
-        ```svelte name=src/routes/+page.svelte
+        ```svelte name=src/routes/%2Bpage.svelte
         +<h1 class="font:40 fg:blue font:heavy italic m:50 text:center">Hello World</h1>
         ```
         <p className="mt:50">Open your browser to watch the changes.</p>

diff --git a/docs/installation/svelte/runtime-rendering/content.mdx b/docs/installation/svelte/runtime-rendering/content.mdx
@@ -74,7 +74,7 @@
             Register the `html <CSSProvider>` in `src/routes/+layout.svelte`.
         </StepL>
         <StepR>
-            ```svelte name=src/routes/+layout.svelte
+            ```svelte name=src/routes/%2Blayout.svelte
                 <script>
                 +    import { CSSProvider } from "@master/css.svelte";
                 +    import config from '../master.css';
@@ -114,7 +114,7 @@
     <Step>
         ### <StepNum />Start using Master CSS
         Now style your first element using Master CSS syntax!
-        ```svelte name=src/routes/+page.svelte
+        ```svelte name=src/routes/%2Bpage.svelte
         +<h1 class="font:40 fg:blue font:heavy italic m:50 text:center">Hello World</h1>
         ```
         <p className="mt:50">Open your browser to watch the changes.</p>

diff --git a/docs/installation/svelte/static-extraction/content.mdx b/docs/installation/svelte/static-extraction/content.mdx
@@ -93,7 +93,7 @@
             Import the virtual CSS module `.virtual/master.css` into the `src/routes/+layout.svelte`.
         </StepL>
         <StepR>
-            ```svelte name=src/routes/+layout.svelte
+            ```svelte name=src/routes/%2Blayout.svelte
             <script>
                 import Header from './Header.svelte';
                 import './styles.css';
@@ -117,7 +117,7 @@
     <Step>
         ### <StepNum />Start using Master CSS
         Now style your first element using Master CSS syntax!
-        ```svelte name=src/routes/+page.svelte
+        ```svelte name=src/routes/%2Bpage.svelte
         +<h1 class="font:40 fg:blue font:heavy italic m:50 text:center">Hello World</h1>
         ```
         <p className="mt:50">Open your browser to watch the changes.</p>

diff --git a/packages/css/src/config/functions.ts b/packages/css/src/config/functions.ts
@@ -61,7 +61,7 @@ const functions: Functions = {
                                     + (functionConfig.name ?? newFunctionName)
                                     + '('
                                     // @ts-ignore
-                                    + (functionConfig.transform?.(functionValue) ?? functionValue)
+                                    + (functionConfig.transform?.call(instance, functionValue) ?? functionValue)
                                     + ')'
                             }
                         }

diff --git a/packages/css/src/config/rules.ts b/packages/css/src/config/rules.ts
@@ -1,6 +1,7 @@
 import cssEscape from 'shared/utils/css-escape'
 import { START_SYMBOLS } from '../constants/start-symbol'
 import { Declarations, Rule, RuleConfig } from '../rule'
+import { transformColorWithOpacity } from '../functions/transform-color-with-opacity'
 
 const defaultRules = {
     group: {
@@ -145,6 +146,20 @@ const defaultRules = {
     } as RuleConfig,
     variable: {
         match: '^\\$[^ (){}A-Z]+:[^ ]', // don't use 'rem' as default, because css variable is common API
+        transform(value) {
+            const regexp = new RegExp(`^((?:${this.css.colorNames.join('|')})(?:-(?:[0-9A-Za-z-]+))?)(?:\\/(\\.?[0-9]+%?))?(?:@(.*?))?$`, 'm')
+            const result = regexp.exec(value)
+            if (result) {
+                const [, colorName, opacityStr, themeName] = result
+                const color = this.css.colorThemesMap[colorName]?.[themeName || '']
+                if (color)
+                    return (opacityStr
+                        ? transformColorWithOpacity(color, opacityStr)
+                        : color)
+            }
+
+            return value
+        },
         declare(value) {
             return {
                 ['--' + this.prefix.slice(1, -1)]: value

diff --git a/packages/css/src/functions/transform-color-with-opacity.ts b/packages/css/src/functions/transform-color-with-opacity.ts
@@ -0,0 +1,11 @@
+export function transformColorWithOpacity(color: string, opacityStr: string) {
+    let opacity = opacityStr.endsWith('%')
+        ? parseFloat(opacityStr) / 100.0
+        : +opacityStr
+
+    opacity = isNaN(opacity)
+        ? 1
+        : Math.min(Math.max(opacity, 0), 1)
+
+    return color + Math.round(opacity * 255).toString(16).toUpperCase().padStart(2, '0')
+}
diff --git a/packages/css/src/rule.ts b/packages/css/src/rule.ts
@@ -3,6 +3,7 @@ import type { MasterCSS } from './core'
 import { START_SYMBOLS } from './constants/start-symbol'
 import cssEscape from 'shared/utils/css-escape'
 import { extend } from '@techor/extend'
+import { transformColorWithOpacity } from './functions/transform-color-with-opacity'
 
 const defaultConfig: RuleConfig = {
     unit: '',
@@ -620,20 +621,9 @@ export class Rule {
                                                 anyColorMatched = anyMatched
                                             }
 
-                                            let newValue = color
-                                            if (opacityStr) {
-                                                let opacity = opacityStr.endsWith('%')
-                                                    ? parseFloat(opacityStr) / 100.0
-                                                    : +opacityStr
-
-                                                opacity = isNaN(opacity)
-                                                    ? 1
-                                                    : Math.min(Math.max(opacity, 0), 1)
-
-                                                newValue += Math.round(opacity * 255).toString(16).toUpperCase().padStart(2, '0')
-                                            }
-
-                                            return prefix + newValue
+                                            return prefix + (opacityStr
+                                                ? transformColorWithOpacity(color, opacityStr)
+                                                : color)
                                         } else {
                                             anyColorMismatched = true
                                         }

diff --git a/packages/css/src/utils/parse-rule-value.ts b/packages/css/src/utils/parse-rule-value.ts
diff --git a/packages/css/tests/functions.test.ts b/packages/css/tests/functions.test.ts
@@ -20,4 +20,9 @@ test('functions', () => {
     testCSS('mt:calc($(g-y)*(-.1))', '.mt\\:calc\\(\\$\\(g-y\\)\\*\\(-\\.1\\)\\){margin-top:calc(var(--g-y) * (-0.00625rem))}')
     testCSS('mt:calc($(g-y)--.1)', '.mt\\:calc\\(\\$\\(g-y\\)--\\.1\\){margin-top:calc(var(--g-y) - -0.00625rem)}')
     testCSS('mr:calc($(g-x)/(-2px))', '.mr\\:calc\\(\\$\\(g-x\\)\\/\\(-2px\\)\\){margin-right:calc(var(--g-x) / (-2px))}')
+
+    testCSS('$primary:red', '.\\$primary\\:red{--primary:#d11a1e}')
+    testCSS('$primary:red-80', '.\\$primary\\:red-80{--primary:#fdcfcf}')
+    testCSS('$primary:red/.5', '.\\$primary\\:red\\/\\.5{--primary:#d11a1e80}')
+    testCSS('$primary:red-80/.5', '.\\$primary\\:red-80\\/\\.5{--primary:#fdcfcf80}')
 })