@d-zero/stylelint-rules 5.0.0-alpha.67 → 5.0.0-alpha.69

package/dist/index.js

@@ -1,3 +1,10 @@
 import component from './rules/component/index.js';
 import declarationValueTypeDisallowedList from './rules/declaration-value-type-disallowed-list/index.js';
-export default [component, declarationValueTypeDisallowedList];
+import preferIndividualTransformProperties from './rules/prefer-individual-transform-properties/index.js';
+import shorthandPropertyUseLogical from './rules/shorthand-property-use-logical/index.js';
+export default [
+    component,
+    declarationValueTypeDisallowedList,
+    preferIndividualTransformProperties,
+    shorthandPropertyUseLogical,
+];

package/dist/rules/prefer-individual-transform-properties/index.js

@@ -0,0 +1,83 @@
+import postcssValueParser from 'postcss-value-parser';
+import stylelint from 'stylelint';
+import { createRule } from '../../utils/create-rule.js';
+/**
+ * Transform functions that can be replaced with individual properties
+ */
+const REPLACEABLE_TRANSFORM_FUNCTIONS = {
+    // cspell:disable-next-line
+    translate: ['translate', 'translatex', 'translatey', 'translate3d'],
+    // cspell:disable-next-line
+    rotate: ['rotate', 'rotatex', 'rotatey', 'rotatez', 'rotate3d'],
+    // cspell:disable-next-line
+    scale: ['scale', 'scalex', 'scaley', 'scale3d'],
+};
+/**
+ * Check if a transform value contains only functions that can be replaced
+ * @param value
+ */
+function canBeReplacedWithIndividualProperties(value) {
+    const parsed = postcssValueParser(value);
+    const suggestions = [];
+    const foundTransformTypes = new Set(); // Track types of transforms found
+    let hasReplaceableFunction = false;
+    let hasNonReplaceableFunction = false;
+    parsed.walk((node) => {
+        if (node.type === 'function') {
+            const functionName = node.value.toLowerCase();
+            let isReplaceable = false;
+            // Check each category of replaceable functions
+            for (const [property, functions] of Object.entries(REPLACEABLE_TRANSFORM_FUNCTIONS)) {
+                if (functions.includes(functionName)) {
+                    isReplaceable = true;
+                    hasReplaceableFunction = true;
+                    foundTransformTypes.add(property);
+                    // Generate suggestion based on function type
+                    const args = postcssValueParser.stringify(node.nodes);
+                    suggestions.push(`${property}: ${args}`);
+                    // Don't walk into the arguments of transform functions
+                    return false;
+                }
+            }
+            if (!isReplaceable) {
+                hasNonReplaceableFunction = true;
+            }
+        }
+        return true;
+    });
+    // Only suggest replacement if:
+    // 1. We found replaceable functions
+    // 2. We found no non-replaceable functions
+    // 3. We only found ONE type of transform (translate, rotate, or scale)
+    const canReplace = hasReplaceableFunction &&
+        !hasNonReplaceableFunction &&
+        foundTransformTypes.size === 1;
+    return {
+        canReplace,
+        suggestions: canReplace ? suggestions : [],
+    };
+}
+export default createRule({
+    name: 'prefer-individual-transform-properties',
+    rejected: (value, suggestions) => `Use individual transform properties instead of "transform: ${value}". Consider: ${suggestions}`,
+    rule: (ruleName, messages) => () => {
+        return (root, result) => {
+            root.walkDecls((decl) => {
+                // Only check transform property
+                if (decl.prop.toLowerCase() !== 'transform') {
+                    return;
+                }
+                const { canReplace, suggestions } = canBeReplacedWithIndividualProperties(decl.value);
+                // If we can replace and have suggestions, report the issue
+                if (canReplace && suggestions.length > 0) {
+                    stylelint.utils.report({
+                        result,
+                        ruleName,
+                        message: messages.rejected(decl.value, suggestions.join(', ')),
+                        node: decl,
+                    });
+                }
+            });
+        };
+    },
+});

package/dist/rules/prefer-individual-transform-properties/index.spec.js

