feat(runtime): support dynamic variables fallback, #118

yandex · Jun 5, 2020 · 034fd91 · 034fd91
1 parent 1d338b9
commit 034fd91
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 8 deletions.
diff --git a/packages/runtime/index.js b/packages/runtime/index.js
@@ -13,16 +13,19 @@ const checkMixin = code => {
 
 const unitRe = /^[\s\n\r]*(cm|mm|in|px|pt|pc|em|ex|ch|rem|vw|vh|vmin|vmax|%)[\s\n\r]*[,;)]/;
 
-const createCSS = ({
-    parse = defaultParse,
-    elements = true,
-    attributes = true,
-    classes = true,
-    onlyNamespaced = false,
-} = {}) => {
+const createCSS = (options = {}) => {
     const cache = {};
 
     function css() {
+        const {
+            parse = defaultParse,
+            elements = true,
+            attributes = true,
+            classes = true,
+            onlyNamespaced = false,
+            variablesFallback = false,
+        } = options;
+
         const str = [...arguments[0]];
         const hash = stringHash(str.join('')).toString(36);
         let mixinsHash = '';
@@ -55,6 +58,9 @@ const createCSS = ({
 
                 mixinTokens.push(value);
                 Object.assign(mixinUses, value[KEYS.__use__]);
+            } else if (variablesFallback) {
+                str[i] = value;
+                continue;
             } else {
                 const name = '--' + hash + '_' + i;
 
@@ -82,6 +88,8 @@ const createCSS = ({
             for (let i = 1; i < arguments.length; i++) {
                 if (i in mixins) {
                     values.push(mixins[i]);
+                } else if (variablesFallback) {
+                    continue;
                 } else {
                     values.push('var(' + keys[pointer] + ')');
                     pointer++;
@@ -117,6 +125,10 @@ const createCSS = ({
         return tokens;
     }
 
+    css.setOptions = newOptions => {
+        Object.assign(options, newOptions);
+    };
+
     return css;
 };
 

diff --git a/packages/runtime/spec/__snapshots__/index.test.js.snap b/packages/runtime/spec/__snapshots__/index.test.js.snap
@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`runtime should use dynamic variables fallback 1`] = `".__button_1pacrc6{color:red;}"`;
+
 exports[`runtime should work with keyframes 1`] = `"_qrjiv5"`;
 
 exports[`runtime should work with keyframes 2`] = `"@keyframes _qrjiv5{0%,25%{opacity:0;}100%{opacity:1;}}"`;
diff --git a/packages/runtime/spec/index.test.js b/packages/runtime/spec/index.test.js
@@ -8,6 +8,7 @@ const getStyles = () =>
         .join('');
 
 let keyframes;
+let css;
 
 describe('runtime', () => {
     beforeEach(() => {
@@ -16,7 +17,7 @@ describe('runtime', () => {
         });
 
         jest.isolateModules(() => {
-            ({keyframes} = require('..'));
+            ({keyframes, css} = require('..'));
         });
     });
 
@@ -33,4 +34,16 @@ describe('runtime', () => {
         expect(pulse).toMatchSnapshot();
         expect(getStyles()).toMatchSnapshot();
     });
+
+    it('should use dynamic variables fallback', () => {
+        css.setOptions({variablesFallback: true});
+
+        css`
+            button {
+                color: ${'red'};
+            }
+        `;
+
+        expect(getStyles()).toMatchSnapshot();
+    });
 });