Skip to content

v6.11.0

Latest

Choose a tag to compare

@58bits 58bits released this 25 Oct 04:45
· 1 commit to develop since this release

Highlights

  • @byline/ui: Byline now has a documented CSS layer contract. A Tailwind utility applied directly to an element now overrides the kit's component, typography and theme declarations for the same property on that element. Every kit stylesheet now starts by declaring the full layer order: base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities. The new overrides layer is the slot for host brand tokens, area themes and restyles of kit components. byline-utilities now sits below Tailwind's utilities, so a fresh installation gets the right order no matter which stylesheet loads first. Kit component styles moved into a byline-components.primitives sublayer. The screen-reader utility (.sr-only) and the .byline-ui isolation rule are now layered as well.
  • @byline/ui: New @byline/ui/css-layers entry point. It exports BYLINE_LAYER_ORDER, the order statement for an inline <style> at the top of the document head, and bylineLayerOrder(), a PostCSS plugin that adds the statement to the start of every stylesheet before your bundler hashes it. Hosts need both. React can move production stylesheet links above inline styles, while Vite injects CSS during development. Whichever stylesheet first names a layer fixes that layer's position for good. The entry point imports nothing from React at runtime. postcss is an optional peer dependency, needed only for the plugin.
  • @byline/admin, @byline/host-tanstack-start, @byline/richtext-lexical, @byline/ai, @byline/i18n: CMS styles are now layered. The admin fields and forms, the admin shell screens, the Lexical editor and its dialogs, the AI plugin and the language menu used to ship unlayered CSS. Their styles now sit in a byline-components.cms sublayer, which ranks above the kit's primitives, so the CMS still restyles kit components as before. Host overrides and direct utilities now rank above both. The two !important checkbox-width workarounds were removed because layering makes them unnecessary.
  • @byline/ui: Guard tests protect the contract. The package's tests now check that every package stylesheet declares the full order before any rule or import, that ordinary declarations are layered and don't use !important (with an explicit, limited list of exceptions), and that built stylesheets keep the order after bundling. CI runs them.

Bug Fixes

  • @byline/admin: Fixed a type error in the form layout style test that broke the package's declaration build.

Chores

  • monorepo: The example webapp now uses the shared layer order through @byline/ui/css-layers, and its public typography overrides are scoped away from CMS routes. It also has a standalone browser fixture (pnpm --filter @byline/webapp test:css-browser) for checking the contract by hand.

Breaking Changes

  • @byline/admin, @byline/host-tanstack-start, @byline/richtext-lexical, @byline/ai, @byline/i18n: breaking: Unlayered host CSS now beats CMS styles regardless of specificity. Before, CMS rules were unlayered and competed with host CSS on specificity. They're now layered, so any host rule left outside a layer wins over them. A global a, button, typography or form rule in a host stylesheet can therefore change CMS controls, the document editor and dialogs opened as portals. In the other direction, Tailwind utilities on CMS elements now win where module CSS used to.

    Required action before upgrading: audit every host stylesheet, including CSS modules, and move ordinary rules into named layers: site components in components, restyles of kit components in overrides, and public brand tokens and global typography scoped to your public theme context so they don't reach the CMS. Render BYLINE_LAYER_ORDER at the top of <head> and register bylineLayerOrder() in css.postcss.plugins. Then compare public pages, CMS screens, dialogs and editor fields in light and dark modes. Installing the packages alone doesn't complete the migration. See Upgrading existing hosts.

All other @byline/* packages bumped to 6.11.0 in lockstep with no behavioural changes this cycle.