Errors

A bad value fails in the types, where the call is, and again at build time with the file and the place of the call, so the Vite overlay points at it. The types catch most of it.

import * as import csscss from "cssints" with { type: "cssints" };
import csscss.const padding: <readonly ["1rem", "solid"]>(parts_0: "1rem", parts_1: "padding: unexpected \"solid\" in \"1rem solid\", grammar <'padding-top'>{1,4}") => css.Style
`<'padding-top'>{1,4}`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/padding)padding("1rem", "solid"); // error: not a padding value
Argument of type '"solid"' is not assignable to parameter of type '"padding: unexpected \"solid\" in \"1rem solid\", grammar <'padding-top'>{1,4}"'.
import csscss.const width: <readonly [4]>(parts_0: "width: unexpected \"4\" in \"4\", grammar auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>") => css.Style
`auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/width)width(4); // error: a bare number is a length only in spacing properties
Argument of type '4' is not assignable to parameter of type '"width: unexpected \"4\" in \"4\", grammar auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>"'.
import csscss.
const flex: css.Layout
() => css.Chain<css.FlexMethods> (+1 overload)
The layout context: sets `display` and chains its container properties.flex().padding(4); // error: flex() does not chain padding
Property 'padding' does not exist on type 'Chain<FlexMethods>'.
import csscss.
const flex: css.Layout
<readonly ["1"]>(parts_0: "1") => css.Style (+1 overload)
The shorthand property of this name: parts are checked against its mdn grammar. A plain style, it does not chain.flex("1").gap(2); // error: flex("1") is a plain style, it does not chain
Property 'gap' does not exist on type 'Style'.
import csscss.
const flex: css.Layout
<readonly ["sideways"]>(parts_0: "flex: unexpected \"sideways\" in \"sideways\", grammar none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]") => css.Style (+1 overload)
The shorthand property of this name: parts are checked against its mdn grammar. A plain style, it does not chain.flex("sideways"); // error: not a flex value
Argument of type '"sideways"' is not assignable to parameter of type '"flex: unexpected \"sideways\" in \"sideways\", grammar none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]"'.
import csscss.const padding: <readonly [css.Style]>(parts_0: "padding: unexpected \"⟨style⟩\" in \"⟨style⟩\", grammar <'padding-top'>{1,4}") => css.Style
`<'padding-top'>{1,4}`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/padding)padding(css.p(1)); // error: a style is not a value
Argument of type 'Style' is not assignable to parameter of type '"padding: unexpected \"⟨style⟩\" in \"⟨style⟩\", grammar <'padding-top'>{1,4}"'.
import csscss.items("center"); // error: there is no items
Property 'items' does not exist on type 'typeof import("packages/cssints/src/types")'.
import csscss.
const media: Condition
<Record<string, string>>(queries: {
    [x: string]: string;
}) => {
    [x: string]: css.QueryWrap;
} (+2 overloads)media("min-width > 40rem"); // error: a range needs parentheses
No overload matches this call.
  Overload 1 of 3, '(queries: { [x: string]: string; }): { [x: string]: QueryWrap; }', gave the following error.
    Argument of type 'string' is not assignable to parameter of type '{ [x: string]: string; }'.
  Overload 2 of 3, '(query: "@media: unexpected \">\" in \"min-width > 40rem\", grammar <media-query-list>"): QueryWrap', gave the following error.
    Argument of type '"min-width > 40rem"' is not assignable to parameter of type '"@media: unexpected \">\" in \"min-width > 40rem\", grammar <media-query-list>"'.

The build checks more than the types see:

import * as import csscss from "cssints" with { type: "cssints" };

import csscss.const p: <readonly [-1]>(parts_0: -1) => css.Style
`<'padding-top'>{1,4}`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/padding)p(-1); // padding: unexpected "-0.25rem" in "-0.25rem", expected <length-percentage [0,∞]>
import csscss.const width: <readonly ["calc(1px + 2s)"]>(parts_0: "calc(1px + 2s)") => css.Style
`auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/width)width("calc(1px + 2s)"); // width: unexpected "calc(1px" ... (cannot add length and time)
import csscss.
const supports: Condition
<"(display: grdi)">(query: "(display: grdi)") => css.Wrap (+2 overloads)supports("(display: grdi)"); // @supports: unexpected "grdi" in "(display: grdi)", expected <supports-in-parens>

