Repository navigation
onsystem@0.9.1
onsystem 0.9.1 reads tokens the way your stylesheets apply them, and no longer slows down on very long values.
- shadcn/ui's Tailwind v4 codemod theme (
--color-destructive: hsl(var(--destructive))) is read as the tokendestructive, sotext-red-500is fixed totext-destructive, nottext-[hsl(var(--destructive))]. Stylesheets imported one after another apply in CSS order, and whencomponents.jsonnames a stylesheet in another package (as cal.com's does), the app's own stylesheet is read first. - A Tailwind v3 config keeps Tailwind's default radius scale:
rounded-[12px]is fixed torounded-xl, notrounded-lg. In a v3 project with no radius tokens of its own,no-hardcoded-radiusnow runs against that scale, socheckcan report warnings it did not before. - A class with an arbitrary length thousands of digits long (
p-[999…9x]) took about 25 s to check at 100,000 characters, incheck,check_ui, the ESLint plugin and the Action; it now takes a few milliseconds. Avar()whose fallback holdscalc()or anothervar()now has the fallback's value.onsystem export --format dtcgkeeps a__proto__token and no longer adds properties to every object in the process. - Thanks to @Aaqibhafeezkhan (
get_componentexplains when a project has no components, #234) and @Golden007-prog (a failed warning cap is explained in every CLI output format, and JSON and SARIF stay parseable, #235).
Patch Changes
-
#234
643bc6fThanks @Aaqibhafeezkhan! - Explain when a project has no design-system components available. -
#235
65f91f5Thanks @Golden007-prog! - Explain a failed warning cap in every CLI output format: a GitHub error annotation, or a message on stderr that leaves JSON and SARIF output parseable. -
#232
a965061- A long length or color no longer slows onsystem down. A class with an arbitrary length thousands of digits long, such asp-[999…9x], took a second to check at 20,000 characters and about 25 seconds at 100,000, incheck, the MCPcheck_uitool, the ESLint plugin and the GitHub Action: the pattern that reads a length tried every way to split the digits. It now takes a few milliseconds. The same goes for token values: a length, avar()with a fallback, or bare HSL or RGB channels in the design system's stylesheets or Tailwind config, and typography, spacing and radius values inonsystem export. Avar()whose fallback holdscalc()or anothervar()now has the fallback's value, insidecalc()too:calc(2 * var(--gap, var(--space-2)))is read as a length, andcalc(var(--gap, var(--space-2)) + 1px)no longer drops the+ 1px.onsystem export --format dtcgkeeps a token whose path has a__proto__part, such as--color-__proto__, under a"__proto__"key of its group. It was left out, and a name such as--__proto__.pollutedadded apollutedproperty to every object in the process that ran the export. -
#201
ee231a8- Tokens are read the way the stylesheets and the Tailwind config apply them, in four cases where they were not.- An
@themecolor that wraps a variable of bare channels, as shadcn/ui's Tailwind v4 codemod leaves a v3 theme (--color-destructive: hsl(var(--destructive))with--destructive: 0 84.2% 60.2%), is the tokendestructivewith its class. The class and the color were on two tokens, so every fix was an arbitrary value:text-red-500was fixed totext-[hsl(var(--destructive))], and now totext-destructive.rgb(var(--x))over RGB channels counts too. An@themevalue that names another variable takes its color: with--color-brand: var(--color-blue-600),bg-blue-600suggestsbg-brand. - Stylesheets imported one after another apply as CSS applies them: a later
@importoverrides an earlier one, and the importing stylesheet's own rules override both. With@import "./base.css"; @import "./brand.css";,--primarycame from base.css, sobg-[[#171717](https://github.com/dgesteves/onsystem/issues/171717)]was fixed tobg-primary, which renders brand.css's color. - A Tailwind v3 config that extends
borderRadius(as shadcn/ui's does, withlg,mdandsm), or sets none, keeps Tailwind's default scale:rounded-[12px]is fixed torounded-xl, notrounded-lg(8px), androunded-b-[24px]torounded-b-3xl, notrounded-b-full. Atheme.borderRadiusoutsideextendreplaces the scale, unless it spreadsdefaultTheme.borderRadiusinto it. No default step is added when the scale cannot be read: a step of the config has no known size, because no stylesheet read sets the variable it uses (var(--radius)); the config takes a preset, a theme or the whole config from an installed package (presets: [require("@acme/preset")],theme: require("@acme/theme"),module.exports = require("@acme/tailwind-config"),{ ...base, content }), which may replace the scale; orborderRadiusis set from a variable, a function or a spread other thandefaultTheme.borderRadius. Tailwind's own modules (tailwindcss/defaultConfig) do not count. Athemethat is a module of the project, or spreads one (theme: require("./theme"),theme: { ...require("./theme") }), replaces the scale with its ownborderRadius, andpresets: []leaves out Tailwind's default config, so neither keeps the default steps unless atheme.borderRadiusspreads them back in. Nor is one added in a Tailwind v4 project that reads the config through@config, which has v4's scale. In a Tailwind v3 project with no radius tokens of its own, such as Dub,no-hardcoded-radiusnow runs against that scale, socheckcan report warnings it did not before. - When
components.jsonnames a stylesheet in another package, as cal.com's names coss/ui's, zero config also reads the app's own stylesheet first (styles/globals.css,app/globals.cssand the others it looks for withoutcomponents.json), and the named one through it when the app's stylesheet imports it. cal.com's own tokens (text-subtle,bg-emphasis,rounded-cal) were not read, and color fixes named coss/ui's tokens instead. When the app's stylesheet imports Tailwind v4, the spacing and radius rules use Tailwind's scale, as in any Tailwind v4 app.
- An