Basic usage · cssints

import { const cx: (...a: css.ClassValue[]) => stringcx } from "cssints";
import { const alignItems: css.Prop<"align-items">`normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ] | anchor-center`. Chrome 29, Edge 12, Firefox 20, Safari 9, iOS 9, Android 29. [MDN](https://developer.mozilla.org/docs/Web/CSS/align-items)alignItems, const justifyContent: css.Prop<"justify-content">`normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]`. Chrome 29, Edge 12, Firefox 20, Safari 9, iOS 9, Android 29. [MDN](https://developer.mozilla.org/docs/Web/CSS/justify-content)justifyContent, const p: css.Prop<"padding">`<'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 } from "cssints" with { type: "cssints" };
import * as import csscss from "cssints" with { type: "cssints" };

export const const A: () => anyA = () => (
	<IntrinsicElements[string]: anydiv className?: string | undefinedclassName={function cx(...a: css.ClassValue[]): stringcx(import csscss.const display: <readonly ["flex"]>(parts_0: "flex") => css.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("flex"), alignItems<readonly ["center"]>(parts_0: "center"): css.Style`normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ] | anchor-center`. Chrome 29, Edge 12, Firefox 20, Safari 9, iOS 9, Android 29. [MDN](https://developer.mozilla.org/docs/Web/CSS/align-items)alignItems("center"), justifyContent<readonly ["center"]>(parts_0: "center"): css.Style`normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]`. Chrome 29, Edge 12, Firefox 20, Safari 9, iOS 9, Android 29. [MDN](https://developer.mozilla.org/docs/Web/CSS/justify-content)justifyContent("center"), const prop: booleanprop && p<readonly [4]>(parts_0: 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)p(4))}>Hello, world!</IntrinsicElements[string]: anydiv>
);
// or with a layout context
export const const B: () => anyB = () => (
	<IntrinsicElements[string]: anydiv className?: string | undefinedclassName={function cx(...a: css.ClassValue[]): stringcx(import csscss.const flex: css.Layout
() => css.Chain<css.FlexMethods> (+1 overload)The layout context: sets `display` and chains its container properties.flex().alignItems: <readonly ["center"]>(parts_0: "center") => css.Chain<css.FlexMethods>`normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ] | anchor-center`. Chrome 29, Edge 12, Firefox 20, Safari 9, iOS 9, Android 29. [MDN](https://developer.mozilla.org/docs/Web/CSS/align-items)alignItems("center").justifyContent: <readonly ["center"]>(parts_0: "center") => css.Chain<css.FlexMethods>`normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]`. Chrome 29, Edge 12, Firefox 20, Safari 9, iOS 9, Android 29. [MDN](https://developer.mozilla.org/docs/Web/CSS/justify-content)justifyContent("center"), const prop: booleanprop && import csscss.const p: <readonly [4]>(parts_0: 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)p(4))}>Hello, world!</IntrinsicElements[string]: anydiv>
);

Output for A:

import { cx } from "cssints";

export const A = () => <div className={cx("_1s47490", "_1ob5z5m", "_cn8dee", prop && "_lwugp7")}>Hello, world!</div>;

@layer _.k, _.a, _.b, _.c, _.d, _.e;
@layer _.a {
	._lwugp7 { padding: 1rem; }
	._1ob5z5m { align-items: center; }
	._1s47490 { display: flex; }
	._cn8dee { justify-content: center; }
}

The class names are a hash of the declaration (and its conditions), so the same declaration gives the same class in every file.
One sheet. All rules are in virtual:cssints.css, each once, sorted by layer, then condition, then shorthand before longhand (border before border-top, counted from Chrome's own expansion of each shorthand), then class name. So a longhand wins over a shorthand that contains it, whatever the order of the arguments: cn(pl(2), p(4)) keeps padding-left: 0.5rem.
cn() keeps the later of the same property. cn(p(4), p(2)) is p(2): the earlier declaration is dropped at build time (also for an alias: wordWrap is overflowWrap). Under different conditions both stay, because they are in different layers: cn(md(p(6)), p(2)). Two properties that overlap without one containing the other are a build error, because the sheet cannot order them by the arguments: cn(borderTop("1px solid red"), borderColor("blue")) both set border-top-color; so do a physical and a logical side (marginLeft and marginInline, width and inlineSize), since which physical side a logical one is depends on the writing mode. A logical property inside a physical shorthand that sets every side is contained, not overlapping: cn(border(...), borderInline(...)) is fine, and borderInline wins. Styles that only meet in cx() in the browser are not seen at build time.
A layout context gives one string: flex().alignItems("center") is "_1s47490 _1ob5z5m".
Also exported: css (the namespace as a value) and cn, cv, firstThatWorks, media, container, supports, attr, within, group, global, token, style, createTokens, createGlobalTheme, check. cx is the only runtime export.