@d-zero/stylelint-config 5.0.0-dev.92 → 5.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 D-ZERO Co., Ltd.
+Copyright (c) 2024 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

package/README.md

@@ -1,4 +1,54 @@
 # `@d-zero/stylelint-config`
 
-- 使用: 🆗 使用可
-- 解説: 🚧 準備中
+## 個別インストール
+
+```sh
+npm install -D @d-zero/stylelint-config
+```
+
+## 使い方
+
+`.stylelintrc`を作成し、[`extends`](https://stylelint.io/user-guide/configure#extends)機能を使って読み込みます。
+
+```json
+{
+	"extends": ["@d-zero/stylelint-config"]
+}
+```
+
+### 拡張
+
+プロジェクトに合わせて設定を追加します。
+
+```json
+{
+	"extends": "@d-zero/stylelint-config",
+	"rules": {
+		// 例: @ルールで未知のルールを許可する
+		"at-rule-no-unknown": null
+	}
+}
+```
+
+## 種類別プリセット
+
+| パッケージパス                    | 用途             |
+| --------------------------------- | ---------------- |
+| `@d-zero/stylelint-config`        | フルセット       |
+| `@d-zero/stylelint-config/base`   | 基本セット       |
+| `@d-zero/stylelint-config/name`   | 命名規則         |
+| `@d-zero/stylelint-config/order`  | プロパティの順番 |
+| `@d-zero/stylelint-config/values` | プロパティ値     |
+| `@d-zero/stylelint-config/scss`   | SCSS関連         |
+
+`@d-zero/stylelint-config`はすべてのルールを含んでいるので、一部のルールのみを利用する場合は、それぞれ種類別のものを利用します。
+
+```json
+{
+	"extends": [
+		"@d-zero/stylelint-config/scss",
+		"@d-zero/stylelint-config/base",
+		"@d-zero/stylelint-config/values"
+	]
+}
+```

package/base.js

@@ -1,67 +1,26 @@
 module.exports = {
-	extends: ['stylelint-config-standard', 'stylelint-config-recess-order'],
-	plugins: ['stylelint-scss', 'stylelint-order'],
+	plugins: ['stylelint-use-logical', '@d-zero/stylelint-rules'],
+	extends: ['stylelint-config-recommended'],
 	rules: {
-		'order/order': [
-			'dollar-variables',
-			'custom-properties',
-			{
-				type: 'at-rule',
-				name: 'custom-media',
-			},
-			{
-				type: 'at-rule',
-				name: 'extend',
-			},
-			{
-				type: 'at-rule',
-				name: 'mixin',
-			},
-			'declarations',
-			{
-				type: 'at-rule',
-				name: 'supports',
-			},
-			{
-				type: 'at-rule',
-				name: 'media',
-				hasBlock: true,
-			},
-			'rules',
-		],
 		'at-rule-disallowed-list': null,
-		'at-rule-empty-line-before': [
-			'always',
-			{
-				except: ['blockless-after-same-name-blockless', 'first-nested'],
-				ignore: ['after-comment'],
-			},
-		],
+
 		'at-rule-no-vendor-prefix': true,
-		'at-rule-no-unknown': [
-			true,
-			{
-				ignoreAtRules: ['mixin', 'extend', 'for', 'if', 'include', 'use', 'forward'],
-			},
-		],
+		'at-rule-no-unknown': true,
 		'color-hex-length': 'short',
 		'color-named': 'never',
 		'color-no-invalid-hex': true,
 		'comment-empty-line-before': [
 			'always',
 			{
-				ignore: ['stylelint-commands'],
+				except: ['first-nested'],
 			},
 		],
 		'comment-no-empty': true,
-		'comment-whitespace-inside': 'always',
 		'comment-word-disallowed-list': ['/^TODO:/'],
-		'custom-property-empty-line-before': 'never',
 		'declaration-block-no-duplicate-properties': true,
 		'declaration-block-no-redundant-longhand-properties': true,
 		'declaration-block-no-shorthand-property-overrides': true,
 		'declaration-block-single-line-max-declarations': 80,
-		'declaration-empty-line-before': 'never',
 		'declaration-no-important': true,
 		'declaration-property-value-disallowed-list': null,
 		'declaration-property-value-allowed-list': null,
@@ -72,15 +31,11 @@ module.exports = {
 		'function-calc-no-unspaced-operator': true,
 		'function-linear-gradient-no-nonstandard-direction': true,
 		'function-name-case': 'lower',
-		'function-no-unknown': [
-			true,
-			{
-				ignoreFunctions: ['a', 'lighten', 'darken', 'resolve'],
-			},
-		],
+		'function-no-unknown': true,
 		'function-url-scheme-allowed-list': null,
 		'function-url-no-scheme-relative': true,
 		'function-url-quotes': 'always',
+		'import-notation': 'string',
 		'keyframe-declaration-no-important': true,
 		'length-zero-no-unit': true,
 		'max-nesting-depth': 8,
@@ -102,17 +57,17 @@ module.exports = {
 			},
 		],
 		'rule-empty-line-before': [
-			'always-multi-line',
+			'always',
 			{
-				except: ['after-single-line-comment', 'first-nested'],
+				except: ['first-nested'],
 				ignore: ['after-comment'],
 			},
 		],
 		'selector-attribute-operator-disallowed-list': null,
 		'selector-attribute-quotes': 'always',
 		'selector-max-compound-selectors': 8,
-		'selector-max-specificity': '0,10,10',
-		'selector-max-id': 0,
+		'selector-max-specificity': null,
+		'selector-max-id': [0, { message: 'スタイル定義でIDセレクタは使わないでください' }],
 		'selector-max-universal': 1,
 		'selector-no-vendor-prefix': true,
 		'selector-pseudo-class-disallowed-list': ['link'],
@@ -127,14 +82,16 @@ module.exports = {
 		'value-keyword-case': null,
 		'value-no-vendor-prefix': true,
 
+		// Plugin stylelint-use-logical
+		'csstools/use-logical': 'always',
+
+		// Plugin @d-zero/stylelint-rules
+		'@d-zero/prefer-individual-transform-properties': true,
+		'@d-zero/shorthand-property-use-logical': true,
+
 		// Overwrite stylelint-config-standard
 		'custom-media-pattern': null,
 		'custom-property-pattern': null,
+		'selector-class-pattern': null,
 	},
-	overrides: [
-		{
-			files: ['__assets/**/*.scss'],
-			customSyntax: 'postcss-scss',
-		},
-	],
 };

package/index.js

@@ -1,18 +1,20 @@
 const base = require('./base');
 const name = require('./name');
+const order = require('./order');
+const scss = require('./scss');
 const values = require('./values');
 
 module.exports = {
+	...scss,
 	...base,
-	ignoreFiles: [
-		'__assets/**/*.{js,jsx,ts,tsx,html,pug}',
-		'__assets/css/_syntax-rules.scss',
-		'htdocs/**/*',
-		'docs/**/*.md',
-	],
+	extends: [...base.extends, ...order.extends],
+	plugins: [...scss.plugins, ...base.plugins, ...order.plugins, ...values.plugins],
+	ignoreFiles: ['**/*.{js,jsx,ts,tsx,html,pug}', 'htdocs/**/*', 'docs/**/*.md'],
 	rules: {
 		...base.rules,
+		...order.rules,
 		...name.rules,
 		...values.rules,
+		...scss.rules,
 	},
 };

package/name.js

@@ -1,17 +1,41 @@
 module.exports = {
 	rules: {
-		'scss/dollar-variable-pattern':
-			'^(?:[a-z]{2,}-[a-z0-9-]+|_[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$',
-		'scss/percent-placeholder-pattern': '^[a-z]{2,}(-[a-z0-9-]+)?$',
 		'custom-media-pattern': '[a-z][a-z-]*',
 		'custom-property-pattern': '[a-z][a-z-]*',
 		'selector-class-pattern': [
 			'^c-[a-z][a-z0-9]*(?:-[a-z0-9]+)*(?:__[a-z0-9]+(?:-[a-z0-9]+)*)?$',
 			{
 				resolveNestedSelectors: true,
+				/**
+				 * @param {string} selector
+				 * @returns {string}
+				 */
+				message: (selector) => {
+					if (!selector.startsWith('.c-')) {
+						return `クラス名は「c-」から始めてください: ${selector}`;
+					}
+					if (selector.split('__').length > 2) {
+						return `「__」はコンポーネント名とエレメント名の区切りを表します。エレメント名の文字区切りは「-」を使います: ${selector}`;
+					}
+					return `クラス名に命名規則にない文字が含まれています: ${selector}`;
+				},
 			},
 		],
-		'selector-id-pattern': '^$',
-		'selector-nested-pattern': '^[^.]+.*',
+		'selector-nested-pattern': [
+			'^[^.]+.*',
+			{
+				/**
+				 * @param {string} selector
+				 * @returns {string}
+				 */
+				message: (selector) => {
+					return `コンポーネントのスタイル定義の中で別のコンポーネントを定義してはいけません: ${selector}`;
+				},
+			},
+		],
+
+		'scss/dollar-variable-pattern':
+			'^(?:[a-z]{2,}-[a-z0-9-]+|_[a-z][a-z0-9]*(?:-[a-z0-9]+)*)$',
+		'scss/percent-placeholder-pattern': '^[a-z]{2,}(-[a-z0-9-]+)?$',
 	},
 };

package/order.js

@@ -0,0 +1,33 @@
+module.exports = {
+	extends: ['stylelint-config-recess-order'],
+	plugins: ['stylelint-order'],
+	rules: {
+		'order/order': [
+			'dollar-variables',
+			'custom-properties',
+			{
+				type: 'at-rule',
+				name: 'custom-media',
+			},
+			{
+				type: 'at-rule',
+				name: 'extend',
+			},
+			{
+				type: 'at-rule',
+				name: 'mixin',
+			},
+			'declarations',
+			{
+				type: 'at-rule',
+				name: 'supports',
+			},
+			{
+				type: 'at-rule',
+				name: 'media',
+				hasBlock: true,
+			},
+			'rules',
+		],
+	},
+};

package/package.json

@@ -1,34 +1,38 @@
 {
 	"name": "@d-zero/stylelint-config",
-	"version": "5.0.0-dev.92+cac5756",
+	"version": "5.0.0",
 	"description": "Configurations of Stylelint",
-	"repository": "https://github.com/d-zero-dev/node-dev-env.git",
+	"repository": "https://github.com/d-zero-dev/linters.git",
 	"author": "D-ZERO Co., Ltd.",
 	"license": "MIT",
-	"private": false,
 	"publishConfig": {
 		"access": "public"
 	},
+	"engines": {
+		"node": ">=22.0.0"
+	},
 	"type": "commonjs",
 	"exports": {
 		".": "./index.js",
 		"./base": "./base.js",
 		"./name": "./name.js",
+		"./order": "./order.js",
+		"./scss": "./scss.js",
 		"./values": "./values.js"
 	},
 	"files": [
-		"base.js",
-		"index.js",
-		"name.js",
-		"values.js"
+		"*.js"
 	],
 	"main": "index.js",
 	"dependencies": {
-		"stylelint": "16.1.0",
-		"stylelint-config-recess-order": "4.4.0",
-		"stylelint-config-standard": "36.0.0",
-		"stylelint-order": "6.0.4",
-		"stylelint-scss": "6.0.0"
+		"@d-zero/stylelint-rules": "5.0.0",
+		"postcss-scss": "4.0.9",
+		"stylelint": "16.26.1",
+		"stylelint-config-recess-order": "7.4.0",
+		"stylelint-config-standard": "39.0.1",
+		"stylelint-order": "7.0.1",
+		"stylelint-scss": "6.14.0",
+		"stylelint-use-logical": "2.1.2"
 	},
-	"gitHead": "cac5756806a90edaa73a57e49f0dcd45495290ab"
+	"gitHead": "7f635ad8bbb1455d0d362fe00478a2f7bd216924"
 }

package/scss.js

@@ -0,0 +1,18 @@
+module.exports = {
+	customSyntax: 'postcss-scss',
+	plugins: ['stylelint-scss'],
+	rules: {
+		'at-rule-no-unknown': [
+			true,
+			{
+				ignoreAtRules: ['mixin', 'extend', 'for', 'if', 'include', 'use', 'forward'],
+			},
+		],
+		'no-invalid-position-at-import-rule': [
+			true,
+			{
+				ignoreAtRules: ['use'],
+			},
+		],
+	},
+};

package/values.js

@@ -1,51 +1,207 @@
+/**
+ * @see https://drafts.csswg.org/css-values-4/#viewport-relative-lengths
+ */
+const VIEWPORT_PERCENTAGE_LENGTHS = '[ls]?v(?:w|h|i|d|max|min)';
+
+const PERCENTATE_UNITS = `(?:%|${VIEWPORT_PERCENTAGE_LENGTHS})`;
+
 module.exports = {
+	plugins: ['@d-zero/stylelint-rules'],
 	rules: {
-		'declaration-property-value-disallowed-list': {
-			'/^(?:color|background|background-color|border|border-color|outline|outline-color)$/':
-				['/#[0-9a-f]{3}/', '/(?:rgb|hsl)a?\\(.+?\\)/'],
-			content: ['/^\\"\\\\[0-9a-fA-F]{1,6}\\"$/'],
-			flex: ['/calc/'],
-			'/^(?:max-|min-)?(?:width|height)|^flex/': [
-				'/[1-9]*\\.[0-9]+(?:%|vw|vh)/',
-				'/(?:^|[^0-9])[0-9](?:%|vw|vh)/',
-				'/(?:^|[^0-9])[0-9]{2}(?:%|vw|vh)/',
-				'/1[0-9][1-9](?:%|vw|vh)/',
-				'/1[1-9][0-9](?:%|vw|vh)/',
-				'/[2-9][0-9][0-9](?:%|vw|vh)/',
-				'/[0-9]{4,}(?:%|vw|vh)/',
-			],
-		},
+		'declaration-property-value-disallowed-list': [
+			{
+				display: [
+					/* @see https://drafts.csswg.org/css-display/#display-value-summary */
+					'block',
+					'flow-root',
+					'inline',
+					'inline-block',
+					'list-item',
+					'inline list-item',
+					'flex',
+					'inline-flex',
+					'grid',
+					'inline-grid',
+					'ruby',
+					'table',
+					'inline-table',
+				],
+				'z-index': ['/^-?\\d+$/'],
+				'/^(?:color|background|background-color|border|border-color|outline|outline-color)$/':
+					[/#[0-9a-f]{3}/, /(?:rgb|hsl)a?\(.+?\)/],
+				content: [/^"\\[0-9a-f]{1,6}"$/i],
+			},
+			{
+				message: (name, value) => {
+					switch (name) {
+						case 'display': {
+							let multiValue = '';
+							switch (value) {
+								case 'block': {
+									multiValue = 'block flow';
+									break;
+								}
+								case 'flow-root': {
+									multiValue = 'block flow-root';
+									break;
+								}
+								case 'inline': {
+									multiValue = 'inline flow';
+									break;
+								}
+								case 'inline-block': {
+									multiValue = 'inline flow-root';
+									break;
+								}
+								case 'list-item': {
+									multiValue = 'block flow list-item';
+									break;
+								}
+								case 'inline list-item': {
+									multiValue = 'inline flow list-item';
+									break;
+								}
+								case 'flex': {
+									multiValue = 'block flex';
+									break;
+								}
+								case 'inline-flex': {
+									multiValue = 'inline flex';
+									break;
+								}
+								case 'grid': {
+									multiValue = 'block grid';
+									break;
+								}
+								case 'inline-grid': {
+									multiValue = 'inline grid';
+									break;
+								}
+								case 'ruby': {
+									multiValue = 'inline ruby';
+									break;
+								}
+								case 'table': {
+									multiValue = 'block table';
+									break;
+								}
+								case 'inline-table': {
+									multiValue = 'inline table';
+									break;
+								}
+							}
+							return `\`${value}\`の代わりに複数キーワード構文\`${multiValue}\`を使用してください。`;
+						}
+						case 'z-index': {
+							return `数値の\`${name}\`ではなくグローバルで定義されたCSS変数を使用してください。`;
+						}
+						case 'content': {
+							return `Unicode値\`${value}\`を指定せず、表示したいテキストをそのまま指定してください。`;
+						}
+						default: {
+							return `ハードコードされた値\`${value}\`の代わりにCSS変数を使用してください。`;
+						}
+					}
+				},
+				severity: 'warning',
+			},
+		],
 		'declaration-property-value-allowed-list': {
 			'font-size': [
 				'inherit',
-				'$root-font-size',
-				'$base-font-size',
+				/^\$[a-z][a-z0-9]*-font-size(?:-[a-z0-9]+)?$/,
 				'1em',
-				'/^calc\\((?:\\$[a-z_][a-z0-9_-]*|(?:[0-9]*\\.)?[0-9]+) \\/ (?:\\$[a-z_][a-z0-9_-]*|(?:[0-9]*\\.)?[0-9]+) \\* (?:1em|100vw)\\)$/',
-				'/^(?:[0-9]*\\.)?[0-9]+rem/',
-				'/^clamp\\(/',
+				/^calc\(\s*(?:(?:\d*\.)?\d+|var\(\s*--[a-z][a-z0-9_-]+\s*\))\s*\/\s*(?:(?:\d*\.)?\d+|var\(\s*--[a-z][a-z0-9_-]+\s*\))\s*\*\s*(?:1em|1rem|100vw)\s*\)$/,
+				/^(?:\d*\.)?\d+rem/,
+				/^clamp\(/,
+				// Custom properties
+				/^var\(/,
 			],
+			flex: [
+				/^\s*[01]\s+[01]\s.+/,
+				// Custom properties
+				/^var\(/,
+			],
+			'flex-grow': ['0', '1'],
+			'flex-shrink': ['0', '1'],
 		},
 		'unit-disallowed-list': [
-			'ex',
-			'ch',
-			'mm',
-			'q',
-			'cm',
-			'in',
-			'pt',
-			'pc',
-			'vm',
-			's',
-			'grad',
-			'rad',
-			'turn',
+			[
+				'ex',
+				'ch',
+				'mm',
+				'q',
+				'cm',
+				'in',
+				'pt',
+				'pc',
+				'vm',
+				's',
+				'grad',
+				'rad',
+				'turn',
+				'vw',
+				'vh',
+				'vi',
+				'vb',
+				'vmin',
+				'vmax',
+			],
+			{
+				message: (unit) => {
+					const recommendationMap = {
+						ex: 'em, rem',
+						ch: 'em, rem',
+						mm: 'px, rem',
+						q: 'px, rem',
+						cm: 'px, rem',
+						in: 'px, rem',
+						pt: 'px, rem',
+						pc: 'px, rem',
+						s: 'ms',
+						grad: 'deg',
+						rad: 'deg',
+						turn: 'deg',
+						vw: 'svw, dvw, lvw',
+						vh: 'svh, dvh, lvh',
+						vi: 'svi, dvi, lvi',
+						vb: 'svb, dvb, lvb',
+						vmin: 'svmin, dvmin, lvmin',
+						vmax: 'svmax, dvmax, lvmax',
+					};
+					return `\`${unit}\`は使用しないでください。代わりに\`${recommendationMap[unit]}\`を検討してください。`;
+				},
+				severity: 'warning',
+			},
 		],
 		'value-keyword-case': [
 			'lower',
 			{
-				ignoreProperties: ['/^\\$font-family-/'],
+				ignoreProperties: [/^\$font-family-/],
 			},
 		],
+
+		'@d-zero/declaration-value-type-disallowed-list': {
+			'/^length|percentage$/': {
+				ignoreProperties: ['font-size'],
+				patterns: [
+					// float
+					`/[0-9]*?\\.[0-9]+?${PERCENTATE_UNITS}/`,
+
+					// 1000% or larger
+					`/[1-9][0-9]{3,}?${PERCENTATE_UNITS}/`,
+
+					// 200% - 999%
+					`/[2-9][0-9][0-9]${PERCENTATE_UNITS}/`,
+
+					// 101% - 199%
+					`/1[0-9][1-9]${PERCENTATE_UNITS}/`,
+					`/1[1-9][0-9]${PERCENTATE_UNITS}/`,
+
+					// 1% - 99%
+					`/[1-9][0-9]?${PERCENTATE_UNITS}/`,
+				],
+			},
+		},
 	},
 };