@compiled/react
Version:
A familiar and performant compile time CSS-in-JS library for React.
30 lines • 1.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.cx = void 0;
const runtime_js_1 = require("../runtime.js");
/**
* ## CX
*
* Use in conjunction with the {@link XCSSProp} to concatenate and conditionally apply
* declared styles. Can only be used with the `cssMap()` and {@link XCSSProp} APIs.
*
* @example
* ```
* const styles = cssMap({
* text: { color: 'var(--ds-text)' },
* primary: { color: 'var(--ds-text-brand)' },
* });
*
* <Component xcss={cx(isPrimary && styles.text, !isPrimary && styles.primary)} />
* ```
*/
const cx = (...styles) => {
// At runtime TStyles is resolved down to strings, but not at compile time.
// We circumvent the type system here because of that.
const actualStyles = styles;
// The output should be a union type of passed in styles. This ensures the call
// site of xcss prop can raise violations when disallowed styles have been passed.
return (0, runtime_js_1.ax)(actualStyles);
};
exports.cx = cx;
//# sourceMappingURL=index.js.map