Feat v0.6.12 css isolation (#47)
All checks were successful
All checks were successful
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit was merged in pull request #47.
This commit is contained in:
@@ -63,16 +63,17 @@ Shipped. Old primitive system retired. One class per concept. See CHANGELOG.md.
|
||||
| Mark deprecated classes | Any remaining old classes get a `/* DEPRECATED v0.6.11 — use .sw-btn--* */` comment and a 1-version grace period for package authors. |
|
||||
| Package CSS audit | Scan all `packages/*/css/main.css` for references to deprecated kernel classes. Fix in-tree packages. |
|
||||
|
||||
### v0.6.12 — Extension CSS Isolation
|
||||
### v0.6.12 — Extension CSS Isolation ✅
|
||||
|
||||
Prevent extension CSS from leaking into the kernel or sibling extensions.
|
||||
Shipped. Prefix enforcement via linter. All 12 in-tree packages migrated.
|
||||
See CHANGELOG.md.
|
||||
|
||||
| Step | Description |
|
||||
|------|-------------|
|
||||
| Scoping strategy | Two options: (A) `@scope (.extension-mount[data-ext="slug"])` — CSS `@scope` is supported in Chrome 118+, Firefox 128+, Safari 17.4+. (B) Prefix enforcement — package CSS linter rejects selectors that don't start with `.ext-{slug}` or `[data-ext="{slug}"]`. **Recommendation**: (B) prefix enforcement. `@scope` support is still patchy; prefix enforcement works everywhere and is trivially lintable. |
|
||||
| Linter | `scripts/lint-package-css.sh` — shell script using `grep`/`awk`. Runs in CI. Accepts `.ext-{slug}` or `[data-ext="{slug}"]` prefixed selectors only. Exempts `:root`, `@keyframes`, `@font-face`, and `@media` wrappers. |
|
||||
| Kernel CSS contract | Document which kernel classes are stable public API for extensions to reference (`.sw-btn--*`, `.sw-input`, `.sw-field`, `.sw-dialog`, `.sw-toast`, `.sw-menu`, `.sw-tabs`, CSS variables). Everything else is internal. Publish in `docs/EXTENSION-CSS.md`. |
|
||||
| Migrate in-tree packages | Add `data-ext` attribute to extension mount container. Prefix all in-tree package CSS. Verify no visual regressions. |
|
||||
| Scoping strategy | Prefix enforcement (option B). `@scope` support still patchy; prefix works everywhere, trivially lintable. |
|
||||
| Linter | `scripts/lint-package-css.sh` — validates first class selector in every rule starts with `.ext-{slug}`. Exempts `:root`, `@keyframes`, `@font-face`, `@media`, `.sw-*` kernel classes, `.cm-*` CodeMirror classes. |
|
||||
| Kernel CSS contract | `docs/EXTENSION-CSS.md` — stable public classes (`.sw-btn--*`, `.sw-input`, `.sw-field`, `.sw-dialog`, `.sw-toast`, `.sw-menu`, `.sw-tabs`, etc.) and all CSS variables. Everything else internal. |
|
||||
| Migrate in-tree packages | `data-ext="{{.Surface}}"` on extension mount. All 12 packages prefixed to `.ext-{slug}-*`. CSS + JS updated in lockstep. |
|
||||
|
||||
### v0.6.13 — Responsive & Spacing
|
||||
|
||||
@@ -120,7 +121,7 @@ v0.6.10 Viewport Foundation ✅ SHIPPED
|
||||
↓
|
||||
v0.6.11 CSS Deduplication ✅ SHIPPED
|
||||
↓
|
||||
v0.6.12 Extension CSS Isolation ← Scoping requires the kernel CSS to be stable first
|
||||
v0.6.12 Extension CSS Isolation ✅ SHIPPED
|
||||
↓
|
||||
v0.6.13 Responsive & Spacing ← Spacing tokens need stable class names to attach to
|
||||
↓
|
||||
|
||||
Reference in New Issue
Block a user