:

Stop Bloating Your JS Bundle: Mastering Zero-Runtime CSS with traceless-style ⚡

Jenny Akhi introduces traceless-style, a build-time styling system. It replaces runtime CSS calculations with an AST parser that hashes style definitions into 8-character base36 class names.

Why This Matters

Shipping massive JavaScript bundles to calculate styles in the browser creates a bottleneck for Core Web Vitals. By moving style resolution to the compilation phase, engineers can eliminate runtime overhead entirely, ensuring that the browser receives pure string hashes rather than executing style logic during page load.

Key Insights

• The tl.create API uses a literal-only AST parser to validate properties against a strict allowlist at build time (2026).
• Zero-runtime architecture is achieved by replacing style objects with 8-character base36 hashed class names during compilation.
• Dynamic variables are strictly rejected by the parser to ensure build-time predictability; tl.defineTokens must be used for design tokens instead of runtime JavaScript.

Working Examples

Defining components and styles using the tl.create API with support for pseudo-classes and breakpoints.

import { tl } from "traceless-style";

const $ = tl.create({
  card: {
    display: "flex",
    flexDirection: "column",
    padding: "1rem",
    background: "#ffffff",
    borderRadius: "8px",
    boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
    _hover: {
      boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
    },
    title: {
      fontSize: "1.25rem",
      fontWeight: 600,
      marginBottom: "0.5rem"
    }
  },
  myStyle: {
    color: "white",
    _hover: { color: "lightblue" },
    sm: { padding: "0.5rem" }, // breakpoint
    _dark: { background: "black" }, // dark mode override
    "&:nth-child(odd)": { background: "#f0f0f0" }, // raw selector pass-through
  },
});

Practical Applications

• :{

References:

• https://dev.to/jenny_akhi_aade503c2764f6/stop-bloating-your-js-bundle-mastering-zero-runtime-css-with-traceless-style-19p5
• https://github.com/sparkgoldentech/traceless-style/blob/main/docs/api/create.md