Migrate alpha-value-notation rule to ESM

lib/rules/__tests__/index.test.mjs

@@ -1,4 +1,4 @@
-import { mkdirSync, rmSync, writeFileSync } from 'node:fs';
+import { existsSync, mkdirSync, rmSync, writeFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { execSync } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
@@ -61,13 +61,19 @@ describe('custom message option', () => {
 	test.each(ruleEntries)(
 		'"%s" should describe a custom message option in its doc',
 		async (ruleName) => {
-			const jsFile = path.join(__dirname, '..', ruleName, 'index.js');
+			let jsFile = path.join(__dirname, '..', ruleName, 'index.mjs');
+
+			// TODO: Remove after the migration to ESM.
+			if (!existsSync(jsFile)) {
+				jsFile = path.join(__dirname, '..', ruleName, 'index.js');
+			}
+
 			const jsCode = await readFile(jsFile, 'utf8');
 
 			// NOTE: If all rules support a custom message option, we should remove this `if` statement.
 			if (!jsCode.includes('\tmessageArgs: [')) return;
 
-			const doc = await readFile(jsFile.replace('index.js', 'README.md'), 'utf8');
+			const doc = await readFile(jsFile.replace(/index\.m?js$/, 'README.md'), 'utf8');
 
 			expect(doc).toContain('`message` secondary option');
 		},

lib/rules/alpha-value-notation/__tests__/index.mjs

@@ -1,6 +1,6 @@
 import { stripIndent } from 'common-tags';
 
-import rule from '../index.js';
+import rule from '../index.mjs';
 const { messages, ruleName } = rule;
 
 testRule({

lib/rules/alpha-value-notation/index.js → lib/rules/alpha-value-notation/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const valueParser = require('postcss-value-parser');
-
+const validateTypes = require('../../utils/validateTypes.cjs');
 const declarationValueIndex = require('../../utils/declarationValueIndex.cjs');
 const getDeclarationValue = require('../../utils/getDeclarationValue.cjs');
 const isStandardSyntaxValue = require('../../utils/isStandardSyntaxValue.cjs');
@@ -10,7 +10,6 @@ const report = require('../../utils/report.cjs');
 const ruleMessages = require('../../utils/ruleMessages.cjs');
 const setDeclarationValue = require('../../utils/setDeclarationValue.cjs');
 const validateOptions = require('../../utils/validateOptions.cjs');
-const { isRegExp, isString, assert } = require('../../utils/validateTypes.cjs');
 
 const ruleName = 'alpha-value-notation';
 
@@ -42,7 +41,7 @@ const rule = (primary, secondaryOptions, context) => {
 			{
 				actual: secondaryOptions,
 				possible: {
-					exceptProperties: [isString, isRegExp],
+					exceptProperties: [validateTypes.isString, validateTypes.isRegExp],
 				},
 				optional: true,
 			},
@@ -159,7 +158,7 @@ function asPercentage(value) {
 function asNumber(value) {
 	const dimension = valueParser.unit(value);
 
-	assert(dimension);
+	validateTypes.assert(dimension);
 
 	const number = Number(dimension.number);
 
@@ -224,4 +223,5 @@ function isNumber(value) {
 rule.ruleName = ruleName;
 rule.messages = messages;
 rule.meta = meta;
+
 module.exports = rule;

lib/rules/alpha-value-notation/index.mjs

@@ -0,0 +1,225 @@
+import valueParser from 'postcss-value-parser';
+
+import { assert, isRegExp, isString } from '../../utils/validateTypes.mjs';
+import declarationValueIndex from '../../utils/declarationValueIndex.mjs';
+import getDeclarationValue from '../../utils/getDeclarationValue.mjs';
+import isStandardSyntaxValue from '../../utils/isStandardSyntaxValue.mjs';
+import optionsMatches from '../../utils/optionsMatches.mjs';
+import report from '../../utils/report.mjs';
+import ruleMessages from '../../utils/ruleMessages.mjs';
+import setDeclarationValue from '../../utils/setDeclarationValue.mjs';
+import validateOptions from '../../utils/validateOptions.mjs';
+
+const ruleName = 'alpha-value-notation';
+
+const messages = ruleMessages(ruleName, {
+	expected: (unfixed, fixed) => `Expected "${unfixed}" to be "${fixed}"`,
+});
+
+const meta = {
+	url: 'https://stylelint.io/user-guide/rules/alpha-value-notation',
+	fixable: true,
+};
+
+const ALPHA_PROPS =
+	/^(?:opacity|shape-image-threshold|fill-opacity|flood-opacity|stop-opacity|stroke-opacity)$/i;
+const ALPHA_FUNCTION = /(?:color|hsla?|rgba?|hwb|lab|lch|oklab|oklch)\(/i;
+const ALPHA_FUNCTION_NAME = /^(?:color|hsla?|rgba?|hwb|lab|lch|oklab|oklch)$/i;
+const DIGIT = /\d/;
+
+/** @type {import('stylelint').Rule} */
+const rule = (primary, secondaryOptions, context) => {
+	return (root, result) => {
+		const validOptions = validateOptions(
+			result,
+			ruleName,
+			{
+				actual: primary,
+				possible: ['number', 'percentage'],
+			},
+			{
+				actual: secondaryOptions,
+				possible: {
+					exceptProperties: [isString, isRegExp],
+				},
+				optional: true,
+			},
+		);
+
+		if (!validOptions) return;
+
+		const optionFuncs = Object.freeze({
+			number: {
+				expFunc: isNumber,
+				fixFunc: asNumber,
+			},
+			percentage: {
+				expFunc: isPercentage,
+				fixFunc: asPercentage,
+			},
+		});
+
+		root.walkDecls((decl) => {
+			const declarationValue = getDeclarationValue(decl);
+			const isAlphaProp = ALPHA_PROPS.test(decl.prop);
+
+			if (
+				// If the property is not an alpha property
+				(!isAlphaProp &&
+					// And the value is not an alpha function
+					!ALPHA_FUNCTION.test(declarationValue)) ||
+				// Or the value does not contain digits
+				!DIGIT.test(declarationValue)
+			) {
+				// Abort early
+				return;
+			}
+
+			let needsFix = false;
+			const parsedValue = valueParser(declarationValue);
+
+			parsedValue.walk((node) => {
+				/** @type {import('postcss-value-parser').Node | undefined} */
+				let alpha;
+
+				if (isAlphaProp && DIGIT.test(node.value)) {
+					alpha = findAlphaInValue(node);
+				} else if (node.type === 'function' && ALPHA_FUNCTION_NAME.test(node.value)) {
+					alpha = findAlphaInFunction(node);
+				}
+
+				if (!alpha) return;
+
+				const { value } = alpha;
+
+				if (!isStandardSyntaxValue(value)) return;
+
+				if (!isNumber(value) && !isPercentage(value)) return;
+
+				/** @type {'number' | 'percentage'} */
+				let expectation = primary;
+
+				if (optionsMatches(secondaryOptions, 'exceptProperties', decl.prop)) {
+					if (expectation === 'number') {
+						expectation = 'percentage';
+					} else if (expectation === 'percentage') {
+						expectation = 'number';
+					}
+				}
+
+				if (optionFuncs[expectation].expFunc(value)) return;
+
+				const fixed = optionFuncs[expectation].fixFunc(value);
+				const unfixed = value;
+
+				if (context.fix) {
+					alpha.value = String(fixed);
+					needsFix = true;
+
+					return;
+				}
+
+				const index = declarationValueIndex(decl) + alpha.sourceIndex;
+				const endIndex = index + alpha.value.length;
+
+				report({
+					message: messages.expected,
+					messageArgs: [unfixed, fixed],
+					node: decl,
+					index,
+					endIndex,
+					result,
+					ruleName,
+				});
+			});
+
+			if (needsFix) {
+				setDeclarationValue(decl, parsedValue.toString());
+			}
+		});
+	};
+};
+
+/**
+ * @param {string} value
+ * @returns {string}
+ */
+function asPercentage(value) {
+	const number = Number(value);
+
+	return `${Number((number * 100).toPrecision(3))}%`;
+}
+
+/**
+ * @param {string} value
+ * @returns {string}
+ */
+function asNumber(value) {
+	const dimension = valueParser.unit(value);
+
+	assert(dimension);
+
+	const number = Number(dimension.number);
+
+	return Number((number / 100).toPrecision(3)).toString();
+}
+
+/**
+ * @template {import('postcss-value-parser').Node} T
+ * @param {T} node
+ * @returns {T | undefined}
+ */
+function findAlphaInValue(node) {
+	return node.type === 'word' || node.type === 'function' ? node : undefined;
+}
+
+/**
+ * @param {import('postcss-value-parser').FunctionNode} node
+ * @returns {import('postcss-value-parser').Node | undefined}
+ */
+function findAlphaInFunction(node) {
+	const legacySyntax = node.nodes.some(({ type, value }) => type === 'div' && value === ',');
+
+	if (legacySyntax) {
+		const args = node.nodes.filter(({ type }) => type === 'word' || type === 'function');
+
+		if (args.length === 4) return args[3];
+
+		return undefined;
+	}
+
+	const slashNodeIndex = node.nodes.findIndex(({ type, value }) => type === 'div' && value === '/');
+
+	if (slashNodeIndex !== -1) {
+		const nodesAfterSlash = node.nodes.slice(slashNodeIndex + 1, node.nodes.length);
+
+		return nodesAfterSlash.find(({ type }) => type === 'word');
+	}
+
+	return undefined;
+}
+
+/**
+ * @param {string} value
+ * @returns {boolean}
+ */
+function isPercentage(value) {
+	const dimension = valueParser.unit(value);
+
+	return dimension && dimension.unit === '%';
+}
+
+/**
+ * @param {string} value
+ * @returns {boolean}
+ */
+function isNumber(value) {
+	const dimension = valueParser.unit(value);
+
+	return dimension && dimension.unit === '';
+}
+
+rule.ruleName = ruleName;
+rule.messages = messages;
+rule.meta = meta;
+export default rule;

lib/rules/index.cjs

@@ -9,7 +9,7 @@ const require$1 = node_module.createRequire((typeof document === 'undefined' ? r
 
 /** @type {import('stylelint')['rules']} */
 const rules = {
-	'alpha-value-notation': importLazy(() => require$1('./alpha-value-notation/index.js'))(),
+	'alpha-value-notation': importLazy(() => require$1('./alpha-value-notation/index.cjs'))(),
 	'annotation-no-unknown': importLazy(() => require$1('./annotation-no-unknown/index.js'))(),
 	'at-rule-allowed-list': importLazy(() => require$1('./at-rule-allowed-list/index.js'))(),
 	'at-rule-disallowed-list': importLazy(() => require$1('./at-rule-disallowed-list/index.js'))(),

lib/rules/index.mjs

@@ -6,7 +6,7 @@ import importLazy from 'import-lazy';
 
 /** @type {import('stylelint')['rules']} */
 const rules = {
-	'alpha-value-notation': importLazy(() => require('./alpha-value-notation/index.js'))(),
+	'alpha-value-notation': importLazy(() => require('./alpha-value-notation/index.cjs'))(),
 	'annotation-no-unknown': importLazy(() => require('./annotation-no-unknown/index.js'))(),
 	'at-rule-allowed-list': importLazy(() => require('./at-rule-allowed-list/index.js'))(),
 	'at-rule-disallowed-list': importLazy(() => require('./at-rule-disallowed-list/index.js'))(),