Skip to content

fix(0.2.1): bundle dist CSS + JSON-attribute browser compat#27

Merged
whykusanagi merged 1 commit into
mainfrom
fix/0.2.1-bundle-and-imports
May 24, 2026
Merged

fix(0.2.1): bundle dist CSS + JSON-attribute browser compat#27
whykusanagi merged 1 commit into
mainfrom
fix/0.2.1-bundle-and-imports

Conversation

@whykusanagi
Copy link
Copy Markdown
Owner

Summary

Patch release fixing three regressions shipped in 0.2.0. CDN consumers (cdn.whykusanagi.xyz / cdn.nikkers.cc) are already fixed via @latest — this PR brings git + npm into alignment.

  • dist/theme.min.css was not a bundle. postcss preserved the seven @import statements verbatim; the file is shipped to R2 with no sibling partials, so every @import './variables.css' etc. 404'd. Net effect: .card, .btn, .glass-container*, every component class missing from CDN consumers. Fix: add postcss-import to the pipeline. Bundle: 3.9 kB → 79.5 kB.
  • toast.css and seamless-background.css were orphans. Only reachable via deep-import endpoints; main theme.css never @imported them. Fix: add both @imports.
  • JSON import attributes broke Safari + Firefox. Five JS modules used import x from '../data/foo.json' with { type: 'json' } — only parses in Chromium 123+; raised SyntaxError in the other browsers before any code ran. Fix: scripts/inline-data.js codegen emits src/data/*.data.js ES modules from canonical JSON; the 5 modules import the generated siblings instead. Wired via prebuild/pretest/prepublishOnly. Canonical JSON unchanged — cross-language consumers keep reading the JSON files as-is.

Verification done

  • ✅ 166/166 tests pass
  • ✅ Local smoke test (dist/smoke-test.html against npm run dev:static) — all CSS classes render with glass styling, all 5 JS modules import without errors, both visually and in browser
  • ✅ R2 @0.2.1 + @latest both serve content-length: 79569, .card glass styling present, zero stray @imports
  • ✅ Smoke test artifact removed from R2 after upload

Files changed (high-signal)

  • postcss.config.js — added postcss-import plugin
  • src/css/theme.css@import './toast.css', @import './seamless-background.css'
  • scripts/inline-data.js (new) — JSON → ES module codegen
  • src/data/{charsets,colors,phrases}.data.js (new, generated) — committed artifacts, header marks them auto-generated
  • 5 source modules — with { type: 'json' }from '../data/<name>.data.js'
  • package.jsonpostcss-import@^16.1.1, prebuild/pretest/prepublishOnly hooks
  • Version bumped 0.2.0 → 0.2.1 across the VERSION_REFERENCES.md checklist (14 files)
  • CHANGELOG.md[0.2.1] - 2026-05-24 entry

Not in this PR

  • npm registry publish (manual: npm publish --access public)
  • Adding dist/ to package.json#files (out of scope; raised separately)

Test plan

  • All unit tests pass locally
  • Local smoke test page renders correctly in Chrome
  • Local smoke test page renders correctly in Safari/Firefox (validates JSON-attr fix)
  • CDN @latest and @0.2.1 serve bundled CSS
  • Verify on a live consumer site after merge (e.g. whykusanagi.xyz)

🤖 Generated with Claude Code

Three regressions shipped in 0.2.0 fixed in this patch:

1. dist/theme.min.css was not actually a bundle — postcss preserved
   the @import statements verbatim, so CDN consumers loading
   /corrupted-theme/@0.2.0/dist/theme.min.css got an empty stylesheet
   (all @imports 404'd against an R2 bucket that ships no sibling
   partials). Symptom: .card and every other foundational class lost
   its glass styling on cdn.whykusanagi.xyz / cdn.nikkers.cc.
   Fix: add postcss-import to the pipeline. Bundle grew from 3.9 kB
   (broken) to 79.5 kB (working).

2. toast.css and seamless-background.css were only reachable via
   deep-import endpoints; the main theme.css never @imported them.
   Fix: add both @imports to theme.css.

3. Five JS modules used `import x from '../data/foo.json' with
   { type: 'json' }`, which only parses in Chromium 123+. Safari and
   Firefox raised SyntaxError before any module code ran — silent
   breakage for CDN consumers loading the modules as
   <script type="module">. Fix: add scripts/inline-data.js codegen
   that emits src/data/*.data.js sibling ES modules from canonical
   JSON; rewire the 5 modules to import the .data.js files. Wired
   via prebuild/pretest/prepublishOnly so codegen always runs before
   publish. Canonical JSON source unchanged — cross-language
   consumers (Go CLI etc.) keep reading the JSON files as-is.

All 166 tests pass. Local smoke test confirmed visual + browser-side.
Version bumped 0.2.0 → 0.2.1 across the VERSION_REFERENCES.md
checklist.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented May 24, 2026

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
corrupted-theme ad5b2d0 Commit Preview URL

Branch Preview URL
May 24 2026, 09:25 PM

@whykusanagi whykusanagi merged commit 66d181e into main May 24, 2026
2 checks passed
@whykusanagi whykusanagi deleted the fix/0.2.1-bundle-and-imports branch May 24, 2026 23:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant