feat: Fluent UI Outlook Lite + connections mockup

node_modules/@griffel/core/runtime/resolveStyleRules.cjs.js

@@ -0,0 +1,253 @@
+'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