Merge branch 'dev'

Author: YusukeHirao

package.json

@@ -18,20 +18,20 @@
 		"up": "yarn upgrade-interactive --latest"
 	},
 	"devDependencies": {
-		"@d-zero/cspell-config": "5.0.0-alpha.62",
-		"@d-zero/eslint-config": "5.0.0-alpha.62",
-		"@d-zero/lint-staged-config": "5.0.0-alpha.62",
-		"@d-zero/prettier-config": "5.0.0-alpha.62",
-		"@d-zero/textlint-config": "5.0.0-alpha.62",
-		"@d-zero/tsconfig": "0.4.1",
-		"mermaid": "11.6.0",
-		"npm-run-all2": "7.0.2",
+		"@d-zero/cspell-config": "5.0.0-alpha.68",
+		"@d-zero/eslint-config": "5.0.0-alpha.68",
+		"@d-zero/lint-staged-config": "5.0.0-alpha.68",
+		"@d-zero/prettier-config": "5.0.0-alpha.68",
+		"@d-zero/textlint-config": "5.0.0-alpha.68",
+		"@d-zero/tsconfig": "0.5.0",
+		"mermaid": "11.8.1",
+		"npm-run-all2": "8.0.4",
 		"typescript": "5.8.3",
 		"vitepress": "1.6.3",
 		"vitepress-plugin-mermaid": "2.0.17"
 	},
 	"volta": {
-		"node": "22.14.0",
+		"node": "22.17.0",
 		"yarn": "1.22.22"
 	}
 }

src/.vitepress/config.js

@@ -98,14 +98,15 @@ export default async () => {
 							{ text: 'コードスタイル', link: '/css/style' },
 							{ text: 'ビルド環境', link: '/css/builder' },
 							{ text: 'ファイル構成', link: '/css/structure' },
-							{ text: 'IDの利用の禁止', link: '/css/ids' },
+							{ text: 'IDセレクタの利用の禁止', link: '/css/ids' },
 							{ text: 'ルールの定義規則', link: '/css/rules' },
 							{ text: 'タイプセレクタの利用', link: '/css/selectors' },
 							{ text: '記述順番', link: '/css/order' },
 							{
 								text: 'カスタムプロパティ・カスタムクエリー・変数・関数・ミックスイン・プレースホルダー',
 								link: '/css/variables',
 							},
+							{ text: 'プロパティのルール', link: '/css/properties' },
 							{ text: '値のルール', link: '/css/values' },
 						],
 					},

src/css/builder.md

@@ -1,45 +1,45 @@
 # ビルド環境
 
