Merge pull request #2317 from sass/more-statements

Add more statement parsing for `sass-parser`

Author: nex3

lib/src/parse/sass.dart

@@ -268,7 +268,6 @@ class SassParser extends StylesheetParser {
 
       _readIndentation();
     }
-    if (!buffer.trailingString.trimRight().endsWith("*/")) buffer.write(" */");
 
     return LoudComment(buffer.interpolation(scanner.spanFrom(start)));
   }

lib/src/parse/stylesheet.dart

@@ -748,12 +748,12 @@ abstract class StylesheetParser extends Parser {
     buffer.writeCharCode($lparen);
     whitespace();
 
-    buffer.add(_expression());
+    _addOrInject(buffer, _expression());
     if (scanner.scanChar($colon)) {
       whitespace();
       buffer.writeCharCode($colon);
       buffer.writeCharCode($space);
-      buffer.add(_expression());
+      _addOrInject(buffer, _expression());
     }
 
     scanner.expectChar($rparen);
@@ -3519,6 +3519,16 @@ abstract class StylesheetParser extends Parser {
         span());
   }
 
+  /// Adds [expression] to [buffer], or if it's an unquoted string adds the
+  /// interpolation it contains instead.
+  void _addOrInject(InterpolationBuffer buffer, Expression expression) {
+    if (expression is StringExpression && !expression.hasQuotes) {
+      buffer.addInterpolation(expression.text);
+    } else {
+      buffer.add(expression);
+    }
+  }
+
   // ## Abstract Methods
 
   /// Whether this is parsing the indented syntax.

lib/src/visitor/async_evaluate.dart

@@ -1911,8 +1911,10 @@ final class _EvaluateVisitor
       _endOfImports++;
     }
 
-    _parent.addChild(ModifiableCssComment(
-        await _performInterpolation(node.text), node.span));
+    var text = await _performInterpolation(node.text);
+    // Indented syntax doesn't require */
+    if (!text.endsWith("*/")) text += " */";
+    _parent.addChild(ModifiableCssComment(text, node.span));
     return null;
   }
 

lib/src/visitor/evaluate.dart

@@ -5,7 +5,7 @@
 // DO NOT EDIT. This file was generated from async_evaluate.dart.
 // See tool/grind/synchronize.dart for details.
 //
-// Checksum: ebf292c26dcfdd7f61fd70ce3dc9e0be2b6708b3
+// Checksum: 2ab69d23a3b34cb54ddd74e2e854614dda582174
 //
 // ignore_for_file: unused_import
 
@@ -1903,8 +1903,10 @@ final class _EvaluateVisitor
       _endOfImports++;
     }
 
-    _parent.addChild(
-        ModifiableCssComment(_performInterpolation(node.text), node.span));
+    var text = _performInterpolation(node.text);
+    // Indented syntax doesn't require */
+    if (!text.endsWith("*/")) text += " */";
+    _parent.addChild(ModifiableCssComment(text, node.span));
     return null;
   }
 

pkg/sass-parser/README.md

