@compiled/react
Version:
A familiar and performant compile time CSS-in-JS library for React.
102 lines • 4.96 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyleContainerProvider = void 0;
const react_1 = __importDefault(require("react"));
const dev_warnings_js_1 = require("./dev-warnings.js");
const is_server_environment_js_1 = require("./is-server-environment.js");
const sheet_js_1 = __importStar(require("./sheet.js"));
const style_cache_js_1 = require("./style-cache.js");
const style_container_js_1 = require("./style-container.js");
Object.defineProperty(exports, "StyleContainerProvider", { enumerable: true, get: function () { return style_container_js_1.StyleContainerProvider; } });
/**
* Returns true if the CSS sheet string is a non-atomic rule generated by
* `cssMapScoped`. Non-atomic rules use the `cc-` class prefix.
* Uses `includes` rather than `startsWith` to also match at-rule-wrapped
* non-atomic rules like `@media{.cc-xxx{...}}` or `@container{.cc-xxx{...}}`.
*/
const isNonAtomicSheet = (sheet) => sheet.includes('.cc-');
function Style(props) {
const inserted = (0, style_cache_js_1.useCache)();
const styleContainer = (0, style_container_js_1.useStyleContainer)();
if (process.env.NODE_ENV === 'development') {
props.children.forEach(dev_warnings_js_1.analyzeCssInDev);
}
if (props.children.length) {
if ((0, is_server_environment_js_1.isServerEnvironment)()) {
const bucketedSheets = {};
let hasSheets = false;
for (let i = 0; i < props.children.length; i++) {
const sheet = props.children[i];
if (inserted[sheet]) {
continue;
}
else {
inserted[sheet] = true;
hasSheets = true;
}
// Non-atomic rules (cc- prefix from cssMapScoped) must go into
// the catch-all bucket to preserve source-order cascade.
const bucketName = isNonAtomicSheet(sheet) ? '' : (0, sheet_js_1.getStyleBucketName)(sheet);
bucketedSheets[bucketName] = (bucketedSheets[bucketName] || '') + sheet;
}
if (!hasSheets) {
return null;
}
return (react_1.default.createElement("style", { "data-cmpld": true, nonce: props.nonce, dangerouslySetInnerHTML: {
__html: sheet_js_1.styleBucketOrdering.map((bucket) => bucketedSheets[bucket]).join(''),
} }));
}
else {
const opts = styleContainer
? Object.assign(Object.assign({}, props), { container: styleContainer.container, cacheKey: styleContainer.cacheKey }) : props;
for (let i = 0; i < props.children.length; i++) {
const sheet = props.children[i];
// When a container is active, namespace the cache key so this container's
// inserted records are tracked independently from the main document cache.
const cacheKey = styleContainer ? `${styleContainer.cacheKey}:${sheet}` : sheet;
if (inserted[cacheKey]) {
continue;
}
inserted[cacheKey] = true;
// Non-atomic rules (cc- prefix from cssMapScoped) must bypass the
// shorthand bucket sorting logic — they contain multiple declarations per rule
// and must preserve source-order cascade within the catch-all bucket.
if (isNonAtomicSheet(sheet)) {
(0, sheet_js_1.insertNonAtomicRule)(sheet, opts);
}
else {
(0, sheet_js_1.default)(sheet, opts);
}
}
}
}
return null;
}
exports.default = Style;
//# sourceMappingURL=style.js.map