@d-zero/stylelint-rules 5.0.0-alpha.11

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 D-ZERO Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# `@d-zero/stylelint-rules`
+
+Rules plugin for [stylelint](https://stylelint.io/).
+
+## Installation
+
+```sh
+npm install @d-zero/stylelint-rules --save-dev
+```
+
+## Configuration
+
+Add the following to your `.stylelintrc` file:
+
+```json
+{
+	"plugins": ["@d-zero/stylelint-rules"],
+	"rules": {
+		"@d-zero/declaration-value-type-disallowed-list": {
+			"length": ["/10px/"]
+		}
+	}
+}
+```
+
+## Rules
+
+- [`@d-zero/declaration-value-type-disallowed-list`](./src/rules/declaration-value-type-disallowed-list/)

package/dist/const.js

@@ -0,0 +1,2 @@
+export const NAMESPACE = '@d-zero';
+export const REPOSITORY_URL = 'https://github.com/d-zero-dev/linters/tree/main/packages/%40d-zero/stylelint-rules/src/rules';

package/dist/index.js

@@ -0,0 +1,2 @@
+import declarationValueTypeDisallowedList from './rules/declaration-value-type-disallowed-list/index.js';
+export default [declarationValueTypeDisallowedList];

package/dist/rules/declaration-value-type-disallowed-list/index.js

@@ -0,0 +1,76 @@
+import stylelint from 'stylelint';
+// @ts-ignore
+import declarationValueIndex from 'stylelint/lib/utils/declarationValueIndex.mjs';
+// @ts-ignore
+import matchesStringOrRegExp from 'stylelint/lib/utils/matchesStringOrRegExp.mjs';
+// @ts-ignore
+import validateObjectWithArrayProps from 'stylelint/lib/utils/validateObjectWithArrayProps.mjs';
+// @ts-ignore
+import validateObjectWithProps from 'stylelint/lib/utils/validateObjectWithProps.mjs';
+// @ts-ignore
+import validateOptions from 'stylelint/lib/utils/validateOptions.mjs';
+// @ts-ignore
+import { isString } from 'stylelint/lib/utils/validateTypes.mjs';
+import { createRule } from '../../utils/create-rule.js';
+import { getValueType } from '../../utils/get-value-type.js';
+export default createRule({
+    name: 'declaration-value-type-disallowed-list',
+    rejected: (value, type) => `Unexpected value "${value}" for type "${type}"`,
+    rule: (ruleName, messages) => (primary) => {
+        return (root, result) => {
+            const validOptions = validateOptions(result, ruleName, {
+                actual: primary,
+                possible: [
+                    validateObjectWithArrayProps(isString),
+                    validateObjectWithProps(validateObjectWithArrayProps(isString)),
+                ],
+            });
+            if (!validOptions) {
+                return;
+            }
+            const options = Object.entries(primary);
+            if (options.length === 0) {
+                return;
+            }
+            root.walkDecls((decl) => {
+                const nodes = getValueType(decl);
+                for (const node of nodes) {
+                    if (!node.valueType) {
+                        continue;
+                    }
+                    const checkList = options.flatMap(([key, value]) => {
+                        const matched = matchesStringOrRegExp(node.valueType, key);
+                        if (!matched) {
+                            return [];
+                        }
+                        if (Array.isArray(value)) {
+                            return value;
+                        }
+                        if (value.ignoreProperties &&
+                            matchesStringOrRegExp(decl.prop, value.ignoreProperties)) {
+                            return [];
+                        }
+                        return value.patterns;
+                    });
+                    if (checkList.length === 0) {
+                        continue;
+                    }
+                    const index = declarationValueIndex(decl) + node.value.sourceIndex;
+                    const endIndex = index + node.value.sourceEndIndex;
+                    const raw = decl.value.slice(node.value.sourceIndex, node.value.sourceIndex + node.value.sourceEndIndex);
+                    if (matchesStringOrRegExp(raw, checkList)) {
+                        stylelint.utils.report({
+                            result,
+                            ruleName,
+                            message: messages.rejected(raw, node.valueType),
+                            node: decl,
+                            index,
+                            endIndex,
+                            word: raw,
+                        });
+                    }
+                }
+            });
+        };
+    },
+});

package/dist/rules/declaration-value-type-disallowed-list/index.spec.js

@@ -0,0 +1,50 @@
+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('length-pattern', () => {
+    test('length in flex', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            code: '* { flex: 1 1 10px }',
+            config: config({
+                length: ['/[0-9]{2,}px/'],
+            }),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toStrictEqual([
+            {
+                rule: '@d-zero/declaration-value-type-disallowed-list',
+                severity: 'error',
+                line: 1,
+                endLine: 1,
+                column: 15,
+                endColumn: 19,
+                text: 'Unexpected value "10px" for type "length" (@d-zero/declaration-value-type-disallowed-list)',
+            },
+        ]);
+    });
+    test('ignoreProperties options', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            code: '* { flex: 1 1 10px }',
+            config: config({
+                length: {
+                    ignoreProperties: ['flex'],
+                    patterns: ['/[0-9]{2,}px/'],
+                },
+            }),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toHaveLength(0);
+    });
+});