-11tyのTransform機能から[ViteのCSS変換](https://ja.vitejs.dev/guide/features#css)を利用します。プリプロセッサーはSASSを利用します。
+*11ty*のTransform機能から*PostCSS*を利用してCSS変換を行います。CSSは*PostCSS*のみを使用します。
 
 ```mermaid
 flowchart LR
-	#in["*.scss"]
+	#in["*.css"]
 	#out["*.css"]
-	#vite(["Vite"])
+	#postcss(["PostCSS"])
 
 	#in --> #dzBuilder --> #out
 
 	subgraph #dzBuilder["@d-zero/builder"]
 		direction LR
 
 		subgraph #11ty["11ty"]
-			subgraph #vite["vite"]
+			subgraph #postcss["PostCSS"]
 				direction TB
-				#sass --> #postcss
+				#postcss["PostCSS"]
 			end
 		end
 	end
 ```
 
 ## ベンダープレフィックス
 
-Autoprefixerを利用するのでベンダープレフィックス付きのプロパティは必要ありません。
+*Autoprefixer*を利用するのでベンダープレフィックス付きのプロパティは必要ありません。
 
-```scss
+```css
 selector {
 	transition: opacity 300ms;
-	-webkit-transition: opacity 300ms; // ❌ 不要
-	-moz-transition: opacity 300ms; // ❌ 不要
+	-webkit-transition: opacity 300ms; /* ❌ 不要 */
+	-moz-transition: opacity 300ms; /* ❌ 不要 */
 }
 ```
 
-ただしCSSの標準規格でないものについては必要なケースがあります。Stylelintはその点を考慮して警告を出すので心配はありません。
+ただしCSSの標準規格でないものについては必要なケースがあります。*Stylelint*はその点を考慮して警告を出すので心配はありません。
 
-```scss
+```css
 selector {
-	-moz-osx-font-smoothing: grayscale; // ✅ ブラウザ固有のプロパティのためプレフィックは必要
-	-webkit-font-smoothing: antialiased; // ✅ ブラウザ固有のプロパティのためプレフィックは必要
+	-moz-osx-font-smoothing: grayscale; /* ✅ ブラウザ固有のプロパティのためプレフィックは必要 */
+	-webkit-font-smoothing: antialiased; /* ✅ ブラウザ固有のプロパティのためプレフィックは必要 */
 }
 ```
 

src/css/ids.md

@@ -1,3 +1,3 @@
-# IDの利用の禁止
+# IDセレクタの利用の禁止
 
 詳細度で問題を起こすのでIDをセレクタとしてスタイルを定義しないでください。

src/css/index.md

@@ -24,3 +24,7 @@ CSSのガイドラインは次の3つを主な目的として策定されてい
 ### 別解を用意すること
 
 ほとんどの場合、表現の方法はひとつではありません。メンテナンス性を優先させた方法、パフォーマンスを優先させた方法など、そのときそのときで最適な方法を探す必要があります。常にいくつかのパターンを考えながらコーディングできるように心掛けてください。また、万が一にブラウザの予期せぬバグに遭遇した際にも別解で解決する必要があります。
+
+## ⚠️ SASSのサポート
+
+現在のガイドラインではSASSのサポートを行っていません。SASSに関するルールは[過去のバージョン履歴](https://github.com/d-zero-dev/frontend-guidelines/tree/snapshot/sass-available)から内容を参照してください。

src/css/order.md

@@ -2,24 +2,28 @@
 
 以下のような順番で定義します。
 
-```scss
+```css
 .component-name {
-	// 1. 変数定義
-	// 2. コンポーネント自体のスタイル
-	// 3. 疑似要素
-	// 4. 状態変化（※）
-	//    4-1. メディアクエリ
-	//    4-2. 疑似クラス（:hover :disabled :nth-child :empty など）
-	//    4-3. 属性
-	//    4-4. 状態クラス (&--[状態])
-	// 5. エレメント
-	// 6. 結合子セレクタを利用したエレメント（E+E E~E など）
-	// 7. 子孫要素に影響のある状態変化
+	/* 1. 変数定義 */
+	/* 2. コンポーネント自体のスタイル */
+	/* 3. 疑似要素 */
+	/* 4. 状態変化（※） */
+	/*    4-1. メディアクエリ */
+	/*    4-2. 疑似クラス（:hover :disabled :nth-child :empty など） */
+	/*    4-3. 属性 */
+	/*    4-4. 状態クラス（--[状態]） */
+	/* 5. エレメント以外の子孫要素（タイプセレクタ） */
+	/* 6. 結合子セレクタを利用したエレメント以外の子孫要素（E+E E~E など） */
+	/* 7. 子孫要素に影響のある状態変化 */
+}
+
+.component-name__element {
+	/* エレメント */
 }
 /* EOF */
 ```
 
-また、プロパティについてはStylelintの設定に基づいて種類順に記述します。
+また、プロパティについては*Stylelint*の設定に基づいて種類順に記述します。
 
 ::: tip 👮‍♀️ 自動検知
 このルールは*Stylelint*によって警告されます。
@@ -29,16 +33,16 @@
 
 JavaScript のライブラリの利用など、クラス命名規則に当てはまらないセレクタにスタイルを当てないといけない場合があります。その場合は、`.stylelintrc`ファイルにて`selector-class-pattern`を変更してください。
 
-```scss
+```css
 .c-hero {
-	// ⚠️ 通常はstylelintによる警告がでる
+	/* ⚠️ 通常はStylelintによる警告がでる */
 	.any-js-lib-class-name {
 		/* declaration */
 	}
 }
 
 .c-hero {
-	// ✅ .stylelintrcの設定変更によって警告がなくなる
+	/* ✅ .stylelintrcの設定変更によって警告がなくなる */
 	.any-js-lib-class-name {
 		/* declaration */
 	}

src/css/properties.md

@@ -0,0 +1,70 @@
+# プロパティのルール
+
+## 論理プロパティ
+
+原則、プロパティは論理プロパティを使用します。
+
+```css
+selector {
+	padding-top: 1em; /* ❌️ */
+	padding-block-start: 1em; /* ✅️ */
+
+	top: 1em; /* ❌️ */
+	inset-block-start: 1em; /* ✅️ */
+}
+```
+
+::: tip 🔧 自動修正可能
+このルールは*Stylelint*によって自動修正されます。
+:::
+
+### 論理プロパティとショートハンド
+
+論理プロパティとして機能しないショートハンドは原則避けます。
+
+```css
+selector {
+	/* ❌️ */
+	padding: 1em 2em 3em 4em;
+	/* ✅️ */
+	padding-block-start: 1em;
+	padding-block-end: 3em;
+	padding-inline-start: 2em;
+	padding-inline-end: 4em;
+
+	/* ❌️ */
+	padding: 1em 2em;
+	/* ✅️ */
+	padding-block: 1em;
+	padding-inline: 2em;
+
+	/* ✅️ 例外 */
+	padding: 1em; /* 1つの値は全方向に適用されるので問題なし */
+}
+```
+
+::: tip 👮‍♀️ 自動検知
+このルールは*Stylelint*によって警告されます。
+:::
+
+## transform
+
+`transform`プロパティは関数を利用せず、対応する各プロパティを利用します。
+
+```css
+selector {
+	transform: translate(10px, 20px); /* ❌️ */
+	transform: rotate(45deg); /* ❌️ */
+	transform: scale(1.5); /* ❌️ */
+	transform: translateX(100px); /* ❌️ */
+
+	translate: 10px 20px; /* ✅️ */
+	rotate: 45deg; /* ✅️ */
+	scale: 1.5; /* ✅️ */
+	translate: 100px; /* ✅️ */
+}
+```
+
+::: tip 👮‍♀️ 自動検知
+このルールは*Stylelint*によって警告されます。
+:::