Merge branch 'main' into no-dup-keyframe-selectors

Author: snitin315

.gitignore

@@ -7,120 +7,37 @@ yarn-error.log*
 lerna-debug.log*
 .pnpm-debug.log*
 
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
 # Runtime data
 pids
 *.pid
 *.seed
 *.pid.lock
 
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
 # Coverage directory used by tools like istanbul
 coverage
 *.lcov
 
 # nyc test coverage
 .nyc_output
 
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
 # Dependency directories
 node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
 
 # TypeScript cache
 *.tsbuildinfo
 
 # Optional npm cache directory
 .npm
 
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
 # Output of 'npm pack'
 *.tgz
 
 # Yarn Integrity file
 .yarn-integrity
 
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
+# VSCode
+.vscode
+*.code-workspace
 
 # yarn v2
 .yarn/cache
@@ -132,7 +49,13 @@ dist
 # eslint
 .eslintcache
 
+# Lockfiles
 package-lock.json
 yarn.lock
 bun.lockb
-test.css
+pnpm-lock.yaml
+
+# Build
+dist/
+
+test.css

README.md

@@ -24,7 +24,7 @@ yarn add @eslint/css -D
 # or
 pnpm install @eslint/css -D
 # or
-bun install @eslint/css -D
+bun add @eslint/css -D
 ```
 
 For Deno (experimental):
@@ -285,7 +285,7 @@ to get your logo on our READMEs and [website](https://eslint.org/sponsors).
 <p><a href="https://automattic.com"><img src="https://images.opencollective.com/automattic/d0ef3e1/logo.png" alt="Automattic" height="128"></a> <a href="https://www.airbnb.com/"><img src="https://images.opencollective.com/airbnb/d327d66/logo.png" alt="Airbnb" height="128"></a></p><h3>Gold Sponsors</h3>
 <p><a href="https://qlty.sh/"><img src="https://images.opencollective.com/qltysh/33d157d/logo.png" alt="Qlty Software" height="96"></a> <a href="https://trunk.io/"><img src="https://images.opencollective.com/trunkio/fb92d60/avatar.png" alt="trunk.io" height="96"></a> <a href="https://shopify.engineering/"><img src="https://avatars.githubusercontent.com/u/8085" alt="Shopify" height="96"></a></p><h3>Silver Sponsors</h3>
 <p><a href="https://vite.dev/"><img src="https://images.opencollective.com/vite/e6d15e1/logo.png" alt="Vite" height="64"></a> <a href="https://liftoff.io/"><img src="https://images.opencollective.com/liftoff/5c4fa84/logo.png" alt="Liftoff" height="64"></a> <a href="https://americanexpress.io"><img src="https://avatars.githubusercontent.com/u/3853301" alt="American Express" height="64"></a> <a href="https://stackblitz.com"><img src="https://avatars.githubusercontent.com/u/28635252" alt="StackBlitz" height="64"></a></p><h3>Bronze Sponsors</h3>
-<p><a href="https://cybozu.co.jp/"><img src="https://images.opencollective.com/cybozu/933e46d/logo.png" alt="Cybozu" height="32"></a> <a href="https://www.crosswordsolver.org/anagram-solver/"><img src="https://images.opencollective.com/anagram-solver/2666271/logo.png" alt="Anagram Solver" height="32"></a> <a href="https://icons8.com/"><img src="https://images.opencollective.com/icons8/7fa1641/logo.png" alt="Icons8" height="32"></a> <a href="https://discord.com"><img src="https://images.opencollective.com/discordapp/f9645d9/logo.png" alt="Discord" height="32"></a> <a href="https://www.gitbook.com"><img src="https://avatars.githubusercontent.com/u/7111340" alt="GitBook" height="32"></a> <a href="https://nolebase.ayaka.io"><img src="https://avatars.githubusercontent.com/u/11081491" alt="Neko" height="32"></a> <a href="https://nx.dev"><img src="https://avatars.githubusercontent.com/u/23692104" alt="Nx" height="32"></a> <a href="https://opensource.mercedes-benz.com/"><img src="https://avatars.githubusercontent.com/u/34240465" alt="Mercedes-Benz Group" height="32"></a> <a href="https://herocoders.com"><img src="https://avatars.githubusercontent.com/u/37549774" alt="HeroCoders" height="32"></a> <a href="https://www.lambdatest.com"><img src="https://avatars.githubusercontent.com/u/171592363" alt="LambdaTest" height="32"></a></p>
+<p><a href="https://sentry.io"><img src="https://github.com/getsentry.png" alt="Sentry" height="32"></a> <a href="https://syntax.fm"><img src="https://github.com/syntaxfm.png" alt="Syntax" height="32"></a> <a href="https://cybozu.co.jp/"><img src="https://images.opencollective.com/cybozu/933e46d/logo.png" alt="Cybozu" height="32"></a> <a href="https://www.crosswordsolver.org/anagram-solver/"><img src="https://images.opencollective.com/anagram-solver/2666271/logo.png" alt="Anagram Solver" height="32"></a> <a href="https://icons8.com/"><img src="https://images.opencollective.com/icons8/7fa1641/logo.png" alt="Icons8" height="32"></a> <a href="https://discord.com"><img src="https://images.opencollective.com/discordapp/f9645d9/logo.png" alt="Discord" height="32"></a> <a href="https://www.gitbook.com"><img src="https://avatars.githubusercontent.com/u/7111340" alt="GitBook" height="32"></a> <a href="https://nolebase.ayaka.io"><img src="https://avatars.githubusercontent.com/u/11081491" alt="Neko" height="32"></a> <a href="https://nx.dev"><img src="https://avatars.githubusercontent.com/u/23692104" alt="Nx" height="32"></a> <a href="https://opensource.mercedes-benz.com/"><img src="https://avatars.githubusercontent.com/u/34240465" alt="Mercedes-Benz Group" height="32"></a> <a href="https://herocoders.com"><img src="https://avatars.githubusercontent.com/u/37549774" alt="HeroCoders" height="32"></a> <a href="https://www.lambdatest.com"><img src="https://avatars.githubusercontent.com/u/171592363" alt="LambdaTest" height="32"></a></p>
 <h3>Technology Sponsors</h3>
 Technology sponsors allow us to use their products and services for free as part of a contribution to the open source ecosystem and our work.
 <p><a href="https://netlify.com"><img src="https://raw.githubusercontent.com/eslint/eslint.org/main/src/assets/images/techsponsors/netlify-icon.svg" alt="Netlify" height="32"></a> <a href="https://algolia.com"><img src="https://raw.githubusercontent.com/eslint/eslint.org/main/src/assets/images/techsponsors/algolia-icon.svg" alt="Algolia" height="32"></a> <a href="https://1password.com"><img src="https://raw.githubusercontent.com/eslint/eslint.org/main/src/assets/images/techsponsors/1password-icon.svg" alt="1Password" height="32"></a></p>

docs/rules/no-invalid-properties.md

@@ -46,7 +46,21 @@ body {
 
 ### Limitations
 
-This rule uses the lexer from [CSSTree](https://github.com/csstree/csstree), which does not support validation of property values that contain variable references (i.e., `var(--bg-color)`). The lexer throws an error when it comes across a variable reference, and rather than displaying that error, this rule ignores it. This unfortunately means that this rule cannot properly validate properties values that contain variable references. We'll continue to work towards a solution for this.
+When a variable is used in a property value, such as `var(--my-color)`, the rule can only properly be validated if the parser has already encountered the `--my-color` custom property. For example, this will validate correctly:
+
+```css
+:root {
+	--my-color: red;
+}
+
+a {
+	color: var(--my-color);
+}
+```
+
+This code defines `--my-color` before it is used and therefore the rule can validate the `color` property. If `--my-color` was not defined before `var(--my-color)` was used, it results in a lint error because the validation cannot be completed.
+
+If the custom property is defined in another file, it's recommended to create a dummy rule just to ensure proper validation.
 
 ## When Not to Use It
 

package.json

@@ -55,7 +55,7 @@
     ],
     "!(*.js)": "prettier --write --ignore-unknown",
     "{src/rules/*.js,tools/update-rules-docs.js}": [
-      "node tools/update-rules-docs.js",
+      "npm run build:update-rules-docs",
       "git add README.md"
     ]
   },

src/rules/no-invalid-properties.js

@@ -15,10 +15,48 @@ import { isSyntaxMatchError } from "../util.js";
 
 /**
  * @import { CSSRuleDefinition } from "../types.js"
- * @typedef {"invalidPropertyValue" | "unknownProperty"} NoInvalidPropertiesMessageIds
+ * @import { ValuePlain, FunctionNodePlain, CssLocationRange } from "@eslint/css-tree";
+ * @typedef {"invalidPropertyValue" | "unknownProperty" | "unknownVar"} NoInvalidPropertiesMessageIds
  * @typedef {CSSRuleDefinition<{ RuleOptions: [], MessageIds: NoInvalidPropertiesMessageIds }>} NoInvalidPropertiesRuleDefinition
  */
 
+//-----------------------------------------------------------------------------
+// Helpers
+//-----------------------------------------------------------------------------
+
+/**
+ * Replaces all instances of a regex pattern with a replacement and tracks the offsets
+ * @param {string} text The text to perform replacements on
+ * @param {string} varName The regex pattern string to search for
+ * @param {string} replaceValue The string to replace with
+ * @returns {{text: string, offsets: Array<number>}} The updated text and array of offsets
+ * where replacements occurred
+ */
+function replaceWithOffsets(text, varName, replaceValue) {
+	const offsets = [];
+	let result = "";
+	let lastIndex = 0;
+
+	const regex = new RegExp(`var\\(\\s*${varName}\\s*\\)`, "gu");
+	let match;
+
+	while ((match = regex.exec(text)) !== null) {
+		result += text.slice(lastIndex, match.index);
+
+		/*
+		 * We need the offset of the replacement after other replacements have
+		 * been made, so we push the current length of the result before appending
+		 * the replacement value.
+		 */
+		offsets.push(result.length);
+		result += replaceValue;
+		lastIndex = match.index + match[0].length;
+	}
+
+	result += text.slice(lastIndex);
+	return { text: result, offsets };
+}
+
 //-----------------------------------------------------------------------------
 // Rule Definition
 //-----------------------------------------------------------------------------
@@ -38,48 +76,135 @@ export default {
 			invalidPropertyValue:
 				"Invalid value '{{value}}' for property '{{property}}'. Expected {{expected}}.",
 			unknownProperty: "Unknown property '{{property}}' found.",
+			unknownVar: "Can't validate with unknown variable '{{var}}'.",
 		},
 	},
 
 	create(context) {
-		const lexer = context.sourceCode.lexer;
+		const sourceCode = context.sourceCode;
+		const lexer = sourceCode.lexer;
+
+		/** @type {Map<string,ValuePlain>} */
+		const vars = new Map();
+
+		/**
+		 * We need to track this as a stack because we can have nested
+		 * rules that use the `var()` function, and we need to
+		 * ensure that we validate the innermost rule first.
+		 * @type {Array<Map<string,FunctionNodePlain>>}
+		 */
+		const replacements = [];
 
 		return {
-			"Rule > Block > Declaration"(node) {
-				// don't validate custom properties
+			"Rule > Block > Declaration"() {
+				replacements.push(new Map());
+			},
+
+			"Function[name=var]"(node) {
+				const map = replacements.at(-1);
+				if (!map) {
+					return;
+				}
+
+				/*
+				 * Store the custom property name and the function node
+				 * so can use these to validate the value later.
+				 */
+				const name = node.children[0].name;
+				map.set(name, node);
+			},
+
+			"Rule > Block > Declaration:exit"(node) {
 				if (node.property.startsWith("--")) {
+					// store the custom property name and value to validate later
+					vars.set(node.property, node.value);
+
+					// don't validate custom properties
 					return;
 				}
 
-				const { error } = lexer.matchDeclaration(node);
+				const varsFound = replacements.pop();
+
+				/** @type {Map<number,CssLocationRange>} */
+				const varsFoundLocs = new Map();
+				const usingVars = varsFound?.size > 0;
+				let value = node.value;
+
+				if (usingVars) {
+					// need to use a text version of the value here
+					value = sourceCode.getText(node.value);
+					let offsets;
+
+					// replace any custom properties with their values
+					for (const [name, func] of varsFound) {
+						const varValue = vars.get(name);
+
+						if (varValue) {
+							({ text: value, offsets } = replaceWithOffsets(
+								value,
+								name,
+								sourceCode.getText(varValue).trim(),
+							));
+
+							/*
+							 * Store the offsets of the replacements so we can
+							 * report the correct location of any validation error.
+							 */
+							offsets.forEach(offset => {
+								varsFoundLocs.set(offset, func.loc);
+							});
+						} else {
+							context.report({
+								loc: func.children[0].loc,
+								messageId: "unknownVar",
+								data: {
+									var: name,
+								},
+							});
+
+							return;
+						}
+					}
+				}
+
+				const { error } = lexer.matchProperty(node.property, value);
 
 				if (error) {
 					// validation failure
 					if (isSyntaxMatchError(error)) {
 						context.report({
-							loc: error.loc,
+							/*
+							 * When using variables, check to see if the error
+							 * occurred at a location where a variable was replaced.
+							 * If so, use that location; otherwise, use the error's
+							 * reported location.
+							 */
+							loc: usingVars
+								? (varsFoundLocs.get(error.mismatchOffset) ??
+									node.value.loc)
+								: error.loc,
 							messageId: "invalidPropertyValue",
 							data: {
 								property: node.property,
-								value: error.css,
+
+								/*
+								 * When using variables, slice the value to
+								 * only include the part that caused the error.
+								 * Otherwise, use the full value from the error.
+								 */
+								value: usingVars
+									? value.slice(
+											error.mismatchOffset,
+											error.mismatchOffset +
+												error.mismatchLength,
+										)
+									: error.css,
 								expected: error.syntax,
 							},
 						});
 						return;
 					}
 
-					/*
-					 * There's no current way to get lexing to work when a
-					 * `var()` is present in a value. Rather than blowing up,
-					 * we'll just ignore it.
-					 *
-					 * https://github.com/csstree/csstree/issues/317
-					 */
-
-					if (error.message.endsWith("var() is not supported")) {
-						return;
-					}
-
 					// unknown property
 					context.report({
 						loc: {