@stylexjs/stylex 0.17.0 → 0.17.1

package/lib/cjs/inject.d.ts

@@ -7,5 +7,10 @@
  *
  */
 
-declare function inject(cssText: string, priority: number): string;
+declare function inject(
+  cssText: string,
+  priority: number,
+  constKey?: string,
+  constVal?: string | number,
+): string;
 export default inject;

package/lib/cjs/inject.js

@@ -9,8 +9,11 @@ function addSpecificityLevel(cssText, index) {
     length: index
   }).map(() => ':not(#\\#)').join('');
   const lastOpenCurly = cssText.includes('::') ? cssText.indexOf('::') : cssText.lastIndexOf('{');
-  const beforeCurly = cssText.slice(0, lastOpenCurly);
+  let beforeCurly = cssText.slice(0, lastOpenCurly);
   const afterCurly = cssText.slice(lastOpenCurly);
+  if (index > 0) {
+    beforeCurly = beforeCurly.trimEnd();
+  }
   return `${beforeCurly}${pseudoSelector}${afterCurly}`;
 }
 
@@ -82,6 +85,74 @@ function createOrderedCSSStyleSheet(sheet) {
     }
     return isInserted;
   }
+  function insert(cssText, groupValue) {
+    const group = Number(groupValue);
+    if (groups[group] == null) {
+      const markerRule = encodeGroupRule(group);
+      groups[group] = {
+        start: null,
+        rules: [markerRule]
+      };
+      if (sheet != null) {
+        sheetInsert(sheet, group, markerRule);
+      }
+    }
+    const key = getSeenRuleKey(cssText);
+    if (key != null && seenRules[key] == null) {
+      seenRules[key] = true;
+      let shouldUpdate = true;
+      if (sheet != null) {
+        const isInserted = sheetInsert(sheet, group, cssText);
+        if (!isInserted) {
+          shouldUpdate = false;
+        }
+      }
+      if (shouldUpdate) {
+        groups[group].rules.push(cssText);
+      }
+    }
+  }
+  function update(oldCssText, newCssText, groupValue) {
+    const group = Number(groupValue);
+    const oldKey = getSeenRuleKey(oldCssText);
+    const newKey = getSeenRuleKey(newCssText);
+    if (oldKey !== newKey || oldKey == null) {
+      insert(newCssText, groupValue);
+      return;
+    }
+    if (seenRules[oldKey]) {
+      if (groups[group] && groups[group].rules) {
+        const rules = groups[group].rules;
+        let foundIndex = -1;
+        for (let i = 0; i < rules.length; i++) {
+          if (getSeenRuleKey(rules[i]) === oldKey) {
+            foundIndex = i;
+            break;
+          }
+        }
+        if (foundIndex !== -1) {
+          rules[foundIndex] = newCssText;
+        }
+      }
+      if (sheet != null) {
+        const cssRules = sheet.cssRules;
+        for (let i = cssRules.length - 1; i >= 0; i--) {
+          const rule = cssRules[i];
+          const ruleCssText = rule.cssText;
+          const ruleKey = getSeenRuleKey(ruleCssText);
+          if (ruleKey === oldKey) {
+            try {
+              sheet.deleteRule(i);
+              sheetInsert(sheet, group, newCssText);
+              break;
+            } catch (e) {}
+          }
+        }
+      }
+    } else {
+      insert(newCssText, groupValue);
+    }
+  }
   const OrderedCSSStyleSheet = {
     getTextContent() {
       return getOrderedGroups(groups).map(group => {
@@ -94,33 +165,8 @@ function createOrderedCSSStyleSheet(sheet) {
         return rules.join('\n');
       }).join('\n');
     },
-    insert(cssText, groupValue) {
-      const group = Number(groupValue);
-      if (groups[group] == null) {
-        const markerRule = encodeGroupRule(group);
-        groups[group] = {
-          start: null,
-          rules: [markerRule]
-        };
-        if (sheet != null) {
-          sheetInsert(sheet, group, markerRule);
-        }
-      }
-      const key = getSeenRuleKey(cssText);
-      if (key != null && seenRules[key] == null) {
-        seenRules[key] = true;
-        let shouldUpdate = true;
-        if (sheet != null) {
-          const isInserted = sheetInsert(sheet, group, cssText);
-          if (!isInserted) {
-            shouldUpdate = false;
-          }
-        }
-        if (shouldUpdate) {
-          groups[group].rules.push(cssText);
-        }
-      }
-    }
+    insert,
+    update
   };
   return OrderedCSSStyleSheet;
 }