@@ -0,0 +1,137 @@
+import stylelint from 'stylelint';
+import { describe, test, expect } from 'vitest';
+import plugin from './index.js';
+const ruleName = '@d-zero/prefer-individual-transform-properties';
+/**
+ * Helper function to run stylelint with the plugin
+ * @param code
+ * @param options
+ */
+async function lint(code, options) {
+    const result = await stylelint.lint({
+        code,
+        config: {
+            plugins: [plugin],
+            rules: {
+                [ruleName]: options || true,
+            },
+        },
+    });
+    return result.results[0]?.warnings || [];
+}
+describe('prefer-individual-transform-properties', () => {
+    test('should flag simple translate function', async () => {
+        const warnings = await lint(`
+			.element {
+				transform: translate(10px, 20px);
+			}
+		`);
+        expect(warnings).toHaveLength(1);
+        expect(warnings[0]?.text).toContain('translate: 10px, 20px');
+    });
+    test('should flag simple rotate function', async () => {
+        const warnings = await lint(`
+			.element {
+				transform: rotate(45deg);
+			}
+		`);
+        expect(warnings).toHaveLength(1);
+        expect(warnings[0]?.text).toContain('rotate: 45deg');
+    });
+    test('should flag simple scale function', async () => {
+        const warnings = await lint(`
+			.element {
+				transform: scale(1.5);
+			}
+		`);
+        expect(warnings).toHaveLength(1);
+        expect(warnings[0]?.text).toContain('scale: 1.5');
+    });
+    test('should flag translateX function', async () => {
+        const warnings = await lint(`
+			.element {
+				transform: translateX(10px);
+			}
+		`);
+        expect(warnings).toHaveLength(1);
+        expect(warnings[0]?.text).toContain('translate: 10px');
+    });
+    test('should flag rotateY function', async () => {
+        const warnings = await lint(`
+			.element {
+				transform: rotateY(90deg);
+			}
+		`);
+        expect(warnings).toHaveLength(1);
+        expect(warnings[0]?.text).toContain('rotate: 90deg');
+    });
+    test('should flag scaleX function', async () => {
+        const warnings = await lint(`
+			.element {
+				transform: scaleX(2);
+			}
+		`);
+        expect(warnings).toHaveLength(1);
+        expect(warnings[0]?.text).toContain('scale: 2');
+    });
+    test('should not flag complex transforms with multiple different functions', async () => {
+        const warnings = await lint(`
+			.element {
+				transform: translate(10px, 20px) rotate(45deg) scale(1.5);
+			}
+		`);
+        // This contains multiple transform types, so it cannot be easily replaced
+        expect(warnings).toHaveLength(0);
+    });
+    test('should not flag transforms with matrix functions', async () => {
+        const warnings = await lint(`
+			.element {
+				transform: matrix(1, 0, 0, 1, 10, 20);
+			}
+		`);
+        expect(warnings).toHaveLength(0);
+    });
+    test('should not flag transforms with skew functions', async () => {
+        const warnings = await lint(`
+			.element {
+				transform: skew(20deg, 10deg);
+			}
+		`);
+        expect(warnings).toHaveLength(0);
+    });
+    test('should not flag transforms mixing replaceable and non-replaceable functions', async () => {
+        const warnings = await lint(`
+			.element {
+				transform: translate(10px, 20px) skew(20deg);
+			}
+		`);
+        expect(warnings).toHaveLength(0);
+    });
+    test('should not flag non-transform properties', async () => {
+        const warnings = await lint(`
+			.element {
+				transition: transform 0.3s ease;
+				will-change: transform;
+			}
+		`);
+        expect(warnings).toHaveLength(0);
+    });
+    test('should handle CSS variables in transform values', async () => {
+        const warnings = await lint(`
+			.element {
+				transform: translate(var(--x), var(--y));
+			}
+		`);
+        expect(warnings).toHaveLength(1);
+        expect(warnings[0]?.text).toContain('translate: var(--x), var(--y)');
+    });
+    test('should handle calc() in transform values', async () => {
+        const warnings = await lint(`
+			.element {
+				transform: translate(calc(100% - 20px), 0);
+			}
+		`);
+        expect(warnings).toHaveLength(1);
+        expect(warnings[0]?.text).toContain('translate: calc(100% - 20px), 0');
+    });
+});

package/dist/rules/shorthand-property-use-logical/index.js

