Add dashed-ident-no-missing-reference-function

docs/user-guide/rules/list.md

@@ -12,6 +12,11 @@ Grouped first by the following categories and then by the [_thing_](http://apps.
 
 - [`color-no-invalid-hex`](../../../lib/rules/color-no-invalid-hex/README.md): Disallow invalid hex colors.
 
+### Dashed-ident
+
+- [`dashed-ident-no-missing-reference-function`](../../../lib/rules/dashed-ident-no-missing-reference-function/README.md):
+  Disallow missing reference functions for dashed-idents.
+
 ### Font family
 
 - [`font-family-no-duplicate-names`](../../../lib/rules/font-family-no-duplicate-names/README.md): Disallow duplicate font family names.

lib/rules/dashed-ident-no-missing-reference-function/README.md

@@ -0,0 +1,35 @@
+# dash-ident-no-missing-reference-function
+
+Disallow missing reference functions for dashed-idents.
+
+<!-- prettier-ignore -->
+```css
+    a { color: var(--foo); }
+/**            ↑   ↑
+ *             This function and this dashed-ident */
+```
+
+[Dashed-idents](https://drafts.csswg.org/css-values-4/#dashed-idents) are most often referenced using functions like `var()` and `env()`. This rule reports dashed-idents that are missing a reference function.
+
+## Options
+
+### `true`
+
+The following patterns are considered violations:
+
+<!-- prettier-ignore -->
+```css
+a { color: --foo; }
+```
+
+The following patterns are _not_ considered violations:
+
+<!-- prettier-ignore -->
+```css
+a { color: var(--foo); }
+```
+
+<!-- prettier-ignore -->
+```css
+a { color: env(--foo); }
+```

lib/rules/dashed-ident-no-missing-reference-function/__tests__/index.js

@@ -0,0 +1,90 @@
+'use strict';
+
+const stripIndent = require('common-tags').stripIndent;
+
+const { messages, ruleName } = require('..');
+
+testRule({
+	ruleName,
+	config: true,
+
+	accept: [
+		{
+			code: 'a { color: var(--foo); }',
+		},
+		{
+			code: 'a { color: env(--foo); }',
+		},
+		{
+			code: 'a { color: color(--foo 0% 0% 0% 0%); }',
+		},
+		{
+			code: 'a { color: calc(var(--foo) + var(--bar)); }',
+		},
+		{
+			code: 'a { color: var(--foo, red); }',
+		},
+		{
+			code: 'a { --foo: var(--bar); }',
+		},
+		{
+			code: ':--foo {}',
+		},
+		{
+			code: '@media(--foo) {}',
+		},
+		{
+			code: stripIndent`
+				a {
+					color: var(
+						--foo
+					);
+				}`,
+		},
+	],
+
+	reject: [
+		{
+			code: 'a { color: --foo; }',
+			message: messages.rejected('--foo'),
+			line: 1,
+			column: 12,
+		},
+		{
+			code: 'a { --foo: --bar; }',
+			message: messages.rejected('--bar'),
+			line: 1,
+			column: 12,
+		},
+		{
+			code: 'a { color: calc(var(--foo) + --bar)); }',
+			message: messages.rejected('--bar'),
+			line: 1,
+			column: 30,
+		},
+		{
+			code: 'a { color: --foo, red; }',
+			message: messages.rejected('--foo'),
+			line: 1,
+			column: 12,
+		},
+		{
+			code: 'a { color: --foo(--bar); }',
+			message: messages.rejected('--bar'),
+			line: 1,
+			column: 18,
+		},
+		{
+			code: stripIndent`
+				a {
+					--foo: --bar;
+					color: --baz;
+				}
+			`,
+			warnings: [
+				{ message: messages.rejected('--bar'), line: 2, column: 9 },
+				{ message: messages.rejected('--baz'), line: 3, column: 9 },
+			],
+		},
+	],
+});

lib/rules/dashed-ident-no-missing-reference-function/index.js

@@ -0,0 +1,61 @@
+// @ts-nocheck
+
+'use strict';
+
+const valueParser = require('postcss-value-parser');
+
+const declarationValueIndex = require('../../utils/declarationValueIndex');
+const report = require('../../utils/report');
+const ruleMessages = require('../../utils/ruleMessages');
+const validateOptions = require('../../utils/validateOptions');
+
+const ruleName = 'dashed-ident-no-missing-reference-function';
+
+const messages = ruleMessages(ruleName, {
+	rejected: (dashedIdent) =>
+		`Unexpected missing dashed-ident reference function for "${dashedIdent}"`,
+});
+
+const REFERENCE_FUNCTIONS = ['color', 'env', 'var'];
+
+function rule(actual) {
+	return (root, result) => {
+		const validOptions = validateOptions(result, ruleName, {
+			actual,
+		});
+
+		if (!validOptions) return;
+
+		root.walkDecls((decl) => {
+			const parsedValue = valueParser(decl.value);
+
+			parsedValue.walk((node) => {
+				if (isReferenceFunction(node)) return false;
+
+				if (!isDashedIdent(node)) return;
+
+				report({
+					message: messages.rejected(node.value),
+					node: decl,
+					index: declarationValueIndex(decl) + node.sourceIndex,
+					result,
+					ruleName,
+				});
+
+				return false;
+			});
+		});
+	};
+}
+
+function isDashedIdent(node) {
+	return node.type === 'word' && node.value.startsWith('--');
+}
+
+function isReferenceFunction(node) {
+	return node.type === 'function' && REFERENCE_FUNCTIONS.includes(node.value);
+}
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+module.exports = rule;

lib/rules/index.js

@@ -66,6 +66,9 @@ const rules = {
 		require('./custom-property-empty-line-before'),
 	)(),
 	'custom-property-pattern': importLazy(() => require('./custom-property-pattern'))(),
+	'dashed-ident-no-missing-reference-function': importLazy(() =>
+		require('./dashed-ident-no-missing-reference-function'),
+	)(),
 	'declaration-bang-space-after': importLazy(() => require('./declaration-bang-space-after'))(),
 	'declaration-bang-space-before': importLazy(() => require('./declaration-bang-space-before'))(),
 	'declaration-block-no-duplicate-custom-properties': importLazy(() =>