Add support for @at-root rules

nex3 · nex3 · commit e1a8060ea12a · 2024-09-04T14:44:09.000-07:00
diff --git a/lib/src/parse/stylesheet.dart b/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.
diff --git a/pkg/sass-parser/lib/src/sass-internal.ts b/pkg/sass-parser/lib/src/sass-internal.ts
@@ -66,6 +66,11 @@ 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;
@@ -106,6 +111,7 @@ 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 Stylesheet = SassInternal.Stylesheet;
 export type StyleRule = SassInternal.StyleRule;
@@ -115,6 +121,7 @@ export type BinaryOperationExpression = SassInternal.BinaryOperationExpression;
 export type StringExpression = SassInternal.StringExpression;
 
 export interface StatementVisitorObject<T> {
+  visitAtRootRule(node: AtRootRule): T;
   visitAtRule(node: AtRule): T;
   visitStyleRule(node: StyleRule): T;
 }
diff --git a/pkg/sass-parser/lib/src/statement/at-root-rule.test.ts b/pkg/sass-parser/lib/src/statement/at-root-rule.test.ts
@@ -0,0 +1,140 @@
+// Copyright 2024 Google Inc. Use of this source code is governed by an
+// MIT-style license that can be found in the LICENSE file or at
+// https://opensource.org/licenses/MIT.
+
+import {GenericAtRule, Rule, scss} from '../..';
+
+describe('an @at-root rule', () => {
+  let node: GenericAtRule;
+
+  describe('with no params', () => {
+    beforeEach(
+      () => void (node = scss.parse('@at-root {}').nodes[0] as GenericAtRule)
+    );
+
+    it('has a name', () => expect(node.name.toString()).toBe('at-root'));
+
+    it('has no paramsInterpolation', () =>
+      expect(node.paramsInterpolation).toBeUndefined());
+
+    it('has no params', () => expect(node.params).toBe(''));
+  });
+
+  describe('with no interpolation', () => {
+    beforeEach(
+      () =>
+        void (node = scss.parse('@at-root (with: rule) {}')
+          .nodes[0] as GenericAtRule)
+    );
+
+    it('has a name', () => expect(node.name.toString()).toBe('at-root'));
+
+    it('has a paramsInterpolation', () =>
+      expect(node).toHaveInterpolation('paramsInterpolation', '(with: rule)'));
+
+    it('has matching params', () => expect(node.params).toBe('(with: rule)'));
+  });
+
+  // TODO: test a variable used directly without interpolation
+
+  describe('with interpolation', () => {
+    beforeEach(
+      () =>
+        void (node = scss.parse('@at-root (with: #{rule}) {}')
+          .nodes[0] as GenericAtRule)
+    );
+
+    it('has a name', () => expect(node.name.toString()).toBe('at-root'));
+
+    it('has a paramsInterpolation', () => {
+      const params = node.paramsInterpolation!;
+      expect(params.nodes[0]).toBe('(with: ');
+      expect(params).toHaveStringExpression(1, 'rule');
+      expect(params.nodes[2]).toBe(')');
+    });
+
+    it('has matching params', () =>
+      expect(node.params).toBe('(with: #{rule})'));
+  });
+
+  describe('with style rule shorthand', () => {
+    beforeEach(
+      () =>
+        void (node = scss.parse('@at-root .foo {}').nodes[0] as GenericAtRule)
+    );
+
+    it('has a name', () => expect(node.name.toString()).toBe('at-root'));
+
+    it('has no paramsInterpolation', () =>
+      expect(node.paramsInterpolation).toBeUndefined());
+
+    it('has no params', () => expect(node.params).toBe(''));
+
+    it('contains a Rule', () => {
+      const rule = node.nodes[0] as Rule;
+      expect(rule).toHaveInterpolation('selectorInterpolation', '.foo ');
+      expect(rule.parent).toBe(node);
+    });
+  });
+
+  describe('stringifies', () => {
+    describe('to SCSS', () => {
+      it('with atRootShorthand: false', () =>
+        expect(
+          new GenericAtRule({
+            name: 'at-root',
+            nodes: [{selector: '.foo'}],
+            raws: {atRootShorthand: false},
+          }).toString()
+        ).toBe('@at-root {\n    .foo {}\n}'));
+
+      describe('with atRootShorthand: true', () => {
+        it('with no params and only a style rule child', () =>
+          expect(
+            new GenericAtRule({
+              name: 'at-root',
+              nodes: [{selector: '.foo'}],
+              raws: {atRootShorthand: true},
+            }).toString()
+          ).toBe('@at-root .foo {}'));
+
+        it('with no params and multiple children', () =>
+          expect(
+            new GenericAtRule({
+              name: 'at-root',
+              nodes: [{selector: '.foo'}, {selector: '.bar'}],
+              raws: {atRootShorthand: true},
+            }).toString()
+          ).toBe('@at-root {\n    .foo {}\n    .bar {}\n}'));
+
+        it('with no params and a non-style-rule child', () =>
+          expect(
+            new GenericAtRule({
+              name: 'at-root',
+              nodes: [{name: 'foo'}],
+              raws: {atRootShorthand: true},
+            }).toString()
+          ).toBe('@at-root {\n    @foo\n}'));
+
+        it('with params and only a style rule child', () =>
+          expect(
+            new GenericAtRule({
+              name: 'at-root',
+              params: '(with: rule)',
+              nodes: [{selector: '.foo'}],
+              raws: {atRootShorthand: true},
+            }).toString()
+          ).toBe('@at-root (with: rule) {\n    .foo {}\n}'));
+
+        it("that's not @at-root", () =>
+          expect(
+            new GenericAtRule({
+              name: 'at-wrong',
+              nodes: [{selector: '.foo'}],
+              raws: {atRootShorthand: true},
+            }).toString()
+          ).toBe('@at-wrong {\n    .foo {}\n}'));
+      });
+    });
+  });
+});
diff --git a/pkg/sass-parser/lib/src/statement/generic-at-rule.ts b/pkg/sass-parser/lib/src/statement/generic-at-rule.ts
@@ -26,12 +26,20 @@ import * as sassParser from '../..';
 /**
  * The set of raws supported by {@link GenericAtRule}.
  *
- * Sass doesn't support PostCSS's `params` raws, since the param interpolation
- * is lexed and made directly available to the caller.
+ * Sass doesn't support PostCSS's `params` raws, since
+ * {@link GenericAtRule.paramInterpolation} has its own raws.
  *
  * @category Statement
  */
