`@scope` support
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 初心者へのやさしさ
- 25/100
調査の方向性
この issue では、プラグイン、ファイル、テストのエントリーポイントが指定されていません。まず、リポジトリのプラグイン構造と既存の CSS at-rule の処理を調査し、次にリンクされている CSS Cascade 6 仕様とブラウザーのリファレンスを読んでください。完了には、@scope、互換性の境界、および提案する動作をカバーするテストについて、合意された実装設計が必要です。
索引モデルが issue の本文から書いたものです。
説明
What would you want to propose?
I'd like to suggest support for @scope
- https://drafts.csswg.org/css-cascade-6/#scoped-styles
- https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
- https://developer.chrome.com/docs/css-ui/at-scope
Suggested solution
This is just an idea, I have no idea if this would work in general.
https://jsfiddle.net/mindplay/agd9k2p1/
So this:
@scope (.panel) to (.content) {
h2 {
color: red;
}
}
Becomes this:
:where(.panel) h2:where(:not(.content h2)) {
color: red;
}
And a more complex selector like this:
@scope ([scope=panel]) to ([scope]:not([scope=panel])) {
h2 {
color: red;
}
p {
font-weight: bold;
}
}
Becomes this:
:where([scope=panel]) h2:where(:not([scope]:not([scope=panel]) h2)) {
color: red;
}
:where([scope=panel]) p:where(:not([scope]:not([scope=panel]) p)) {
font-weight: bold;
}
So this would require both :where and :not, I think - to get the right specificity.
But this is just a rough idea - I'm not a CSS superhero, and I don't know if this is completely correct or scoped properly etc.
Additional context
Only a few browsers support this already.
https://caniuse.com/css-cascade-scope
But this would be an incredible feature, if we didn't have to wait 3-5 years for every browser to support it - we could basically stop using CSS frameworks, CSS-in-JS, Tailwind etc. would all essentially be obsolete (from my personal point of view!) and we could finally have something resembling component-scoped CSS natively in the browser without JavaScript. 😄
Validations
- Follow our Code of Conduct
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
Would you like to open a PR for this feature?
- I'm willing to open a PR
- 主要言語
- CSS
- スター
- 1.1k
- フォーク
- 83
- 平均マージ
- 6時間 43分
- マージ済み PR（30日）
- 26
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
csstools/postcss-plugins のほかの issue
-
`symbols()` functionオープンfeature request
難易度 4/5 3〜5日 初心者へのやさしさ 52/100
csstools/postcss-plugins#1894 ·
メンテナーはふだん 1 日以内に返信
-
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
csstools/postcss-plugins#1717 ·
メンテナーはふだん 1 日以内に返信
-
feature request
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
csstools/postcss-plugins#1667 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
bug plugins/postcss-font-variant upstream
難易度 3/5 1〜2日 初心者へのやさしさ 45/100
csstools/postcss-plugins#1546 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
help wanted
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
csstools/postcss-plugins#1451 · コメント 1 件 · リアクション 2 件 ·
メンテナーはふだん 1 日以内に返信
csstools/postcss-plugins の issue をすべて見る
似ている issue
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
happypawspillaro/happypaws#78 ·
メンテナーはふだん 4 日以内に返信
-
bug priority:low ready-for-dev
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信
-
Business
難易度 2/5 1〜3時間 初心者へのやさしさ 66/100
メンテナーはふだん 1 日以内に返信
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 83/100
txn2/mcp-data-platform#2063 ·
メンテナーはふだん 1 日以内に返信
-
component:sight
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
agentic-os-org/ANOLISA#6738 · コメント 2 件 ·
メンテナーはふだん 1 日以内に返信