@webstudio-is/css-engine 0.168.0 → 0.174.0

package/lib/index.js

@@ -1,3 +1,156 @@
+// src/core/prefixer.ts
+var prefixStyles = (styleMap) => {
+  const newStyleMap = /* @__PURE__ */ new Map();
+  for (const [property, value] of styleMap) {
+    if (property === "background-clip") {
+      newStyleMap.set("-webkit-background-clip", value);
+    }
+    if (property === "user-select") {
+      newStyleMap.set("-webkit-user-select", value);
+    }
+    if (property === "text-size-adjust") {
+      newStyleMap.set("-webkit-text-size-adjust", value);
+    }
+    if (property === "backdrop-filter") {
+      newStyleMap.set("-webkit-backdrop-filter", value);
+    }
+    newStyleMap.set(property, value);
+  }
+  return newStyleMap;
+};
+
+// src/schema.ts
+import { z } from "zod";
+var Unit = z.string();
+var UnitValue = z.object({
+  type: z.literal("unit"),
+  unit: Unit,
+  value: z.number(),
+  hidden: z.boolean().optional()
+});
+var KeywordValue = z.object({
+  type: z.literal("keyword"),
+  // @todo use exact type
+  value: z.string(),
+  hidden: z.boolean().optional()
+});
+var UnparsedValue = z.object({
+  type: z.literal("unparsed"),
+  value: z.string(),
+  // For the builder we want to be able to hide background-image
+  hidden: z.boolean().optional()
+});
+var FontFamilyValue = z.object({
+  type: z.literal("fontFamily"),
+  value: z.array(z.string()),
+  hidden: z.boolean().optional()
+});
+var RgbValue = z.object({
+  type: z.literal("rgb"),
+  r: z.number(),
+  g: z.number(),
+  b: z.number(),
+  alpha: z.number(),
+  hidden: z.boolean().optional()
+});
+var FunctionValue = z.object({
+  type: z.literal("function"),
+  name: z.string(),
+  args: z.lazy(() => StyleValue),
+  hidden: z.boolean().optional()
+});
+var ImageValue = z.object({
+  type: z.literal("image"),
+  value: z.union([
+    z.object({ type: z.literal("asset"), value: z.string() }),
+    // url is not stored in db and only used by css-engine transformValue
+    // to prepare image value for rendering
+    z.object({ type: z.literal("url"), url: z.string() })
+  ]),
+  // For the builder we want to be able to hide images
+  hidden: z.boolean().optional()
+});
+var GuaranteedInvalidValue = z.object({
+  type: z.literal("guaranteedInvalid"),
+  hidden: z.boolean().optional()
+});
+var InvalidValue = z.object({
+  type: z.literal("invalid"),
+  value: z.string(),
+  hidden: z.boolean().optional()
+});
+var UnsetValue = z.object({
+  type: z.literal("unset"),
+  value: z.literal(""),
+  hidden: z.boolean().optional()
+});
+var TupleValueItem = z.union([
+  UnitValue,
+  KeywordValue,
+  UnparsedValue,
+  ImageValue,
+  RgbValue,
+  FunctionValue
+]);
+var TupleValue = z.object({
+  type: z.literal("tuple"),
+  value: z.array(TupleValueItem),
+  hidden: z.boolean().optional()
+});
+var LayerValueItem = z.union([
+  UnitValue,
+  KeywordValue,
+  UnparsedValue,
+  ImageValue,
+  TupleValue,
+  RgbValue,
+  InvalidValue,
+  FunctionValue
+]);
+var LayersValue = z.object({
+  type: z.literal("layers"),
+  value: z.array(LayerValueItem),
+  hidden: z.boolean().optional()
+});
+var ValidStaticStyleValue = z.union([
+  ImageValue,
+  LayersValue,
+  UnitValue,
+  KeywordValue,
+  FontFamilyValue,
+  RgbValue,
+  UnparsedValue,
+  TupleValue,
+  FunctionValue,
+  GuaranteedInvalidValue
+]);
+var isValidStaticStyleValue = (styleValue) => {
+  const staticStyleValue = styleValue;
+  return staticStyleValue.type === "image" || staticStyleValue.type === "layers" || staticStyleValue.type === "unit" || staticStyleValue.type === "keyword" || staticStyleValue.type === "fontFamily" || staticStyleValue.type === "rgb" || staticStyleValue.type === "unparsed" || staticStyleValue.type === "tuple" || staticStyleValue.type === "function" || staticStyleValue.type === "guaranteedInvalid";
+};
+var VarValue = z.object({
+  type: z.literal("var"),
+  value: z.string(),
+  fallbacks: z.array(ValidStaticStyleValue),
+  hidden: z.boolean().optional()
+});
+var StyleValue = z.union([
+  ValidStaticStyleValue,
+  InvalidValue,
+  UnsetValue,
+  VarValue
+]);
+var Style = z.record(z.string(), StyleValue);
+
+// src/css.ts
+var cssWideKeywords = /* @__PURE__ */ new Set([
+  "initial",
+  "inherit",
+  "unset",
+  "revert",
+  "revert-layer"
+]);
+
 // src/core/to-value.ts
 import { captureError } from "@webstudio-is/error-utils";
 import { DEFAULT_FONT_FALLBACK, SYSTEM_FONTS } from "@webstudio-is/fonts";
