@teacss/directives

Shared transforms for TeaCSS CSS authoring helpers.

.button {
  @apply p-x:4 p-y:2 rd:2 content:["hello world"];
  color: theme("colors.red.500");
  background-image: icon("lucide-sun");
}

@screen md {
  .button {
    @apply p-x:6;
  }
}

The package handles @apply, @screen, theme(...), and icon(...). @screen at-* selects the next greater comparable breakpoint as its upper bound, including same-unit logical viewport (svi, dvb, etc.) and root-font (rex, rch, rcap, ric) lengths. Different relative units remain incomparable. icon() receives <collection>-<icon-name> without the icon: utility prefix. Group syntax and attached [] values follow the same parsing rules as class lists.

Official Vite, PostCSS, Rsbuild, Bun, and CLI pipelines use these transforms automatically.

With Standard's preflight: "on-demand", applied utilities carry their required theme variables in the consuming stylesheet, including non-entry CSS modules. This does not generate additional utility selectors or repeat static resets and full-theme preflights. Replacing or removing the module removes its dependencies too.

Integration authors can reuse adapter-neutral semantics from the Core subpath:

import {
  generateApplyPreflights,
  prepareApplyUtilities,
  resolveApplyTokens,
  resolveCssFunction,
  resolveScreenQuery,
} from "@teacss/directives/core";

Core helpers do not mutate a stylesheet. The adapter supplies its AST and source operations. When an integration splices an entry, native @charset and hoisted @import rules stay before generated content. After resolving all applies, pass their flattened utility payloads to generateApplyPreflights(generator, generated, filename) and append its CSS at the stylesheet's top level. It preserves configured CSS layers and keeps dependency state local to that stylesheet. Pass the filename so conventional .module.css stylesheets keep generated theme selectors global while author selectors remain local.

Pre-1.0. Applications should normally use a build adapter.