@@ -196,14 +242,92 @@ function createSheet(root) {
       sheets.forEach(s => {
         s.insert(cssText, groupValue);
       });
+    },
+    update(oldCssText, newCssText, groupValue) {
+      sheets.forEach(s => {
+        s.update(oldCssText, newCssText, groupValue);
+      });
     }
   };
 }
 
 const sheet = createSheet();
-function inject(cssText, priority) {
-  const text = addSpecificityLevel(cssText, Math.floor(priority / 1000));
+const constants = {};
+const dependencies = {};
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function resolveConstants(cssText) {
+  let resolved = cssText;
+  const varPattern = /var\(--([a-z0-9]+)\)/gi;
+  varPattern.lastIndex = 0;
+  const replacements = [];
+  let match = varPattern.exec(cssText);
+  while (match != null) {
+    const constKey = match[1];
+    if (constKey != null && constants[constKey] !== undefined) {
+      const constVal = constants[constKey];
+      const constValStr = String(constVal);
+      replacements.push([`var(--${constKey})`, constValStr]);
+    }
+    match = varPattern.exec(cssText);
+  }
+  for (const [search, replace] of replacements) {
+    const regex = new RegExp(escapeRegex(search), 'g');
+    resolved = resolved.replace(regex, replace);
+  }
+  return resolved;
+}
+function trackDependencies(originalCssText, priority, resolvedCss) {
+  const varPattern = /var\(--([a-z0-9]+)\)/gi;
+  let match = varPattern.exec(originalCssText);
+  while (match != null) {
+    const constKey = match[1];
+    if (constKey != null && constants[constKey] !== undefined) {
+      if (!dependencies[constKey]) {
+        dependencies[constKey] = new Map();
+      }
+      dependencies[constKey].set(originalCssText, {
+        priority,
+        resolvedCss
+      });
+    }
+    match = varPattern.exec(originalCssText);
+  }
+}
+function updateDependentRules(constKey) {
+  const deps = dependencies[constKey];
+  if (!deps || deps.size === 0) {
+    return;
+  }
+  deps.forEach(({
+    priority,
+    resolvedCss: oldResolvedCss
+  }, cssText) => {
+    const newResolvedCss = resolveConstants(cssText);
+    const oldText = addSpecificityLevel(oldResolvedCss, Math.floor(priority / 1000));
+    const newText = addSpecificityLevel(newResolvedCss, Math.floor(priority / 1000));
+    deps.set(cssText, {
+      priority,
+      resolvedCss: newResolvedCss
+    });
+    sheet.update(oldText, newText, priority);
+  });
+}
+function inject(cssText, priority, constKey, constVal) {
+  if (constKey !== undefined && constVal !== undefined) {
+    const hadPreviousValue = constants[constKey] !== undefined;
+    const valueChanged = hadPreviousValue && constants[constKey] !== constVal;
+    constants[constKey] = constVal;
+    if (valueChanged) {
+      updateDependentRules(constKey);
+    }
+    return '';
+  }
+  const resolved = resolveConstants(cssText);
+  const text = addSpecificityLevel(resolved, Math.floor(priority / 1000));
   sheet.insert(text, priority);
+  trackDependencies(cssText, priority, resolved);
   return text;
 }
 

package/lib/cjs/inject.js.flow

@@ -10,4 +10,6 @@
 declare export default function inject(
   cssText: string,
   priority: number,
+  constKey?: string,
+  constVal?: string | number,
 ): string;

package/lib/cjs/stylesheet/createOrderedCSSStyleSheet.d.ts

@@ -10,6 +10,7 @@
 export type OrderedCSSStyleSheet = Readonly<{
   getTextContent: () => string;
   insert: (cssText: string, groupValue: number) => void;
+  update: (oldCssText: string, newCssText: string, groupValue: number) => void;
 }>;
 /**
  * Order-based insertion of CSS.

package/lib/cjs/stylesheet/createOrderedCSSStyleSheet.js.flow

@@ -10,6 +10,7 @@
 export type OrderedCSSStyleSheet = $ReadOnly<{
   getTextContent: () => string,
   insert: (cssText: string, groupValue: number) => void,
+  update: (oldCssText: string, newCssText: string, groupValue: number) => void,
 }>;
 
 /**

package/lib/cjs/stylesheet/createSheet.d.ts

@@ -8,5 +8,5 @@
  */
 
 import type { OrderedCSSStyleSheet } from './createOrderedCSSStyleSheet';
-type Sheet = Readonly<Omit<OrderedCSSStyleSheet, keyof ({})> & {}>;
+type Sheet = Readonly<Omit<OrderedCSSStyleSheet, keyof {}> & {}>;
 export declare function createSheet(root?: HTMLElement): Sheet;

package/lib/cjs/stylesheet/utils.d.ts

@@ -8,6 +8,7 @@
  */
 
 export declare const canUseDOM: boolean;
+export declare type canUseDOM = typeof canUseDOM;
 /**
  * Adds :not(#\#) to selectors to increase their specificity.
  * This is used to polyfill @layer

package/lib/cjs/stylex.d.ts

@@ -51,15 +51,23 @@ export type {
   PositionTry,
 };
 export declare const create: StyleX$Create;
+export declare type create = typeof create;
 export declare const createTheme: StyleX$CreateTheme;
+export declare type createTheme = typeof createTheme;
 export declare const defineConsts: StyleX$DefineConsts;
+export declare type defineConsts = typeof defineConsts;
 export declare const defineVars: StyleX$DefineVars;
+export declare type defineVars = typeof defineVars;
 export declare const defineMarker: StyleX$DefineMarker;
+export declare type defineMarker = typeof defineMarker;
 export declare const firstThatWorks: <T extends string | number>(
   ..._styles: ReadonlyArray<T>
 ) => ReadonlyArray<T>;
+export declare type firstThatWorks = typeof firstThatWorks;
 export declare const keyframes: (_keyframes: Keyframes) => string;
+export declare type keyframes = typeof keyframes;
 export declare const positionTry: (_positionTry: PositionTry) => string;
+export declare type positionTry = typeof positionTry;
 export declare function props(
   this: null | undefined | unknown,
   ...styles: ReadonlyArray<
@@ -77,10 +85,13 @@ export declare function props(
 export declare const viewTransitionClass: (
   _viewTransitionClass: ViewTransitionClass,
 ) => string;
+export declare type viewTransitionClass = typeof viewTransitionClass;
 export declare const defaultMarker: () => MapNamespace<
   Readonly<{ marker: 'default-marker' }>
 >;
+export declare type defaultMarker = typeof defaultMarker;
 export declare const when: StyleX$When;
+export declare type when = typeof when;
 export declare const types: {
   angle: <T extends string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
@@ -114,6 +125,7 @@ export declare const types: {
     _v: ValueWithDefault<T>,
   ) => Types.TransformList<T>;
 };
+export declare type types = typeof types;
 /**
  * DO NOT USE. Legacy export for Meta
  */
@@ -159,3 +171,4 @@ type IStyleX = {
   __customProperties?: { [$$Key$$: string]: unknown };
 };
 export declare const legacyMerge: IStyleX;
+export declare type legacyMerge = typeof legacyMerge;

package/lib/es/inject.d.ts

@@ -7,5 +7,10 @@
  *
  */
 
-declare function inject(cssText: string, priority: number): string;
+declare function inject(
+  cssText: string,
+  priority: number,
+  constKey?: string,
+  constVal?: string | number,
+): string;
 export default inject;

package/lib/es/inject.js.flow

@@ -10,4 +10,6 @@
 declare export default function inject(
   cssText: string,
   priority: number,
+  constKey?: string,
+  constVal?: string | number,
 ): string;

package/lib/es/inject.mjs

@@ -7,8 +7,11 @@ function addSpecificityLevel(cssText, index) {
     length: index
   }).map(() => ':not(#\\#)').join('');
   const lastOpenCurly = cssText.includes('::') ? cssText.indexOf('::') : cssText.lastIndexOf('{');