-export type GenericAtRuleRaws = Omit<PostcssAtRuleRaws, 'params'>;
+export interface GenericAtRuleRaws extends Omit<PostcssAtRuleRaws, 'params'> {
+  /**
+   * Whether to collapse the nesting for an `@at-root` with no params that
+   * contains only a single style rule.
+   *
+   * This is ignored for rules that don't meet all of those criteria.
+   */
+  atRootShorthand?: boolean;
+}
 
 /**
  * The initializer properties for {@link GenericAtRule}.
diff --git a/pkg/sass-parser/lib/src/statement/index.ts b/pkg/sass-parser/lib/src/statement/index.ts
@@ -4,6 +4,8 @@
 
 import * as postcss from 'postcss';
 
+import {Interpolation} from '../interpolation';
+import {LazySource} from '../lazy-source';
 import {Node, NodeProps} from '../node';
 import * as sassInternal from '../sass-internal';
 import {GenericAtRule, GenericAtRuleProps} from './generic-at-rule';
@@ -93,6 +95,17 @@ export interface Statement extends postcss.Node, Node {
 
 /** The visitor to use to convert internal Sass nodes to JS. */
 const visitor = sassInternal.createStatementVisitor<Statement>({
+  visitAtRootRule: inner => {
+    const rule = new GenericAtRule({
+      name: 'at-root',
+      paramsInterpolation: inner.query
+        ? new Interpolation(undefined, inner.query)
+        : undefined,
+      source: new LazySource(inner),
+    });
+    appendInternalChildren(rule, inner.children);
+    return rule;
+  },
   visitAtRule: inner => new GenericAtRule(undefined, inner),
   visitStyleRule: inner => new Rule(undefined, inner),
 });
@@ -196,7 +209,7 @@ export function normalize(
     ) {
       result.push(new Rule(node));
     } else if ('name' in node || 'nameInterpolation' in node) {
-      result.push(new GenericAtRule(node));
+      result.push(new GenericAtRule(node as GenericAtRuleProps));
     } else {
       result.push(...postcssNormalizeAndConvertToSass(self, node, sample));
     }
diff --git a/pkg/sass-parser/lib/src/stringifier.ts b/pkg/sass-parser/lib/src/stringifier.ts
@@ -68,6 +68,24 @@ export class Stringifier extends PostCssStringifier {
   }
 
   private atrule(node: GenericAtRule, semicolon: boolean): void {
+    // In the @at-root shorthand, stringify `@at-root {.foo {...}}` as
+    // `@at-root .foo {...}`.
+    if (
+      node.raws.atRootShorthand &&
+      node.name === 'at-root' &&
+      node.paramsInterpolation === undefined &&
+      node.nodes.length === 1 &&
+      node.nodes[0].sassType === 'rule'
+    ) {
+      this.block(
+        node.nodes[0],
+        '@at-root' +
+          (node.raws.afterName ?? ' ') +
+          node.nodes[0].selectorInterpolation
+      );
+      return;
+    }
+
     const start =
       `@${node.nameInterpolation}` +
       (node.raws.afterName ?? (node.paramsInterpolation ? ' ' : '')) +
