@d-zero/stylelint-config 5.0.0-alpha.2 → 5.0.0-alpha.20

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
+yarn add -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,34 +1,6 @@
 module.exports = {
-	extends: ['stylelint-config-standard', 'stylelint-config-recess-order'],
-	plugins: ['stylelint-scss', 'stylelint-order'],
+	extends: ['stylelint-config-standard'],
 	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',
@@ -38,12 +10,7 @@ module.exports = {
 			},
 		],
 		'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,
@@ -72,12 +39,7 @@ 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',
@@ -111,8 +73,8 @@ module.exports = {
 		'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'],
@@ -132,10 +94,4 @@ module.exports = {
 		'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, ...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,6 +1,6 @@
 {
 	"name": "@d-zero/stylelint-config",
-	"version": "5.0.0-alpha.2",
+	"version": "5.0.0-alpha.20",
 	"description": "Configurations of Stylelint",
 	"repository": "https://github.com/d-zero-dev/linters.git",
 	"author": "D-ZERO Co., Ltd.",
@@ -14,21 +14,22 @@
 		".": "./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.0",
-		"stylelint-config-recess-order": "4.4.0",
+		"@d-zero/stylelint-rules": "5.0.0-alpha.20",
+		"postcss-scss": "4.0.9",
+		"stylelint": "16.2.1",
+		"stylelint-config-recess-order": "5.0.0",
 		"stylelint-config-standard": "36.0.0",
 		"stylelint-order": "6.0.4",
-		"stylelint-scss": "6.1.0"
+		"stylelint-scss": "6.2.1"
 	},
-	"gitHead": "f025a02438b76518dabddd9a8c14a8245568e3c4"
+	"gitHead": "6096dc3d998473962dab1f09f4cac4f9dc42600e"
 }

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'],
+			},
+		],
+		'function-no-unknown': [
+			true,
+			{
+				ignoreFunctions: ['a', 'lighten', 'darken', 'resolve'],
+			},
+		],
+	},
+};

package/values.js

@@ -1,19 +1,17 @@
+/**
+ * @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-allowed-list': {
 			'font-size': [
@@ -21,10 +19,13 @@ module.exports = {
 				'$root-font-size',
 				'$base-font-size',
 				'1em',
-				'/^calc\\((?:\\$[a-z_][a-z0-9_-]*|(?:[0-9]*\\.)?[0-9]+) \\/ (?:\\$[a-z_][a-z0-9_-]*|(?:[0-9]*\\.)?[0-9]+) \\* (?:1em|100vw)\\)$/',
+				'/^calc\\(\\s*(?:\\$[a-z_][a-z0-9_-]*|(?:[0-9]*\\.)?[0-9]+) \\/ (?:\\$[a-z_][a-z0-9_-]*|(?:[0-9]*\\.)?[0-9]+) \\* (?:1em|100vw)\\s*\\)$/',
 				'/^(?:[0-9]*\\.)?[0-9]+rem/',
 				'/^clamp\\(/',
 			],
+			flex: ['/^\\s*[01]\\s+[01]\\s.+/'],
+			'flex-grow': ['0', '1'],
+			'flex-shrink': ['0', '1'],
 		},
 		'unit-disallowed-list': [
 			'ex',
@@ -47,5 +48,28 @@ module.exports = {
 				ignoreProperties: ['/^\\$font-family-/'],
 			},
 		],
+
+		'@d-zero/declaration-value-type-disallowed-list': {
+			'/^length|percentage$/': {
+				ignoreProperties: ['font-size'],
+				patterns: [
+					// float
+					`/[1-9]*\\.[0-9]+${PERCENTATE_UNITS}/`,
+
+					// 1% - 99%
+					`/[1-9][0-9]?${PERCENTATE_UNITS}/`,
+
+					// 101% - 199%
+					`/1[0-9][1-9]${PERCENTATE_UNITS}/`,
+					`/1[1-9][0-9]${PERCENTATE_UNITS}/`,
+
+					// 200% - 999%
+					`/[2-9][0-9][0-9]${PERCENTATE_UNITS}/`,
+
+					// 1000% or larger
+					`/[1-9][0-9]{3,}${PERCENTATE_UNITS}/`,
+				],
+			},
+		},
 	},
 };