@d-zero/stylelint-config 5.0.0-alpha.7 → 5.0.0-alpha.71

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,15 +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-alpha.7",
+	"version": "5.0.0-alpha.71",
 	"description": "Configurations of Stylelint",
 	"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.2.1",
-		"stylelint-config-recess-order": "4.4.0",
-		"stylelint-config-standard": "36.0.0",
-		"stylelint-order": "6.0.4",
-		"stylelint-scss": "6.1.0"
+		"@d-zero/stylelint-rules": "5.0.0-alpha.71",
+		"postcss-scss": "4.0.9",
+		"stylelint": "16.23.1",
+		"stylelint-config-recess-order": "7.2.0",
+		"stylelint-config-standard": "39.0.0",
+		"stylelint-order": "7.0.0",
+		"stylelint-scss": "6.12.1",
+		"stylelint-use-logical": "2.1.2"
 	},
-	"gitHead": "5bb32f43f5fc901a5fe7d627bf10385c29ee892e"
+	"gitHead": "efe77aa6335d2b64c43cf048d074fe9b090d4784"
 }

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,30 +1,36 @@
+/**
+ * @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)/',
-			],
+				[/#[0-9a-f]{3}/, /(?:rgb|hsl)a?\(.+?\)/],
+			content: [/^"\\[0-9a-f]{1,6}"$/i],
 		},
 		'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',
@@ -44,8 +50,31 @@ module.exports = {
 		'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}/`,
+				],
+			},
+		},
 	},
 };