fix: replace CSS cascade layer with unlayered :where() default styles (#174)

Author: AVGVSTVS96

.changeset/rename-css-layer.md

@@ -0,0 +1,8 @@
+---
+"react-shiki": minor
+---
+
+fix(css): default styles no longer use `@layer base`, which broke Tailwind v3 builds (its PostCSS plugin treats `@layer base` as a Tailwind directive). Default styles are now unlayered with zero-specificity `:where()` selectors: CSS resets (e.g. Tailwind preflight) can no longer override them, while any rule in your own CSS still can.
+
+BREAKING CHANGE (css): There is a very small risk for breaking changes with this release:
+- If you have default styles enabled and override padding or border-radius on the `pre` element from inside a cascade layer (e.g. Tailwind utilities like `[&_pre]:p-3.5`), those overrides no longer apply; add `!` / `!important`, or disable default styles. Overrides in plain (unlayered) CSS are unaffected and need no change.

.changeset/unlayered-default-styles.md

@@ -454,11 +454,7 @@ const highlightedCode = useShikiHighlighter(code, "javascript", "github-dark", {
 > import 'react-shiki/css';
 > ```
 
-Component-internal default classes are namespaced under `rs-*` and shipped inside the `@layer react-shiki` cascade layer, so unlayered app CSS and later layers take precedence over them. To control precedence explicitly, declare the layer order at the top of your stylesheet:
-
-```css
-@layer react-shiki, theme, base, components, utilities;
-```
+Component-internal default classes are namespaced under `rs-*` and written with zero-specificity `:where()` selectors, so they can't be clobbered by CSS resets (e.g. Tailwind preflight) regardless of stylesheet load order, while any rule in your own CSS — even a bare element selector — overrides them.
 
 Available CSS variables for customization:
 ```css

package/README.md

@@ -1,24 +1,23 @@
-@layer react-shiki {
-  .rs-root {
-    position: relative;
+/* Unlayered :where() defaults: immune to layered resets, overridden by any user rule. */
+:where(.rs-root) {
+  position: relative;
+}
 
-    &.rs-default-styles pre {
-      overflow: auto;
-      border-radius: 0.5rem;
-      padding-left: 1.5rem;
-      padding-right: 1.5rem;
-      padding-top: 1.25rem;
-      padding-bottom: 1.25rem;
-    }
+:where(.rs-root.rs-default-styles) pre {
+  overflow: auto;
+  border-radius: 0.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
 
-    & .rs-language-label {
-      position: absolute;
-      right: 0.75rem;
-      top: 0.5rem;
-      font-family: monospace;
-      font-size: 0.75rem;
-      letter-spacing: -0.05em;
-      color: rgba(107, 114, 128, 0.85);
-    }
-  }
+:where(.rs-root) .rs-language-label {
+  position: absolute;
+  right: 0.75rem;
+  top: 0.5rem;
+  font-family: monospace;
+  font-size: 0.75rem;
+  letter-spacing: -0.05em;
+  color: rgba(107, 114, 128, 0.85);
 }

package/src/styles/component.css

@@ -1,25 +1,23 @@
-@layer react-shiki {
-  .rs-has-line-numbers {
-    counter-reset: line-number calc(var(--line-start, 1) - 1);
+:where(.rs-has-line-numbers) {
+  counter-reset: line-number calc(var(--line-start, 1) - 1);
+}
 
-    & .rs-line-number::before {
-      counter-increment: line-number;
-      content: counter(line-number);
-      display: inline-flex;
-      justify-content: flex-end;
-      align-items: flex-start;
-      box-sizing: content-box;
-      min-width: var(--rs-line-numbers-width, 2ch);
-      padding-left: var(--rs-line-numbers-padding-left, 0ch);
-      padding-right: var(--rs-line-numbers-padding-right, 2ch);
-      color: var(--rs-line-numbers-foreground, rgba(107, 114, 128, 0.5));
-      font-size: var(--rs-line-numbers-font-size, inherit);
-      font-weight: var(--rs-line-numbers-font-weight, inherit);
-      line-height: var(--rs-line-numbers-line-height, inherit);
-      font-family: var(--rs-line-numbers-font-family, inherit);
-      opacity: var(--rs-line-numbers-opacity, 1);
-      user-select: none;
-      pointer-events: none;
-    }
-  }
+:where(.rs-has-line-numbers .rs-line-number)::before {
+  counter-increment: line-number;
+  content: counter(line-number);
+  display: inline-flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  box-sizing: content-box;
+  min-width: var(--rs-line-numbers-width, 2ch);
+  padding-left: var(--rs-line-numbers-padding-left, 0ch);
+  padding-right: var(--rs-line-numbers-padding-right, 2ch);
+  color: var(--rs-line-numbers-foreground, rgba(107, 114, 128, 0.5));
+  font-size: var(--rs-line-numbers-font-size, inherit);
+  font-weight: var(--rs-line-numbers-font-weight, inherit);
+  line-height: var(--rs-line-numbers-line-height, inherit);
+  font-family: var(--rs-line-numbers-font-family, inherit);
+  opacity: var(--rs-line-numbers-opacity, 1);
+  user-select: none;
+  pointer-events: none;
 }