@d-zero/stylelint-rules 5.0.0-alpha.63 → 5.0.0-alpha.65

package/dist/rules/component/index.js

@@ -16,15 +16,21 @@ export default createRule({
             const basename = ['.scss', '.sass'].includes(ext)
                 ? originalBasename.replace(/^_/, '')
                 : originalBasename;
+            // CSSファイルの場合は自動的にallowMultipleSelectorsをtrueにする
+            const isCssFile = ext === '.css';
+            const effectiveAllowMultipleSelectors = isCssFile || allowMultipleSelectors;
             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,
-                });
+            // allowMultipleSelectorsに基づいて複数ルール制約をチェック
+            if (!effectiveAllowMultipleSelectors && overleftRules.length > 0) {
+                for (const rule of overleftRules) {
+                    stylelint.utils.report({
+                        result,
+                        ruleName,
+                        message: '1つのファイルに定義できるコンポーネントクラスは1つだけです',
+                        node: rule,
+                    });
+                }
             }
             if (!firstRule) {
                 stylelint.utils.report({
@@ -35,36 +41,48 @@ export default createRule({
                 });
                 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,
-                        });
+            // 全ルールのコンポーネントクラスを検証
+            for (const rule of rules) {
+                const ruleSelectors = [];
+                selectorParser((parsedRoot) => {
+                    for (const node of parsedRoot.nodes) {
+                        ruleSelectors.push(node);
+                    }
+                }).processSync(rule.selector);
+                const [ruleFirstSelector, ...ruleMultipleSelectors] = ruleSelectors;
+                if (!ruleFirstSelector)
+                    continue;
+                let hasValidComponentClass = false;
+                for (const node of ruleFirstSelector.nodes) {
+                    if (node.type === 'class') {
+                        const className = node.value;
+                        // 完全一致またはコンポーネント命名規則（__で始まる）のチェック
+                        if (className === basename ||
+                            (isCssFile && className.startsWith(`${basename}__`))) {
+                            hasValidComponentClass = true;
+                            break;
+                        }
                     }
                 }
-            }
-            if (!allowMultipleSelectors && multipleSelectors.length > 0) {
-                stylelint.utils.report({
-                    result,
-                    ruleName,
-                    message: 'セレクタの定義は1つだけです',
-                    node: firstRule,
-                });
+                if (!hasValidComponentClass) {
+                    stylelint.utils.report({
+                        result,
+                        ruleName,
+                        message: isCssFile
+                            ? `クラス名がファイル名と一致しないか、コンポーネント命名規則（${basename}__）で始まっていません`
+                            : 'クラス名がファイル名と一致しません',
+                        node: rule,
+                    });
+                }
+                // 複数セレクタのチェック
+                if (!effectiveAllowMultipleSelectors && ruleMultipleSelectors.length > 0) {
+                    stylelint.utils.report({
+                        result,
+                        ruleName,
+                        message: 'セレクタの定義は1つだけです',
+                        node: rule,
+                    });
+                }
             }
         };
     },

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

