@dr-ishaan/rehype-perfect-code-blocks 1.3.2 → 1.3.3

package/CHANGELOG.md

@@ -5,6 +5,29 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.3] — 2026-06-20
+
+### Summary
+
+Patch release fixing CSS conflicts between the plugin and Tailwind CSS Preflight (and similar framework base resets). The plugin's `:where()` zero-specificity design — normally a feature — meant Tailwind's bare-element resets (`pre { overflow-x: auto }`, `code { font-family: ui-monospace }`, `button { background: transparent }`, `* { border-width: 0 }`) overrode the plugin's critical rules. This caused double scrollbars, wrong mono font, stripped copy-button styling, and long lines wrapping instead of scrolling. The fix adds a small block of "framework-reset overrides" with real specificity that beat framework base resets without `!important`.
+
+### Bug fixes
+
+- **Tailwind Preflight / daisyUI CSS conflict** — Added a block of "framework-reset overrides" in `src/styles.css` with REAL specificity (`.pcb pre` = (0,1,1), `.pcb__copy` = (0,1,0), `.pcb__bar` = (0,1,0), `.pcb__code` = (0,1,0)) that beat framework base resets targeting bare `pre`/`code`/`button`/`*` elements (specificity (0,0,1) or (0,0,0)). The overrides cover:
+  - `.pcb pre { overflow: visible }` — prevents Tailwind's `pre { overflow-x: auto }` from creating a double scrollbar (one on `<pre>`, one on `.pcb__body`).
+  - `.pcb pre, .pcb code { font-family: var(--pcb-font-mono) }` — prevents Tailwind's `pre, code { font-family: ui-monospace }` from overriding the plugin's `--pcb-font-mono`.
+  - `.pcb__copy { appearance: none; background: transparent; border: 1px solid transparent; cursor: pointer }` — prevents Tailwind's `button { background: transparent; background-image: none }` from stripping the copy button's base styling.
+  - `.pcb__bar { border-bottom: 1px solid var(--pcb-border) }` — prevents Tailwind's `* { border-width: 0 }` from nuking the header bar's bottom border.
+  - `.pcb__code { white-space: pre }` — prevents Tailwind utilities like `break-words` or global `pre { white-space: pre-wrap }` from wrapping long lines instead of scrolling.
+
+  The `:where()` zero-specificity rules are preserved for all other styling — user CSS still wins without `!important` arms races. The new overrides only set the properties that frameworks clobber; everything else stays in `:where()`. No `!important` is used in the override block — the specificity is high enough to beat framework resets on its own.
+
+### Verification
+
+- All 1114 pre-existing tests pass (no regressions).
+- New `test-tailwind-compat.mjs` adds 20 regression tests covering: `:where()` rules preserved, framework-reset overrides exist with real specificity, overrides come after `:where()` rules (so they win on tie), no `!important` in override declarations, specificity verification (`.pcb pre` beats `pre`, `.pcb__copy` beats `button`, etc.), and documentation comments.
+- Total: 1134/1134 tests passing.
+
 ## [1.3.2] — 2026-06-20
 
 ### Summary

package/dist/styles.css

@@ -6,6 +6,8 @@
    - Solid gutter background hides code scrolling behind it
    - All defaults use :where() for zero specificity so user CSS wins
    - Every visual property is a --pcb-* CSS variable
+   - Framework-reset overrides (Tailwind/daisyUI compat) use real
+     specificity so they beat bare-element resets like `pre { ... }`
    ============================================================ */
 
 :where(.pcb) {
@@ -251,6 +253,69 @@
   display: block;
 }
 
