254 lines
12 KiB
JavaScript
254 lines
12 KiB
JavaScript
'use strict';
|
|
|
|
var hashString = require('@emotion/hash');
|
|
var core = require('rtl-css-js/core');
|
|
var constants = require('../constants.cjs.js');
|
|
var compileAtomicCSSRule = require('./compileAtomicCSSRule.cjs.js');
|
|
var compileKeyframeCSS = require('./compileKeyframeCSS.cjs.js');
|
|
var shorthands = require('./shorthands.cjs.js');
|
|
var generateCombinedMediaQuery = require('./utils/generateCombinedMediaQuery.cjs.js');
|
|
var isMediaQuerySelector = require('./utils/isMediaQuerySelector.cjs.js');
|
|
var isLayerSelector = require('./utils/isLayerSelector.cjs.js');
|
|
var isNestedSelector = require('./utils/isNestedSelector.cjs.js');
|
|
var isSupportQuerySelector = require('./utils/isSupportQuerySelector.cjs.js');
|
|
var isContainerQuerySelector = require('./utils/isContainerQuerySelector.cjs.js');
|
|
var normalizeNestedProperty = require('./utils/normalizeNestedProperty.cjs.js');
|
|
var isObject = require('./utils/isObject.cjs.js');
|
|
var getStyleBucketName = require('./getStyleBucketName.cjs.js');
|
|
var hashClassName = require('./utils/hashClassName.cjs.js');
|
|
var hashPropertyKey = require('./utils/hashPropertyKey.cjs.js');
|
|
var isResetValue = require('./utils/isResetValue.cjs.js');
|
|
var trimSelector = require('./utils/trimSelector.cjs.js');
|
|
var warnAboutUnresolvedRule = require('./warnings/warnAboutUnresolvedRule.cjs.js');
|
|
var warnAboutUnsupportedProperties = require('./warnings/warnAboutUnsupportedProperties.cjs.js');
|
|
|
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
|
|
var hashString__default = /*#__PURE__*/_interopDefaultCompat(hashString);
|
|
|
|
function getShorthandDefinition(property) {
|
|
return shorthands.shorthands[property];
|
|
}
|
|
function computePropertyPriority(shorthand) {
|
|
var _a;
|
|
return (_a = shorthand === null || shorthand === void 0 ? void 0 : shorthand[0]) !== null && _a !== void 0 ? _a : 0;
|
|
}
|
|
function pushToClassesMap(classesMap, propertyKey, ltrClassname, rtlClassname) {
|
|
classesMap[propertyKey] = rtlClassname ? [ltrClassname, rtlClassname] : ltrClassname;
|
|
}
|
|
function createBucketEntry(cssRule, metadata) {
|
|
if (metadata.length > 0) {
|
|
return [cssRule, Object.fromEntries(metadata)];
|
|
}
|
|
return cssRule;
|
|
}
|
|
function pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS, media, priority) {
|
|
var _a;
|
|
const metadata = [];
|
|
if (priority !== 0) {
|
|
metadata.push(['p', priority]);
|
|
}
|
|
if (styleBucketName === 'm' && media) {
|
|
metadata.push(['m', media]);
|
|
}
|
|
(_a = cssRulesByBucket[styleBucketName]) !== null && _a !== void 0 ? _a : cssRulesByBucket[styleBucketName] = [];
|
|
if (ltrCSS) {
|
|
cssRulesByBucket[styleBucketName].push(createBucketEntry(ltrCSS, metadata));
|
|
}
|
|
if (rtlCSS) {
|
|
cssRulesByBucket[styleBucketName].push(createBucketEntry(rtlCSS, metadata));
|
|
}
|
|
}
|
|
/**
|
|
* Transforms input styles to classes maps & CSS rules.
|
|
*
|
|
* @internal
|
|
*/
|
|
function resolveStyleRules(styles, classNameHashSalt = '', selectors = [], atRules = {
|
|
container: '',
|
|
layer: '',
|
|
media: '',
|
|
supports: ''
|
|
}, cssClassesMap = {}, cssRulesByBucket = {}, rtlValue) {
|
|
// eslint-disable-next-line guard-for-in
|
|
for (const property in styles) {
|
|
// eslint-disable-next-line no-prototype-builtins
|
|
if (constants.UNSUPPORTED_CSS_PROPERTIES.hasOwnProperty(property)) {
|
|
warnAboutUnsupportedProperties.warnAboutUnsupportedProperties(property, styles[property]);
|
|
continue;
|
|
}
|
|
const value = styles[property];
|
|
// eslint-disable-next-line eqeqeq
|
|
if (value == null) {
|
|
continue;
|
|
}
|
|
if (isResetValue.isResetValue(value)) {
|
|
const selector = trimSelector.trimSelector(selectors.join(''));
|
|
// uniq key based on a hash of property & selector, used for merging later
|
|
const key = hashPropertyKey.hashPropertyKey(selector, property, atRules);
|
|
pushToClassesMap(cssClassesMap, key, 0, undefined);
|
|
continue;
|
|
}
|
|
if (typeof value === 'string' || typeof value === 'number') {
|
|
const selector = trimSelector.trimSelector(selectors.join(''));
|
|
const shorthand = getShorthandDefinition(property);
|
|
if (shorthand) {
|
|
const shorthandProperties = shorthand[1];
|
|
const shorthandResetStyles = Object.fromEntries(shorthandProperties.map(property => [property, constants.RESET]));
|
|
resolveStyleRules(shorthandResetStyles, classNameHashSalt, selectors, atRules, cssClassesMap, cssRulesByBucket);
|
|
}
|
|
// uniq key based on a hash of property & selector, used for merging later
|
|
const key = hashPropertyKey.hashPropertyKey(selector, property, atRules);
|
|
const className = hashClassName.hashClassName({
|
|
value: value.toString(),
|
|
salt: classNameHashSalt,
|
|
selector,
|
|
property
|
|
}, atRules);
|
|
const rtlDefinition = rtlValue && {
|
|
key: property,
|
|
value: rtlValue
|
|
} || core.convertProperty(property, value);
|
|
const flippedInRtl = rtlDefinition.key !== property || rtlDefinition.value !== value;
|
|
const rtlClassName = flippedInRtl ? hashClassName.hashClassName({
|
|
value: rtlDefinition.value.toString(),
|
|
property: rtlDefinition.key,
|
|
salt: classNameHashSalt,
|
|
selector
|
|
}, atRules) : undefined;
|
|
const rtlCompileOptions = flippedInRtl ? {
|
|
rtlClassName,
|
|
rtlProperty: rtlDefinition.key,
|
|
rtlValue: rtlDefinition.value
|
|
} : undefined;
|
|
const styleBucketName = getStyleBucketName.getStyleBucketName(selectors, atRules);
|
|
const [ltrCSS, rtlCSS] = compileAtomicCSSRule.compileAtomicCSSRule(Object.assign({
|
|
className,
|
|
selectors,
|
|
property,
|
|
value
|
|
}, rtlCompileOptions), atRules);
|
|
pushToClassesMap(cssClassesMap, key, className, rtlClassName);
|
|
pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS, atRules.media, computePropertyPriority(shorthand));
|
|
} else if (property === 'animationName') {
|
|
const animationNameValue = Array.isArray(value) ? value : [value];
|
|
const animationNames = [];
|
|
const rtlAnimationNames = [];
|
|
for (const keyframeObject of animationNameValue) {
|
|
const keyframeCSS = compileKeyframeCSS.compileKeyframeRule(keyframeObject);
|
|
const rtlKeyframeCSS = compileKeyframeCSS.compileKeyframeRule(core.convert(keyframeObject));
|
|
const animationName = constants.HASH_PREFIX + hashString__default.default(keyframeCSS);
|
|
let rtlAnimationName;
|
|
const keyframeRules = compileKeyframeCSS.compileKeyframesCSS(animationName, keyframeCSS);
|
|
let rtlKeyframeRules = [];
|
|
if (keyframeCSS === rtlKeyframeCSS) {
|
|
// If CSS for LTR & RTL are same we will re-use animationName from LTR to avoid duplication of rules in output
|
|
rtlAnimationName = animationName;
|
|
} else {
|
|
rtlAnimationName = constants.HASH_PREFIX + hashString__default.default(rtlKeyframeCSS);
|
|
rtlKeyframeRules = compileKeyframeCSS.compileKeyframesCSS(rtlAnimationName, rtlKeyframeCSS);
|
|
}
|
|
for (let i = 0; i < keyframeRules.length; i++) {
|
|
pushToCSSRules(cssRulesByBucket,
|
|
// keyframes styles should be inserted into own bucket
|
|
'k', keyframeRules[i], rtlKeyframeRules[i], atRules.media,
|
|
// keyframes always have default priority
|
|
0);
|
|
}
|
|
animationNames.push(animationName);
|
|
rtlAnimationNames.push(rtlAnimationName);
|
|
}
|
|
resolveStyleRules({
|
|
animationName: animationNames.join(', ')
|
|
}, classNameHashSalt, selectors, atRules, cssClassesMap, cssRulesByBucket, rtlAnimationNames.join(', '));
|
|
} else if (Array.isArray(value)) {
|
|
// not animationName property but array in the value => fallback values
|
|
if (value.length === 0) {
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
console.warn(`makeStyles(): An empty array was passed as input to "${property}", the property will be omitted in the styles.`);
|
|
}
|
|
continue;
|
|
}
|
|
const selector = trimSelector.trimSelector(selectors.join(''));
|
|
const shorthand = getShorthandDefinition(property);
|
|
if (shorthand) {
|
|
const shorthandProperties = shorthand[1];
|
|
const shorthandResetStyles = Object.fromEntries(shorthandProperties.map(property => [property, constants.RESET]));
|
|
resolveStyleRules(shorthandResetStyles, classNameHashSalt, selectors, atRules, cssClassesMap, cssRulesByBucket);
|
|
}
|
|
const key = hashPropertyKey.hashPropertyKey(selector, property, atRules);
|
|
const className = hashClassName.hashClassName({
|
|
value: value.map(v => (v !== null && v !== void 0 ? v : '').toString()).join(';'),
|
|
salt: classNameHashSalt,
|
|
selector,
|
|
property
|
|
}, atRules);
|
|
const rtlDefinitions = value.map(v => core.convertProperty(property, v));
|
|
const rtlPropertyConsistent = !rtlDefinitions.some(v => v.key !== rtlDefinitions[0].key);
|
|
if (!rtlPropertyConsistent) {
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
console.error('makeStyles(): mixing CSS fallback values which result in multiple CSS properties in RTL is not supported.');
|
|
}
|
|
continue;
|
|
}
|
|
const flippedInRtl = rtlDefinitions[0].key !== property || rtlDefinitions.some((v, i) => v.value !== value[i]);
|
|
const rtlClassName = flippedInRtl ? hashClassName.hashClassName({
|
|
value: rtlDefinitions.map(v => {
|
|
var _a;
|
|
return ((_a = v === null || v === void 0 ? void 0 : v.value) !== null && _a !== void 0 ? _a : '').toString();
|
|
}).join(';'),
|
|
salt: classNameHashSalt,
|
|
property: rtlDefinitions[0].key,
|
|
selector
|
|
}, atRules) : undefined;
|
|
const rtlCompileOptions = flippedInRtl ? {
|
|
rtlClassName,
|
|
rtlProperty: rtlDefinitions[0].key,
|
|
rtlValue: rtlDefinitions.map(d => d.value)
|
|
} : undefined;
|
|
const styleBucketName = getStyleBucketName.getStyleBucketName(selectors, atRules);
|
|
const [ltrCSS, rtlCSS] = compileAtomicCSSRule.compileAtomicCSSRule(Object.assign({
|
|
className,
|
|
selectors,
|
|
property,
|
|
value: value
|
|
}, rtlCompileOptions), atRules);
|
|
pushToClassesMap(cssClassesMap, key, className, rtlClassName);
|
|
pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS, atRules.media, computePropertyPriority(shorthand));
|
|
} else if (isObject.isObject(value)) {
|
|
if (isNestedSelector.isNestedSelector(property)) {
|
|
resolveStyleRules(value, classNameHashSalt, selectors.concat(normalizeNestedProperty.normalizeNestedProperty(property)), atRules, cssClassesMap, cssRulesByBucket);
|
|
} else if (isMediaQuerySelector.isMediaQuerySelector(property)) {
|
|
const combinedMediaQuery = generateCombinedMediaQuery.generateCombinedQuery(atRules.media, property.slice(6).trim());
|
|
resolveStyleRules(value, classNameHashSalt, selectors, Object.assign({}, atRules, {
|
|
media: combinedMediaQuery
|
|
}), cssClassesMap, cssRulesByBucket);
|
|
} else if (isLayerSelector.isLayerSelector(property)) {
|
|
const combinedLayerQuery = (atRules.layer ? `${atRules.layer}.` : '') + property.slice(6).trim();
|
|
resolveStyleRules(value, classNameHashSalt, selectors, Object.assign({}, atRules, {
|
|
layer: combinedLayerQuery
|
|
}), cssClassesMap, cssRulesByBucket);
|
|
} else if (isSupportQuerySelector.isSupportQuerySelector(property)) {
|
|
const combinedSupportQuery = generateCombinedMediaQuery.generateCombinedQuery(atRules.supports, property.slice(9).trim());
|
|
resolveStyleRules(value, classNameHashSalt, selectors, Object.assign({}, atRules, {
|
|
supports: combinedSupportQuery
|
|
}), cssClassesMap, cssRulesByBucket);
|
|
} else if (isContainerQuerySelector.isContainerQuerySelector(property)) {
|
|
// TODO implement nested container queries if needed
|
|
// The only way to target multiple containers is to nest container queries
|
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/@container#nested_container_queries
|
|
const containerQuery = property.slice(10).trim();
|
|
resolveStyleRules(value, classNameHashSalt, selectors, Object.assign({}, atRules, {
|
|
container: containerQuery
|
|
}), cssClassesMap, cssRulesByBucket);
|
|
} else {
|
|
warnAboutUnresolvedRule.warnAboutUnresolvedRule(property, value);
|
|
}
|
|
}
|
|
}
|
|
return [cssClassesMap, cssRulesByBucket];
|
|
}
|
|
|
|
exports.resolveStyleRules = resolveStyleRules;
|
|
//# sourceMappingURL=resolveStyleRules.cjs.js.map
|