Skip to content

feat(stylelint): stylelint v17対応 #794

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
YusukeHirao wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

feat(stylelint): stylelint v17対応 #794

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b55bef2
chore(deps): update dependency stylelint to v17
YusukeHirao Jan 19, 2026
9d12f6f
fix(stylelint-rules): remove unnecessary props
YusukeHirao Jan 19, 2026
6cdcc87
feat(stylelint): stylelint v17アップデートに伴うSASS構文の`&`連結の禁止
YusukeHirao Jan 19, 2026
18f0f59
Merge branch 'dev' into feat/stylelint-v17
YusukeHirao Jan 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/@d-zero/stylelint-config/name.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,16 @@ module.exports = {
},
],
'selector-nested-pattern': [
'^[^.]+.*',
'^[^.&]+.*|^&(?:\\s|\\.|\\[|:|#)',
{
/**
* @param {string} selector
* @returns {string}
*/
message: (selector) => {
if (selector.startsWith('&')) {
return `Stylelint v17以降「&」を使ったセレクタの文字列結合に対応しなくなったため、「&」の使用を禁止します: ${selector}`;
}
return `コンポーネントのスタイル定義の中で別のコンポーネントを定義してはいけません: ${selector}`;
},
},
Expand Down
2 changes: 1 addition & 1 deletion packages/@d-zero/stylelint-config/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"dependencies": {
"@d-zero/stylelint-rules": "5.0.0",
"postcss-scss": "4.0.9",
"stylelint": "16.26.1",
"stylelint": "17.0.0",
"stylelint-config-recess-order": "7.5.0",
"stylelint-config-standard": "40.0.0",
"stylelint-order": "7.0.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/@d-zero/stylelint-rules/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"css-tree": "3.1.0",
"postcss-selector-parser": "7.1.1",
"postcss-value-parser": "4.2.0",
"stylelint": "16.26.1"
"stylelint": "17.0.0"
},
"devDependencies": {
"postcss": "8.5.6"
Expand Down
4 changes: 0 additions & 4 deletions packages/@d-zero/stylelint-rules/src/rules/declaration-value-type-disallowed-list/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,16 +87,12 @@ export default createRule<Record<string, string[] | Options>>({

if (matched) {
const word = matched.substring;
const index = raw.indexOf(word);
const endIndex = index + word.length;

stylelint.utils.report({
result,
ruleName,
message: messages.rejected(word, node.valueType),
node: decl,
index,
endIndex,
word,
});
}
Expand Down
5 changes: 3 additions & 2 deletions test/cli.spec.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,8 +243,9 @@ describe('stylelint', () => {

expect(violations).toStrictEqual([
'test/fixtures/stylelint/class-name.scss:1:1 クラス名は「c-」から始めてください: .component (selector-class-pattern)',
'test/fixtures/stylelint/class-name.scss:10:2 「__」はコンポーネント名とエレメント名の区切りを表します。エレメント名の文字区切りは「-」を使います: .c-component__invalid__element-name (selector-class-pattern)',
'test/fixtures/stylelint/class-name.scss:14:2 クラス名に命名規則にない文字が含まれています: .c-component__foo😁bar (selector-class-pattern)',
'test/fixtures/stylelint/class-name.scss:6:2 Stylelint v17以降「&」を使ったセレクタの文字列結合に対応しなくなったため、「&」の使用を禁止します: &__element (selector-nested-pattern)',
'test/fixtures/stylelint/class-name.scss:10:2 Stylelint v17以降「&」を使ったセレクタの文字列結合に対応しなくなったため、「&」の使用を禁止します: &__invalid__element-name (selector-nested-pattern)',
'test/fixtures/stylelint/class-name.scss:14:2 Stylelint v17以降「&」を使ったセレクタの文字列結合に対応しなくなったため、「&」の使用を禁止します: &__foo😁bar (selector-nested-pattern)',
'test/fixtures/stylelint/class-name.scss:18:2 コンポーネントのスタイル定義の中で別のコンポーネントを定義してはいけません: .c-component2 (selector-nested-pattern)',
'test/fixtures/stylelint/class-name.scss:23:1 スタイル定義でIDセレクタは使わないでください (selector-max-id)',
]);
Expand Down
29 changes: 26 additions & 3 deletions test/fixtures/stylelint/class-name.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@

.c-component {
&__element {
//
//　Stylelint v17以降「&」を使ったセレクタの文字列結合に対応しなくなったため、「&」の使用を禁止します
}

&__invalid__element-name {
// 「__」はコンポーネント名とエレメント名の区切りを表します。エレメント名の文字区切りは「-」を使います
// Stylelint v17以降「&」を使ったセレクタの文字列結合に対応しなくなったため、「&」の使用を禁止します
}

&__foo😁bar {
// クラス名に命名規則にない文字が含まれています
// Stylelint v17以降「&」を使ったセレクタの文字列結合に対応しなくなったため、「&」の使用を禁止します
}

.c-component2 {
Expand All @@ -23,3 +23,26 @@
#id {
// スタイル定義でIDセレクタは使わないでください
}

// stylelint-disable selector-type-no-unknown, selector-class-pattern, selector-max-id

.c-component3 {
& type,
&[attr],
&.class,
&:hover,
&::before,
&#id {
// 連結ではない
}

type & {
// 連結ではない
}

& &__element {
// 小賢しいけど、検出困難のため、禁止化を諦める
}
}

// stylelint-enable selector-type-no-unknown, selector-class-pattern, selector-max-id
Loading