• A bad argument of a CSS function is named (not calc and the other math functions), as the types name it: light-dark(): unexpected "1px" in "light-dark(white, 1px)", expected <light-dark()> (argument 2); a call that ends too soon says (after argument 1), one argument too many (argument 3). The build finds it as the types do, by prefixes with a var() standing for the rest, only when the call is already an error. The error is located at the site, the css.* call that holds the function call: a site knows its own offset, not those of the arguments inside it (a nested call is part of its site).
• A value that a browser in your browserslist does not support is a warning, not an error: cursor: pointer warns for iOS Safari. A token or theme value is checked the same way (see Tokens). The browserslist is the BROWSERSLIST variable, else the standard config looked up from Vite's root and upward ("browserslist" in package.json, .browserslistrc, with the section of BROWSERSLIST_ENV, NODE_ENV or production), else defaults. Each evaluation checks with the targets of its own build, so two servers of two roots in one process (a tool, a test) each warn for their own (2026-10-09, cssints-p3d2). targets and cssTarget of cssints/vite are computed when vite.config.ts imports them, before the root is known, so they read the config of process.cwd(): the same when Vite runs from the app's directory (see the README).
• A warning is located and said once per file per build (2026-10-09, cssints-p3d2). Vite gets it at the css.* call that made it (loc: the file, line and column, and a code frame), as an error. A build says each warning once per file of its site, property and BCD feature: two files that use lineClamp(3) give two warnings, each at its call; a module evaluated again (every module that imports it runs it) says nothing new. A dev server has no end, so a warning is said again when the file of its site is edited and the modules that run it are transformed again, and not on the update of an unrelated module. A tool that wants every warning of a transform calls api.forgetWarnings(files?) of the plugin first (the files' warnings, or all): @cssints/mcp's compile does.
• No warning for what LightningCSS lowers. The build runs the sheet through LightningCSS with those targets, which gives color: oklch(…) a fallback (color: #db4aa7; color: lab(…)), prefixes backdrop-filter and folds a static round(). When a value warns, cssints asks LightningCSS: it transforms x{prop: value} (:root{--x: value} for a token value) for the targets that lack the feature, and the warning is dropped if the feature is gone from the first declaration of the output. It stays for what LightningCSS leaves: a var() inside the value (oklch(from var(--x) l c h), color-mix(in oklab, var(--x), …)), a property it cannot prefix (text-wrap, line-clamp), and an inline style() or token.set() value, which never go through it. An @property initial value is not lowered by it either, but the engine writes the lowered form itself ("Fallbacks for older targets" under Themes). One transform per distinct value that already warns, cached per value and targets.
• Clamping text to N lines is the WebKit box, in every engine today: display("-webkit-box") (the display grammar takes -webkit-box and -webkit-inline-box), WebkitBoxOrient("vertical") and WebkitLineClamp(N), with overflow("hidden"). The three are quiet: BCD files them under prefixed standard names, which the support lookup does not follow. LightningCSS passes them through and adds nothing. The standard lineClamp(N) (css-overflow-4) is a member too, and warns for the default targets: no engine ships it unprefixed (Chrome 154 rejects it) and LightningCSS does not prefix it.

import { const cn: (...styles: Style[]) => Stylecn, const display: Prop<"display">
`[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> | grid-lanes | inline-grid-lanes | <display-outside> || [ <display-inside> | math ]`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/display)display, const overflow: Prop<"overflow">
`[ visible | hidden | clip | scroll | auto ]{1,2}`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/overflow)overflow, const WebkitBoxOrient: Prop<"-webkit-box-orient">
`horizontal | vertical | inline-axis | block-axis`WebkitBoxOrient, const WebkitLineClamp: Prop<"-webkit-line-clamp">
`none | <integer [1,∞]>`. [MDN](https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp)WebkitLineClamp } from "cssints" with { type: "cssints" };

export const const clamp2: Styleclamp2 = function cn(...styles: Style[]): Stylecn(
	display<readonly ["-webkit-box"]>(parts_0: "-webkit-box"): Style
`[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> | grid-lanes | inline-grid-lanes | <display-outside> || [ <display-inside> | math ]`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/display)display("-webkit-box"),
	WebkitBoxOrient<readonly ["vertical"]>(parts_0: "vertical"): Style
`horizontal | vertical | inline-axis | block-axis`WebkitBoxOrient("vertical"),
	WebkitLineClamp<readonly [2]>(parts_0: 2): Style
`none | <integer [1,∞]>`. [MDN](https://developer.mozilla.org/docs/Web/CSS/-webkit-line-clamp)WebkitLineClamp(2),
	overflow<readonly ["hidden"]>(parts_0: "hidden"): Style
`[ visible | hidden | clip | scroll | auto ]{1,2}`. Chrome 1, Edge 12, Firefox 1, Safari 1, iOS 1, Android 18. [MDN](https://developer.mozilla.org/docs/Web/CSS/overflow)overflow("hidden"),
);

• Validity rules written only in prose are errors too (transition: none, opacity 1s, an unquoted font-family with a generic keyword inside a name).
• Keywords and function names are written in their canonical case, on purpose: color("RED") and rgb( as RGB( are errors, so each value has one spelling (completions and class names stay the same). The message says the spelling: color: unexpected "RED" in "RED" ("RED" is red in CSS; write "red"), expected <color>. The types say it for keywords (color("RED")); the build says it for function names too. The CSS-wide keywords inherit, initial, unset, revert and revert-layer are a value of every property, whatever its grammar: fontFamily("inherit") is fine.