@@ -246,3 +246,14 @@ const sassParser = require('sass-parser');
 const root = new sassParser.Root();
 root.append('content: "hello, world!"');
 ```
+
+### Known Incompatibilities
+
+There are a few cases where an operation that's valid in PostCSS won't work with
+`sass-parser`:
+
+* Trying to convert a Sass-specific at-rule like `@if` or `@mixin` into a
+  different at-rule by changing its name is not supported.
+
+* Trying to add child nodes to a Sass statement that doesn't support children
+  like `@use` or `@error` is not supported.

pkg/sass-parser/jest.config.ts

@@ -3,6 +3,7 @@ const config = {
   roots: ['lib'],
   testEnvironment: 'node',
   setupFilesAfterEnv: ['jest-extended/all', '<rootDir>/test/setup.ts'],
+  verbose: false,
 };
 
 export default config;

pkg/sass-parser/lib/index.ts

@@ -33,6 +33,23 @@ export {
   InterpolationRaws,
   NewNodeForInterpolation,
 } from './src/interpolation';
+export {
+  CssComment,
+  CssCommentProps,
+  CssCommentRaws,
+} from './src/statement/css-comment';
+export {
+  DebugRule,
+  DebugRuleProps,
+  DebugRuleRaws,
+} from './src/statement/debug-rule';
+export {EachRule, EachRuleProps, EachRuleRaws} from './src/statement/each-rule';
+export {
+  ErrorRule,
+  ErrorRuleProps,
+  ErrorRuleRaws,
+} from './src/statement/error-rule';
+export {ForRule, ForRuleProps, ForRuleRaws} from './src/statement/for-rule';
 export {
   GenericAtRule,
   GenericAtRuleProps,

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

@@ -112,9 +112,8 @@ export class Interpolation extends Node {
    */
   get asPlain(): string | null {
     if (this.nodes.length === 0) return '';
-    if (this.nodes.length !== 1) return null;
-    if (typeof this.nodes[0] !== 'string') return null;
-    return this.nodes[0] as string;
+    if (this.nodes.some(node => typeof node !== 'string')) return null;
+    return this.nodes.join('');
   }
 
   /**

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

@@ -66,11 +66,45 @@ declare namespace SassInternal {
     readonly children: T;
   }
 
+  class AtRootRule extends ParentStatement<Statement[]> {
+    readonly name: Interpolation;
+    readonly query?: Interpolation;
+  }
+
   class AtRule extends ParentStatement<Statement[]> {
     readonly name: Interpolation;
     readonly value?: Interpolation;
   }
 
+  class DebugRule extends Statement {
+    readonly expression: Expression;
+  }
+
+  class EachRule extends ParentStatement<Statement[]> {
+    readonly variables: string[];
+    readonly list: Expression;
+  }
+
+  class ErrorRule extends Statement {
+    readonly expression: Expression;
+  }
+
+  class ExtendRule extends Statement {
+    readonly selector: Interpolation;
+    readonly isOptional: boolean;
+  }
+
+  class ForRule extends ParentStatement<Statement[]> {
+    readonly variable: string;
+    readonly from: Expression;
+    readonly to: Expression;
+    readonly isExclusive: boolean;
+  }
+
+  class LoudComment extends Statement {
+    readonly text: Interpolation;
+  }
+
   class Stylesheet extends ParentStatement<Statement[]> {}
 
   class StyleRule extends ParentStatement<Statement[]> {
@@ -106,7 +140,14 @@ export type SassNode = SassInternal.SassNode;
 export type Statement = SassInternal.Statement;
 export type ParentStatement<T extends Statement[] | null> =
   SassInternal.ParentStatement<T>;
+export type AtRootRule = SassInternal.AtRootRule;
 export type AtRule = SassInternal.AtRule;
+export type DebugRule = SassInternal.DebugRule;
+export type EachRule = SassInternal.EachRule;
+export type ErrorRule = SassInternal.ErrorRule;
+export type ExtendRule = SassInternal.ExtendRule;
+export type ForRule = SassInternal.ForRule;
+export type LoudComment = SassInternal.LoudComment;
 export type Stylesheet = SassInternal.Stylesheet;
 export type StyleRule = SassInternal.StyleRule;
 export type Interpolation = SassInternal.Interpolation;
@@ -115,7 +156,14 @@ export type BinaryOperationExpression = SassInternal.BinaryOperationExpression;
 export type StringExpression = SassInternal.StringExpression;
 
 export interface StatementVisitorObject<T> {
+  visitAtRootRule(node: AtRootRule): T;
   visitAtRule(node: AtRule): T;
+  visitDebugRule(node: DebugRule): T;
+  visitEachRule(node: EachRule): T;
+  visitErrorRule(node: ErrorRule): T;
+  visitExtendRule(node: ExtendRule): T;
+  visitForRule(node: ForRule): T;
+  visitLoudComment(node: LoudComment): T;
   visitStyleRule(node: StyleRule): T;
 }
 

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`a CSS-style comment toJSON 1`] = `
+{
+  "inputs": [
+    {
+      "css": "/* foo */",
+      "hasBOM": false,
+      "id": "<input css _____>",
+    },
+  ],
+  "raws": {
+    "closed": true,
+    "left": " ",
+    "right": " ",
+  },
+  "sassType": "comment",
+  "source": <1:1-1:10 in 0>,
+  "text": "foo",
+  "textInterpolation": <foo>,
+  "type": "comment",
+}
+`;