[scss] Add support for interpolation of custom properties

tonyganch · Mar 25, 2019 · b09fdb4 · b09fdb4
1 parent a392a88
commit b09fdb4
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 2 deletions.
diff --git a/src/scss/parse.js b/src/scss/parse.js
@@ -3464,7 +3464,7 @@ function checkCustomProperty(i) {
   // Skip `--`
   i += 2;
 
-  if (l = checkIdent(i)) i += l;
+  if (l = checkIdentOrInterpolation(i)) i += l;
   else return 0;
 
   return i - start;
@@ -3483,7 +3483,7 @@ function getCustomProperty() {
   // Skip `--`
   pos += 2;
 
-  const content = [getIdent()];
+  const content = getIdentOrInterpolation();
 
   return newNode(type, content, line, column);
 }

diff --git a/test/scss/declaration/custom.property.7.json b/test/scss/declaration/custom.property.7.json
@@ -0,0 +1,109 @@
+{
+  "type": "declaration",
+  "content": [
+    {
+      "type": "customProperty",
+      "content": [
+        {
+          "type": "interpolation",
+          "content": [
+            {
+              "type": "variable",
+              "content": [
+                {
+                  "type": "ident",
+                  "content": "foo",
+                  "syntax": "scss",
+                  "start": {
+                    "line": 1,
+                    "column": 6
+                  },
+                  "end": {
+                    "line": 1,
+                    "column": 8
+                  }
+                }
+              ],
+              "syntax": "scss",
+              "start": {
+                "line": 1,
+                "column": 5
+              },
+              "end": {
+                "line": 1,
+                "column": 8
+              }
+            }
+          ],
+          "syntax": "scss",
+          "start": {
+            "line": 1,
+            "column": 3
+          },
+          "end": {
+            "line": 1,
+            "column": 9
+          }
+        }
+      ],
+      "syntax": "scss",
+      "start": {
+        "line": 1,
+        "column": 1
+      },
+      "end": {
+        "line": 1,
+        "column": 9
+      }
+    },
+    {
+      "type": "propertyDelimiter",
+      "content": ":",
+      "syntax": "scss",
+      "start": {
+        "line": 1,
+        "column": 10
+      },
+      "end": {
+        "line": 1,
+        "column": 10
+      }
+    },
+    {
+      "type": "value",
+      "content": [
+        {
+          "type": "ident",
+          "content": "bar",
+          "syntax": "scss",
+          "start": {
+            "line": 1,
+            "column": 11
+          },
+          "end": {
+            "line": 1,
+            "column": 13
+          }
+        }
+      ],
+      "syntax": "scss",
+      "start": {
+        "line": 1,
+        "column": 11
+      },
+      "end": {
+        "line": 1,
+        "column": 13
+      }
+    }
+  ],
+  "syntax": "scss",
+  "start": {
+    "line": 1,
+    "column": 1
+  },
+  "end": {
+    "line": 1,
+    "column": 13
+  }
+}
diff --git a/test/scss/declaration/custom.property.7.scss b/test/scss/declaration/custom.property.7.scss
@@ -0,0 +1 @@
+--#{$foo}:bar
diff --git a/test/scss/declaration/test.coffee b/test/scss/declaration/test.coffee
@@ -10,6 +10,7 @@ describe 'scss/declaration >>', ->
   it 'custom.property.4', -> this.shouldBeOk()
   it 'custom.property.5', -> this.shouldBeOk()
   it 'custom.property.6', -> this.shouldBeOk()
+  it 'custom.property.7', -> this.shouldBeOk()
 
   it 'filter.0', -> this.shouldBeOk()
   it 'filter.1', -> this.shouldBeOk()