meno-core 1.1.3 → 1.1.4

package/lib/shared/viewportUnits.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'bun:test';
-import { rewriteViewportUnits } from './viewportUnits';
+import { rewriteViewportUnits, rewriteViewportUnitsInStylesheet } from './viewportUnits';
 
 describe('rewriteViewportUnits', () => {
   it('rewrites basic vh values in declarations', () => {
@@ -102,3 +102,36 @@ describe('rewriteViewportUnits', () => {
     expect(rewriteViewportUnits('top: 0vh;')).toBe('top: calc(var(--design-vh, 1vh) * 0);');
   });
 });
+
+describe('rewriteViewportUnitsInStylesheet', () => {
+  it('preserves an escaped selector carrying a DECIMAL viewport unit', () => {
+    // `text-[clamp(56px,9.5vw,150px)]` escapes to `…9\.5vw…`; the value-level
+    // rewriter matches `.5vw` after the backslash and corrupts the selector, so
+    // the browser drops the rule. Stylesheet-scoped rewrite touches only bodies.
+    const rule = '.text-\\[clamp\\(56px\\,9\\.5vw\\,150px\\)\\] { font-size: clamp(56px,9.5vw,150px); }';
+    expect(rewriteViewportUnitsInStylesheet(rule)).toBe(
+      '.text-\\[clamp\\(56px\\,9\\.5vw\\,150px\\)\\] { font-size: clamp(56px,calc(var(--design-vw, 1vw) * 9.5),150px); }',
+    );
+    // Rationale guard: the raw value rewriter alone corrupts this selector.
+    expect(rewriteViewportUnits(rule).split('{')[0]).toContain('calc(');
+  });
+
+  it('preserves an escaped selector when a viewport unit follows a no-space comma', () => {
+    const rule = '.p-\\[80px_clamp\\(20px\\,5vw\\,64px\\)\\] { padding: 80px clamp(20px,5vw,64px); }';
+    expect(rewriteViewportUnitsInStylesheet(rule)).toBe(
+      '.p-\\[80px_clamp\\(20px\\,5vw\\,64px\\)\\] { padding: 80px clamp(20px,calc(var(--design-vw, 1vw) * 5),64px); }',
+    );
+  });
+
+  it('rewrites declaration values inside @media blocks while keeping nested selectors literal', () => {
+    const sheet = '@media (max-width: 767px) { .h-\\[50dvh\\] { height: 50dvh; } }';
+    expect(rewriteViewportUnitsInStylesheet(sheet)).toBe(
+      '@media (max-width: 767px) { .h-\\[50dvh\\] { height: calc(var(--design-dvh, 1dvh) * 50); } }',
+    );
+  });
+
+  it('is a no-op on empty / brace-free input', () => {
+    expect(rewriteViewportUnitsInStylesheet('')).toBe('');
+    expect(rewriteViewportUnitsInStylesheet('.a { color: red; }')).toBe('.a { color: red; }');
+  });
+});

package/lib/shared/viewportUnits.ts

@@ -53,6 +53,49 @@ export function rewriteViewportUnits(input: string): string {
   });
 }
 
+/**
+ * Apply {@link rewriteViewportUnits} to a whole stylesheet, rewriting ONLY the
+ * declaration bodies — never the selectors or at-rule preludes.
+ *
+ * {@link rewriteViewportUnits} is regex-based and can't reliably tell a
+ * declaration value's viewport unit from one buried in an *escaped*
+ * arbitrary-value class SELECTOR. The `VIEWPORT_UNIT_RE` lookbehind guards the
+ * common selector shapes (`.mh-100vh`, `.min-h-[100svh]`), but a class whose
+ * arbitrary value carries a viewport unit after an escaped `.` or `,` slips
+ * through — e.g. `text-[clamp(56px,9.5vw,150px)]` escapes to
+ * `.text-\[clamp\(56px\,9\.5vw\,150px\)\]`, where the `.5vw` sits right after a
+ * backslash and the rewriter injects `calc(...)` INTO the selector. The result
+ * is invalid CSS the browser drops entirely, so the rule — and the design-mode
+ * viewport pin it carries — silently vanishes and the element renders unstyled.
+ *
+ * Splitting selector text from declaration bodies at brace boundaries removes
+ * the ambiguity: every selector / prelude ends at a `{`, every declaration body
+ * ends at a `}`, so only body text is handed to the value rewriter. Correct
+ * through `@media` nesting too (a nested rule's selector still ends at its own
+ * `{`). Assumes braces only ever delimit blocks — true for the generated
+ * utility/interactive/theme sheets (none emit literal `{`/`}` inside a value or
+ * string). Mirror of meno-astro's `rewriteViewportUnitsInStylesheet` (keep in
+ * sync — see packages/astro/lib/integration/viewportUnits.ts).
+ */
+export function rewriteViewportUnitsInStylesheet(css: string): string {
+  if (!css) return css;
+  let out = '';
+  let seg = '';
+  for (let i = 0; i < css.length; i++) {
+    const ch = css[i];
+    if (ch === '{') {
+      out += seg + ch; // `seg` is a selector / at-rule prelude — keep it literal
+      seg = '';
+    } else if (ch === '}') {
+      out += rewriteViewportUnits(seg) + ch; // `seg` is a declaration body — rewrite its values
+      seg = '';
+    } else {
+      seg += ch;
+    }
+  }
+  return out + seg; // trailing text outside any block — never a declaration value
+}
+
 /**
  * Names of the CSS custom properties the runtime sets/clears to switch
  * between design-mode (stable px) and page-mode (no override, vh = actual

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meno-core",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "type": "module",
   "bin": {
     "meno": "./dist/bin/cli.js"
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@emotion/css": "^11.13.5",
+    "css-tree": "^3.2.1",
     "esbuild": "^0.25.0",
     "isomorphic-dompurify": "^2.32.0",
     "jsep": "^1.4.0",
@@ -33,6 +34,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@types/css-tree": "^2.3.11",
     "@types/markdown-it": "^14.1.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",

package/vite.config.ts

@@ -19,7 +19,10 @@ export default defineConfig({
         'react',
         'react-dom',
         'bun',
-        // Node.js built-ins (server code)
+        // Node.js built-ins (server code) — bare and node:-prefixed specifiers.
+        // The regex covers all `node:`-prefixed imports (e.g. `node:path`) so they
+        // stay external instead of being browser-stubbed by Vite.
+        /^node:/,
         'path',
         'fs',
         'fs/promises',