-  const beforeCurly = cssText.slice(0, lastOpenCurly);
+  let beforeCurly = cssText.slice(0, lastOpenCurly);
   const afterCurly = cssText.slice(lastOpenCurly);
+  if (index > 0) {
+    beforeCurly = beforeCurly.trimEnd();
+  }
   return `${beforeCurly}${pseudoSelector}${afterCurly}`;
 }
 
@@ -80,6 +83,74 @@ function createOrderedCSSStyleSheet(sheet) {
     }
     return isInserted;
   }
+  function insert(cssText, groupValue) {
+    const group = Number(groupValue);
+    if (groups[group] == null) {
+      const markerRule = encodeGroupRule(group);
+      groups[group] = {
+        start: null,
+        rules: [markerRule]
+      };
+      if (sheet != null) {
+        sheetInsert(sheet, group, markerRule);
+      }
+    }
+    const key = getSeenRuleKey(cssText);
+    if (key != null && seenRules[key] == null) {
+      seenRules[key] = true;
+      let shouldUpdate = true;
+      if (sheet != null) {
+        const isInserted = sheetInsert(sheet, group, cssText);
+        if (!isInserted) {
+          shouldUpdate = false;
+        }
+      }
+      if (shouldUpdate) {
+        groups[group].rules.push(cssText);
+      }
+    }
+  }
+  function update(oldCssText, newCssText, groupValue) {
+    const group = Number(groupValue);
+    const oldKey = getSeenRuleKey(oldCssText);
+    const newKey = getSeenRuleKey(newCssText);
+    if (oldKey !== newKey || oldKey == null) {
+      insert(newCssText, groupValue);
+      return;
+    }
+    if (seenRules[oldKey]) {
+      if (groups[group] && groups[group].rules) {
+        const rules = groups[group].rules;
+        let foundIndex = -1;
+        for (let i = 0; i < rules.length; i++) {
+          if (getSeenRuleKey(rules[i]) === oldKey) {
+            foundIndex = i;
+            break;
+          }
+        }
+        if (foundIndex !== -1) {
+          rules[foundIndex] = newCssText;
+        }
+      }
+      if (sheet != null) {
+        const cssRules = sheet.cssRules;
+        for (let i = cssRules.length - 1; i >= 0; i--) {
+          const rule = cssRules[i];
+          const ruleCssText = rule.cssText;
+          const ruleKey = getSeenRuleKey(ruleCssText);
+          if (ruleKey === oldKey) {
+            try {
+              sheet.deleteRule(i);
+              sheetInsert(sheet, group, newCssText);
+              break;
+            } catch (e) {}
+          }
+        }
+      }
+    } else {
+      insert(newCssText, groupValue);
+    }
+  }
   const OrderedCSSStyleSheet = {
     getTextContent() {
       return getOrderedGroups(groups).map(group => {
@@ -92,33 +163,8 @@ function createOrderedCSSStyleSheet(sheet) {
         return rules.join('\n');
       }).join('\n');
     },
-    insert(cssText, groupValue) {
-      const group = Number(groupValue);
-      if (groups[group] == null) {
-        const markerRule = encodeGroupRule(group);
-        groups[group] = {
-          start: null,
-          rules: [markerRule]
-        };
-        if (sheet != null) {
-          sheetInsert(sheet, group, markerRule);
-        }
-      }
-      const key = getSeenRuleKey(cssText);
-      if (key != null && seenRules[key] == null) {
-        seenRules[key] = true;
-        let shouldUpdate = true;
-        if (sheet != null) {
-          const isInserted = sheetInsert(sheet, group, cssText);
-          if (!isInserted) {
-            shouldUpdate = false;
-          }
-        }
-        if (shouldUpdate) {
-          groups[group].rules.push(cssText);
-        }
-      }
-    }
+    insert,
+    update
   };
   return OrderedCSSStyleSheet;
 }
