@linaria/react
Version:
Blazing fast zero-runtime CSS in JS library
114 lines • 4.17 kB
JavaScript
// src/styled.ts
import validAttr from "@emotion/is-prop-valid";
import { createElement, forwardRef } from "react";
import { cx } from "@linaria/core";
var isCapital = (ch) => ch.toUpperCase() === ch;
var filterKey = (keys) => (key) => keys.indexOf(key) === -1;
var omit = (obj, keys) => {
const res = {};
Object.keys(obj).filter(filterKey(keys)).forEach((key) => {
res[key] = obj[key];
});
return res;
};
function filterProps(asIs, props, omitKeys) {
const filteredProps = omit(props, omitKeys);
if (!asIs) {
const interopValidAttr = typeof validAttr === "function" ? { default: validAttr } : validAttr;
Object.keys(filteredProps).forEach((key) => {
if (!interopValidAttr.default(key)) {
delete filteredProps[key];
}
});
}
return filteredProps;
}
var warnIfInvalid = (value, componentName) => {
if (process.env.NODE_ENV !== "production") {
if (typeof value === "string" || // eslint-disable-next-line no-self-compare,no-restricted-globals
typeof value === "number" && isFinite(value)) {
return;
}
const stringified = typeof value === "object" ? JSON.stringify(value) : String(value);
console.warn(
`An interpolation evaluated to '${stringified}' in the component '${componentName}', which is probably a mistake. You should explicitly cast or transform the value to a string.`
);
}
};
var idx = 0;
function styled(tag) {
let mockedClass = "";
if (process.env.NODE_ENV === "test") {
mockedClass += `mocked-styled-${idx++}`;
if (tag && tag.__wyw_meta && tag.__wyw_meta.className) {
mockedClass += ` ${tag.__wyw_meta.className}`;
}
}
return (options) => {
if (process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test") {
if (Array.isArray(options)) {
throw new Error(
'Using the "styled" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly. See https://github.com/callstack/linaria#setup'
);
}
}
const render = (props, ref) => {
const { as: component = tag, class: className = mockedClass } = props;
const shouldKeepProps = options.propsAsIs === void 0 ? !(typeof component === "string" && component.indexOf("-") === -1 && !isCapital(component[0])) : options.propsAsIs;
const filteredProps = filterProps(shouldKeepProps, props, [
"as",
"class"
]);
filteredProps.ref = ref;
filteredProps.className = options.atomic ? cx(options.class, filteredProps.className || className) : cx(filteredProps.className || className, options.class);
const { vars } = options;
if (vars) {
const style = {};
for (const name in vars) {
const variable = vars[name];
const result = variable[0];
const unit = variable[1] || "";
const value = typeof result === "function" ? result(props) : result;
warnIfInvalid(value, options.name);
style[`--${name}`] = `${value}${unit}`;
}
const ownStyle = filteredProps.style || {};
const keys = Object.keys(ownStyle);
if (keys.length > 0) {
keys.forEach((key) => {
style[key] = ownStyle[key];
});
}
filteredProps.style = style;
}
if (tag.__wyw_meta && tag !== component) {
filteredProps.as = component;
return createElement(tag, filteredProps);
}
return createElement(component, filteredProps);
};
const Result = forwardRef ? forwardRef(render) : (
// React.forwardRef won't available on older React versions and in Preact
// Fallback to a innerRef prop in that case
(props) => {
const rest = omit(props, ["innerRef"]);
return render(rest, props.innerRef);
}
);
Result.displayName = options.name;
Result.__wyw_meta = {
className: options.class || mockedClass,
extends: tag
};
return Result;
};
}
var styled_default = process.env.NODE_ENV !== "production" ? new Proxy(styled, {
get(o, prop) {
return o(prop);
}
}) : styled;
export {
styled_default as styled
};
//# sourceMappingURL=index.mjs.map