+/* ============================================================
+   Framework-reset overrides (Tailwind Preflight / daisyUI compat)
+   ------------------------------------------------------------
+   Tailwind Preflight targets bare `pre`, `code`, and `button`
+   elements with specificity (0,0,1). Our :where() rules above
+   have zero specificity (0,0,0), so Tailwind's resets WIN and
+   break the plugin's overflow model, font inheritance, and
+   copy-button styling.
+
+   These rules use REAL specificity (.pcb pre = (0,1,1),
+   .pcb__copy = (0,1,0)) to beat framework base resets WITHOUT
+   !important. They only set the properties that frameworks
+   clobber — everything else stays in :where() so user CSS
+   still wins.
+
+   If you're NOT using a CSS framework, these rules are harmless
+   (they set the same values as the :where() rules above).
+   ============================================================ */
+
+/* Tailwind sets `pre { overflow-x: auto }` which creates a double-
+   scrollbar (one on <pre>, one on .pcb__body). Force <pre> to
+   visible so only .pcb__body scrolls. */
+.pcb pre {
+  overflow: visible;
+}
+
+/* Tailwind sets `pre, code { font-family: ui-monospace, ... }` which
+   overrides the plugin's `font: inherit` and ignores --pcb-font-mono.
+   Re-assert the plugin's font. */
+.pcb pre,
+.pcb code {
+  font-family: var(--pcb-font-mono);
+}
+
+/* Tailwind sets `button { background: transparent; background-image: none }`
+   which strips the copy button's hover background. Re-assert the plugin's
+   button base. (.pcb__copy already has specificity (0,1,0) which beats
+   Tailwind's `button` (0,0,1), but we re-assert here for clarity and to
+   catch cases where frameworks add higher-specificity button resets.) */
+.pcb__copy {
+  appearance: none;
+  background: transparent;
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+
+/* Tailwind sets `*, ::before, ::after { border-width: 0 }` which nukes
+   borders on the header bar and copy button. Re-assert. */
+.pcb__bar {
+  border-bottom: 1px solid var(--pcb-border);
+}
+
+/* Tailwind's box-sizing: border-box is fine (the plugin expects it).
+   No override needed. */
+
+/* Some Tailwind utilities (e.g., `@apply break-words` or global
+   `pre { white-space: pre-wrap }`) can clobber the plugin's
+   `white-space: pre` on .pcb__code, causing long lines to wrap
+   instead of scroll. Re-assert with real specificity. */
+.pcb__code {
+  white-space: pre;
+}
+
 /* ---------- Row-based line grid ----------
    Each <span class="pcb__line"> uses display:contents so its children
    (.pcb__ln and .pcb__code) become grid items in the <code> container. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dr-ishaan/rehype-perfect-code-blocks",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Beautiful, configurable code blocks for Astro / MDX / any rehype pipeline. Built on Shiki, inspired by rehype-pretty-code, VitePress, Docusaurus, and Expressive Code.",
   "type": "module",
   "main": "./dist/index.js",
@@ -51,7 +51,7 @@
   "scripts": {
     "build": "tsc -p tsconfig.json && cp src/styles.css dist/styles.css",
     "dev": "tsc -p tsconfig.json --watch",
-    "test": "node test-meta-parser.mjs && node test-dom-structure.mjs && node test-options.mjs && node test-notations.mjs && node test-security.mjs && node test-integration.mjs && node test-regression.mjs && node test-css.mjs && node test-edge-cases.mjs && node stress-tests.mjs && node new-feature-tests.mjs && node test-issue-12.mjs && node test-issue-11.mjs && node test-architecture-patterns.mjs && node test-copy-button-fix.mjs",
+    "test": "node test-meta-parser.mjs && node test-dom-structure.mjs && node test-options.mjs && node test-notations.mjs && node test-security.mjs && node test-integration.mjs && node test-regression.mjs && node test-css.mjs && node test-edge-cases.mjs && node stress-tests.mjs && node new-feature-tests.mjs && node test-issue-12.mjs && node test-issue-11.mjs && node test-architecture-patterns.mjs && node test-copy-button-fix.mjs && node test-tailwind-compat.mjs",
     "prepublishOnly": "npm run build && npm test",
     "prepack": "npm run build"
   },

package/src/styles.css

@@ -6,6 +6,8 @@
    - Solid gutter background hides code scrolling behind it
    - All defaults use :where() for zero specificity so user CSS wins
    - Every visual property is a --pcb-* CSS variable
+   - Framework-reset overrides (Tailwind/daisyUI compat) use real
+     specificity so they beat bare-element resets like `pre { ... }`
    ============================================================ */
 
 :where(.pcb) {
@@ -251,6 +253,69 @@
   display: block;
 }
 
+/* ============================================================
+   Framework-reset overrides (Tailwind Preflight / daisyUI compat)
+   ------------------------------------------------------------
+   Tailwind Preflight targets bare `pre`, `code`, and `button`
+   elements with specificity (0,0,1). Our :where() rules above
+   have zero specificity (0,0,0), so Tailwind's resets WIN and
+   break the plugin's overflow model, font inheritance, and
+   copy-button styling.
+
+   These rules use REAL specificity (.pcb pre = (0,1,1),
+   .pcb__copy = (0,1,0)) to beat framework base resets WITHOUT
+   !important. They only set the properties that frameworks
+   clobber — everything else stays in :where() so user CSS
+   still wins.
+
+   If you're NOT using a CSS framework, these rules are harmless
+   (they set the same values as the :where() rules above).
+   ============================================================ */
+
+/* Tailwind sets `pre { overflow-x: auto }` which creates a double-
+   scrollbar (one on <pre>, one on .pcb__body). Force <pre> to
+   visible so only .pcb__body scrolls. */
+.pcb pre {
+  overflow: visible;
+}
+
+/* Tailwind sets `pre, code { font-family: ui-monospace, ... }` which
+   overrides the plugin's `font: inherit` and ignores --pcb-font-mono.
+   Re-assert the plugin's font. */
+.pcb pre,
+.pcb code {
+  font-family: var(--pcb-font-mono);
+}
+
+/* Tailwind sets `button { background: transparent; background-image: none }`
+   which strips the copy button's hover background. Re-assert the plugin's
+   button base. (.pcb__copy already has specificity (0,1,0) which beats
+   Tailwind's `button` (0,0,1), but we re-assert here for clarity and to
+   catch cases where frameworks add higher-specificity button resets.) */
+.pcb__copy {
+  appearance: none;
+  background: transparent;
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+
+/* Tailwind sets `*, ::before, ::after { border-width: 0 }` which nukes
+   borders on the header bar and copy button. Re-assert. */
+.pcb__bar {
+  border-bottom: 1px solid var(--pcb-border);
+}
+
+/* Tailwind's box-sizing: border-box is fine (the plugin expects it).
+   No override needed. */
+
+/* Some Tailwind utilities (e.g., `@apply break-words` or global
+   `pre { white-space: pre-wrap }`) can clobber the plugin's
+   `white-space: pre` on .pcb__code, causing long lines to wrap
+   instead of scroll. Re-assert with real specificity. */
+.pcb__code {
+  white-space: pre;
+}
+
 /* ---------- Row-based line grid ----------
    Each <span class="pcb__line"> uses display:contents so its children
    (.pcb__ln and .pcb__code) become grid items in the <code> container. */