@stylexjs/shared - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0-beta.1

lib/common-types.d.ts

@@ -39,2 +39,3 @@ /**
   dev: boolean;
+  debug: null | undefined | boolean;
   test: boolean;
@@ -41,0 +42,0 @@ useRemForFontSize: boolean;

lib/convert-to-className.d.ts

@@ -19,3 +19,3 @@ /**
   values: ReadonlyArray<string>,
-): Array<string>;
+): ReadonlyArray<string>;
 export default variableFallbacks;

lib/convert-to-className.js

@@ -13,4 +13,4 @@ "use strict";
 var _defaultOptions = require("./utils/default-options");
-var _objectUtils = require("./utils/object-utils");
 var messages = _interopRequireWildcard(require("./messages"));
+var _ruleUtils = require("./utils/rule-utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -22,3 +22,4 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
   const {
-    classNamePrefix = 'x'
+    classNamePrefix = 'x',
+    debug = false
   } = options;
@@ -31,9 +32,10 @@ const [key, rawValue] = objEntry;
   }
-  const sortedPseudos = (0, _objectUtils.arraySort)(pseudos ?? []);
-  const sortedAtRules = (0, _objectUtils.arraySort)(atRules ?? []);
-  const atRuleHashString = sortedPseudos.join('');
-  const pseudoHashString = sortedAtRules.join('');
-  const modifierHashString = atRuleHashString + pseudoHashString || 'null';
-  const stringToHash = Array.isArray(value) ? dashedKey + value.join(', ') + modifierHashString : dashedKey + value + modifierHashString;
-  const className = classNamePrefix + (0, _hash.default)('<>' + stringToHash);
+  const sortedPseudos = (0, _ruleUtils.sortPseudos)(pseudos ?? []);
+  const sortedAtRules = (0, _ruleUtils.sortAtRules)(atRules ?? []);
+  const pseudoHashString = sortedPseudos.join('');
+  const atRuleHashString = sortedAtRules.join('');
+  const modifierHashString = pseudoHashString + atRuleHashString || 'null';
+  const valueAsString = Array.isArray(value) ? value.join(', ') : value;
+  const stringToHash = dashedKey + valueAsString + modifierHashString;
+  const className = debug ? `${key}-${classNamePrefix}${(0, _hash.default)('<>' + stringToHash)}` : classNamePrefix + (0, _hash.default)('<>' + stringToHash);
   const cssRules = (0, _generateCssRule.generateRule)(className, dashedKey, value, pseudos, atRules);
@@ -40,0 +42,0 @@ return [key, className, cssRules];

lib/preprocess-rules/flatten-raw-style-obj.d.ts

@@ -22,5 +22,4 @@ /**
   style: RawStyles,
-  pseudos: ReadonlyArray<string>,
-  atRules: ReadonlyArray<string>,
+  keyPath: ReadonlyArray<string>,
   options: StyleXOptions,
 ): Array<Readonly<[string, AnyPreRule | PreIncludedStylesRule]>>;

lib/preprocess-rules/flatten-raw-style-obj.js

@@ -13,5 +13,5 @@ "use strict";
 function flattenRawStyleObject(style, options) {
-  return _flattenRawStyleObject(style, [], [], options);
+  return _flattenRawStyleObject(style, [], options);
 }
-function _flattenRawStyleObject(style, pseudos, atRules, options) {
+function _flattenRawStyleObject(style, keyPath, options) {
   const flattened = [];
@@ -31,3 +31,3 @@ for (const _key in style) {
         } else {
-          flattened.push([property, new _PreRule.PreRule(property, value, pseudos, atRules)]);
+          flattened.push([property, new _PreRule.PreRule(property, value, keyPath.includes(key) ? keyPath.map(k => k === key ? property : k) : [...keyPath, property])]);
         }
@@ -66,3 +66,3 @@ }
         } else {
-          flattened.push([property, new _PreRule.PreRule(property, value, pseudos, atRules)]);
+          flattened.push([property, new _PreRule.PreRule(property, value, keyPath.includes(_key) ? keyPath.map(k => k === _key ? property : k) : [...keyPath, property])]);
         }
@@ -76,12 +76,5 @@ });
         const innerValue = value[condition];
-        const pseudosToPassDown = [...pseudos];
-        const atRulesToPassDown = [...atRules];
-        if (condition.startsWith(':')) {
-          pseudosToPassDown.push(condition);
-        } else if (condition.startsWith('@')) {
-          atRulesToPassDown.push(condition);
-        }
         const pairs = _flattenRawStyleObject({
           [key]: innerValue
-        }, pseudosToPassDown, atRulesToPassDown, options);
+        }, keyPath.length > 0 ? [...keyPath, condition] : [key, condition], options);
         for (const [property, preRule] of pairs) {
@@ -110,10 +103,3 @@ if (preRule instanceof _PreRule.PreIncludedStylesRule) {
     if (typeof value === 'object' && (key.startsWith(':') || key.startsWith('@'))) {
-      const pseudosToPassDown = [...pseudos];
-      const atRulesToPassDown = [...atRules];
-      if (key.startsWith(':')) {
-        pseudosToPassDown.push(key);
-      } else if (key.startsWith('@')) {
-        atRulesToPassDown.push(key);
-      }
-      const pairs = _flattenRawStyleObject(value, pseudosToPassDown, atRulesToPassDown, options);
+      const pairs = _flattenRawStyleObject(value, [...keyPath, _key], options);
       for (const [property, preRule] of pairs) {
@@ -120,0 +106,0 @@ flattened.push([key + '_' + property, preRule]);

lib/preprocess-rules/index.d.ts

@@ -16,4 +16,4 @@ /**
   objEntry: Readonly<[string, TStyleValue]>,
-  options: StyleXOptions,
+  options: Readonly<{ styleResolution: StyleXOptions['styleResolution'] }>,
 ): ReadonlyArray<[string, TStyleValue]>;
 export default flatMapExpandedShorthands;

lib/preprocess-rules/legacy-expand-shorthands.js

@@ -41,2 +41,13 @@ "use strict";
   },
+  containIntrinsicSize: rawValue => {
+    const parts = (0, _splitCssValue.default)(rawValue);
+    const [width, height = width] = parts.reduce((coll, part) => {
+      const lastElement = coll[coll.length - 1];
+      if (lastElement === 'auto' && part != null) {
+        return [...coll.slice(0, -1), `auto ${part}`];
+      }
+      return [...coll, part];
+    }, []);
+    return [['containIntrinsicWidth', width], ['containIntrinsicHeight', height]];
+  },
   inset: rawValue => [['top', rawValue], ['end', rawValue], ['bottom', rawValue], ['start', rawValue]],
@@ -43,0 +54,0 @@ insetInline: rawValue => [...shorthands.start(rawValue), ...shorthands.end(rawValue)],

lib/preprocess-rules/PreRule.d.ts

@@ -12,3 +12,8 @@ /**
 import type { IncludedStyles } from '../stylex-include';
-export type ComputedStyle = null | Readonly<[string, InjectableStyle]>;
+export type ClassesToOriginalPaths = {
+  readonly [className: string]: ReadonlyArray<string>;
+};
+export type ComputedStyle = null | Readonly<
+  [string, InjectableStyle, ClassesToOriginalPaths]
+>;
 export interface IPreRule {
@@ -34,11 +39,13 @@ compiled(
   readonly value: string | number | ReadonlyArray<string | number>;
-  readonly pseudos: ReadonlyArray<string>;
-  readonly atRules: ReadonlyArray<string>;
+  readonly keyPath: ReadonlyArray<string>;
   constructor(
     property: string,
     value: string | number | ReadonlyArray<string | number>,
-    pseudos?: null | undefined | ReadonlyArray<string>,
-    atRules?: null | undefined | ReadonlyArray<string>,
+    keyPath?: ReadonlyArray<string>,
   );
-  compiled(options: StyleXOptions): ReadonlyArray<[string, InjectableStyle]>;
+  get pseudos(): ReadonlyArray<string>;
+  get atRules(): ReadonlyArray<string>;
+  compiled(
+    options: StyleXOptions,
+  ): ReadonlyArray<[string, InjectableStyle, ClassesToOriginalPaths]>;
   equals(other: IPreRule): boolean;
@@ -45,0 +52,0 @@ }

lib/preprocess-rules/PreRule.js

@@ -9,2 +9,3 @@ "use strict";
 var _objectUtils = require("../utils/object-utils");
+var _ruleUtils = require("../utils/rule-utils");
 class NullPreRule {
@@ -31,21 +32,21 @@ compiled(_options) {
 exports.PreIncludedStylesRule = PreIncludedStylesRule;
-const stringComparator = (a, b) => {
-  if (a === 'default') {
-    return -1;
-  }
-  if (b === 'default') {
-    return 1;
-  }
-  return a.localeCompare(b);
-};
 class PreRule {
-  constructor(property, value, pseudos, atRules) {
+  constructor(property, value, keyPath) {
     this.property = property;
+    this.keyPath = keyPath ?? [];
     this.value = value;
-    this.pseudos = pseudos ? (0, _objectUtils.arraySort)(pseudos, stringComparator) : [];
-    this.atRules = atRules ? (0, _objectUtils.arraySort)(atRules) : [];
   }
+  get pseudos() {
+    const unsortedPseudos = this.keyPath.filter(key => key.startsWith(':'));
+    return (0, _ruleUtils.sortPseudos)(unsortedPseudos);
+  }
+  get atRules() {
+    const unsortedAtRules = this.keyPath.filter(key => key.startsWith('@'));
+    return (0, _ruleUtils.sortAtRules)(unsortedAtRules);
+  }
   compiled(options) {
     const [_key, className, rule] = (0, _convertToClassName.convertStyleToClassName)([this.property, this.value], this.pseudos ?? [], this.atRules ?? [], options);
-    return [[className, rule]];
+    return [[className, rule, {
+      [className]: this.keyPath
+    }]];
   }
@@ -52,0 +53,0 @@ equals(other) {

lib/stylex-create.d.ts

@@ -16,2 +16,5 @@ /**
 } from './common-types';
+type ClassPathsInNamespace = {
+  readonly [className: string]: ReadonlyArray<string>;
+};
 declare function styleXCreateSet(
@@ -23,3 +26,4 @@ namespaces: { readonly [$$Key$$: string]: RawStyles },
   { [$$Key$$: string]: InjectableStyle },
+  { readonly [$$Key$$: string]: ClassPathsInNamespace },
 ];
 export default styleXCreateSet;

lib/stylex-create.js

@@ -7,3 +7,2 @@ "use strict";
 exports.default = styleXCreateSet;
-var _objectUtils = require("./utils/object-utils");
 var _stylexInclude = require("./stylex-include");
@@ -17,6 +16,16 @@ var _defaultOptions = require("./utils/default-options");
   const injectedStyles = {};
+  const namespaceToClassPaths = {};
   for (const namespaceName of Object.keys(namespaces)) {
     const namespace = namespaces[namespaceName];
+    const classPathsInNamespace = {};
     (0, _basicValidation.validateNamespace)(namespace);
-    const flattenedNamespace = (0, _flattenRawStyleObj.flattenRawStyleObject)(namespace, options);
+    const seenProperties = new Set();
+    const flattenedNamespace = (0, _flattenRawStyleObj.flattenRawStyleObject)(namespace, options).reduceRight((arr, curr) => {
+      if (seenProperties.has(curr[0])) {
+        return arr;
+      }
+      seenProperties.add(curr[0]);
+      arr.unshift(curr);
+      return arr;
+    }, []);
     const compiledNamespaceTuples = flattenedNamespace.map(_ref => {
@@ -26,6 +35,4 @@ let [key, value] = _ref;
     });
-    const compiledNamespace = (0, _objectUtils.objFromEntries)(compiledNamespaceTuples);
     const namespaceObj = {};
-    for (const key of Object.keys(compiledNamespace)) {
-      const value = compiledNamespace[key];
+    for (const [key, value] of compiledNamespaceTuples) {
       if (value instanceof _stylexInclude.IncludedStyles) {
@@ -35,4 +42,8 @@ namespaceObj[key] = value;
         const classNameTuples = value.map(v => Array.isArray(v) ? v : null).filter(Boolean);
-        const className = classNameTuples.map(_ref2 => {
-          let [className] = _ref2;
+        classNameTuples.forEach(_ref2 => {
+          let [_className, _, classesToOriginalPath] = _ref2;
+          Object.assign(classPathsInNamespace, classesToOriginalPath);
+        });
+        const className = classNameTuples.map(_ref3 => {
+          let [className] = _ref3;
           return className;
@@ -52,4 +63,5 @@ }).join(' ') || null;
     };
+    namespaceToClassPaths[namespaceName] = classPathsInNamespace;
   }
-  return [resolvedNamespaces, injectedStyles];
+  return [resolvedNamespaces, injectedStyles, namespaceToClassPaths];
 }

lib/transform-value.js

@@ -47,2 +47,2 @@ "use strict";
 const timeUnits = exports.timeUnits = new Set(Object.keys(numberPropertySuffixes));
-const lengthUnits = exports.lengthUnits = new Set(['backgroundPositionX', 'backgroundPositionY', 'blockSize', 'borderBlockEndWidth', 'borderBlockStartWidth', 'borderBlockWidth', 'borderVerticalWidth', 'borderVerticalWidth', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomWidth', 'borderEndEndRadius', 'borderEndStartRadius', 'borderInlineEndWidth', 'borderEndWidth', 'borderInlineStartWidth', 'borderStartWidth', 'borderInlineWidth', 'borderHorizontalWidth', 'borderLeftWidth', 'borderRightWidth', 'borderSpacing', 'borderStartEndRadius', 'borderStartStartRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopWidth', 'bottom', 'columnGap', 'columnRuleWidth', 'columnWidth', 'containIntrinsicBlockSize', 'containIntrinsicHeight', 'containIntrinsicInlineSize', 'containIntrinsicWidth', 'flexBasis', 'fontSize', 'fontSmooth', 'height', 'inlineSize', 'insetBlockEnd', 'insetBlockStart', 'insetInlineEnd', 'insetInlineStart', 'left', 'letterSpacing', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', 'marginInlineEnd', 'marginEnd', 'marginInlineStart', 'marginStart', 'marginLeft', 'marginRight', 'marginTop', 'maskBorderOutset', 'maskBorderWidth', 'maxBlockSize', 'maxHeight', 'maxInlineSize', 'maxWidth', 'minBlockSize', 'minHeight', 'minInlineSize', 'minWidth', 'offsetDistance', 'outlineOffset', 'outlineWidth', 'overflowClipMargin', 'paddingBlockEnd', 'paddingBlockStart', 'paddingBottom', 'paddingInlineEnd', 'paddingEnd', 'paddingInlineStart', 'paddingStart', 'paddingLeft', 'paddingRight', 'paddingTop', 'perspective', 'right', 'rowGap', 'scrollMarginBlockEnd', 'scrollMarginBlockStart', 'scrollMarginBottom', 'scrollMarginInlineEnd', 'scrollMarginInlineStart', 'scrollMarginLeft', 'scrollMarginRight', 'scrollMarginTop', 'scrollPaddingBlockEnd', 'scrollPaddingBlockStart', 'scrollPaddingBottom', 'scrollPaddingInlineEnd', 'scrollPaddingInlineStart', 'scrollPaddingLeft', 'scrollPaddingRight', 'scrollPaddingTop', 'scrollSnapMarginBottom', 'scrollSnapMarginLeft', 'scrollSnapMarginRight', 'scrollSnapMarginTop', 'shapeMargin', 'tabSize', 'textDecorationThickness', 'textIndent', 'textUnderlineOffset', 'top', 'transformOrigin', 'translate', 'verticalAlign', 'width', 'wordSpacing', 'border', 'borderBlock', 'borderBlockEnd', 'borderBlockStart', 'borderBottom', 'borderLeft', 'borderRadius', 'borderRight', 'borderTop', 'borderWidth', 'columnRule', 'containIntrinsicSize', 'gap', 'inset', 'insetBlock', 'insetInline', 'margin', 'marginBlock', 'marginVertical', 'marginInline', 'marginHorizontal', 'offset', 'outline', 'padding', 'paddingBlock', 'paddingVertical', 'paddingInline', 'paddingHorizontal', 'scrollMargin', 'scrollMarginBlock', 'scrollMarginInline', 'scrollPadding', 'scrollPaddingBlock', 'scrollPaddingInline', 'scrollSnapMargin']);
+const lengthUnits = exports.lengthUnits = new Set(['backgroundPositionX', 'backgroundPositionY', 'blockSize', 'borderBlockEndWidth', 'borderBlockStartWidth', 'borderBlockWidth', 'borderVerticalWidth', 'borderVerticalWidth', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomWidth', 'borderEndEndRadius', 'borderEndStartRadius', 'borderInlineEndWidth', 'borderEndWidth', 'borderInlineStartWidth', 'borderStartWidth', 'borderInlineWidth', 'borderHorizontalWidth', 'borderLeftWidth', 'borderRightWidth', 'borderSpacing', 'borderStartEndRadius', 'borderStartStartRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopWidth', 'bottom', 'columnGap', 'columnRuleWidth', 'columnWidth', 'containIntrinsicBlockSize', 'containIntrinsicHeight', 'containIntrinsicInlineSize', 'containIntrinsicWidth', 'flexBasis', 'fontSize', 'fontSmooth', 'height', 'inlineSize', 'insetBlockEnd', 'insetBlockStart', 'insetInlineEnd', 'insetInlineStart', 'left', 'letterSpacing', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', 'marginInlineEnd', 'marginEnd', 'marginInlineStart', 'marginStart', 'marginLeft', 'marginRight', 'marginTop', 'maxBlockSize', 'maxHeight', 'maxInlineSize', 'maxWidth', 'minBlockSize', 'minHeight', 'minInlineSize', 'minWidth', 'offsetDistance', 'outlineOffset', 'outlineWidth', 'overflowClipMargin', 'paddingBlockEnd', 'paddingBlockStart', 'paddingBottom', 'paddingInlineEnd', 'paddingEnd', 'paddingInlineStart', 'paddingStart', 'paddingLeft', 'paddingRight', 'paddingTop', 'perspective', 'right', 'rowGap', 'scrollMarginBlockEnd', 'scrollMarginBlockStart', 'scrollMarginBottom', 'scrollMarginInlineEnd', 'scrollMarginInlineStart', 'scrollMarginLeft', 'scrollMarginRight', 'scrollMarginTop', 'scrollPaddingBlockEnd', 'scrollPaddingBlockStart', 'scrollPaddingBottom', 'scrollPaddingInlineEnd', 'scrollPaddingInlineStart', 'scrollPaddingLeft', 'scrollPaddingRight', 'scrollPaddingTop', 'scrollSnapMarginBottom', 'scrollSnapMarginLeft', 'scrollSnapMarginRight', 'scrollSnapMarginTop', 'shapeMargin', 'tabSize', 'textDecorationThickness', 'textIndent', 'textUnderlineOffset', 'top', 'transformOrigin', 'translate', 'verticalAlign', 'width', 'wordSpacing', 'border', 'borderBlock', 'borderBlockEnd', 'borderBlockStart', 'borderBottom', 'borderLeft', 'borderRadius', 'borderRight', 'borderTop', 'borderWidth', 'columnRule', 'containIntrinsicSize', 'gap', 'inset', 'insetBlock', 'insetInline', 'margin', 'marginBlock', 'marginVertical', 'marginInline', 'marginHorizontal', 'offset', 'outline', 'padding', 'paddingBlock', 'paddingVertical', 'paddingInline', 'paddingHorizontal', 'scrollMargin', 'scrollMarginBlock', 'scrollMarginInline', 'scrollPadding', 'scrollPaddingBlock', 'scrollPaddingInline', 'scrollSnapMargin']);

lib/utils/default-options.js

@@ -9,2 +9,3 @@ "use strict";
   dev: false,
+  debug: false,
   useRemForFontSize: true,
@@ -11,0 +12,0 @@ test: false,

package.json

 {
   "name": "@stylexjs/shared",
-  "version": "0.8.0",
+  "version": "0.9.0-beta.1",
   "main": "lib/index.js",
@@ -16,3 +16,3 @@ "repository": "https://www.github.com/facebook/stylex",
   "devDependencies": {
-    "@stylexjs/scripts": "0.8.0"
+    "@stylexjs/scripts": "0.9.0-beta.1"
   },
@@ -19,0 +19,0 @@ "jest": {

No alert changes

Improved metrics

Total package byte prevSize

853525

0.38%

Number of package files

182

1.68%

Lines of code

26010

0.3%

No dependency changes