Merge pull request #397 from Shopify/fix_cssvar_replacement

Grab the entire cssvar value when running the slate-cssvar-loader
Shopify · Feb 21, 2018 · 9e02e0a · 9e02e0a
2 parents 25d52e0 + 19cc483
commit 9e02e0a
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 3 deletions.
diff --git a/packages/slate-cssvar-loader/__tests__/fixtures/css-variables.liquid b/packages/slate-cssvar-loader/__tests__/fixtures/css-variables.liquid
@@ -14,5 +14,6 @@
     --color_button_text: {{ settings.color_button_text }};
     --color_main_bg: {{ settings.color_main_bg }};
     --header_family: {{ header_family }};
+    --letter_spacing: {{ settings.letter_spacing }}px;
   }
 </style>
diff --git a/packages/slate-cssvar-loader/__tests__/fixtures/expected-disabled.js b/packages/slate-cssvar-loader/__tests__/fixtures/expected-disabled.js
@@ -3,6 +3,6 @@ exports = module.exports = require("../../node_modules/css-loader/lib/css-base.j
 
 
 // module
-exports.push([module.id, ".heading {\n  color: var(--headings_color);\n  background-color: '#FF00FF';\n}\n\n.title {\n  color: var(--headings_color);\n}\n\nbody {\n  background-color: var(--body_color);\n}", ""]);
+exports.push([module.id, ".heading {\n  color: var(--headings_color);\n  background-color: '#FF00FF';\n  letter-spacing: var(--letter_spacing);\n}\n\n.title {\n  color: var(--headings_color);\n}\n\nbody {\n  background-color: var(--body_color);\n}", ""]);
 
 // exports
diff --git a/packages/slate-cssvar-loader/__tests__/fixtures/expected.js b/packages/slate-cssvar-loader/__tests__/fixtures/expected.js
@@ -3,6 +3,6 @@ exports = module.exports = require("../../node_modules/css-loader/lib/css-base.j
 
 
 // module
-exports.push([module.id, ".heading {\n  color: {{ settings.headings_color }};\n  background-color: '#FF00FF';\n}\n\n.title {\n  color: {{ settings.headings_color }};\n}\n\nbody {\n  background-color: {{ settings.body_color }};\n}", ""]);
+exports.push([module.id, ".heading {\n  color: {{ settings.headings_color }};\n  background-color: '#FF00FF';\n  letter-spacing: {{ settings.letter_spacing }}px;\n}\n\n.title {\n  color: {{ settings.headings_color }};\n}\n\nbody {\n  background-color: {{ settings.body_color }};\n}", ""]);
 
 // exports
diff --git a/packages/slate-cssvar-loader/__tests__/fixtures/test.css b/packages/slate-cssvar-loader/__tests__/fixtures/test.css
@@ -1,6 +1,7 @@
 .heading {
   color: var(--headings_color);
   background-color: '#FF00FF';
+  letter-spacing: var(--letter_spacing);
 }
 
 .title {

diff --git a/packages/slate-cssvar-loader/index.js b/packages/slate-cssvar-loader/index.js
@@ -5,7 +5,7 @@ const config = require('./slate-cssvar-loader.config');
 
 const STYLE_BLOCK_REGEX = /(?:<style>|\{% style %\})([\S\s]*?)(?:<\/style>|\{% endstyle %\})/g;
 const CSS_VAR_FUNC_REGEX = /var\(--(.*?)\)/g;
-const CSS_VAR_DECL_REGEX = /--(.*?):\s+(\{\{\s*.*?\s*\}\}).*?;/g;
+const CSS_VAR_DECL_REGEX = /--(.*?):\s*(\{\{\s*.*?\s*\}\}.*?);/g;
 
 class SlateException {
   constructor(message) {