package/dist/rules/length/index.js

@@ -0,0 +1,40 @@
+import stylelint from 'stylelint';
+import declarationValueIndex from 'stylelint/lib/utils/declarationValueIndex.mjs';
+
+import { getValueType } from '../../utils/get-value-type.js';
+const { createPlugin, utils: { report, ruleMessages }, } = stylelint;
+const ruleName = 'd-zero/length';
+const messages = ruleMessages(ruleName, {
+    rejected: (value) => `Unexpected length value "${value}"`,
+});
+const meta = {
+    url: 'https://github.com/d-zero-dev/linters/tree/main/packages/%40d-zero/stylelint-rules',
+};
+const ruleFunction = () => {
+    return (root, result) => {
+        root.walkDecls((decl) => {
+            const nodes = getValueType(decl);
+            for (const node of nodes) {
+                if (node.valueType === 'length') {
+                    console.log(node.valueType, node);
+                    const index = declarationValueIndex(decl) + node.value.sourceIndex;
+                    const endIndex = index + node.value.sourceEndIndex;
+                    const raw = decl.value.slice(node.value.sourceIndex, node.value.sourceIndex + node.value.sourceEndIndex);
+                    report({
+                        result,
+                        ruleName,
+                        message: messages.rejected(raw),
+                        node: decl,
+                        index,
+                        endIndex,
+                        word: raw,
+                    });
+                }
+            }
+        });
+    };
+};
+ruleFunction.ruleName = ruleName;
+ruleFunction.messages = messages;
+ruleFunction.meta = meta;
+export default createPlugin(ruleName, ruleFunction);

package/dist/rules/length/index.spec.js

@@ -0,0 +1 @@
+export {};

package/dist/rules/length-pattern/index.js

@@ -0,0 +1,59 @@
+import stylelint from 'stylelint';
+// @ts-ignore
+import declarationValueIndex from 'stylelint/lib/utils/declarationValueIndex.mjs';
+// @ts-ignore
+import matchesStringOrRegExp from 'stylelint/lib/utils/matchesStringOrRegExp.mjs';
+// @ts-ignore
+import validateObjectWithArrayProps from 'stylelint/lib/utils/validateObjectWithArrayProps.mjs';
+// @ts-ignore
+import validateOptions from 'stylelint/lib/utils/validateOptions.mjs';
+// @ts-ignore
+import { isString } from 'stylelint/lib/utils/validateTypes.mjs';
+
+import { createRule } from '../../utils/create-rule.js';
+import { getValueType } from '../../utils/get-value-type.js';
+export default createRule({
+    name: 'length-pattern',
+    rejected: (value) => `Unexpected value "${value}"`,
+    rule: (ruleName, messages) => (primary) => {
+        return (root, result) => {
+            const validOptions = validateOptions(result, ruleName, {
+                actual: primary,
+                possible: [validateObjectWithArrayProps(isString)],
+            });
+            if (!validOptions) {
+                return;
+            }
+            const options = Object.entries(primary);
+            if (options.length === 0) {
+                return;
+            }
+            root.walkDecls((decl) => {
+                const nodes = getValueType(decl);
+                for (const node of nodes) {
+                    const checkList = options
+                        .filter(([key]) => matchesStringOrRegExp(node.valueType, key))
+                        .flatMap(([, value]) => value);
+                    if (checkList.length === 0) {
+                        continue;
+                    }
+                    const index = declarationValueIndex(decl) + node.value.sourceIndex;
+                    const endIndex = index + node.value.sourceEndIndex;
+                    const raw = decl.value.slice(node.value.sourceIndex, node.value.sourceIndex + node.value.sourceEndIndex);
+                    if (matchesStringOrRegExp(raw, checkList)) {
+                        continue;
+                    }
+                    stylelint.utils.report({
+                        result,
+                        ruleName,
+                        message: messages.rejected(raw),
+                        node: decl,
+                        index,
+                        endIndex,
+                        word: raw,
+                    });
+                }
+            });
+        };
+    },
+});

