@stylexjs/shared 0.11.0 → 0.12.0

package/lib/common-types.d.ts

@@ -34,6 +34,9 @@ export type StyleXOptions = Readonly<{
   classNamePrefix: string;
   debug: null | undefined | boolean;
   enableDebugClassNames?: null | undefined | boolean;
+  enableDebugDataProp?: null | undefined | boolean;
+  enableDevClassNames?: null | undefined | boolean;
+  enableMinifiedKeys?: null | undefined | boolean;
   definedStylexCSSVariables?: { [key: string]: unknown };
   dev: boolean;
   styleResolution:

package/lib/common-types.js.flow

@@ -39,6 +39,9 @@ export type StyleXOptions = $ReadOnly<{
   classNamePrefix: string,
   debug: ?boolean,
   enableDebugClassNames?: ?boolean,
+  enableDebugDataProp?: ?boolean,
+  enableDevClassNames?: ?boolean,
+  enableMinifiedKeys?: ?boolean,
   definedStylexCSSVariables?: { [key: string]: mixed },
   dev: boolean,
   styleResolution:

package/lib/hash.d.ts

@@ -9,3 +9,4 @@
 
 declare const $$EXPORT_DEFAULT_DECLARATION$$: (str: string) => string;
 export default $$EXPORT_DEFAULT_DECLARATION$$;
+export declare const createShortHash: (str: string) => string;

package/lib/hash.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.createShortHash = void 0;
 function murmurhash2_32_gc(str) {
   let seed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   let l = str.length,
@@ -34,4 +34,17 @@ function murmurhash2_32_gc(str) {
   return h >>> 0;
 }
 const hash = str => murmurhash2_32_gc(str, 1).toString(36);
-var _default = exports.default = hash;
+var _default = exports.default = hash;
+const base62Chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+function toBase62(num) {
+  let result = '';
+  let _num = num;
+  while (_num > 0) {
+    const remainder = _num % 62;
+    result = base62Chars[remainder] + result;
+    _num = Math.floor(_num / 62);
+  }
+  return result;
+}
+const createShortHash = str => toBase62(murmurhash2_32_gc(str, 1) % 62 ** 5);
+exports.createShortHash = createShortHash;

package/lib/hash.js.flow

@@ -8,3 +8,5 @@
  */
 
 declare export default (str: string) => string;
+
+declare export const createShortHash: (str: string) => string;

package/lib/messages.d.ts

@@ -39,3 +39,4 @@ export declare const NON_EXPORT_NAMED_DECLARATION: 'The return value of stylex.d
 export declare const ANONYMOUS_THEME: 'stylex.createTheme() must be bound to a named constant.';
 export declare const ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS: 'Only named parameters are allowed in Dynamic Style functions. Destructuring, spreading or default values are not allowed.';
 export declare const NON_CONTIGUOUS_VARS: 'All variables passed to `stylex.firstThatWorks` must be contiguous.';
+export declare const NO_OBJECT_SPREADS: 'Object spreads are not allowed in stylex.create call.';

package/lib/messages.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UNKNOWN_PROP_KEY = exports.UNKNOWN_NAMESPACE = exports.UNEXPECTED_ARGUMENT = exports.UNBOUND_STYLEX_CALL_VALUE = exports.ONLY_TOP_LEVEL = exports.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = exports.NO_PROJECT_ROOT_DIRECTORY = exports.NO_PARENT_PATH = exports.NO_CONDITIONAL_SHORTHAND = exports.NON_STATIC_VALUE = exports.NON_STATIC_KEYFRAME_VALUE = exports.NON_OBJECT_KEYFRAME = exports.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL = exports.NON_OBJECT_FOR_STYLEX_CALL = exports.NON_EXPORT_NAMED_DECLARATION = exports.NON_CONTIGUOUS_VARS = exports.LOCAL_ONLY = exports.LINT_UNCLOSED_FUNCTION = exports.INVALID_SPREAD = exports.INVALID_PSEUDO_OR_AT_RULE = exports.INVALID_PSEUDO = exports.ILLEGAL_PROP_VALUE = exports.ILLEGAL_PROP_ARRAY_VALUE = exports.ILLEGAL_NESTED_PSEUDO = exports.ILLEGAL_NAMESPACE_VALUE = exports.ILLEGAL_NAMESPACE_TYPE = exports.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = exports.ILLEGAL_ARGUMENT_LENGTH = exports.EXPECTED_FUNCTION_CALL = exports.ESCAPED_STYLEX_VALUE = exports.DUPLICATE_CONDITIONAL = exports.ANONYMOUS_THEME = void 0;
+exports.UNKNOWN_PROP_KEY = exports.UNKNOWN_NAMESPACE = exports.UNEXPECTED_ARGUMENT = exports.UNBOUND_STYLEX_CALL_VALUE = exports.ONLY_TOP_LEVEL = exports.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = exports.NO_PROJECT_ROOT_DIRECTORY = exports.NO_PARENT_PATH = exports.NO_OBJECT_SPREADS = exports.NO_CONDITIONAL_SHORTHAND = exports.NON_STATIC_VALUE = exports.NON_STATIC_KEYFRAME_VALUE = exports.NON_OBJECT_KEYFRAME = exports.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL = exports.NON_OBJECT_FOR_STYLEX_CALL = exports.NON_EXPORT_NAMED_DECLARATION = exports.NON_CONTIGUOUS_VARS = exports.LOCAL_ONLY = exports.LINT_UNCLOSED_FUNCTION = exports.INVALID_SPREAD = exports.INVALID_PSEUDO_OR_AT_RULE = exports.INVALID_PSEUDO = exports.ILLEGAL_PROP_VALUE = exports.ILLEGAL_PROP_ARRAY_VALUE = exports.ILLEGAL_NESTED_PSEUDO = exports.ILLEGAL_NAMESPACE_VALUE = exports.ILLEGAL_NAMESPACE_TYPE = exports.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = exports.ILLEGAL_ARGUMENT_LENGTH = exports.EXPECTED_FUNCTION_CALL = exports.ESCAPED_STYLEX_VALUE = exports.DUPLICATE_CONDITIONAL = exports.ANONYMOUS_THEME = void 0;
 const ILLEGAL_ARGUMENT_LENGTH = exports.ILLEGAL_ARGUMENT_LENGTH = 'stylex.create() should have 1 argument.';
 const ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = exports.ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES = 'stylex.keyframes() should have 1 argument.';
 const NON_STATIC_VALUE = exports.NON_STATIC_VALUE = 'Only static values are allowed inside of a stylex.create() call.';
@@ -35,4 +35,5 @@ const NO_PROJECT_ROOT_DIRECTORY = exports.NO_PROJECT_ROOT_DIRECTORY = 'The proje
 const NON_EXPORT_NAMED_DECLARATION = exports.NON_EXPORT_NAMED_DECLARATION = 'The return value of stylex.defineVars() must be bound to a named export.';
 const ANONYMOUS_THEME = exports.ANONYMOUS_THEME = 'stylex.createTheme() must be bound to a named constant.';
 const ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = exports.ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS = 'Only named parameters are allowed in Dynamic Style functions. Destructuring, spreading or default values are not allowed.';
-const NON_CONTIGUOUS_VARS = exports.NON_CONTIGUOUS_VARS = 'All variables passed to `stylex.firstThatWorks` must be contiguous.';
+const NON_CONTIGUOUS_VARS = exports.NON_CONTIGUOUS_VARS = 'All variables passed to `stylex.firstThatWorks` must be contiguous.';
+const NO_OBJECT_SPREADS = exports.NO_OBJECT_SPREADS = 'Object spreads are not allowed in stylex.create call.';

package/lib/messages.js.flow

@@ -42,3 +42,4 @@ declare export const NON_EXPORT_NAMED_DECLARATION: 'The return value of stylex.d
 declare export const ANONYMOUS_THEME: 'stylex.createTheme() must be bound to a named constant.';
 declare export const ONLY_NAMED_PARAMETERS_IN_DYNAMIC_STYLE_FUNCTIONS: 'Only named parameters are allowed in Dynamic Style functions. Destructuring, spreading or default values are not allowed.';
 declare export const NON_CONTIGUOUS_VARS: 'All variables passed to `stylex.firstThatWorks` must be contiguous.';
+declare export const NO_OBJECT_SPREADS: 'Object spreads are not allowed in stylex.create call.';

package/lib/stylex-consts-utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+export type ConstsConfigValue = string | number;
+export type ConstsConfig = Readonly<{ [$$Key$$: string]: ConstsConfigValue }>;

package/lib/stylex-consts-utils.js

@@ -0,0 +1 @@
+"use strict";

package/lib/stylex-consts-utils.js.flow

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+export type ConstsConfigValue = string | number;
+
+export type ConstsConfig = $ReadOnly<{
+  [string]: ConstsConfigValue,
+}>;

package/lib/stylex-create.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = styleXCreateSet;
+var _hash = require("./hash");
 var _defaultOptions = require("./utils/default-options");
 var _flattenRawStyleObj = require("./preprocess-rules/flatten-raw-style-obj");
 var _basicValidation = require("./preprocess-rules/basic-validation");
@@ -27,7 +28,13 @@ function styleXCreateSet(namespaces) {
     }, []);
     const compiledNamespaceTuples = flattenedNamespace.map(_ref => {
       let [key, value] = _ref;
-      return [key, value.compiled(options)];
+      if (options.enableMinifiedKeys === true && !key.startsWith('--')) {
+        const hashedKey = (0, _hash.createShortHash)('<>' + key);
+        const displayKey = options.debug === true ? `${key}-k${hashedKey}` : `k${hashedKey}`;
+        return [displayKey, value.compiled(options)];
+      } else {
+        return [key, value.compiled(options)];
+      }
     });
     const namespaceObj = {};
     for (const [key, value] of compiledNamespaceTuples) {

package/lib/stylex-create.js.flow

@@ -13,7 +13,6 @@ import type {
   StyleXOptions,
   FlatCompiledStyles,
 } from './common-types';
-
 type ClassPathsInNamespace = {
   +[className: string]: $ReadOnlyArray<string>,
 };

package/lib/stylex-define-consts.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+import type { InjectableConstStyle, StyleXOptions } from './common-types';
+import type { ConstsConfig } from './stylex-consts-utils';
+declare function styleXDefineConsts<Vars extends ConstsConfig>(
+  constants: Vars,
+  options: Readonly<
+    Omit<Partial<StyleXOptions>, keyof ({ themeName: string })> & {
+      themeName: string;
+    }
+  >,
+): [
+  { [$$Key$$: string]: string | number },
+  { [$$Key$$: string]: InjectableConstStyle },
+];
+export default styleXDefineConsts;

package/lib/stylex-define-consts.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = styleXDefineConsts;
+var _defaultOptions = require("./utils/default-options");
+var messages = _interopRequireWildcard(require("./messages"));
+var _hash = _interopRequireDefault(require("./hash"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+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; }
+function styleXDefineConsts(constants, options) {
+  const {
+    classNamePrefix,
+    themeName,
+    debug,
+    enableDebugClassNames
+  } = {
+    ..._defaultOptions.defaultOptions,
+    ...options
+  };
+  const jsOutput = {};
+  const injectableStyles = {};
+  for (const [key, value] of Object.entries(constants)) {
+    if (key.startsWith('--')) {
+      throw new Error(messages.INVALID_CONST_KEY);
+    }
+    const varSafeKey = (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_');
+    const nameHash = debug && enableDebugClassNames ? `${varSafeKey}-${classNamePrefix}${(0, _hash.default)(`${themeName}.${key}`)}` : `${classNamePrefix}${(0, _hash.default)(`${themeName}.${key}`)}`;
+    jsOutput[key] = value;
+    injectableStyles[nameHash] = {
+      key: nameHash,
+      constKey: varSafeKey,
+      constVal: value,
+      priority: 0,
+      ltr: '',
+      rtl: null
+    };
+  }
+  return [jsOutput, injectableStyles];
+}

package/lib/stylex-define-consts.js.flow

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type { InjectableConstStyle, StyleXOptions } from './common-types';
+import type { ConstsConfig } from './stylex-consts-utils';
+declare export default function styleXDefineConsts<Vars: ConstsConfig>(
+  constants: Vars,
+  options: $ReadOnly<{ ...Partial<StyleXOptions>, themeName: string, ... }>,
+): [
+  { [string]: string | number }, // jsOutput JS output
+  { [string]: InjectableConstStyle }, // metadata for registerinjectableStyles
+];

package/lib/stylex-define-vars.js

@@ -14,7 +14,8 @@ function styleXDefineVars(variables, options) {
   const {
     classNamePrefix,
     themeName,
-    debug
+    debug,
+    enableDebugClassNames
   } = {
     ..._defaultOptions.defaultOptions,
     ...options
@@ -22,7 +23,8 @@ function styleXDefineVars(variables, options) {
   const themeNameHash = classNamePrefix + (0, _hash.default)(themeName);
   const typedVariables = {};
   const variablesMap = (0, _objectUtils.objMap)(variables, (value, key) => {
-    const nameHash = key.startsWith('--') ? key.slice(2) : debug ? key + '-' + classNamePrefix + (0, _hash.default)(`${themeName}.${key}`) : classNamePrefix + (0, _hash.default)(`${themeName}.${key}`);
+    const varSafeKey = (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_');
+    const nameHash = key.startsWith('--') ? key.slice(2) : debug && enableDebugClassNames ? varSafeKey + '-' + classNamePrefix + (0, _hash.default)(`${themeName}.${key}`) : classNamePrefix + (0, _hash.default)(`${themeName}.${key}`);
     if ((0, _types.isCSSType)(value)) {
       const v = value;
       typedVariables[nameHash] = {

package/lib/utils/default-options.js

@@ -5,11 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultOptions = void 0;
 const defaultOptions = exports.defaultOptions = {
+  classNamePrefix: 'x',
   dev: false,
   debug: false,
   enableDebugClassNames: true,
+  enableDebugDataProp: true,
+  enableMinifiedKeys: true,
   useRemForFontSize: true,
-  test: false,
-  classNamePrefix: 'x',
-  styleResolution: 'application-order'
+  styleResolution: 'application-order',
+  test: false
 };

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@stylexjs/shared",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "main": "lib/index.js",
-  "repository": "https://www.github.com/facebook/stylex",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/facebook/stylex.git"
+  },
   "license": "MIT",
   "scripts": {
     "prebuild": "gen-types -i src/ -o lib/",
@@ -13,7 +16,16 @@
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.11.0"
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.8",
+    "@babel/eslint-parser": "^7.26.8",
+    "@babel/plugin-syntax-flow": "^7.26.0",
+    "@babel/preset-env": "^7.26.8",
+    "@babel/preset-flow": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "babel-plugin-syntax-hermes-parser": "^0.26.0",
+    "scripts": "0.12.0"
   },
   "jest": {
     "snapshotFormat": {