Merge pull request #2478 from sass/if

Add support for `@if` and `@else`

Author: nex3

pkg/sass-parser/CHANGELOG.md

@@ -4,6 +4,8 @@
 
 * Add support for parsing declarations.
 
+* Add support for parsing the `@if` and `@else` rules.
+
 ## 0.4.8
 
 * Add support for parsing the `@mixin` rule.

pkg/sass-parser/lib/index.ts

@@ -105,6 +105,7 @@ export {
   DeclarationRaws,
 } from './src/statement/declaration';
 export {EachRule, EachRuleProps, EachRuleRaws} from './src/statement/each-rule';
+export {ElseRule, ElseRuleProps, ElseRuleRaws} from './src/statement/else-rule';
 export {
   ErrorRule,
   ErrorRuleProps,
@@ -128,6 +129,7 @@ export {
   GenericAtRuleProps,
   GenericAtRuleRaws,
 } from './src/statement/generic-at-rule';
+export {IfRule, IfRuleProps, IfRuleRaws} from './src/statement/if-rule';
 export {
   MixinRule,
   MixinRuleProps,

pkg/sass-parser/lib/src/configured-variable.ts

@@ -102,7 +102,7 @@ export class ConfiguredVariable extends Node {
    */
   declare name: string;
 
-  /** The expresison whose value the variable is assigned. */
+  /** The expression whose value the variable is assigned. */
   get expression(): Expression {
     return this._expression!;
   }

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

@@ -166,6 +166,20 @@ declare namespace SassInternal {
     readonly parameters: ParameterList;
   }
 
+  class IfRule extends Statement {
+    readonly clauses: IfClause[];
+    readonly lastClause: ElseClause | null;
+  }
+
+  class IfClause {
+    readonly expression: Expression;
+    readonly children: Statement[];
+  }
+
+  class ElseClause {
+    readonly children: Statement[];
+  }
+
   class IncludeRule extends Statement {
     readonly namespace: string | null;
     readonly name: string;
@@ -329,6 +343,9 @@ export type ExtendRule = SassInternal.ExtendRule;
 export type ForRule = SassInternal.ForRule;
 export type ForwardRule = SassInternal.ForwardRule;
 export type FunctionRule = SassInternal.FunctionRule;
+export type IfRule = SassInternal.IfRule;
+export type IfClause = SassInternal.IfClause;
+export type ElseClause = SassInternal.ElseClause;
 export type IncludeRule = SassInternal.IncludeRule;
 export type LoudComment = SassInternal.LoudComment;
 export type MediaRule = SassInternal.MediaRule;
@@ -363,6 +380,7 @@ export interface StatementVisitorObject<T> {
   visitForRule(node: ForRule): T;
   visitForwardRule(node: ForwardRule): T;
   visitFunctionRule(node: FunctionRule): T;
+  visitIfRule(node: IfRule): T;
   visitIncludeRule(node: IncludeRule): T;
   visitLoudComment(node: LoudComment): T;
   visitMediaRule(node: MediaRule): T;

pkg/sass-parser/lib/src/statement/__snapshots__/declaration.test.ts.snap

@@ -10,11 +10,13 @@ exports[`a property declaration toJSON with expression and no nodes 1`] = `
       "id": "<input css _____>",
     },
   ],
+  "prop": "foo",
   "propInterpolation": <foo>,
   "raws": {},
   "sassType": "decl",
   "source": <1:4-1:12 in 0>,
   "type": "decl",
+  "value": "bar",
 }
 `;
 
@@ -31,11 +33,13 @@ exports[`a property declaration toJSON with expression and nodes 1`] = `
   "nodes": [
     <baz: bang>,
   ],
+  "prop": "foo",
   "propInterpolation": <foo>,
   "raws": {},
   "sassType": "decl",
   "source": <1:4-1:24 in 0>,
   "type": "decl",
+  "value": "bar",
 }
 `;
 
@@ -51,10 +55,12 @@ exports[`a property declaration toJSON with no expression and nodes 1`] = `
   "nodes": [
     <baz: bang>,
   ],
+  "prop": "foo",
   "propInterpolation": <foo>,
   "raws": {},
   "sassType": "decl",
   "source": <1:4-1:20 in 0>,
   "type": "decl",
+  "value": "",
 }
 `;

pkg/sass-parser/lib/src/statement/__snapshots__/else-rule.test.ts.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`an @else rule toJSON with an expression 1`] = `
+{
+  "elseCondition": <bar>,
+  "inputs": [
+    {
+      "css": "@if foo {} @else if bar {}",
+      "hasBOM": false,
+      "id": "<input css _____>",
+    },
+  ],
+  "name": "else",
+  "nodes": [],
+  "params": "if bar",
+  "raws": {},
+  "sassType": "else-rule",
+  "source": <1:1-1:27 in 0>,
+  "type": "atrule",
+}
+`;
+
+exports[`an @else rule toJSON with no expression 1`] = `
+{
+  "inputs": [
+    {
+      "css": "@if foo {} @else {}",
+      "hasBOM": false,
+      "id": "<input css _____>",
+    },
+  ],
+  "name": "else",
+  "nodes": [],
+  "params": "",
+  "raws": {},
+  "sassType": "else-rule",
+  "source": <1:1-1:20 in 0>,
+  "type": "atrule",
+}
+`;

pkg/sass-parser/lib/src/statement/__snapshots__/function-rule.test.ts.snap

@@ -13,6 +13,7 @@ exports[`a @function rule toJSON 1`] = `
   "name": "function",
   "nodes": [],
   "parameters": <($bar)>,
+  "params": "foo($bar)",
   "raws": {},
   "sassType": "function-rule",
   "source": <1:1-1:23 in 0>,

pkg/sass-parser/lib/src/statement/__snapshots__/if-rule.test.ts.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`an @if rule toJSON 1`] = `
+{
+  "ifCondition": <foo>,
+  "inputs": [
+    {
+      "css": "@if foo {}",
+      "hasBOM": false,
+      "id": "<input css _____>",
+    },
+  ],
+  "name": "if",
+  "nodes": [],
+  "params": "foo",
+  "raws": {},
+  "sassType": "if-rule",
+  "source": <1:1-1:11 in 0>,
+  "type": "atrule",
+}
+`;

pkg/sass-parser/lib/src/statement/__snapshots__/mixin-rule.test.ts.snap

@@ -13,6 +13,7 @@ exports[`a @mixin rule toJSON 1`] = `
   "name": "mixin",
   "nodes": [],
   "parameters": <($bar)>,
+  "params": "foo($bar)",
   "raws": {},
   "sassType": "mixin-rule",
   "source": <1:1-1:20 in 0>,

pkg/sass-parser/lib/src/statement/__snapshots__/variable-declaration.test.ts.snap

@@ -13,10 +13,12 @@ exports[`a variable declaration toJSON 1`] = `
     },
   ],
   "namespace": "baz",
+  "prop": "baz.$foo",
   "raws": {},
   "sassType": "variable-declaration",
   "source": <1:1-1:16 in 0>,
   "type": "decl",
+  "value": ""bar"",
   "variableName": "foo",
 }
 `;

pkg/sass-parser/lib/src/statement/debug-rule.ts

@@ -66,7 +66,7 @@ export class DebugRule
     this.debugExpression = {text: value?.toString() ?? ''};
   }
 
-  /** The expresison whose value is emitted when the debug rule is executed. */
+  /** The expression whose value is emitted when the debug rule is executed. */
   get debugExpression(): Expression {
     return this._debugExpression!;
   }

pkg/sass-parser/lib/src/statement/declaration.ts

@@ -222,7 +222,7 @@ export class Declaration
   toJSON(_?: string, inputs?: Map<postcss.Input, number>): object {
     return utils.toJSON(
       this,
-      ['propInterpolation', 'expression', 'nodes'],
+      ['prop', 'value', 'propInterpolation', 'expression', 'nodes'],
       inputs,
     );
   }

pkg/sass-parser/lib/src/statement/each-rule.ts

@@ -95,7 +95,7 @@ export class EachRule
     throw new Error("EachRule.params can't be overwritten.");
   }
 
-  /** The expresison whose value is iterated over. */
+  /** The expression whose value is iterated over. */
   get eachExpression(): Expression {
     return this._eachExpression!;
   }