package/dist/rules/length-pattern/index.spec.js

@@ -0,0 +1,36 @@
+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('length-pattern', () => {
+    test('length in flex', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            code: '* { flex: 1 1 10px }',
+            config: config({
+                length: ['30px'],
+            }),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toStrictEqual([
+            {
+                rule: '@d-zero/length-pattern',
+                severity: 'error',
+                line: 1,
+                endLine: 1,
+                column: 15,
+                endColumn: 19,
+                text: 'Unexpected value "10px" (@d-zero/length-pattern)',
+            },
+        ]);
+    });
+});

package/dist/rules/value-pattern-on-type/index.js

@@ -0,0 +1,59 @@
+import stylelint from 'stylelint';
+// @ts-ignore
+import declarationValueIndex from 'stylelint/lib/utils/declarationValueIndex.mjs';
+// @ts-ignore
+import matchesStringOrRegExp from 'stylelint/lib/utils/matchesStringOrRegExp.mjs';
+// @ts-ignore
+import validateObjectWithArrayProps from 'stylelint/lib/utils/validateObjectWithArrayProps.mjs';
+// @ts-ignore
+import validateOptions from 'stylelint/lib/utils/validateOptions.mjs';
+// @ts-ignore
+import { isString } from 'stylelint/lib/utils/validateTypes.mjs';
+
+import { createRule } from '../../utils/create-rule.js';
+import { getValueType } from '../../utils/get-value-type.js';
+export default createRule({
+    name: 'value-pattern-on-type',
+    rejected: (value) => `Unexpected value "${value}"`,
+    rule: (ruleName, messages) => (primary) => {
+        return (root, result) => {
+            const validOptions = validateOptions(result, ruleName, {
+                actual: primary,
+                possible: [validateObjectWithArrayProps(isString)],
+            });
+            if (!validOptions) {
+                return;
+            }
+            const options = Object.entries(primary);
+            if (options.length === 0) {
+                return;
+            }
+            root.walkDecls((decl) => {
+                const nodes = getValueType(decl);
+                for (const node of nodes) {
+                    const checkList = options
+                        .filter(([key]) => matchesStringOrRegExp(node.valueType, key))
+                        .flatMap(([, value]) => value);
+                    if (checkList.length === 0) {
+                        continue;
+                    }
+                    const index = declarationValueIndex(decl) + node.value.sourceIndex;
+                    const endIndex = index + node.value.sourceEndIndex;
+                    const raw = decl.value.slice(node.value.sourceIndex, node.value.sourceIndex + node.value.sourceEndIndex);
+                    if (matchesStringOrRegExp(raw, checkList)) {
+                        continue;
+                    }
+                    stylelint.utils.report({
+                        result,
+                        ruleName,
+                        message: messages.rejected(raw),
+                        node: decl,
+                        index,
+                        endIndex,
+                        word: raw,
+                    });
+                }
+            });
+        };
+    },
+});

package/dist/rules/value-pattern-on-type/index.spec.js

@@ -0,0 +1,36 @@
+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('length-pattern', () => {
+    test('length in flex', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            code: '* { flex: 1 1 10px }',
+            config: config({
+                length: ['30px'],
+            }),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toStrictEqual([
+            {
+                rule: '@d-zero/value-pattern-on-type',
+                severity: 'error',
+                line: 1,
+                endLine: 1,
+                column: 15,
+                endColumn: 19,
+                text: 'Unexpected value "10px" (@d-zero/value-pattern-on-type)',
+            },
+        ]);
+    });
+});

package/dist/utils/create-rule.js

