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

package/dist/rules/component/index.js

@@ -16,6 +16,9 @@ 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) {
@@ -45,20 +48,30 @@ export default createRule({
             if (!firstSelector) {
                 throw new Error('Do not have a selector');
             }
+            // コンポーネントクラスの検証
+            let hasValidComponentClass = false;
             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,
-                        });
+                    // 完全一致またはBEM形式（__で始まる）のチェック
+                    if (className === basename ||
+                        (isCssFile && className.startsWith(`${basename}__`))) {
+                        hasValidComponentClass = true;
+                        break;
                     }
                 }
             }
-            if (!allowMultipleSelectors && multipleSelectors.length > 0) {
+            if (!hasValidComponentClass) {
+                stylelint.utils.report({
+                    result,
+                    ruleName,
+                    message: isCssFile
+                        ? `クラス名がファイル名と一致しないか、コンポーネント命名規則（${basename}__）で始まっていません`
+                        : 'クラス名がファイル名と一致しません',
+                    node: firstRule,
+                });
+            }
+            if (!effectiveAllowMultipleSelectors && multipleSelectors.length > 0) {
                 stylelint.utils.report({
                     result,
                     ruleName,

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,17 @@ 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);
+    });
 });

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.64",
 	"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.64",
 		"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": "9efcc82edcd2392e49218ef22ce3831f61ba566c"
 }