Add support for the supports() function (#2535)

Author: nex3

pkg/sass-parser/CHANGELOG.md

@@ -6,6 +6,8 @@
 
 * Add support for parsing selector expressions.
 
+* Add support for parsing the `supports()` function in `@import` modifiers.
+
 ## 0.4.15
 
 * Add support for parsing list expressions.

pkg/sass-parser/lib/src/expression/__snapshots__/string.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`a string expression toJSON 1`] = `
+exports[`a string expression toJSON a quoted string 1`] = `
 {
   "inputs": [
     {
@@ -16,3 +16,56 @@ exports[`a string expression toJSON 1`] = `
   "text": <foo>,
 }
 `;
+
+exports[`a string expression toJSON a string with interpolation 1`] = `
+{
+  "inputs": [
+    {
+      "css": "@#{f#{o}o}",
+      "hasBOM": false,
+      "id": "<input css _____>",
+    },
+  ],
+  "quotes": false,
+  "raws": {},
+  "sassType": "string",
+  "source": <1:4-1:10 in 0>,
+  "text": <f#{o}o>,
+}
+`;
+
+exports[`a string expression toJSON an unquoted string 1`] = `
+{
+  "inputs": [
+    {
+      "css": "@#{foo}",
+      "hasBOM": false,
+      "id": "<input css _____>",
+    },
+  ],
+  "quotes": false,
+  "raws": {},
+  "sassType": "string",
+  "source": <1:4-1:7 in 0>,
+  "text": <foo>,
+}
+`;
+
+exports[`a string expression toJSON supports() 1`] = `
+{
+  "inputs": [
+    {
+      "css": "@import "foo" supports(width: 1 + 1)",
+      "hasBOM": false,
+      "id": "<input css _____>",
+    },
+  ],
+  "nodes": [
+    "supports",
+    <(width: #{1 + 1})>,
+  ],
+  "raws": {},
+  "sassType": "interpolation",
+  "source": <1:15-1:37 in 0>,
+}
+`;

pkg/sass-parser/lib/src/expression/convert.ts

@@ -5,6 +5,8 @@
 import * as sassInternal from '../sass-internal';
 
 import {ArgumentList} from '../argument-list';
+import {Interpolation} from '../interpolation';
+import {LazySource} from '../lazy-source';
 import {Expression} from '.';
 import {BinaryOperationExpression} from './binary-operation';
 import {BooleanExpression} from './boolean';
@@ -41,6 +43,15 @@ const visitor = sassInternal.createExpressionVisitor<Expression>({
     new ParenthesizedExpression(undefined, inner),
   visitSelectorExpression: inner => new SelectorExpression(undefined, inner),
   visitStringExpression: inner => new StringExpression(undefined, inner),
+  visitSupportsExpression: inner =>
+    new StringExpression({
+      text: new Interpolation([
+        '(',
+        new Interpolation(undefined, inner.condition.toInterpolation()),
+        ')',
+      ]),
+      source: new LazySource(inner),
+    }),
 });
 
 /** Converts an internal expression AST node into an external one. */

pkg/sass-parser/lib/src/expression/string.test.ts

@@ -2,7 +2,13 @@
 // MIT-style license that can be found in the LICENSE file or at
 // https://opensource.org/licenses/MIT.
 
-import {Interpolation, StringExpression} from '../..';
+import {
+  ImportRule,
+  Interpolation,
+  StaticImport,
+  StringExpression,
+  scss,
+} from '../..';
 import * as utils from '../../../test/utils';
 
 describe('a string expression', () => {
@@ -284,5 +290,24 @@ describe('a string expression', () => {
     });
   });
 
-  it('toJSON', () => expect(utils.parseExpression('"foo"')).toMatchSnapshot());
+  describe('toJSON', () => {
+    it('a quoted string', () =>
+      expect(utils.parseExpression('"foo"')).toMatchSnapshot());
+
+    it('an unquoted string', () =>
+      expect(utils.parseExpression('foo')).toMatchSnapshot());
+
+    it('a string with interpolation', () =>
+      expect(utils.parseExpression('f#{o}o')).toMatchSnapshot());
+
+    it('supports()', () =>
+      expect(
+        (
+          (
+            scss.parse('@import "foo" supports(width: 1 + 1)')
+              .nodes[0] as ImportRule
+          ).imports.nodes[0] as StaticImport
+        ).modifiers,
+      ).toMatchSnapshot());
+  });
 });

pkg/sass-parser/lib/src/sass-internal.ts

@@ -384,6 +384,10 @@ declare namespace SassInternal {
     readonly text: Interpolation;
     readonly hasQuotes: boolean;
   }
+
+  class SupportsExpression extends Expression {
+    readonly condition: SupportsCondition;
+  }
 }
 
 const sassInternal = (
@@ -446,6 +450,7 @@ export type NumberExpression = SassInternal.NumberExpression;
 export type ParenthesizedExpression = SassInternal.ParenthesizedExpression;
 export type SelectorExpression = SassInternal.SelectorExpression;
 export type StringExpression = SassInternal.StringExpression;
+export type SupportsExpression = SassInternal.SupportsExpression;
 
 export interface StatementVisitorObject<T> {
   visitAtRootRule(node: AtRootRule): T;
@@ -489,6 +494,7 @@ export interface ExpressionVisitorObject<T> {
   visitParenthesizedExpression(node: ParenthesizedExpression): T;
   visitSelectorExpression(node: SelectorExpression): T;
   visitStringExpression(node: StringExpression): T;
+  visitSupportsExpression(node: SupportsExpression): T;
 }
 
 export const createExpressionVisitor = sassInternal.createExpressionVisitor;