Skip to content

fix(tailwind-from-scratch): escape note attribute quotes correctly - #9

Merged
joaquimscosta merged 4 commits into
mainfrom
fix/tailwind-from-scratch-mdx-escaped-quotes
Jul 8, 2026
Merged

fix(tailwind-from-scratch): escape note attribute quotes correctly#9
joaquimscosta merged 4 commits into
mainfrom
fix/tailwind-from-scratch-mdx-escaped-quotes

Conversation

@joaquimscosta

@joaquimscosta joaquimscosta commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Lessons 22-modu-sukuru and 23-tailwind-cli-v4 (kea.mdx) embed a literal <style type="..."> / @import "..." snippet inside a <CodeDiff note="..."> attribute, using backslash-escaped double quotes (\").
  • JSX plain-attribute strings (attr="...") don't support backslash-escaping — the \ is literal and the following " ends the attribute early, desyncing the rest of the tag. Velite (apps/web's MDX build) fails to compile both lessons and drops them from the catalog, which 404s those lesson routes at runtime.
  • This surfaced in skola.dev CI (run) on an unrelated PR whose diff happened to trigger a full web:build for the first time since this course's publish (027512b5).
  • The same bug was also fixed at the source in deznode/skola-research (drafts are the source of truth for republish) — see that repo's content/topic-tailwind-from-scratch branch, commit 426c26d6.

Fix

  1. Swap the inner double quotes for single quotes in both note attributes — no escaping needed, meaning unchanged.
  2. Add a validate-mdx CI job (+ scripts/check-mdx-syntax.mjs) that compiles every lesson MDX body via @mdx-js/mdx (with remark-directive, matching apps/web's Velite config) and fails on any parse error — nothing in this pipeline previously checked MDX/JSX syntax at all. Companion gate also added to pipeline-app's publish flow (skola-claude-plugins) so this is caught before content even reaches this repo; this CI job is defense-in-depth for any direct push that bypasses that pipeline.

Test plan

  • Verified both lessons compile via @mdx-js/mdx (matches the Velite/apps-web toolchain) — confirmed broken snippets reproduce the exact CI errors, and the fixed versions compile clean
  • Grepped the full repo for the same pattern (attr="...\"...") — confirmed these are the only 2 occurrences
  • Ran the new check-mdx-syntax.mjs against the whole repo pre-fix (flags exactly these 2 lessons, no false positives from :::callout{} directive blocks) and post-fix (0 failures)
  • skola.dev CI web-build-test should go green once this merges and a web-affecting PR rebuilds the catalog

Two lessons' <CodeDiff note="..."> attributes embedded a literal
`\"..."` inside a plain JSX string attribute. JSX plain-attribute
strings don't support backslash-escaping — the backslash is literal
and the following quote closes the attribute early, desyncing the
rest of the tag. Velite drops both lessons from the catalog as a
result (silent 404 at runtime).

Swap the inner double quotes for single quotes; no escaping needed.
Verified both lessons now compile via @mdx-js/mdx (matches the
Velite/apps-web toolchain).
@chatgpt-codex-connector

Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

Adds a validate-mdx CI job that compiles every lesson MDX body via
@mdx-js/mdx (with remark-directive, matching apps/web's Velite config)
and fails the build on any parse error.

Nothing in this pipeline previously checked MDX syntax at all — the
publish-time checks (frontmatter, heading lint, sidecar YAML) never
parse the MDX body as JSX, and Velite (apps/web) only runs downstream,
disconnected from publish, where a bad lesson is silently dropped from
the catalog (404 at runtime) rather than failing anything.

This is defense-in-depth alongside the equivalent validate-mdx gate now
added to pipeline-app's publish flow (skola-claude-plugins) — that gate
catches it before the content even reaches this repo; this one catches
it for any direct push that bypasses that pipeline.
…e fix

Required by this repo's own changelog-guard gate (courses/*/** changes
must be recorded in that course's CHANGELOG.md).
CI pins Node 20 (matching the rest of content-ci.yml), and
fs.promises.glob doesn't exist until Node 22 — the validate-mdx job
failed outright with a SyntaxError before it ever compiled a single
file. Replaced with a portable manual recursive directory walk.

Verified locally: still flags exactly the 2 known-bad lessons when
pointed at their pre-fix content, and reports clean against this
branch's fixed content.
@joaquimscosta
joaquimscosta merged commit da0abbd into main Jul 8, 2026
4 checks passed
@joaquimscosta
joaquimscosta deleted the fix/tailwind-from-scratch-mdx-escaped-quotes branch July 8, 2026 00:34
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