@@ -0,0 +1,92 @@
+import postcssValueParser from 'postcss-value-parser';
+import stylelint from 'stylelint';
+// @ts-ignore
+import validateOptions from 'stylelint/lib/utils/validateOptions.mjs';
+// @ts-ignore
+import { isString, isPlainObject } from 'stylelint/lib/utils/validateTypes.mjs';
+import { createRule } from '../../utils/create-rule.js';
+// Properties that have logical equivalents and can use shorthand syntax
+const SHORTHAND_PROPERTIES_WITH_LOGICAL = [
+    'padding',
+    'margin',
+    'border-width',
+    'border-style',
+    'border-color',
+    'scroll-padding',
+    'scroll-margin',
+    'border-radius',
+];
+// Mapping from physical shorthand to logical equivalents
+const LOGICAL_PROPERTY_MAP = {
+    padding: ['padding-block', 'padding-inline'],
+    margin: ['margin-block', 'margin-inline'],
+    'border-width': ['border-block-width', 'border-inline-width'],
+    'border-style': ['border-block-style', 'border-inline-style'],
+    'border-color': ['border-block-color', 'border-inline-color'],
+    'scroll-padding': ['scroll-padding-block', 'scroll-padding-inline'],
+    'scroll-margin': ['scroll-margin-block', 'scroll-margin-inline'],
+    'border-radius': [
+        'border-start-start-radius',
+        'border-start-end-radius',
+        'border-end-start-radius',
+        'border-end-end-radius',
+    ],
+};
+/**
+ *
+ * @param value
+ */
+function hasMultipleValues(value) {
+    const parsed = postcssValueParser(value);
+    const values = parsed.nodes.filter((node) => node.type === 'word' || node.type === 'function');
+    return values.length > 1;
+}
+export default createRule({
+    name: 'shorthand-property-use-logical',
+    rejected: (property, logicalProperties) => `Unexpected shorthand property "${property}" with multiple values. Consider using logical properties: ${logicalProperties}`,
+    rule: (ruleName, messages) => (primary) => {
+        return (root, result) => {
+            const validOptions = validateOptions(result, ruleName, {
+                actual: primary,
+                possible: [
+                    true,
+                    false,
+                    (value) => {
+                        if (!isPlainObject(value))
+                            return false;
+                        const obj = value;
+                        return (!('properties' in obj) ||
+                            (Array.isArray(obj.properties) && obj.properties.every(isString)));
+                    },
+                ],
+            });
+            if (!validOptions || primary === false) {
+                return;
+            }
+            const enabledProperties = typeof primary === 'object' && primary.properties
+                ? primary.properties
+                : [...SHORTHAND_PROPERTIES_WITH_LOGICAL];
+            root.walkDecls((decl) => {
+                // Only check properties that are in our enabled list
+                if (!enabledProperties.includes(decl.prop)) {
+                    return;
+                }
+                // Check if the property has multiple values
+                if (!hasMultipleValues(decl.value)) {
+                    return;
+                }
+                // Get logical property suggestions
+                const logicalProperties = LOGICAL_PROPERTY_MAP[decl.prop];
+                if (!logicalProperties) {
+                    return;
+                }
+                stylelint.utils.report({
+                    result,
+                    ruleName,
+                    message: messages.rejected(decl.prop, logicalProperties.join(', ')),
+                    node: decl,
+                });
+            });
+        };
+    },
+});

package/dist/rules/shorthand-property-use-logical/index.spec.js

@@ -0,0 +1,162 @@
+import stylelint from 'stylelint';
+import { describe, test, expect } from 'vitest';
+import rule from './index.js';
+const { lint } = stylelint;
+const config = (settings = true) => ({
+    plugins: [rule],
+    rules: {
+        // @ts-ignore
+        [rule.ruleName]: settings,
+    },
+});
+describe('shorthand-property-use-logical', () => {
+    describe('padding', () => {
+        test('single value - should not warn', async () => {
+            const { 
+            // @ts-ignore
+            results: [{ warnings, parseErrors }], } = await lint({
+                code: '* { padding: 2rem }',
+                config: config(),
+            });
+            expect(parseErrors).toHaveLength(0);
+            expect(warnings).toHaveLength(0);
+        });
+        test('two values - should warn', async () => {
+            const { 
+            // @ts-ignore
+            results: [{ warnings, parseErrors }], } = await lint({
+                code: '* { padding: 2rem 1rem }',
+                config: config(),
+            });
+            expect(parseErrors).toHaveLength(0);
+            expect(warnings).toStrictEqual([
+                {
+                    rule: '@d-zero/shorthand-property-use-logical',
+                    severity: 'error',
+                    line: 1,
+                    endLine: 1,
+                    column: 5,
+                    endColumn: 23,
+                    text: 'Unexpected shorthand property "padding" with multiple values. Consider using logical properties: padding-block, padding-inline (@d-zero/shorthand-property-use-logical)',
+                    url: undefined,
+                    fix: undefined,
+                },
+            ]);
+        });
+        test('three values - should warn', async () => {
+            const { 
+            // @ts-ignore
+            results: [{ warnings, parseErrors }], } = await lint({
+                code: '* { padding: 2rem 0 0 }',
+                config: config(),
+            });
+            expect(parseErrors).toHaveLength(0);
+            expect(warnings).toHaveLength(1);
+            expect(warnings[0].text).toContain('Unexpected shorthand property "padding"');
+        });
+        test('four values - should warn', async () => {
+            const { 
+            // @ts-ignore
+            results: [{ warnings, parseErrors }], } = await lint({
+                code: '* { padding: 1rem 2rem 3rem 4rem }',
+                config: config(),
+            });
+            expect(parseErrors).toHaveLength(0);
+            expect(warnings).toHaveLength(1);
+            expect(warnings[0].text).toContain('Unexpected shorthand property "padding"');
+        });
+    });
+    describe('margin', () => {
+        test('single value - should not warn', async () => {
+            const { 
+            // @ts-ignore
+            results: [{ warnings, parseErrors }], } = await lint({
+                code: '* { margin: auto }',
+                config: config(),
+            });
+            expect(parseErrors).toHaveLength(0);
+            expect(warnings).toHaveLength(0);
+        });
+        test('two values - should warn', async () => {
+            const { 
+            // @ts-ignore
+            results: [{ warnings, parseErrors }], } = await lint({
+                code: '* { margin: 1rem 2rem }',
+                config: config(),
+            });
+            expect(parseErrors).toHaveLength(0);
+            expect(warnings).toHaveLength(1);
+            expect(warnings[0].text).toContain('margin-block, margin-inline');
+        });
+    });
+    describe('border-width', () => {
+        test('single value - should not warn', async () => {
+            const { 
+            // @ts-ignore
+            results: [{ warnings, parseErrors }], } = await lint({
+                code: '* { border-width: 1px }',
+                config: config(),
+            });
+            expect(parseErrors).toHaveLength(0);
+            expect(warnings).toHaveLength(0);
+        });
+        test('multiple values - should warn', async () => {
+            const { 
+            // @ts-ignore
+            results: [{ warnings, parseErrors }], } = await lint({
+                code: '* { border-width: 1px 2px }',
+                config: config(),
+            });
+            expect(parseErrors).toHaveLength(0);
+            expect(warnings).toHaveLength(1);
+            expect(warnings[0].text).toContain('border-block-width, border-inline-width');
+        });
+    });
+    describe('limited properties configuration', () => {
+        test('only check specified properties', async () => {
+            const { 
+            // @ts-ignore
+            results: [{ warnings, parseErrors }], } = await lint({
+                code: '* { padding: 1rem 2rem; margin: 1rem 2rem; }',
+                config: config({ properties: ['padding'] }),
+            });
+            expect(parseErrors).toHaveLength(0);
+            expect(warnings).toHaveLength(1);
+            expect(warnings[0].text).toContain('padding');
+        });
+    });
+    describe('unsupported properties', () => {
+        test('should not check properties not in the list', async () => {
+            const { 
+            // @ts-ignore
+            results: [{ warnings, parseErrors }], } = await lint({
+                code: '* { background: url(a.png) no-repeat }',
+                config: config(),
+            });
+            expect(parseErrors).toHaveLength(0);
+            expect(warnings).toHaveLength(0);
+        });
+    });
+    describe('complex values', () => {
+        test('calc() function with multiple values', async () => {
+            const { 
+            // @ts-ignore
+            results: [{ warnings, parseErrors }], } = await lint({
+                code: '* { padding: calc(1rem + 2px) 1rem }',
+                config: config(),
+            });
+            expect(parseErrors).toHaveLength(0);
+            expect(warnings).toHaveLength(1);
+        });
+        test('var() function with multiple values', async () => {
+            const { 
+            // @ts-ignore
+            results: [{ warnings, parseErrors }], } = await lint({
+                code: '* { margin: var(--spacing) 2rem }',
+                config: config(),
+            });
+            expect(parseErrors).toHaveLength(0);
+            expect(warnings).toHaveLength(1);
+        });
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@d-zero/stylelint-rules",
-	"version": "5.0.0-alpha.67",
+	"version": "5.0.0-alpha.69",
 	"description": "Rules of Stylelint for D-ZERO",
 	"repository": "https://github.com/d-zero-dev/linters.git",
 	"author": "D-ZERO Co., Ltd.",
@@ -22,14 +22,14 @@
 		"build": "tsc"
 	},
 	"dependencies": {
-		"@d-zero/csstree-scss-syntax": "5.0.0-alpha.67",
+		"@d-zero/csstree-scss-syntax": "5.0.0-alpha.69",
 		"css-tree": "3.1.0",
 		"postcss-selector-parser": "7.1.0",
 		"postcss-value-parser": "4.2.0",
-		"stylelint": "16.21.0"
+		"stylelint": "16.21.1"
 	},
 	"devDependencies": {
 		"postcss": "8.5.6"
 	},
-	"gitHead": "b0981c8d25ed356c5abaf5ab43d92401b6d55667"
+	"gitHead": "8527568567fd3b4030906fbdebe06720e606f7b8"
 }