@react-spectrum/s2
Version:
Spectrum 2 UI components in React
606 lines (597 loc) • 30.3 kB
JavaScript
var $3afa9c98bb7e1054$exports = require("./properties.cjs");
var $1oGEq$path = require("path");
var $1oGEq$fs = require("fs");
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
$parcel$export(module.exports, "ArbitraryProperty", () => $1382b9520f7f9773$export$d03475ad9df06cd2);
$parcel$export(module.exports, "MappedProperty", () => $1382b9520f7f9773$export$965169194d2485f7);
$parcel$export(module.exports, "PercentageProperty", () => $1382b9520f7f9773$export$6bff0717a72a8669);
$parcel$export(module.exports, "SizingProperty", () => $1382b9520f7f9773$export$8c6b4dc3755476bb);
$parcel$export(module.exports, "ExpandedProperty", () => $1382b9520f7f9773$export$1b6028cfca42adca);
$parcel$export(module.exports, "parseArbitraryValue", () => $1382b9520f7f9773$export$22a8270399010c94);
$parcel$export(module.exports, "createTheme", () => $1382b9520f7f9773$export$25d302a5b900a763);
/*
* Copyright 2024 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
var $1382b9520f7f9773$var$$parcel$__dirname = $1oGEq$path.resolve(__dirname, "..");
// Postfix all class names with version for now.
const $1382b9520f7f9773$var$json = JSON.parse((0, ($parcel$interopDefault($1oGEq$fs))).readFileSync($1382b9520f7f9773$var$$parcel$__dirname + '/../package.json', 'utf8'));
const $1382b9520f7f9773$var$POSTFIX = $1382b9520f7f9773$var$json.version.includes('nightly') ? $1382b9520f7f9773$var$json.version.match(/-nightly-(.*)/)[1] : $1382b9520f7f9773$var$json.version.replace(/[0.]/g, '');
class $1382b9520f7f9773$export$d03475ad9df06cd2 {
constructor(property, toCSS){
this.property = property;
this.toCSS = toCSS || ((value)=>String(value));
}
get cssProperties() {
return [
this.property
];
}
toCSSValue(value) {
return this.toCSS(value);
}
toCSSProperties(customProperty, value) {
return $1382b9520f7f9773$var$mapConditionalValue(value, (value)=>[
{
[customProperty || this.property]: String(value)
}
]);
}
}
class $1382b9520f7f9773$export$965169194d2485f7 extends $1382b9520f7f9773$export$d03475ad9df06cd2 {
constructor(property, mapping){
super(property);
this.mapping = mapping;
}
toCSSValue(value) {
if (Array.isArray(this.mapping)) {
if (!this.mapping.includes(String(value))) throw new Error('Invalid style value: ' + value);
return value;
} else {
let res = this.mapping[String(value)];
if (res == null) throw new Error('Invalid style value: ' + value);
return res;
}
}
}
class $1382b9520f7f9773$export$40ae678e65d951f2 extends $1382b9520f7f9773$export$965169194d2485f7 {
toCSSValue(value) {
let [color, opacity] = value.split('/');
return $1382b9520f7f9773$var$mapConditionalValue(this.mapping[color], (value)=>{
return opacity ? `rgb(from ${value} r g b / ${opacity}%)` : value;
});
}
}
class $1382b9520f7f9773$export$6bff0717a72a8669 extends $1382b9520f7f9773$export$965169194d2485f7 {
constructor(property, mapping){
super(property, mapping);
}
toCSSValue(value) {
if (typeof value === 'string' && /^-?\d+(?:\.\d+)?(%|vw|svw|dvw|vh|svh|dvh|vmin|svmin|dvmin|vmax|svmax|dvmax|cqw|cqh|cqmin|cqmax)$/.test(value)) return value;
return super.toCSSValue(value);
}
}
class $1382b9520f7f9773$export$8c6b4dc3755476bb extends $1382b9520f7f9773$export$6bff0717a72a8669 {
constructor(property, mapping, numberToCSS){
super(property, mapping);
this.numberToCSS = numberToCSS;
}
toCSSValue(value) {
if (typeof value === 'number') return value === 0 ? '0px' : this.numberToCSS(value);
return super.toCSSValue(value);
}
}
class $1382b9520f7f9773$export$1b6028cfca42adca {
constructor(properties, expand, mapping){
this.cssProperties = properties;
this.expand = expand;
if (mapping instanceof $1382b9520f7f9773$export$965169194d2485f7) this.mapping = mapping;
else if (mapping) this.mapping = new $1382b9520f7f9773$export$965169194d2485f7(properties[0], mapping);
else this.mapping = null;
}
toCSSValue(value) {
if (!this.mapping) return value;
return this.mapping.toCSSValue(value);
}
toCSSProperties(customProperty, value) {
if (customProperty) throw new Error('Style properties that expand into multiple CSS properties cannot be set as CSS variables.');
return $1382b9520f7f9773$var$mapConditionalValue(value, (value)=>[
this.expand(value)
]);
}
}
function $1382b9520f7f9773$var$mapConditionalValue(value, fn) {
if (typeof value === 'object' && !Array.isArray(value)) {
let res = {};
for(let condition in value)res[condition] = $1382b9520f7f9773$var$mapConditionalValue(value[condition], fn);
return res;
} else return fn(value);
}
function $1382b9520f7f9773$var$mapConditionalShorthand(value, fn) {
if (typeof value === 'object') {
let res = {};
for(let condition in value){
let properties = $1382b9520f7f9773$var$mapConditionalShorthand(value[condition], fn);
for(let property in properties){
res[property] ??= {};
res[property][condition] = properties[property];
}
}
return res;
} else return fn(value);
}
function $1382b9520f7f9773$export$22a8270399010c94(value) {
if (typeof value === 'string' && value.startsWith('--')) return `var(${value})`;
else if (typeof value === 'string' && value[0] === '[' && value[value.length - 1] === ']') return value.slice(1, -1);
else if (typeof value === 'string' && (/^(var|calc|min|max|clamp|round|mod|rem|sin|cos|tan|asin|acos|atan|atan2|pow|sqrt|hypot|log|exp|abs|sign)\(.+\)$/.test(value) || /^(inherit|initial|unset)$/.test(value))) return value;
}
function $1382b9520f7f9773$var$shortCSSPropertyName(property) {
return $3afa9c98bb7e1054$exports.properties[property] ?? $1382b9520f7f9773$var$generateArbitraryValueSelector(property, true);
}
function $1382b9520f7f9773$var$classNamePrefix(property, cssProperty) {
let className = $3afa9c98bb7e1054$exports.properties[cssProperty];
if (className && property === '--' + className) return '-' + className + '_-';
if (className && !property.startsWith('--')) return className;
return '-' + $1382b9520f7f9773$var$generateArbitraryValueSelector(property, true) + '-';
}
function $1382b9520f7f9773$export$25d302a5b900a763(theme) {
let properties = new Map(Object.entries(theme.properties).map(([k, v])=>{
if (!Array.isArray(v) && v.cssProperties) return [
k,
v
];
return [
k,
new $1382b9520f7f9773$export$965169194d2485f7(k, v)
];
}));
let dependencies = new Set();
let hasConditions = false;
return function style(style, allowedOverrides) {
// Check if `this` is undefined, which means style was not called as a macro but as a normal function.
// We also check if this is globalThis, which happens in non-strict mode bundles.
// Also allow style to be called as a normal function in tests.
// @ts-ignore
// eslint-disable-next-line
if ((this == null || this === globalThis) && process.env.NODE_ENV !== 'test') throw new Error('The style macro must be imported with {type: "macro"}.');
// Generate rules for each property.
let rules = new Map();
let values = new Map();
dependencies.clear();
let usedPriorities = 0;
let setRules = (key, value)=>{
usedPriorities = Math.max(usedPriorities, value[0]);
rules.set(key, new $1382b9520f7f9773$var$GroupRule(value[1]));
};
hasConditions = false;
for(let key in style){
let value = style[key];
let themeProperty = key;
values.set(key, value);
// Get the type of custom properties in the theme.
if (key.startsWith('--')) {
themeProperty = value.type;
value = value.value;
}
// Expand shorthands to longhands so that merging works as expected.
if (theme.shorthands[key]) {
let shorthand = theme.shorthands[key];
if (typeof shorthand === 'function') {
let expanded = $1382b9520f7f9773$var$mapConditionalShorthand(value, shorthand);
for(let k in expanded){
let v = expanded[k];
values.set(k, v);
setRules(k, compileValue(k, k, v));
}
} else for (let prop of shorthand){
values.set(prop, value);
setRules(prop, compileValue(prop, prop, value));
}
} else if (themeProperty in theme.properties) setRules(key, compileValue(key, themeProperty, value));
}
// For properties referenced by self(), rewrite the declarations to assign
// to an intermediary custom property so we can access the value.
for (let dep of dependencies){
let value = values.get(dep);
if (value != null) {
if (!(dep in theme.properties)) throw new Error(`Unknown dependency ${dep}`);
let prop = properties.get(dep);
let name = `--${$1382b9520f7f9773$var$shortCSSPropertyName(prop.cssProperties[0])}`;
// Could potentially use @property to prevent the var from inheriting in children.
setRules(name, compileValue(name, dep, value));
setRules(dep, compileValue(dep, dep, name));
}
}
dependencies.clear();
let css = '';
// Declare layers for each priority ahead of time so the order is always correct.
css += '@layer ';
let first = true;
for(let i = 0; i <= usedPriorities; i++){
if (first) first = false;
else css += ', ';
css += $1382b9520f7f9773$var$layerName($1382b9520f7f9773$var$generateName(i, true));
}
css += ';\n\n';
// If allowed overrides are provided, generate code to match the input override string and include only allowed classes.
// Also generate a variable for each overridable property that overlaps with the style definition. If those are defined,
// the defaults from the style definition are omitted.
let allowedOverridesSet = new Set();
let js = 'let rules = " ";\n';
if (allowedOverrides?.length) {
for (let property of allowedOverrides){
let shorthand = theme.shorthands[property];
let props = Array.isArray(shorthand) ? shorthand : [
property
];
for (let property of props){
if (property.startsWith('--')) {
allowedOverridesSet.add(property);
continue;
}
let prop = properties.get(property);
if (!prop) throw new Error(`Invalid property ${property} in allowedOverrides`);
for (let property of prop.cssProperties)allowedOverridesSet.add(property);
}
}
let loop = '';
for (let property of rules.keys()){
let prop = properties.get(property);
if (prop) {
for (let property of prop.cssProperties)if (property && allowedOverridesSet.has(property)) {
let selector = $1382b9520f7f9773$var$classNamePrefix(property, property);
let p = property.replace('--', '__');
js += `let ${p} = false;\n`;
loop += ` if (p[1] === ${JSON.stringify(selector)}) ${p} = true;\n`;
}
} else if (property.startsWith('--') && allowedOverridesSet.has(property)) {
let selector = $1382b9520f7f9773$var$classNamePrefix(property, property);
let p = property.replace('--', '__');
js += `let ${p} = false;\n`;
loop += ` if (p[1] === ${JSON.stringify(selector)}) ${p} = true;\n`;
}
}
let regex = `/(?:^|\\s)(${[
...allowedOverridesSet
].map((p)=>$1382b9520f7f9773$var$classNamePrefix(p, p)).join('|')})[^\\s]+/g`;
if (loop) {
js += `let matches = (overrides || '').matchAll(${regex});\n`;
js += 'for (let p of matches) {\n';
js += loop;
js += ' rules += p[0];\n';
js += '}\n';
} else js += `rules += ((overrides || '').match(${regex}) || []).join('')\n`;
}
// Generate JS and CSS for each rule.
let isStatic = !(hasConditions || allowedOverrides);
let className = '';
let rulesByLayer = new Map();
let rootRule = new $1382b9520f7f9773$var$GroupRule([
...rules.values()
]);
if (isStatic) className += rootRule.getStaticClassName();
else js += rootRule.toJS(allowedOverridesSet) + '\n';
rootRule.toCSS(rulesByLayer);
for (let [layer, rules] of rulesByLayer){
css += `@layer ${$1382b9520f7f9773$var$layerName(layer)} {\n`;
css += rules.join('\n\n');
css += '}\n\n';
}
if (this && typeof this.addAsset === 'function') this.addAsset({
type: 'css',
content: css
});
if (isStatic) return className;
js += 'return rules;';
if (allowedOverrides) return new Function('props', 'overrides', js);
return new Function('props', js);
};
function compileValue(property, themeProperty, value) {
return conditionalToRules(value, 0, new Set(), new Set(), (value, priority, conditions, skipConditions)=>{
return compileRule(property, themeProperty, value, priority, conditions, skipConditions);
});
}
function conditionalToRules(value, parentPriority, currentConditions, skipConditions, fn) {
if (value && typeof value === 'object' && !Array.isArray(value)) {
let rules = [];
// Later conditions in parent rules override conditions in child rules.
let subSkipConditions = new Set([
...skipConditions,
...Object.keys(value)
]);
// Skip the default condition if we're already filtering by one of the other possible conditions.
// For example, if someone specifies `dark: 'gray-400'`, only include the dark version of `gray-400` from the theme.
let skipDefault = Object.keys(value).some((k)=>currentConditions.has(k));
let wasCSSCondition = false;
let priority = parentPriority;
for(let condition in value){
if (skipConditions.has(condition) || condition === 'default' && skipDefault) continue;
subSkipConditions.delete(condition);
let val = value[condition];
// If a theme condition comes after runtime conditions, create a new grouping.
// This makes the CSS class unconditional so it appears outside the `else` block in the JS.
// The @layer order in the generated CSS will ensure that it overrides classes applied by runtime conditions.
let isCSSCondition = condition in theme.conditions || /^[@:]/.test(condition);
if (!wasCSSCondition && isCSSCondition && rules.length) rules = [
new $1382b9520f7f9773$var$GroupRule(rules)
];
wasCSSCondition = isCSSCondition;
// Increment the current priority whenever we see a new CSS condition.
if (isCSSCondition) priority++;
// If this is a runtime condition, inherit the priority from the parent rule.
// Otherwise, use the current maximum of the parent and current priorities.
let rulePriority = isCSSCondition ? priority : parentPriority;
if (condition === 'default' || isCSSCondition || /^is[A-Z]/.test(condition) || /^allows[A-Z]/.test(condition)) {
let subConditions = currentConditions;
if (isCSSCondition) subConditions = new Set([
...currentConditions,
condition
]);
let [subPriority, subRules] = conditionalToRules(val, rulePriority, subConditions, subSkipConditions, fn);
rules.push(...compileCondition(currentConditions, condition, priority, subRules));
priority = Math.max(priority, subPriority);
} else if (val && typeof val === 'object' && !Array.isArray(val)) for(let key in val){
let [subPriority, subRules] = conditionalToRules(val[key], rulePriority, currentConditions, subSkipConditions, fn);
rules.push(...compileCondition(currentConditions, `${condition} === ${JSON.stringify(key)}`, priority, subRules));
priority = Math.max(priority, subPriority);
}
}
return [
priority,
rules
];
} else // @ts-ignore - broken in non-strict?
return fn(value, parentPriority, currentConditions, skipConditions);
}
function compileCondition(conditions, condition, priority, rules) {
if (condition === 'default' || conditions.has(condition)) return [
new $1382b9520f7f9773$var$GroupRule(rules)
];
if (condition in theme.conditions || /^[@:]/.test(condition)) {
// Conditions starting with : are CSS pseudo classes. Nest them inside the parent rule.
let prelude = theme.conditions[condition] || condition;
if (prelude.startsWith(':')) {
for (let rule of rules)rule.addPseudo(prelude);
return [
new $1382b9520f7f9773$var$GroupRule(rules, $1382b9520f7f9773$var$generateName(priority, true))
];
}
// Otherwise, wrap the rule in the condition (e.g. @media).
// Top level layer is based on the priority of the rule, not the condition.
// Also group in a sub-layer based on the condition so that lightningcss can more effectively deduplicate rules.
let layer = `${$1382b9520f7f9773$var$generateName(priority, true)}.${$3afa9c98bb7e1054$exports.conditions[theme.conditions[condition] || condition] || $1382b9520f7f9773$var$generateArbitraryValueSelector(condition, true)}`;
return [
new $1382b9520f7f9773$var$AtRule(rules, prelude, layer)
];
}
hasConditions = true;
return [
new $1382b9520f7f9773$var$ConditionalRule(rules, condition)
];
}
function compileRule(property, themeProperty, value, priority, conditions, skipConditions) {
let propertyFunction = properties.get(themeProperty);
if (propertyFunction) {
// Expand value to conditional CSS values, and then to rules.
let arbitrary = $1382b9520f7f9773$export$22a8270399010c94(value);
let cssValue = arbitrary ? arbitrary : propertyFunction.toCSSValue(value);
let cssProperties = propertyFunction.toCSSProperties(property.startsWith('--') ? property : null, cssValue);
return conditionalToRules(cssProperties, priority, conditions, skipConditions, (value, priority, conditions)=>{
let [obj] = value;
let rules = [];
for(let key in obj){
let k = key;
let value = obj[k];
if (value === undefined) continue;
if (typeof value === 'string') // Replace self() references with variables and track the dependencies.
value = value.replace(/self\(([a-zA-Z]+)/g, (_, v)=>{
let prop = properties.get(v);
if (!prop) throw new Error(`self(${v}) is invalid. ${v} is not a known property.`);
let cssProperties = prop.cssProperties;
if (cssProperties.length !== 1) throw new Error(`self(${v}) is not supported. ${v} expands to multiple CSS properties.`);
dependencies.add(v);
return `var(--${$1382b9520f7f9773$var$shortCSSPropertyName(cssProperties[0])}`;
});
// Generate selector. This consists of three parts: property, conditions, value.
let cssProperty = key;
if (property.startsWith('--')) cssProperty = propertyFunction.cssProperties[0];
let className = $1382b9520f7f9773$var$classNamePrefix(key, cssProperty);
if (conditions.size > 0) for (let condition of conditions)className += $3afa9c98bb7e1054$exports.conditions[theme.conditions[condition] || condition] || $1382b9520f7f9773$var$generateArbitraryValueSelector(condition);
if (cssProperty !== key) className += $1382b9520f7f9773$var$shortCSSPropertyName(cssProperty);
className += $3afa9c98bb7e1054$exports.values[cssProperty]?.[String(value)] ?? $1382b9520f7f9773$var$generateArbitraryValueSelector(String(value));
className += $1382b9520f7f9773$var$POSTFIX;
rules.push(new $1382b9520f7f9773$var$StyleRule(className, key, String(value)));
}
return [
0,
rules
];
});
} else throw new Error('Unknown property ' + themeProperty);
}
}
function $1382b9520f7f9773$var$kebab(property) {
if (property.startsWith('--')) return property;
return property.replace(/([a-z])([A-Z])/g, (_, a, b)=>`${a}-${b.toLowerCase()}`);
}
// Generate a class name from a number, e.g. index within the theme.
// This maps to an alphabet containing lower case letters, upper case letters, and numbers.
// For numbers larger than 62, an underscore is prepended.
// This encoding allows easy parsing to enable runtime merging by property.
function $1382b9520f7f9773$var$generateName(index, atStart = false) {
if (index < 26) // lower case letters
return String.fromCharCode(index + 97);
if (index < 52) // upper case letters
return String.fromCharCode(index - 26 + 65);
if (index < 62 && !atStart) // numbers
return String.fromCharCode(index - 52 + 48);
return '_' + $1382b9520f7f9773$var$generateName(index - (atStart ? 52 : 62));
}
// For arbitrary values, we use a hash of the string to generate the class name.
function $1382b9520f7f9773$var$generateArbitraryValueSelector(v, atStart = false) {
let c = $1382b9520f7f9773$var$toBase62($1382b9520f7f9773$var$hash(v));
if (atStart && /^[0-9]/.test(c)) c = `_${c}`;
return c;
}
function $1382b9520f7f9773$var$toBase62(value) {
if (value === 0) return $1382b9520f7f9773$var$generateName(value);
let res = '';
while(value){
let remainder = value % 62;
res += $1382b9520f7f9773$var$generateName(remainder);
value = Math.floor((value - remainder) / 62);
}
return res;
}
// djb2 hash function.
// http://www.cse.yorku.ca/~oz/hash.html
function $1382b9520f7f9773$var$hash(v) {
let hash = 5381;
for(let i = 0; i < v.length; i++)hash = (hash << 5) + hash + v.charCodeAt(i) >>> 0;
return hash;
}
function $1382b9520f7f9773$var$layerName(name) {
// All of our layers should be sub-layers of a single parent layer, so that
// the unsafe overrides layer always comes after.
return `_.${name}`;
}
/** A CSS style rule. */ class $1382b9520f7f9773$var$StyleRule {
constructor(className, property, value){
this.className = className;
this.pseudos = '';
this.property = property;
this.value = value;
}
addPseudo(prelude) {
this.pseudos += prelude;
}
getStaticClassName() {
return ' ' + this.className;
}
toCSS(rulesByLayer, preludes = [], layer = 'a') {
let prelude = `.${this.className}${this.pseudos}`;
preludes.push(prelude);
// Nest rule in our stack of preludes (e.g. media queries/selectors).
let content = ' ';
preludes.forEach((p, i)=>{
content += `${p} {\n${' '.repeat((i + 2) * 2)}`;
});
content += `${$1382b9520f7f9773$var$kebab(this.property)}: ${this.value};\n`;
preludes.map((_, i)=>{
content += `${' '.repeat((preludes.length - i) * 2)}}\n`;
});
// Group rule into the appropriate layer.
let rules = rulesByLayer.get(layer);
if (!rules) {
rules = [];
rulesByLayer.set(layer, rules);
}
rules.push(content);
preludes.pop();
}
toJS(allowedOverridesSet, indent = '') {
let res = '';
if (allowedOverridesSet.has(this.property)) res += `${indent}if (!${this.property.replace('--', '__')}) `;
res += `${indent}rules += ' ${this.className}';`;
return res;
}
}
/** Base class for rules that contain other rules. */ class $1382b9520f7f9773$var$GroupRule {
constructor(rules, layer){
this.rules = rules;
this.layer = layer ?? null;
}
addPseudo(prelude) {
for (let rule of this.rules)rule.addPseudo(prelude);
}
getStaticClassName() {
return this.rules.map((rule)=>rule.getStaticClassName()).join('');
}
toCSS(rulesByLayer, preludes, layer) {
for (let rule of this.rules)rule.toCSS(rulesByLayer, preludes, this.layer || layer);
}
toJS(allowedOverridesSet, indent = '') {
let rules = this.rules.slice();
let conditional = rules.filter((rule)=>rule instanceof $1382b9520f7f9773$var$ConditionalRule).reverse().map((rule, i)=>{
return `${i > 0 ? ' else ' : ''}${rule.toJS(allowedOverridesSet, indent)}`;
});
let elseCases = rules.filter((rule)=>!(rule instanceof $1382b9520f7f9773$var$ConditionalRule)).map((rule)=>rule.toJS(allowedOverridesSet, indent));
if (conditional.length && elseCases.length) return `${conditional.join('')} else {\n${indent} ${elseCases.join('\n' + indent + ' ')}\n${indent}}`;
if (conditional.length) return conditional.join('');
return elseCases.join('\n' + indent);
}
}
/** A rule that applies conditionally in CSS (e.g. @media). */ class $1382b9520f7f9773$var$AtRule extends $1382b9520f7f9773$var$GroupRule {
constructor(rules, prelude, layer){
super(rules, layer);
this.prelude = prelude;
}
toCSS(rulesByLayer, preludes = [], layer) {
preludes.push(this.prelude);
super.toCSS(rulesByLayer, preludes, layer);
preludes?.pop();
}
}
/** A rule that applies conditionally at runtime. */ class $1382b9520f7f9773$var$ConditionalRule extends $1382b9520f7f9773$var$GroupRule {
constructor(rules, condition){
super(rules);
this.condition = condition;
}
getStaticClassName() {
throw new Error('Conditional rules cannot be compiled to a static class name. This is a bug.');
}
toJS(allowedOverridesSet, indent = '') {
return `${indent}if (props.${this.condition}) {\n${super.toJS(allowedOverridesSet, indent + ' ')}\n${indent}}`;
}
}
function $1382b9520f7f9773$export$1776c186c69df29e(css, layer = '_.a') {
// Check if `this` is undefined, which means style was not called as a macro but as a normal function.
// We also check if this is globalThis, which happens in non-strict mode bundles.
// Also allow style to be called as a normal function in tests.
// @ts-ignore
// eslint-disable-next-line
if ((this == null || this === globalThis) && process.env.NODE_ENV !== 'test') throw new Error('The raw macro must be imported with {type: "macro"}.');
let className = $1382b9520f7f9773$var$generateArbitraryValueSelector(css, true);
css = `@layer ${layer} {
.${className} {
${css}
}
}`;
// Ensure layer is always declared after the _ layer used by style macro.
if (!layer.startsWith('_.')) css = `@layer _, ${layer};\n` + css;
if (this && typeof this.addAsset === 'function') this.addAsset({
type: 'css',
content: css
});
return className;
}
function $1382b9520f7f9773$export$d25ddfdf17c3ad3e(css) {
// Check if `this` is undefined, which means style was not called as a macro but as a normal function.
// We also check if this is globalThis, which happens in non-strict mode bundles.
// Also allow style to be called as a normal function in tests.
// @ts-ignore
// eslint-disable-next-line
if ((this == null || this === globalThis) && process.env.NODE_ENV !== 'test') throw new Error('The keyframes macro must be imported with {type: "macro"}.');
let name = $1382b9520f7f9773$var$generateArbitraryValueSelector(css, true);
css = `@keyframes ${name} {
${css}
}`;
if (this && typeof this.addAsset === 'function') this.addAsset({
type: 'css',
content: css
});
return name;
}
//# sourceMappingURL=style-macro.cjs.map