@@ -0,0 +1,20 @@
+import stylelint from 'stylelint';
+import { NAMESPACE, REPOSITORY_URL } from '../const.js';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function createRule(setting) {
+    const name = setting.name;
+    const ruleName = `${NAMESPACE}/${name}`;
+    const meta = {
+        url: `${REPOSITORY_URL}/${name}`,
+    };
+    const messages = stylelint.utils.ruleMessages(ruleName, {
+        rejected: setting.rejected,
+    });
+    const ruleBase = setting.rule(ruleName, messages);
+    // @ts-ignore
+    const ruleFunction = ruleBase;
+    ruleFunction.ruleName = ruleName;
+    ruleFunction.meta = meta;
+    ruleFunction.messages = messages;
+    return stylelint.createPlugin(ruleName, ruleFunction);
+}

package/dist/utils/get-value-type.js

@@ -0,0 +1,46 @@
+import CSSTree from '@d-zero/csstree-scss-syntax';
+import postcssValueParser from 'postcss-value-parser';
+export function getValueType(decl) {
+    return _getValueType(decl.prop, decl.value);
+}
+function _getValueType(prop, value) {
+    const valueAst = postcssValueParser(value);
+    const valueAstFromCssTree = CSSTree.parse(value, { context: 'value' });
+    let cssTreeDecl = CSSTree.lexer.matchProperty(prop, valueAstFromCssTree);
+    if (cssTreeDecl.error?.message === 'Matching for a tree with var() is not supported') {
+        value = value.replaceAll(/(var\([^)]+\))/g, (_, $1) => ' '.repeat($1.length - 1) + '1');
+        cssTreeDecl = CSSTree.lexer.matchProperty(prop, value);
+    }
+    const values = valueAst.nodes.filter((node) => node.type === 'string' || node.type === 'function' || node.type === 'word');
+    const props = cssTreeDecl.matched;
+    if (props === null) {
+        throw cssTreeDecl.error;
+    }
+    const valueTypes = props.match.map((node) => getValueNode(node).syntax.name);
+    return values.map((value, i) => {
+        const valueType = valueTypes[i] ?? null;
+        if (valueType === null) {
+            if (value.type === 'word' && value.value.startsWith('$')) {
+                return {
+                    value: value,
+                    valueType: '$SASS_VARIABLE',
+                };
+            }
+            throw new Error('Value type not found');
+        }
+        return {
+            value,
+            valueType,
+        };
+    });
+}
+function getValueNode(node) {
+    if (isProperty(node)) {
+        const firstChild = node.match.at(0);
+        return getValueNode(firstChild);
+    }
+    return node;
+}
+function isProperty(node) {
+    return node.syntax.type === 'Property';
+}

package/dist/utils/get-value-type.spec.js

@@ -0,0 +1,28 @@
+import postcss from 'postcss';
+import { describe, test, expect } from 'vitest';
+import { getValueType } from './get-value-type.js';
+function p(css) {
+    const root = postcss.parse(css);
+    const rule = root.first;
+    const decl = rule.first;
+    const nodeWithType = getValueType(decl);
+    return nodeWithType.map((node) => node.valueType);
+}
+describe('getValueType', () => {
+    test('flex', () => {
+        expect(p('a { flex: 1 1 calc(var(--foo) * 10vw) }')).toEqual([
+            'number',
+            'number',
+            'length',
+        ]);
+    });
+    test('max-width', () => {
+        expect(p('a { max-width: 10% }')).toEqual(['length-percentage']);
+    });
+    test('height vw', () => {
+        expect(p('a { height: 100vw }')).toEqual(['length']);
+    });
+    test('SASS Variable', () => {
+        expect(p('a { flex: 1 2 $basis }')).toEqual(['number', 'number', '$SASS_VARIABLE']);
+    });
+});

package/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "@d-zero/stylelint-rules",
+	"version": "5.0.0-alpha.11",
+	"description": "Rules of Stylelint for D-ZERO",
+	"repository": "https://github.com/d-zero-dev/linters.git",
+	"author": "D-ZERO Co., Ltd.",
+	"license": "MIT",
+	"private": false,
+	"publishConfig": {
+		"access": "public"
+	},
+	"type": "module",
+	"exports": {
+		".": "./dist/index.js"
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "tsc"
+	},
+	"dependencies": {
+		"@d-zero/csstree-scss-syntax": "5.0.0-alpha.11",
+		"css-tree": "2.3.1",
+		"postcss-value-parser": "4.2.0",
+		"stylelint": "16.2.1"
+	},
+	"gitHead": "1c2ab0432103986eebd319cbea166e951d8ff524"
+}