@d-zero/stylelint-rules 5.0.0-alpha.36 → 5.0.0-alpha.37

package/dist/index.js

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

package/dist/rules/component/index.js

@@ -0,0 +1,71 @@
+import path from 'node:path';
+import selectorParser from 'postcss-selector-parser';
+import stylelint from 'stylelint';
+import { createRule } from '../../utils/create-rule.js';
+export default createRule({
+    name: 'component',
+    rule: (ruleName) => (primary) => {
+        const allowMultipleSelectors = primary.allowMultipleSelectors ?? false;
+        return (root, result) => {
+            const fileName = root.source?.input.file;
+            if (!fileName) {
+                return;
+            }
+            const ext = path.extname(fileName);
+            const originalBasename = path.basename(fileName, ext);
+            const basename = ['.scss', '.sass'].includes(ext)
+                ? originalBasename.replace(/^_/, '')
+                : originalBasename;
+            const rules = root.nodes.filter((node) => node.type === 'rule');
+            const [firstRule, ...overleftRules] = rules;
+            for (const rule of overleftRules) {
+                stylelint.utils.report({
+                    result,
+                    ruleName,
+                    message: '1つのファイルに定義できるコンポーネントクラスは1つだけです',
+                    node: rule,
+                });
+            }
+            if (!firstRule) {
+                stylelint.utils.report({
+                    result,
+                    ruleName,
+                    message: 'コンポーネントが定義されていません',
+                    node: root,
+                });
+                return;
+            }
+            const selectors = [];
+            selectorParser((parsedRoot) => {
+                for (const node of parsedRoot.nodes) {
+                    selectors.push(node);
+                }
+            }).processSync(firstRule.selector);
+            const [firstSelector, ...multipleSelectors] = selectors;
+            if (!firstSelector) {
+                throw new Error('Do not have a selector');
+            }
+            for (const node of firstSelector.nodes) {
+                if (node.type === 'class') {
+                    const className = node.value;
+                    if (className !== basename) {
+                        stylelint.utils.report({
+                            result,
+                            ruleName,
+                            message: 'クラス名がファイル名と一致しません',
+                            node: firstRule,
+                        });
+                    }
+                }
+            }
+            if (!allowMultipleSelectors && multipleSelectors.length > 0) {
+                stylelint.utils.report({
+                    result,
+                    ruleName,
+                    message: 'セレクタの定義は1つだけです',
+                    node: firstRule,
+                });
+            }
+        };
+    },
+});

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

@@ -0,0 +1,93 @@
+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('Exact Match', () => {
+    test('matched', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            codeFilename: 'test.css',
+            code: '.test { color: currentColor; }',
+            config: config({}),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toHaveLength(0);
+    });
+    test('unmatched', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            codeFilename: 'test.css',
+            code: '.text, *, div.test { color: currentColor; .test { color: inherit; } }',
+            config: config({}),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toStrictEqual([
+            {
+                column: 1,
+                endColumn: 70,
+                endLine: 1,
+                line: 1,
+                rule: '@d-zero/component',
+                severity: 'error',
+                text: 'クラス名がファイル名と一致しません',
+            },
+            {
+                column: 1,
+                endColumn: 70,
+                endLine: 1,
+                line: 1,
+                rule: '@d-zero/component',
+                severity: 'error',
+                text: 'セレクタの定義は1つだけです',
+            },
+        ]);
+    });
+});
+describe('Partial Name', () => {
+    test('match', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            codeFilename: '_c-component.scss',
+            code: '.c-component { color: currentColor; }',
+            config: config({}),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toHaveLength(0);
+    });
+});
+describe('Options', () => {
+    test('allowMultipleSelectors: false', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            codeFilename: '_c-component.scss',
+            code: '.c-component, .x-specific-class-name { color: currentColor; }',
+            config: config({}),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toHaveLength(1);
+    });
+    test('allowMultipleSelectors: true', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            codeFilename: '_c-component.scss',
+            code: '.c-component, .x-specific-class-name { color: currentColor; }',
+            config: config({
+                allowMultipleSelectors: true,
+            }),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toHaveLength(0);
+    });
+});

package/dist/utils/create-rule.js

@@ -8,7 +8,7 @@ export function createRule(setting) {
         url: `${REPOSITORY_URL}/${name}`,
     };
     const messages = stylelint.utils.ruleMessages(ruleName, {
-        rejected: setting.rejected,
+        rejected: setting.rejected ?? (() => ''),
     });
     const ruleBase = setting.rule(ruleName, messages);
     // @ts-ignore

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@d-zero/stylelint-rules",
-	"version": "5.0.0-alpha.36",
+	"version": "5.0.0-alpha.37",
 	"description": "Rules of Stylelint for D-ZERO",
 	"repository": "https://github.com/d-zero-dev/linters.git",
 	"author": "D-ZERO Co., Ltd.",
@@ -23,13 +23,14 @@
 		"build": "tsc"
 	},
 	"dependencies": {
-		"@d-zero/csstree-scss-syntax": "5.0.0-alpha.36",
+		"@d-zero/csstree-scss-syntax": "5.0.0-alpha.37",
 		"css-tree": "2.3.1",
+		"postcss-selector-parser": "6.1.0",
 		"postcss-value-parser": "4.2.0",
 		"stylelint": "16.6.1"
 	},
 	"devDependencies": {
 		"postcss": "8.4.38"
 	},
-	"gitHead": "4f91c703f88f9bc8a0458e8c369d6a37e980af7d"
+	"gitHead": "9f7e27baf2fce73a12662af92396e4d01cf821f3"
 }