feat: Add SCSS parsing support

README.md

@@ -114,6 +114,7 @@ em {
 | **Language Name** | **Description**        |
 | ----------------- | ---------------------- |
 | `css`             | Parse CSS stylesheets. |
+| `scss`            | Parse SCSS stylesheets.|
 
 In order to individually configure a language in your `eslint.config.js` file, import `@eslint/css` and configure a `language`:
 
@@ -132,6 +133,13 @@ export default [
 			"css/no-empty-blocks": "error",
 		},
 	},
+	{
+		files: ["**/*.scss"],
+		plugins: {
+			css,
+		},
+		language: "css/scss"
+	},
 ];
 ```
 

src/index.js

@@ -28,6 +28,7 @@ const plugin = {
 	},
 	languages: {
 		css: new CSSLanguage(),
+		scss: new CSSLanguage({ mode: "scss" }),
 	},
 	rules: {
 		"no-empty-blocks": noEmptyBlocks,

src/languages/css-language.js

@@ -11,11 +11,11 @@ import {
 	parse as originalParse,
 	lexer as originalLexer,
 	fork,
-	toPlainObject,
 	tokenTypes,
 } from "@eslint/css-tree";
 import { CSSSourceCode } from "./css-source-code.js";
 import { visitorKeys } from "./css-visitor-keys.js";
+import scss from "./scss-syntax.js"
 
 //-----------------------------------------------------------------------------
 // Types
@@ -33,6 +33,10 @@ import { visitorKeys } from "./css-visitor-keys.js";
 /** @typedef {import("@eslint/core").File} File */
 /** @typedef {import("@eslint/core").FileError} FileError */
 
+/**
+ * @typedef {"css"|"scss"} LanguageMode
+ */
+
 /**
  * @typedef {Object} CSSLanguageOptions
  * @property {boolean} [tolerant] Whether to be tolerant of recoverable parsing errors.
@@ -94,14 +98,29 @@ export class CSSLanguage {
 	 * @type {Record<string, string[]>}
 	 */
 	visitorKeys = visitorKeys;
-
+
+	/**
+	 * The language mode.
+	 * @type {LanguageMode}
+	 */
+	mode;
+
 	/**
 	 * The default language options.
 	 * @type {CSSLanguageOptions}
 	 */
 	defaultLanguageOptions = {
 		tolerant: false,
 	};
+
+	/**
+	 * Creates a new instance of the CSSLanguage class.
+	 * @param {Object} options The options for the language.
+	 * @param {LanguageMode} [options.mode] The language mode to use.
+	 */
+	constructor({ mode = "css" } = {}) {
+		this.mode = mode;
+	}
 
 	/**
 	 * Validates the language options.
@@ -147,9 +166,11 @@ export class CSSLanguage {
 		/** @type {FileError[]} */
 		const errors = [];
 
+		const syntax = this.mode === "scss" ? scss : languageOptions.customSyntax;
+
 		const { tolerant } = languageOptions;
-		const { parse, lexer } = languageOptions.customSyntax
-			? fork(languageOptions.customSyntax)
+		const { parse, lexer, toPlainObject } = syntax
+			? fork(syntax)
 			: { parse: originalParse, lexer: originalLexer };
 
 		/*

src/languages/scss-syntax.js

@@ -0,0 +1,42 @@
+/**
+ * @fileoverview SCSS syntax for CSSTree.
+ * @author Nicholas C. Zakas
+ */
+
+//-----------------------------------------------------------------------------
+// imports
+//-----------------------------------------------------------------------------
+
+import * as ScssVariable from "./scss/scss-variable.js";
+import * as ScssDeclaration from "./scss/scss-declaration.js";
+import * as ScssStyleSheet from "./scss/scss-stylesheet.js";
+import * as ScssValue from "./scss/scss-value.js";
+import * as ScssSelector from "./scss/scss-selector.js";
+import * as ScssPlaceholderSelector from "./scss/scss-placeholder-selector.js";
+
+//-----------------------------------------------------------------------------
+// Type Definitions
+//-----------------------------------------------------------------------------
+
+/**
+ * @import { SyntaxConfig } from "@eslint/css-tree";
+ */
+
+/** @type {Partial<SyntaxConfig>} */
+export default {
+
+    atrules: {
+        use: {
+            prelude: "<string>"
+        }
+    },
+
+    node: {
+        ScssVariable,
+        ScssDeclaration,
+        ScssPlaceholderSelector,
+        Selector: ScssSelector,
+        Value: ScssValue,
+        StyleSheet: ScssStyleSheet
+    }
+};

src/languages/scss/scss-declaration.js

@@ -0,0 +1,102 @@
+/**
+ * @fileoverview SCSS variable node for CSSTree.
+ * @author Nicholas C. Zakas
+ */
+
+//-----------------------------------------------------------------------------
+// Imports
+//-----------------------------------------------------------------------------
+
+import { tokenTypes } from "@eslint/css-tree";
+
+//-----------------------------------------------------------------------------
+// Helpers
+//-----------------------------------------------------------------------------
+
+const DOLLARSIGN = 0x0024;      // U+0024 DOLLAR SIGN ($)
+
+function consumeValueRaw() {
+    return this.Raw(this.consumeUntilExclamationMarkOrSemicolon, true);
+}
+
+function consumeValue() {
+    const startValueToken = this.tokenIndex;
+    const value = this.Value();
+
+    if (value.type !== 'Raw' &&
+        this.eof === false &&
+        this.tokenType !== tokenTypes.Semicolon &&
+        this.isBalanceEdge(startValueToken) === false) {
+        this.error();
+    }
+
+    return value;
+}
+
+//-----------------------------------------------------------------------------
+// Exports
+//-----------------------------------------------------------------------------
+
+export const name = 'ScssDeclaration';
+export const walkContext = 'declaration';
+export const structure = {
+    variable: String,
+    value: ['Value', 'Raw']
+};
+
+export function parse() {
+    const start = this.tokenStart;
+    const startToken = this.tokenIndex;
+    const variable = readVariable.call(this);
+    let value;
+
+    this.skipSC();
+    this.eat(tokenTypes.Colon);
+    this.skipSC();
+
+    if (this.parseValue) {
+        value = this.parseWithFallback(consumeValue, consumeValueRaw);
+    } else {
+        value = consumeValueRaw.call(this, this.tokenIndex);
+    }
+
+    // Do not include semicolon to range per spec
+    // https://drafts.csswg.org/css-syntax/#declaration-diagram
+
+    if (this.eof === false &&
+        this.tokenType !== tokenTypes.Semicolon &&
+        this.isBalanceEdge(startToken) === false) {
+        this.error();
+    }
+
+    // skip semicolon if present
+    if (this.tokenType === tokenTypes.Semicolon) {
+        this.next();
+    }
+
+    return {
+        type: name,
+        loc: this.getLocation(start, this.tokenStart),
+        variable,
+        value
+    };
+}
+
+export function generate(node) {
+    this.token(tokenTypes.Delim, '$');
+    this.token(tokenTypes.Ident, node.variable);
+    this.token(tokenTypes.Colon, ':');
+    this.node(node.value);
+}
+
+function readVariable() {
+    const start = this.tokenStart;
+
+    if (this.isDelim(DOLLARSIGN)) {
+        this.eat(tokenTypes.Delim);
+    }
+
+    this.eat(tokenTypes.Ident);
+
+    return this.substrToCursor(start);
+}

src/languages/scss/scss-placeholder-selector.js

@@ -0,0 +1,35 @@
+/**
+ * @fileoverview SCSS variable node for CSSTree.
+ * @author Nicholas C. Zakas
+ */
+
+//-----------------------------------------------------------------------------
+// Imports
+//-----------------------------------------------------------------------------
+
+import { tokenTypes } from "@eslint/css-tree";
+
+//-----------------------------------------------------------------------------
+// Exports
+//-----------------------------------------------------------------------------
+
+export const name = 'ScssPlaceholderSelector';
+export const structure = {
+    name: String
+};
+
+export function parse() {
+    const start = this.tokenStart;
+
+    this.eat(tokenTypes.Delim);
+
+    return {
+        type: name,
+        loc: this.getLocation(start, this.tokenStart),
+        name: this.consume(tokenTypes.Ident)
+    };
+}
+
+export function generate(node) {
+    this.tokenize(node.name);
+}

src/languages/scss/scss-selector.js

@@ -0,0 +1,63 @@
+/**
+ * @fileoverview SCSS variable node for CSSTree.
+ * @author Nicholas C. Zakas
+ */
+
+//-----------------------------------------------------------------------------
+// Imports
+//-----------------------------------------------------------------------------
+
+import { tokenTypes } from "@eslint/css-tree";
+
+//-----------------------------------------------------------------------------
+// Helpers
+//-----------------------------------------------------------------------------
+
+const PERCENT = 0x0025;        // U+0025 PERCENT SIGN (%)
+
+
+function getSelectorsWithScss(context) {
+    if (this.isDelim(PERCENT)) {
+        return this.ScssPlaceholderSelector();
+    }
+    return this.scope.Selector.getNode.call(this, context);
+}
+
+//-----------------------------------------------------------------------------
+// Exports
+//-----------------------------------------------------------------------------
+
+export const name = 'Selector';
+export const structure = {
+    children: [[
+        'TypeSelector',
+        'IdSelector',
+        'ScssPlaceholderSelector',
+        'ClassSelector',
+        'AttributeSelector',
+        'PseudoClassSelector',
+        'PseudoElementSelector',
+        'Combinator'
+    ]]
+};
+
+export function parse() {
+    const children = this.readSequence({
+        getNode: getSelectorsWithScss
+    });
+
+    // nothing were consumed
+    if (this.getFirstListNode(children) === null) {
+        this.error('Selector is expected');
+    }
+
+    return {
+        type: name,
+        loc: this.getLocationFromList(children),
+        children
+    };
+}
+
+export function generate(node) {
+    this.children(node);
+}