@@ -38,18 +38,99 @@ describe('Exact Match', () => {
                 line: 1,
                 rule: '@d-zero/component',
                 severity: 'error',
-                text: 'クラス名がファイル名と一致しません',
+                text: 'クラス名がファイル名と一致しないか、コンポーネント命名規則（test__）で始まっていません',
                 url: undefined,
                 fix: undefined,
             },
+        ]);
+    });
+});
+describe('Component Naming Convention for CSS', () => {
+    test('exact match in CSS', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            codeFilename: 'button.css',
+            code: '.button { color: currentColor; }',
+            config: config({}),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toHaveLength(0);
+    });
+    test('component element match in CSS', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            codeFilename: 'button.css',
+            code: '.button__text { color: currentColor; }',
+            config: config({}),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toHaveLength(0);
+    });
+    test('multiple component elements in CSS (auto-allow)', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            codeFilename: 'button.css',
+            code: '.button__text, .button__icon { color: currentColor; }',
+            config: config({}),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toHaveLength(0);
+    });
+    test('mixed component and component elements in CSS', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            codeFilename: 'button.css',
+            code: '.button, .button__text, .button__icon { color: currentColor; }',
+            config: config({}),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toHaveLength(0);
+    });
+    test('invalid component naming convention in CSS', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            codeFilename: 'button.css',
+            code: '.card__text { color: currentColor; }',
+            config: config({}),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toStrictEqual([
             {
                 column: 1,
-                endColumn: 70,
+                endColumn: 37,
                 endLine: 1,
                 line: 1,
                 rule: '@d-zero/component',
                 severity: 'error',
-                text: 'セレクタの定義は1つだけです',
+                text: 'クラス名がファイル名と一致しないか、コンポーネント命名規則（button__）で始まっていません',
+                url: undefined,
+                fix: undefined,
+            },
+        ]);
+    });
+    test('CSS with wrong component name', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            codeFilename: 'button.css',
+            code: '.card { color: currentColor; }',
+            config: config({}),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toStrictEqual([
+            {
+                column: 1,
+                endColumn: 31,
+                endLine: 1,
+                line: 1,
+                rule: '@d-zero/component',
+                severity: 'error',
+                text: 'クラス名がファイル名と一致しないか、コンポーネント命名規則（button__）で始まっていません',
                 url: undefined,
                 fix: undefined,
             },
@@ -70,7 +151,7 @@ describe('Partial Name', () => {
     });
 });
 describe('Options', () => {
-    test('allowMultipleSelectors: false', async () => {
+    test('allowMultipleSelectors: false in SCSS', async () => {
         const { 
         // @ts-ignore
         results: [{ warnings, parseErrors }], } = await lint({
@@ -81,7 +162,7 @@ describe('Options', () => {
         expect(parseErrors).toHaveLength(0);
         expect(warnings).toHaveLength(1);
     });
-    test('allowMultipleSelectors: true', async () => {
+    test('allowMultipleSelectors: true in SCSS', async () => {
         const { 
         // @ts-ignore
         results: [{ warnings, parseErrors }], } = await lint({
@@ -94,4 +175,46 @@ describe('Options', () => {
         expect(parseErrors).toHaveLength(0);
         expect(warnings).toHaveLength(0);
     });
+    test('CSS files automatically allow multiple selectors', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            codeFilename: 'button.css',
+            code: '.button, .button__text, .button__icon { color: currentColor; }',
+            config: config({
+                allowMultipleSelectors: false, // この設定は CSS では無視される
+            }),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toHaveLength(0);
+    });
+    test('CSS files allow multiple rules', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            codeFilename: 'button.css',
+            code: `.button { color: currentColor; }
+.button__text { font-size: 14px; }
+.button__icon { width: 16px; }`,
+            config: config({}),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toHaveLength(0);
+    });
+    test('CSS files reject multiple components', async () => {
+        const { 
+        // @ts-ignore
+        results: [{ warnings, parseErrors }], } = await lint({
+            codeFilename: 'c-component.css',
+            code: `.c-component { --prop: value; }
+.c-component__element { --prop: value; }
+.c-component2 { --prop: value; }
+.c-specific { --prop: value; }`,
+            config: config({}),
+        });
+        expect(parseErrors).toHaveLength(0);
+        expect(warnings).toHaveLength(2);
+        expect(warnings[0].text).toBe('クラス名がファイル名と一致しないか、コンポーネント命名規則（c-component__）で始まっていません');
+        expect(warnings[1].text).toBe('クラス名がファイル名と一致しないか、コンポーネント命名規則（c-component__）で始まっていません');
+    });
 });

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

@@ -1,4 +1,4 @@
-import postcss from 'postcss';
+import { parse } from 'postcss';
 import { describe, test, expect } from 'vitest';
 import { getValueType } from './get-value-type.js';
 /**
@@ -6,7 +6,7 @@ import { getValueType } from './get-value-type.js';
  * @param css
  */
 function p(css) {
-    const root = postcss.parse(css);
+    const root = parse(css);
     const rule = root.first;
     const decl = rule.first;
     const nodeWithType = getValueType(decl);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@d-zero/stylelint-rules",
-	"version": "5.0.0-alpha.63",
+	"version": "5.0.0-alpha.65",
 	"description": "Rules of Stylelint for D-ZERO",
 	"repository": "https://github.com/d-zero-dev/linters.git",
 	"author": "D-ZERO Co., Ltd.",
@@ -23,14 +23,14 @@
 		"build": "tsc"
 	},
 	"dependencies": {
-		"@d-zero/csstree-scss-syntax": "5.0.0-alpha.63",
+		"@d-zero/csstree-scss-syntax": "5.0.0-alpha.65",
 		"css-tree": "3.1.0",
 		"postcss-selector-parser": "7.1.0",
 		"postcss-value-parser": "4.2.0",
-		"stylelint": "16.19.1"
+		"stylelint": "16.20.0"
 	},
 	"devDependencies": {
-		"postcss": "8.5.3"
+		"postcss": "8.5.5"
 	},
-	"gitHead": "7bc8706d98d3eab1e1ed84b57454f441a4d016ec"
+	"gitHead": "884a176442f45e717290664c2b4b1912d8055b0c"
 }