@@ -194,14 +240,92 @@ function createSheet(root) {
       sheets.forEach(s => {
         s.insert(cssText, groupValue);
       });
+    },
+    update(oldCssText, newCssText, groupValue) {
+      sheets.forEach(s => {
+        s.update(oldCssText, newCssText, groupValue);
+      });
     }
   };
 }
 
 const sheet = createSheet();
-function inject(cssText, priority) {
-  const text = addSpecificityLevel(cssText, Math.floor(priority / 1000));
+const constants = {};
+const dependencies = {};
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function resolveConstants(cssText) {
+  let resolved = cssText;
+  const varPattern = /var\(--([a-z0-9]+)\)/gi;
+  varPattern.lastIndex = 0;
+  const replacements = [];
+  let match = varPattern.exec(cssText);
+  while (match != null) {
+    const constKey = match[1];
+    if (constKey != null && constants[constKey] !== undefined) {
+      const constVal = constants[constKey];
+      const constValStr = String(constVal);
+      replacements.push([`var(--${constKey})`, constValStr]);
+    }
+    match = varPattern.exec(cssText);
+  }
+  for (const [search, replace] of replacements) {
+    const regex = new RegExp(escapeRegex(search), 'g');
+    resolved = resolved.replace(regex, replace);
+  }
+  return resolved;
+}
+function trackDependencies(originalCssText, priority, resolvedCss) {
+  const varPattern = /var\(--([a-z0-9]+)\)/gi;
+  let match = varPattern.exec(originalCssText);
+  while (match != null) {
+    const constKey = match[1];
+    if (constKey != null && constants[constKey] !== undefined) {
+      if (!dependencies[constKey]) {
+        dependencies[constKey] = new Map();
+      }
+      dependencies[constKey].set(originalCssText, {
+        priority,
+        resolvedCss
+      });
+    }
+    match = varPattern.exec(originalCssText);
+  }
+}
+function updateDependentRules(constKey) {
+  const deps = dependencies[constKey];
+  if (!deps || deps.size === 0) {
+    return;
+  }
+  deps.forEach(({
+    priority,
+    resolvedCss: oldResolvedCss
+  }, cssText) => {
+    const newResolvedCss = resolveConstants(cssText);
+    const oldText = addSpecificityLevel(oldResolvedCss, Math.floor(priority / 1000));
+    const newText = addSpecificityLevel(newResolvedCss, Math.floor(priority / 1000));
+    deps.set(cssText, {
+      priority,
+      resolvedCss: newResolvedCss
+    });
+    sheet.update(oldText, newText, priority);
+  });
+}
+function inject(cssText, priority, constKey, constVal) {
+  if (constKey !== undefined && constVal !== undefined) {
+    const hadPreviousValue = constants[constKey] !== undefined;
+    const valueChanged = hadPreviousValue && constants[constKey] !== constVal;
+    constants[constKey] = constVal;
+    if (valueChanged) {
+      updateDependentRules(constKey);
+    }
+    return '';
+  }
+  const resolved = resolveConstants(cssText);
+  const text = addSpecificityLevel(resolved, Math.floor(priority / 1000));
   sheet.insert(text, priority);
+  trackDependencies(cssText, priority, resolved);
   return text;
 }
 

package/lib/es/stylesheet/createOrderedCSSStyleSheet.d.ts

@@ -10,6 +10,7 @@
 export type OrderedCSSStyleSheet = Readonly<{
   getTextContent: () => string;
   insert: (cssText: string, groupValue: number) => void;
+  update: (oldCssText: string, newCssText: string, groupValue: number) => void;
 }>;
 /**
  * Order-based insertion of CSS.

package/lib/es/stylesheet/createOrderedCSSStyleSheet.js.flow

@@ -10,6 +10,7 @@
 export type OrderedCSSStyleSheet = $ReadOnly<{
   getTextContent: () => string,
   insert: (cssText: string, groupValue: number) => void,
+  update: (oldCssText: string, newCssText: string, groupValue: number) => void,
 }>;
 
 /**

package/lib/es/stylesheet/createSheet.d.ts

@@ -8,5 +8,5 @@
  */
 
 import type { OrderedCSSStyleSheet } from './createOrderedCSSStyleSheet';
-type Sheet = Readonly<Omit<OrderedCSSStyleSheet, keyof ({})> & {}>;
+type Sheet = Readonly<Omit<OrderedCSSStyleSheet, keyof {}> & {}>;
 export declare function createSheet(root?: HTMLElement): Sheet;

package/lib/es/stylesheet/utils.d.ts

@@ -8,6 +8,7 @@
  */
 
 export declare const canUseDOM: boolean;
+export declare type canUseDOM = typeof canUseDOM;
 /**
  * Adds :not(#\#) to selectors to increase their specificity.
  * This is used to polyfill @layer

package/lib/es/stylex.d.ts

@@ -51,15 +51,23 @@ export type {
   PositionTry,
 };
 export declare const create: StyleX$Create;
+export declare type create = typeof create;
 export declare const createTheme: StyleX$CreateTheme;
+export declare type createTheme = typeof createTheme;
 export declare const defineConsts: StyleX$DefineConsts;
+export declare type defineConsts = typeof defineConsts;
 export declare const defineVars: StyleX$DefineVars;
+export declare type defineVars = typeof defineVars;
 export declare const defineMarker: StyleX$DefineMarker;
+export declare type defineMarker = typeof defineMarker;
 export declare const firstThatWorks: <T extends string | number>(
   ..._styles: ReadonlyArray<T>
 ) => ReadonlyArray<T>;
+export declare type firstThatWorks = typeof firstThatWorks;
 export declare const keyframes: (_keyframes: Keyframes) => string;
+export declare type keyframes = typeof keyframes;
 export declare const positionTry: (_positionTry: PositionTry) => string;
+export declare type positionTry = typeof positionTry;
 export declare function props(
   this: null | undefined | unknown,
   ...styles: ReadonlyArray<
@@ -77,10 +85,13 @@ export declare function props(
 export declare const viewTransitionClass: (
   _viewTransitionClass: ViewTransitionClass,
 ) => string;
+export declare type viewTransitionClass = typeof viewTransitionClass;
 export declare const defaultMarker: () => MapNamespace<
   Readonly<{ marker: 'default-marker' }>
 >;
+export declare type defaultMarker = typeof defaultMarker;
 export declare const when: StyleX$When;
+export declare type when = typeof when;
 export declare const types: {
   angle: <T extends string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
@@ -114,6 +125,7 @@ export declare const types: {
     _v: ValueWithDefault<T>,
   ) => Types.TransformList<T>;
 };
+export declare type types = typeof types;
 /**
  * DO NOT USE. Legacy export for Meta
  */
@@ -159,3 +171,4 @@ type IStyleX = {
   __customProperties?: { [$$Key$$: string]: unknown };
 };
 export declare const legacyMerge: IStyleX;
+export declare type legacyMerge = typeof legacyMerge;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "./lib/cjs/stylex.js",
   "module": "./lib/es/stylex.mjs",
@@ -57,11 +57,11 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
-    "babel-plugin-syntax-hermes-parser": "^0.26.0",
-    "cross-env": "^7.0.3",
-    "rimraf": "^5.0.10",
+    "babel-plugin-syntax-hermes-parser": "^0.32.1",
+    "cross-env": "^10.1.0",
+    "rimraf": "^6.1.2",
     "rollup": "^4.24.0",
-    "scripts": "0.17.0"
+    "scripts": "0.17.1"
   },
   "files": [
     "lib/*"