Add CSS Variables support. Fixes GrapesJS#271

nopost · Sep 4, 2017 · 5b3187b · 5b3187b
1 parent ab7ffe1
commit 5b3187b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/src/parser/model/ParserCss.js b/src/parser/model/ParserCss.js
@@ -72,12 +72,12 @@ module.exports = config => ({
       // Create style object from the big one
       var stl = node.style;
       var style = {};
+
       for (var j = 0, len2 = stl.length; j < len2; j++) {
-        var propName = stl[j];
-        //console.log('Style', stl, propName, ': ', stl.getPropertyValue(propName));
-        var important = stl.getPropertyPriority(propName);
-        style[propName] = stl[propName] +
-          (important ? ' !' + important : '');
+        const propName = stl[j];
+        const propValue = stl.getPropertyValue(propName);
+        const important = stl.getPropertyPriority(propName);
+        style[propName] = `${propValue}${important ? ` !${important}` : ''}`
       }
 
       var lastRule = '';

diff --git a/test/specs/parser/model/ParserCss.js b/test/specs/parser/model/ParserCss.js
@@ -199,6 +199,22 @@ module.exports = {
         expect(obj.parse(str)).toEqual(result)
       });
 
+      it('Parse rule with CSS variables', () => {
+        var str = `:root {
+            --some-color: red;
+            --some-width: 55px;
+        }`;
+        var result = {
+          selectors: [],
+          selectorsAdd: ':root',
+          style: {
+            '--some-color': 'red',
+            '--some-width': '55px',
+          }
+        };
+        expect(obj.parse(str)).toEqual(result)
+      });
+
     });
 
   }