@@ -67,15 +220,14 @@ var toValue = (styleValue, transformValue) => {
     return value.value;
   }
   if (value.type === "layers") {
-    const valueString = value.value.filter(
-      (layer) => "hidden" in layer === false || "hidden" in layer && layer.hidden === false
-    ).map((layer) => {
-      return toValue(layer, transformValue);
-    }).join(", ");
+    const valueString = value.value.filter((layer) => layer.hidden !== true).map((layer) => toValue(layer, transformValue)).join(", ");
     return valueString === "" ? "none" : valueString;
   }
   if (value.type === "tuple") {
-    return value.value.map((value2) => toValue(value2, transformValue)).join(" ");
+    if (value.hidden === true) {
+      return "none";
+    }
+    return value.value.filter((value2) => value2.hidden !== true).map((value2) => toValue(value2, transformValue)).join(" ");
   }
   if (value.type === "function") {
     if (value.hidden === true) {
@@ -89,16 +241,183 @@ var toValue = (styleValue, transformValue) => {
   return captureError(new Error("Unknown value type"), value);
 };
 
-// src/core/to-property.ts
-var hyphenateProperty = (property) => property.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
-var toProperty = (property) => {
-  if (property === "backgroundClip") {
-    return "-webkit-background-clip";
+// src/core/merger.ts
+var isLonghandValue = (value) => {
+  if (value === void 0) {
+    return false;
+  }
+  if (value.type === "keyword" && cssWideKeywords.has(value.value)) {
+    return false;
+  }
+  if (value.type === "var") {
+    const fallback = value.fallbacks.at(0);
+    if (fallback?.type === "keyword" && cssWideKeywords.has(fallback.value)) {
+      return false;
+    }
   }
-  return hyphenateProperty(property);
+  return true;
+};
+var mergeBorder = (styleMap, base) => {
+  const width = styleMap.get(`${base}-width`);
+  const style = styleMap.get(`${base}-style`);
+  const color = styleMap.get(`${base}-color`);
+  if (isLonghandValue(width) && isLonghandValue(style) && isLonghandValue(color)) {
+    styleMap.delete(`${base}-width`);
+    styleMap.delete(`${base}-style`);
+    styleMap.delete(`${base}-color`);
+    styleMap.set(base, { type: "tuple", value: [width, style, color] });
+  }
+};
+var mergeBox = (styleMap, base) => {
+  const topValue = styleMap.get(`${base}-top`);
+  const top = toValue(topValue);
+  const right = toValue(styleMap.get(`${base}-right`));
+  const bottom = toValue(styleMap.get(`${base}-bottom`));
+  const left = toValue(styleMap.get(`${base}-left`));
+  if (isLonghandValue(topValue) && top === right && top === bottom && top === left) {
+    styleMap.delete(`${base}-top`);
+    styleMap.delete(`${base}-right`);
+    styleMap.delete(`${base}-bottom`);
+    styleMap.delete(`${base}-left`);
+    styleMap.set(base, topValue);
+  }
+};
+var mergeWhiteSpaceAndTextWrap = (styleMap) => {
+  const collapseValue = styleMap.get("white-space-collapse");
+  const collapse = toValue(collapseValue);
+  const modeValue = styleMap.get("text-wrap-mode");
+  const mode = toValue(modeValue);
+  const styleValue = styleMap.get("text-wrap-style");
+  const style = toValue(styleValue);
+  styleMap.delete("text-wrap-mode");
+  styleMap.delete("text-wrap-style");
+  if (collapse === "collapse" || collapse === "initial" || mode === "wrap" || mode === "initial") {
+    styleMap.set("white-space", { type: "keyword", value: "normal" });
+  }
+  if (mode === "nowrap") {
+    styleMap.set("white-space", { type: "keyword", value: "nowrap" });
+  }
+  if (collapse === "preserve") {
+    if (mode === "nowrap") {
+      styleMap.set("white-space", { type: "keyword", value: "pre" });
+    } else {
+      styleMap.set("white-space", { type: "keyword", value: "pre-wrap" });
+    }
+  }
+  if (collapse === "preserve-breaks") {
+    styleMap.set("white-space", { type: "keyword", value: "pre-line" });
+  }
+  if (collapse === "break-spaces") {
+    styleMap.set("white-space", { type: "keyword", value: "break-spaces" });
+  }
+  if (style === "balance" || style === "stable" || style === "pretty") {
+    styleMap.set("text-wrap", { type: "keyword", value: style });
+  }
+  const textWrap = (styleValue?.type !== "keyword" ? styleValue : void 0) ?? (modeValue?.type !== "keyword" ? modeValue : void 0);
+  if (textWrap) {
+    styleMap.set("text-wrap", textWrap);
+  }
+  if (collapseValue) {
+    styleMap.delete("white-space-collapse");
+    styleMap.set("white-space-collapse", collapseValue);
+  }
+};
+var mergeBackgroundPosition = (styleMap) => {
+  const x = styleMap.get("background-position-x");
+  const y = styleMap.get("background-position-y");
+  if (x?.type === "layers" && y?.type === "layers" && x.value.length === y.value.length) {
+    const position = x.value.map((xValue, index) => {
+      const yValue = y.value[index];
+      return {
+        type: "tuple",
+        value: [xValue, yValue]
+      };
+    });
+    styleMap.delete("background-position-x");
+    styleMap.delete("background-position-y");
+    styleMap.set("background-position", {
+      type: "layers",
+      value: position
+    });
+  }
+};
+var mergeStyles = (styleMap) => {
+  const newStyle = new Map(styleMap);
+  mergeBorder(newStyle, "border-top");
+  mergeBorder(newStyle, "border-right");
+  mergeBorder(newStyle, "border-bottom");
+  mergeBorder(newStyle, "border-left");
+  mergeBorder(newStyle, "border");
+  mergeBorder(newStyle, "outline");
+  mergeBox(newStyle, "border");
+  mergeBox(newStyle, "margin");
+  mergeBox(newStyle, "padding");
+  mergeWhiteSpaceAndTextWrap(newStyle);
+  mergeBackgroundPosition(newStyle);
+  return newStyle;
 };
 
+// src/core/to-property.ts
+var hyphenateProperty = (property) => property.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+
 // src/core/rules.ts
+var mapGroupBy = (array, getKey) => {
+  const groups = /* @__PURE__ */ new Map();
+  for (const item of array) {
+    const key = getKey(item);
+    let group = groups.get(key);
+    if (group === void 0) {
+      group = [];
+      groups.set(key, group);
+    }
+    group.push(item);
+  }
+  return groups;
+};
+var mergeDeclarations = (declarations) => {
+  const newDeclarations = [];
+  const groups = mapGroupBy(
+    declarations,
+    (declaration) => declaration.breakpoint + declaration.selector
+  );
+  for (const groupDeclarations of groups.values()) {
+    const { breakpoint, selector } = groupDeclarations[0];
+    const merged = mergeStyles(
+      new Map(
+        groupDeclarations.map((item) => [item.property, item.value])
+      )
+    );
+    for (const [property, value] of merged) {
+      newDeclarations.push({
+        breakpoint,
+        selector,
+        property,
+        value
+      });
+    }
+  }
+  return newDeclarations;
+};
+var generateStyleMap = ({
+  style,
+  indent = 0,
+  transformValue
+}) => {
+  const spaces = " ".repeat(indent);
+  let lines = "";
+  for (const [property, value] of style) {
+    const propertyString = hyphenateProperty(property);
+    const valueString = toValue(value, transformValue);
+    const line = `${spaces}${propertyString}: ${valueString}`;
+    lines += lines === "" ? line : `;
+${line}`;
+  }
+  return lines;
+};
+var normalizeDeclaration = (declaration) => ({
+  ...declaration,
+  property: hyphenateProperty(declaration.property)
+});
 var getDeclarationKey = (declaraionKey) => {
   const { breakpoint, selector, property } = declaraionKey;
   return `${breakpoint}:${selector}:${property}`;
@@ -120,10 +439,12 @@ var MixinRule = class {
     this.#dirtyBreakpoints.clear();
   }
   setDeclaration(declaration) {
+    declaration = normalizeDeclaration(declaration);
     this.#declarations.set(getDeclarationKey(declaration), declaration);
     this.#dirtyBreakpoints.add(declaration.breakpoint);
   }
   deleteDeclaration(declaration) {
+    declaration = normalizeDeclaration(declaration);
     this.#declarations.delete(getDeclarationKey(declaration));
     this.#dirtyBreakpoints.add(declaration.breakpoint);
   }
@@ -164,14 +485,16 @@ var NestingRule = class {
     this.#cache.clear();
   }
   setDeclaration(declaration) {
+    declaration = normalizeDeclaration(declaration);
     this.#declarations.set(getDeclarationKey(declaration), declaration);
     this.#cache.delete(declaration.breakpoint);
   }
   deleteDeclaration(declaration) {
+    declaration = normalizeDeclaration(declaration);
     this.#declarations.delete(getDeclarationKey(declaration));
     this.#cache.delete(declaration.breakpoint);
   }
-  getDeclarations() {
+  #getDeclarations() {
     const declarations = /* @__PURE__ */ new Map();
     for (const mixin of this.#mixins) {
       const rule = this.#mixinRules.get(mixin);
@@ -187,6 +510,9 @@ var NestingRule = class {
     }
     return declarations.values();
   }
+  getMergedDeclarations() {
+    return mergeDeclarations(this.#getDeclarations());
+  }
   toString({
     breakpoint,
     indent = 0,
@@ -202,113 +528,36 @@ var NestingRule = class {
     if (cached && cached.indent === indent && cached.transformValue === transformValue) {
       return cached.generated;
     }
-    const spaces = " ".repeat(indent);
-    const linesBySelector = /* @__PURE__ */ new Map();
-    for (const declaration of this.getDeclarations()) {
+    const styleBySelector = /* @__PURE__ */ new Map();
+    for (const declaration of this.getMergedDeclarations()) {
       if (declaration.breakpoint !== breakpoint) {
         continue;
       }
-      const { selector: nestedSelector, property, value } = declaration;
+      const { selector: nestedSelector } = declaration;
       const selector = this.#selector + this.#descendantSuffix + nestedSelector;
-      const lines = linesBySelector.get(selector) ?? "";
-      const propertyString = toProperty(property);
-      const valueString = toValue(value, transformValue);
-      const line = `${spaces}  ${propertyString}: ${valueString}`;
-      linesBySelector.set(selector, lines === "" ? line : `${lines};
-${line}`);
-    }
-    const generated = Array.from(linesBySelector).sort(
-      ([leftSelector], [rightSelector]) => leftSelector.localeCompare(rightSelector)
-    ).map(
-      ([selector, lines]) => `${spaces}${selector} {
-${lines}
-${spaces}}
-`
-    ).join("").trimEnd();
-    this.#cache.set(breakpoint, { generated, indent, transformValue });
-    return generated;
-  }
-};
-var StylePropertyMap = class {
-  #cached;
-  #styleMap = /* @__PURE__ */ new Map();
-  #indent = 0;
-  #transformValue;
-  constructor(style) {
-    let property;
-    for (property in style) {
-      this.#styleMap.set(property, style[property]);
-    }
-  }
-  set(property, value) {
-    this.#styleMap.set(property, value);
-    this.#cached = void 0;
-  }
-  get(property) {
-    return this.#styleMap.get(property);
-  }
-  has(property) {
-    return this.#styleMap.has(property);
-  }
-  get size() {
-    return this.#styleMap.size;
-  }
-  keys() {
-    return this.#styleMap.keys();
-  }
-  delete(property) {
-    this.#styleMap.delete(property);
-    this.#cached = void 0;
-  }
-  clear() {
-    this.#styleMap.clear();
-    this.#cached = void 0;
-  }
-  toString({
-    indent = 0,
-    transformValue
-  } = {}) {
-    if (this.#cached && indent === this.#indent && transformValue === this.#transformValue) {
-      return this.#cached;
-    }
-    const block = [];
-    const spaces = " ".repeat(indent);
-    for (const [property, value] of this.#styleMap) {
-      if (value === void 0) {
-        continue;
+      let style = styleBySelector.get(selector);
+      if (style === void 0) {
+        style = /* @__PURE__ */ new Map();
+        styleBySelector.set(selector, style);
       }
-      block.push(
-        `${spaces}${toProperty(property)}: ${toValue(value, transformValue)}`
-      );
+      style.set(declaration.property, declaration.value);
     }
-    this.#cached = block.join(";\n");
-    this.#indent = indent;
-    this.#transformValue = transformValue;
-    return this.#cached;
-  }
-};
-var StyleRule = class {
-  styleMap;
-  selectorText;
-  constructor(selectorText, style) {
-    this.selectorText = selectorText;
-    this.styleMap = style instanceof StylePropertyMap ? style : new StylePropertyMap(style);
-  }
-  get cssText() {
-    return this.toString();
-  }
-  toString({
-    indent = 0,
-    transformValue
-  } = {}) {
     const spaces = " ".repeat(indent);
-    const content = this.styleMap.toString({
-      indent: indent + 2,
-      transformValue
-    });
-    return `${spaces}${this.selectorText} {
+    const generated = Array.from(styleBySelector).sort(
+      ([leftSelector], [rightSelector]) => leftSelector.localeCompare(rightSelector)
+    ).map(([selector, style]) => {
+      const content = generateStyleMap({
+        style: prefixStyles(style),
+        indent: indent + 2,
+        transformValue
+      });
+      return `${spaces}${selector} {
 ${content}
-${spaces}}`;
+${spaces}}
+`;
+    }).join("").trimEnd();
+    this.#cache.set(breakpoint, { generated, indent, transformValue });
+    return generated;
   }
 };
 var MediaRule = class {
@@ -323,10 +572,7 @@ var MediaRule = class {
     this.#mediaType = options.mediaType ?? "all";
   }
   insertRule(rule) {
-    this.rules.set(
-      rule instanceof StyleRule ? rule.selectorText : rule.cssText,
-      rule
-    );
+    this.rules.set(rule.cssText, rule);
     return rule;
   }
   get cssText() {
@@ -344,7 +590,7 @@ var MediaRule = class {
     }
     const rules = [];
     for (const rule of this.rules.values()) {
-      rules.push(rule.toString({ indent: 2, transformValue }));
+      rules.push(rule.toString());
     }
     for (const rule of nestingRules) {
       const generatedRule = rule.toString({
@@ -586,14 +832,7 @@ var StyleSheet = class {
 };
 
 // src/core/style-sheet-regular.ts
-var defaultMediaRuleId = "__default-media-rule__";
 var StyleSheetRegular = class extends StyleSheet {
-  addStyleRule(rule, selectorText) {
-    const mediaRule = this.addMediaRule(rule.breakpoint || defaultMediaRuleId);
-    const styleRule = new StyleRule(selectorText, rule.style);
-    mediaRule.insertRule(styleRule);
-    return styleRule;
-  }
 };
 
 // src/core/create-style-sheet.ts
@@ -629,16 +868,16 @@ import hash from "@emotion/hash";
 var generateAtomic = (sheet, options) => {
   const { getKey, transformValue } = options;
   const atomicRules = /* @__PURE__ */ new Map();
-  const classesMap = /* @__PURE__ */ new Map();
+  const classes = options.classes ?? /* @__PURE__ */ new Map();
   for (const rule of sheet.nestingRules.values()) {
     const descendantSuffix = rule.getDescendantSuffix();
     const groupKey = getKey(rule);
-    let classList = classesMap.get(groupKey);
+    let classList = classes.get(groupKey);
     if (classList === void 0) {
       classList = [];
-      classesMap.set(groupKey, classList);
+      classes.set(groupKey, classList);
     }
-    for (const declaration of rule.getDeclarations()) {
+    for (const declaration of rule.getMergedDeclarations()) {
       const atomicHash = hash(
         descendantSuffix + declaration.breakpoint + declaration.selector + declaration.property + toValue(declaration.value, transformValue)
       );
@@ -660,120 +899,8 @@ var generateAtomic = (sheet, options) => {
     nestingRules: Array.from(atomicRules.values()),
     transformValue
   });
-  return { cssText, classesMap };
+  return { cssText, classes };
 };
-
-// src/schema.ts
-import { z } from "zod";
-var Unit = z.string();
-var UnitValue = z.object({
-  type: z.literal("unit"),
-  unit: Unit,
-  value: z.number()
-});
-var KeywordValue = z.object({
-  type: z.literal("keyword"),
-  // @todo use exact type
-  value: z.string()
-});
-var UnparsedValue = z.object({
-  type: z.literal("unparsed"),
-  value: z.string(),
-  // For the builder we want to be able to hide background-image
-  hidden: z.boolean().optional()
-});
-var FontFamilyValue = z.object({
-  type: z.literal("fontFamily"),
-  value: z.array(z.string())
-});
-var RgbValue = z.object({
-  type: z.literal("rgb"),
-  r: z.number(),
-  g: z.number(),
-  b: z.number(),
-  alpha: z.number()
-});
-var FunctionValue = z.object({
-  type: z.literal("function"),
-  name: z.string(),
-  args: z.lazy(() => StyleValue),
-  hidden: z.boolean().optional()
-});
-var ImageValue = z.object({
-  type: z.literal("image"),
-  value: z.union([
-    z.object({ type: z.literal("asset"), value: z.string() }),
-    // url is not stored in db and only used by css-engine transformValue
-    // to prepare image value for rendering
-    z.object({ type: z.literal("url"), url: z.string() })
-  ]),
-  // For the builder we want to be able to hide images
-  hidden: z.boolean().optional()
-});
-var GuaranteedInvalidValue = z.object({
-  type: z.literal("guaranteedInvalid")
-});
-var InvalidValue = z.object({
-  type: z.literal("invalid"),
-  value: z.string()
-});
-var UnsetValue = z.object({
-  type: z.literal("unset"),
-  value: z.literal("")
-});
-var TupleValueItem = z.union([
-  UnitValue,
-  KeywordValue,
-  UnparsedValue,
-  RgbValue,
-  FunctionValue
-]);
-var TupleValue = z.object({
-  type: z.literal("tuple"),
-  value: z.array(TupleValueItem),
-  hidden: z.boolean().optional()
-});
-var LayerValueItem = z.union([
-  UnitValue,
-  KeywordValue,
-  UnparsedValue,
-  ImageValue,
-  TupleValue,
-  InvalidValue,
-  FunctionValue
-]);
-var LayersValue = z.object({
-  type: z.literal("layers"),
-  value: z.array(LayerValueItem)
-});
-var ValidStaticStyleValue = z.union([
-  ImageValue,
-  LayersValue,
-  UnitValue,
-  KeywordValue,
-  FontFamilyValue,
-  RgbValue,
-  UnparsedValue,
-  TupleValue,
-  FunctionValue,
-  GuaranteedInvalidValue
-]);
-var isValidStaticStyleValue = (styleValue) => {
-  const staticStyleValue = styleValue;
-  return staticStyleValue.type === "image" || staticStyleValue.type === "layers" || staticStyleValue.type === "unit" || staticStyleValue.type === "keyword" || staticStyleValue.type === "fontFamily" || staticStyleValue.type === "rgb" || staticStyleValue.type === "unparsed" || staticStyleValue.type === "tuple" || staticStyleValue.type === "function" || staticStyleValue.type === "guaranteedInvalid";
-};
-var VarValue = z.object({
-  type: z.literal("var"),
-  value: z.string(),
-  fallbacks: z.array(ValidStaticStyleValue)
-});
-var StyleValue = z.union([
-  ValidStaticStyleValue,
-  InvalidValue,
-  UnsetValue,
-  VarValue
-]);
-var Style = z.record(z.string(), StyleValue);
 export {
   FunctionValue,
   GuaranteedInvalidValue,
@@ -788,11 +915,15 @@ export {
   UnparsedValue,
   compareMedia,
   createRegularStyleSheet,
+  cssWideKeywords,
   equalMedia,
   findApplicableMedia,
   generateAtomic,
+  generateStyleMap,
   hyphenateProperty,
   isValidStaticStyleValue,
   matchMedia,
+  mergeStyles,
+  prefixStyles,
   toValue
 };