@stylexjs/shared 0.3.0 → 0.4.1

package/README.md

@@ -4,8 +4,8 @@ This package contains most of the core JavaScript logic for stylex.
 
 It exports two primary functions `create` and `keyframes`.
 
-1. `create` - takes a map of style rules. The return value include: a) the map with each style value replaced by a unique, reproducible, hashed className string, and b) a list of the CSS styles to be inserted into the document.
-2. `keyframes` - takes a `@keyframes` animation as JS object. Returns a hashed string and the style ot be injected.
+1. `create` - takes a map of style rules. The return value includes: a) the map with each style value replaced by a unique, reproducible, hashed `className` string, and b) a list of the CSS styles to be inserted into the document.
+2. `keyframes` - takes a `@keyframes` animation as JS object. Returns a hashed string and the style to be injected.
 
 #### ⭐️ `create`
 
@@ -29,7 +29,7 @@ The first step here is expanding all [shorthands](#shorthands) into their indivi
 
 **Step 2**
 
-We hash each style `[key, value]` pair and generate a className and an associated CSS rule. Thie is done in the `convertToClassName(...)` function defined within [`convert-to-className.js`](#convert-to-classname-shared-package). (Explained below)
+We hash each style `[key, value]` pair and generate a className and an associated CSS rule. This is done in the `convertToClassName(...)` function defined within [`convert-to-className.js`](#convert-to-classname-shared-package). (Explained below)
 
 **Step 3**
 

package/lib/common-types.d.ts

@@ -34,17 +34,16 @@ export type FlatCompiledStyles = Readonly<{
   [$$Key$$: string]: string | IncludedStyles | null;
   $$css: true;
 }>;
-export type StyleXOptions = {
+export type StyleXOptions = Readonly<{
   dev: boolean;
   test: boolean;
   useRemForFontSize: boolean;
-  runtimeInjection: boolean;
   classNamePrefix: string;
   definedStylexCSSVariables?: { [key: string]: unknown };
   styleResolution:
     | 'application-order'
     | 'property-specificity'
     | 'legacy-expand-shorthands';
-};
+}>;
 export type MutableCompiledNamespaces = { [key: string]: FlatCompiledStyles };
 export type CompiledNamespaces = Readonly<MutableCompiledNamespaces>;

package/lib/common-types.js.flow

@@ -41,11 +41,10 @@ export type FlatCompiledStyles = $ReadOnly<{
   $$css: true,
 }>;
 
-export type StyleXOptions = {
+export type StyleXOptions = $ReadOnly<{
   dev: boolean,
   test: boolean,
   useRemForFontSize: boolean,
-  runtimeInjection: boolean,
   classNamePrefix: string,
   definedStylexCSSVariables?: { [key: string]: mixed },
   styleResolution:
@@ -56,7 +55,7 @@ export type StyleXOptions = {
     // This is not recommended, and will be removed in a future version.
     | 'legacy-expand-shorthands',
   ...
-};
+}>;
 
 export type MutableCompiledNamespaces = {
   [key: string]: FlatCompiledStyles,

package/lib/index.js

@@ -15,8 +15,8 @@ var _fileBasedIdentifier = _interopRequireDefault(require("./utils/file-based-id
 var m = _interopRequireWildcard(require("./messages"));
 var _types = _interopRequireWildcard(require("./types"));
 exports.types = _types;
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 && Object.prototype.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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const create = exports.create = _stylexCreate.default;
 const defineVars = exports.defineVars = _stylexDefineVars.default;

package/lib/messages.d.ts

@@ -7,12 +7,15 @@
  *
  */
 
-export declare const ILLEGAL_ARGUMENT_LENGTH: 'stylex() should have 1 argument.';
+export declare const ILLEGAL_ARGUMENT_LENGTH: 'stylex.create() should have 1 argument.';
+export declare const ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES: 'stylex.keyframes() should have 1 argument.';
 export declare const NON_STATIC_VALUE: 'Only static values are allowed inside of a stylex.create() call.';
+export declare const NON_STATIC_KEYFRAME_VALUE: 'Only static values are allowed inside of a stylex.keyframes() call.';
 export declare const ESCAPED_STYLEX_VALUE: 'Escaping a stylex.create() value is not allowed.';
 export declare const UNBOUND_STYLEX_CALL_VALUE: 'stylex.create calls must be bound to a bare variable.';
 export declare const ONLY_TOP_LEVEL: 'stylex.create() is only allowed at the root of a program.';
 export declare const NON_OBJECT_FOR_STYLEX_CALL: 'stylex.create() can only accept a style object.';
+export declare const NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL: 'stylex.keyframes() can only accept an object.';
 export declare const UNKNOWN_PROP_KEY: 'Unknown property key';
 export declare const INVALID_PSEUDO: 'Invalid pseudo selector, not on the whitelist.';
 export declare const INVALID_PSEUDO_OR_AT_RULE: 'Invalid pseudo or at-rule.';
@@ -23,14 +26,16 @@ export declare const ILLEGAL_NESTED_PSEUDO: "Pseudo objects can't be nested more
 export declare const ILLEGAL_PROP_VALUE: 'A style value can only contain an array, string or number.';
 export declare const ILLEGAL_PROP_ARRAY_VALUE: 'A style array value can only contain strings or numbers.';
 export declare const ILLEGAL_NAMESPACE_VALUE: 'A stylex namespace must be an object.';
+export declare const NON_OBJECT_KEYFRAME: 'Every frame within a stylex.keyframes() call must be an object.';
 export declare const INVALID_SPREAD: 'Imported styles spread with a stylex.create call must be type cast as `XStyle` to verify their type.';
 export declare const LINT_UNCLOSED_FUNCTION: 'Rule contains an unclosed function';
 export declare const LOCAL_ONLY: 'The return value of stylex.create() should not be exported.';
 export declare const UNEXPECTED_ARGUMENT: 'Unexpected argument passed to the stylex() function.';
 export declare const EXPECTED_FUNCTION_CALL: 'Expected a simple function call but found something else.';
 export declare const NO_PARENT_PATH: 'Unexpected AST node without a parent path.';
-export declare const ONLY_TOP_LEVEL_INLCUDES: 'stylex.include() is only at the top level of a style definition object.';
+export declare const ONLY_TOP_LEVEL_INCLUDES: 'stylex.include() is only at the top level of a style definition object.';
 export declare const DUPLICATE_CONDITIONAL: 'The same pseudo selector or at-rule cannot be used more than once.';
 export declare const NO_PROJECT_ROOT_DIRECTORY: 'The project root directory `rootDir` is not configured.';
 export declare const NON_EXPORT_NAMED_DECLARATION: 'The return value of stylex.defineVars() must be bound to a named export.';
 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.';

package/lib/messages.js

@@ -3,13 +3,16 @@
 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_INLCUDES = exports.ONLY_TOP_LEVEL = exports.NO_PROJECT_ROOT_DIRECTORY = exports.NO_PARENT_PATH = exports.NO_CONDITIONAL_SHORTHAND = exports.NON_STATIC_VALUE = exports.NON_OBJECT_FOR_STYLEX_CALL = exports.NON_EXPORT_NAMED_DECLARATION = 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_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() should have 1 argument.';
+exports.UNKNOWN_PROP_KEY = exports.UNKNOWN_NAMESPACE = exports.UNEXPECTED_ARGUMENT = exports.UNBOUND_STYLEX_CALL_VALUE = exports.ONLY_TOP_LEVEL_INCLUDES = 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.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.';
+const NON_STATIC_KEYFRAME_VALUE = exports.NON_STATIC_KEYFRAME_VALUE = 'Only static values are allowed inside of a stylex.keyframes() call.';
 const ESCAPED_STYLEX_VALUE = exports.ESCAPED_STYLEX_VALUE = 'Escaping a stylex.create() value is not allowed.';
 const UNBOUND_STYLEX_CALL_VALUE = exports.UNBOUND_STYLEX_CALL_VALUE = 'stylex.create calls must be bound to a bare variable.';
 const ONLY_TOP_LEVEL = exports.ONLY_TOP_LEVEL = 'stylex.create() is only allowed at the root of a program.';
 const NON_OBJECT_FOR_STYLEX_CALL = exports.NON_OBJECT_FOR_STYLEX_CALL = 'stylex.create() can only accept a style object.';
+const NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL = exports.NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL = 'stylex.keyframes() can only accept an object.';
 const UNKNOWN_PROP_KEY = exports.UNKNOWN_PROP_KEY = 'Unknown property key';
 const INVALID_PSEUDO = exports.INVALID_PSEUDO = 'Invalid pseudo selector, not on the whitelist.';
 const INVALID_PSEUDO_OR_AT_RULE = exports.INVALID_PSEUDO_OR_AT_RULE = 'Invalid pseudo or at-rule.';
@@ -20,14 +23,16 @@ const ILLEGAL_NESTED_PSEUDO = exports.ILLEGAL_NESTED_PSEUDO = "Pseudo objects ca
 const ILLEGAL_PROP_VALUE = exports.ILLEGAL_PROP_VALUE = 'A style value can only contain an array, string or number.';
 const ILLEGAL_PROP_ARRAY_VALUE = exports.ILLEGAL_PROP_ARRAY_VALUE = 'A style array value can only contain strings or numbers.';
 const ILLEGAL_NAMESPACE_VALUE = exports.ILLEGAL_NAMESPACE_VALUE = 'A stylex namespace must be an object.';
+const NON_OBJECT_KEYFRAME = exports.NON_OBJECT_KEYFRAME = 'Every frame within a stylex.keyframes() call must be an object.';
 const INVALID_SPREAD = exports.INVALID_SPREAD = 'Imported styles spread with a stylex.create call must be type cast as `XStyle<>` to verify their type.';
 const LINT_UNCLOSED_FUNCTION = exports.LINT_UNCLOSED_FUNCTION = 'Rule contains an unclosed function';
 const LOCAL_ONLY = exports.LOCAL_ONLY = 'The return value of stylex.create() should not be exported.';
 const UNEXPECTED_ARGUMENT = exports.UNEXPECTED_ARGUMENT = 'Unexpected argument passed to the stylex() function.';
 const EXPECTED_FUNCTION_CALL = exports.EXPECTED_FUNCTION_CALL = 'Expected a simple function call but found something else.';
 const NO_PARENT_PATH = exports.NO_PARENT_PATH = 'Unexpected AST node without a parent path.';
-const ONLY_TOP_LEVEL_INLCUDES = exports.ONLY_TOP_LEVEL_INLCUDES = 'stylex.include() is only at the top level of a style definition object.';
+const ONLY_TOP_LEVEL_INCLUDES = exports.ONLY_TOP_LEVEL_INCLUDES = 'stylex.include() is only at the top level of a style definition object.';
 const DUPLICATE_CONDITIONAL = exports.DUPLICATE_CONDITIONAL = 'The same pseudo selector or at-rule cannot be used more than once.';
 const NO_PROJECT_ROOT_DIRECTORY = exports.NO_PROJECT_ROOT_DIRECTORY = 'The project root directory `rootDir` is not configured.';
 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 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.';

package/lib/messages.js.flow

@@ -8,14 +8,17 @@
  */
 
 // This file contains constants to be used within Error messages.
-// The URLs within will eventually be replaced by links to the documenation website for Stylex.
+// The URLs within will eventually be replaced by links to the documentation website for Stylex.
 
-declare export const ILLEGAL_ARGUMENT_LENGTH: 'stylex() should have 1 argument.';
+declare export const ILLEGAL_ARGUMENT_LENGTH: 'stylex.create() should have 1 argument.';
+declare export const ILLEGAL_ARG_LENGTH_FOR_KEYFRAMES: 'stylex.keyframes() should have 1 argument.';
 declare export const NON_STATIC_VALUE: 'Only static values are allowed inside of a stylex.create() call.';
+declare export const NON_STATIC_KEYFRAME_VALUE: 'Only static values are allowed inside of a stylex.keyframes() call.';
 declare export const ESCAPED_STYLEX_VALUE: 'Escaping a stylex.create() value is not allowed.';
 declare export const UNBOUND_STYLEX_CALL_VALUE: 'stylex.create calls must be bound to a bare variable.';
 declare export const ONLY_TOP_LEVEL: 'stylex.create() is only allowed at the root of a program.';
 declare export const NON_OBJECT_FOR_STYLEX_CALL: 'stylex.create() can only accept a style object.';
+declare export const NON_OBJECT_FOR_STYLEX_KEYFRAMES_CALL: 'stylex.keyframes() can only accept an object.';
 declare export const UNKNOWN_PROP_KEY: 'Unknown property key';
 declare export const INVALID_PSEUDO: 'Invalid pseudo selector, not on the whitelist.';
 declare export const INVALID_PSEUDO_OR_AT_RULE: 'Invalid pseudo or at-rule.';
@@ -26,14 +29,16 @@ declare export const ILLEGAL_NESTED_PSEUDO: "Pseudo objects can't be nested more
 declare export const ILLEGAL_PROP_VALUE: 'A style value can only contain an array, string or number.';
 declare export const ILLEGAL_PROP_ARRAY_VALUE: 'A style array value can only contain strings or numbers.';
 declare export const ILLEGAL_NAMESPACE_VALUE: 'A stylex namespace must be an object.';
+declare export const NON_OBJECT_KEYFRAME: 'Every frame within a stylex.keyframes() call must be an object.';
 declare export const INVALID_SPREAD: 'Imported styles spread with a stylex.create call must be type cast as `XStyle<>` to verify their type.';
 declare export const LINT_UNCLOSED_FUNCTION: 'Rule contains an unclosed function';
 declare export const LOCAL_ONLY: 'The return value of stylex.create() should not be exported.';
 declare export const UNEXPECTED_ARGUMENT: 'Unexpected argument passed to the stylex() function.';
 declare export const EXPECTED_FUNCTION_CALL: 'Expected a simple function call but found something else.';
 declare export const NO_PARENT_PATH: 'Unexpected AST node without a parent path.';
-declare export const ONLY_TOP_LEVEL_INLCUDES: 'stylex.include() is only at the top level of a style definition object.';
+declare export const ONLY_TOP_LEVEL_INCLUDES: 'stylex.include() is only at the top level of a style definition object.';
 declare export const DUPLICATE_CONDITIONAL: 'The same pseudo selector or at-rule cannot be used more than once.';
 declare export const NO_PROJECT_ROOT_DIRECTORY: 'The project root directory `rootDir` is not configured.';
 declare export const NON_EXPORT_NAMED_DECLARATION: 'The return value of stylex.defineVars() must be bound to a named export.';
 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.';

package/lib/preprocess-rules/application-order.d.ts

@@ -124,8 +124,8 @@ declare const shorthands: {
   borderInlineEnd: (rawValue: TStyleValue) => TReturn;
   borderRight: (rawValue: TStyleValue) => TReturn;
   borderBottom: (rawValue: TStyleValue) => TReturn;
-  borderInlineStart: (_rawValue: TStyleValue) => TReturn;
-  borderLeft: (_rawValue: TStyleValue) => TReturn;
+  borderInlineStart: (rawValue: TStyleValue) => TReturn;
+  borderLeft: (rawValue: TStyleValue) => TReturn;
   borderInlineWidth: (rawValue: TStyleValue) => TReturn;
   borderInlineStyle: (rawValue: TStyleValue) => TReturn;
   borderInlineColor: (rawValue: TStyleValue) => TReturn;

package/lib/preprocess-rules/application-order.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const shorthands = {
   all: _ => {
     throw new Error('all is not supported');
@@ -21,8 +19,8 @@ const shorthands = {
   borderInlineEnd: rawValue => [['borderInlineEnd', rawValue], ...shorthands.borderInlineEndWidth(null), ...shorthands.borderInlineEndStyle(null), ...shorthands.borderInlineEndColor(null)],
   borderRight: rawValue => [['borderRight', rawValue], ...shorthands.borderRightWidth(null), ...shorthands.borderRightStyle(null), ...shorthands.borderRightColor(null)],
   borderBottom: rawValue => [['borderBottom', rawValue], ['borderBottomWidth', null], ['borderBottomStyle', null], ['borderBottomColor', null]],
-  borderInlineStart: _rawValue => [['borderInlineStart', null], ...shorthands.borderInlineStartWidth(null), ...shorthands.borderInlineStartStyle(null), ...shorthands.borderInlineStartColor(null)],
-  borderLeft: _rawValue => [['borderLeft', null], ...shorthands.borderLeftWidth(null), ...shorthands.borderLeftStyle(null), ...shorthands.borderLeftColor(null)],
+  borderInlineStart: rawValue => [['borderInlineStart', rawValue], ...shorthands.borderInlineStartWidth(null), ...shorthands.borderInlineStartStyle(null), ...shorthands.borderInlineStartColor(null)],
+  borderLeft: rawValue => [['borderLeft', rawValue], ...shorthands.borderLeftWidth(null), ...shorthands.borderLeftStyle(null), ...shorthands.borderLeftColor(null)],
   borderInlineWidth: rawValue => [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderLeftWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null]],
   borderInlineStyle: rawValue => [['borderInlineStyle', rawValue], ['borderInlineStartStyle', null], ['borderLeftStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null]],
   borderInlineColor: rawValue => [['borderInlineColor', rawValue], ['borderInlineStartColor', null], ['borderLeftColor', null], ['borderInlineEndColor', null], ['borderRightColor', null]],
@@ -89,12 +87,7 @@ const shorthands = {
   outline: value => [['outline', value], ['outlineColor', null], ['outlineOffset', null], ['outlineStyle', null], ['outlineWidth', null]],
   overflow: value => [['overflow', value], ['overflowX', null], ['overflowY', null]],
   padding: rawValue => {
-    const values = typeof rawValue === 'number' ? [rawValue] : (0, _splitCssValue.default)(rawValue);
-    if (values.length === 1) {
-      return [['padding', values[0]], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null], ['paddingTop', null], ['paddingBottom', null]];
-    }
-    const [top, right = top, bottom = top, left = right] = values;
-    return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
+    return [['padding', rawValue], ...shorthands.paddingInline(null), ...shorthands.paddingBlock(null)];
   },
   paddingInline: rawValue => [['paddingInline', rawValue], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null]],
   paddingBlock: rawValue => [['paddingBlock', rawValue], ['paddingTop', null], ['paddingBottom', null]],

package/lib/preprocess-rules/application-order.js.flow

@@ -75,8 +75,8 @@ declare const shorthands: {
   borderInlineEnd: (rawValue: TStyleValue) => TReturn,
   borderRight: (rawValue: TStyleValue) => TReturn,
   borderBottom: (rawValue: TStyleValue) => TReturn,
-  borderInlineStart: (_rawValue: TStyleValue) => TReturn,
-  borderLeft: (_rawValue: TStyleValue) => TReturn,
+  borderInlineStart: (rawValue: TStyleValue) => TReturn,
+  borderLeft: (rawValue: TStyleValue) => TReturn,
   borderInlineWidth: (rawValue: TStyleValue) => TReturn,
   borderInlineStyle: (rawValue: TStyleValue) => TReturn,
   borderInlineColor: (rawValue: TStyleValue) => TReturn,

package/lib/preprocess-rules/basic-validation.js

@@ -7,8 +7,8 @@ exports.validateNamespace = validateNamespace;
 var _stylexInclude = require("../stylex-include");
 var messages = _interopRequireWildcard(require("../messages"));
 var _objectUtils = require("../utils/object-utils");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 && Object.prototype.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 validateNamespace(namespace) {
   let conditions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   if (!(0, _objectUtils.isPlainObject)(namespace)) {
@@ -33,7 +33,7 @@ function validateNamespace(namespace) {
       if (conditions.length === 0) {
         continue;
       }
-      throw new Error(messages.ONLY_TOP_LEVEL_INLCUDES);
+      throw new Error(messages.ONLY_TOP_LEVEL_INCLUDES);
     }
     if ((0, _objectUtils.isPlainObject)(val)) {
       if (key.startsWith('@') || key.startsWith(':')) {
@@ -72,7 +72,7 @@ function validateConditionalStyles(val) {
       continue;
     }
     if (v instanceof _stylexInclude.IncludedStyles) {
-      throw new Error(messages.ONLY_TOP_LEVEL_INLCUDES);
+      throw new Error(messages.ONLY_TOP_LEVEL_INCLUDES);
     }
     if ((0, _objectUtils.isPlainObject)(v)) {
       validateConditionalStyles(v, [...conditions, key]);

package/lib/stylex-create-theme.js

@@ -46,17 +46,22 @@ function styleXCreateTheme(themeVars, variables, options) {
     return `${atRule}{${atRules[atRule].sort().join('')}}`;
   }).join('');
   const overrideClassName = classNamePrefix + (0, _hash.default)(cssVariablesOverrideString + atRulesStringForHash);
-  const atRulesCss = sortedAtRules.map(atRule => {
-    return `${atRule}{.${overrideClassName}{${atRules[atRule].join('')}}}`;
-  }).join('');
-  return [{
-    $$css: true,
-    [themeVars.__themeName__]: overrideClassName
-  }, {
+  const stylesToInject = {
     [overrideClassName]: {
-      ltr: `.${overrideClassName}{${cssVariablesOverrideString}}${atRulesCss}`,
-      priority: 0.99,
+      ltr: `.${overrideClassName}{${cssVariablesOverrideString}}`,
+      priority: 0.8,
       rtl: undefined
     }
-  }];
+  };
+  for (const atRule of sortedAtRules) {
+    stylesToInject[overrideClassName + '-' + (0, _hash.default)(atRule)] = {
+      ltr: `${atRule}{.${overrideClassName}{${atRules[atRule].join('')}}}`,
+      priority: 0.9,
+      rtl: null
+    };
+  }
+  return [{
+    $$css: true,
+    [themeVars.__themeName__]: overrideClassName
+  }, stylesToInject];
 }

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

@@ -7,30 +7,23 @@
  *
  */
 
-import type { StyleXOptions } from './common-types';
-type VarsObject<
-  Vars extends {
-    readonly [$$Key$$: string]:
-      | string
-      | { readonly default: string; readonly [$$Key$$: string]: string };
-  },
-> = Readonly</**
- * > 15 |   ...$ObjMapConst<Vars, string>,
+import type { InjectableStyle, StyleXOptions } from './common-types';
+type VarsConfig = Readonly<{
+  [$$Key$$: string]:
+    | string
+    | Readonly<{ default: string; [$$Key$$: string]: string }>;
+}>;
+type VarsObject<Vars extends VarsConfig> = Readonly</**
+ * > 17 |   ...$ObjMapConst<Vars, string>,
  *      |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with complex spreads" is currently not supported.
  **/
 any>;
-declare function styleXDefineVars<
-  Vars extends {
-    readonly [$$Key$$: string]:
-      | string
-      | { readonly default: string; readonly [$$Key$$: string]: string };
-  },
->(
+declare function styleXDefineVars<Vars extends VarsConfig>(
   variables: Vars,
   options: Readonly<
     Omit<Partial<StyleXOptions>, keyof ({ themeName: string })> & {
       themeName: string;
     }
   >,
-): [VarsObject<Vars>, { css: string }];
+): [VarsObject<Vars>, { [$$Key$$: string]: InjectableStyle }];
 export default styleXDefineVars;

package/lib/stylex-define-vars.js

@@ -30,43 +30,44 @@ function styleXDefineVars(variables, options) {
     } = _ref;
     return `var(--${nameHash})`;
   });
-  const cssVariablesString = constructCssVariablesString(variablesMap);
+  const injectableStyles = constructCssVariablesString(variablesMap, themeNameHash);
   return [{
     ...themeVariablesObject,
     __themeName__: themeNameHash
-  }, {
-    css: cssVariablesString
-  }];
+  }, injectableStyles];
 }
-function constructCssVariablesString(variables) {
-  const atRules = {};
-  const varsString = (0, _objectUtils.objEntries)(variables).map(_ref2 => {
-    let [key, {
-      nameHash,
-      value
-    }] = _ref2;
+function constructCssVariablesString(variables, themeNameHash) {
+  const ruleByAtRule = {};
+  for (const [key, {
+    nameHash,
+    value
+  }] of (0, _objectUtils.objEntries)(variables)) {
     if (value !== null && typeof value === 'object') {
       if (value.default === undefined) {
         throw new Error('Default value is not defined for ' + key + ' variable.');
       }
-      const definedVarString = `--${nameHash}:${value.default};`;
-      Object.keys(value).forEach(key => {
-        if (key.startsWith('@')) {
-          const definedVarStringForAtRule = `--${nameHash}:${value[key]};`;
-          if (atRules[key] == null) {
-            atRules[key] = [definedVarStringForAtRule];
-          } else {
-            atRules[key].push(definedVarStringForAtRule);
-          }
-        }
-      });
-      return definedVarString;
+      const v = value;
+      for (const [key, value] of (0, _objectUtils.objEntries)(v)) {
+        ruleByAtRule[key] ??= [];
+        ruleByAtRule[key].push(`--${nameHash}:${value};`);
+      }
+    } else {
+      ruleByAtRule.default ??= [];
+      ruleByAtRule.default.push(`--${nameHash}:${value};`);
     }
-    return `--${nameHash}:${value};`;
-  }).join('');
-  const atRulesString = (0, _objectUtils.objEntries)(atRules).map(_ref3 => {
-    let [atRule, varsArr] = _ref3;
-    return `${atRule}{:root{${varsArr.join('')}}}`;
-  }).join('');
-  return `:root{${varsString}}${atRulesString || ''}`;
+  }
+  const result = {};
+  for (const [key, value] of (0, _objectUtils.objEntries)(ruleByAtRule)) {
+    const suffix = key === 'default' ? '' : `-${(0, _hash.default)(key)}`;
+    let ltr = `:root{${value.join('')}}`;
+    if (key !== 'default') {
+      ltr = `${key}{${ltr}}`;
+    }
+    result[themeNameHash + suffix] = {
+      ltr,
+      rtl: null,
+      priority: key === 'default' ? 0 : 0.1
+    };
+  }
+  return result;
 }

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

@@ -7,22 +7,20 @@
  * @flow strict
  */
 
-import type { StyleXOptions } from './common-types';
+import type { InjectableStyle, StyleXOptions } from './common-types';
 
-type VarsObject<
-  Vars: { +[string]: string | { +default: string, +[string]: string } },
-> = $ReadOnly<{
+type VarsConfig = $ReadOnly<{
+  [string]: string | $ReadOnly<{ default: string, [string]: string }>,
+}>;
+
+type VarsObject<Vars: VarsConfig> = $ReadOnly<{
   ...$ObjMapConst<Vars, string>,
   __themeName__: string,
 }>;
 
 // Similar to `stylex.create` it takes an object of variables with their values
 // and returns a string after hashing it.
-declare export default function styleXDefineVars<
-  Vars: {
-    +[string]: string | { +default: string, +[string]: string },
-  },
->(
+declare export default function styleXDefineVars<Vars: VarsConfig>(
   variables: Vars,
   options: $ReadOnly<{ ...Partial<StyleXOptions>, themeName: string, ... }>,
-): [VarsObject<Vars>, { css: string }];
+): [VarsObject<Vars>, { [string]: InjectableStyle }];

package/lib/stylex-include.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.IncludedStyles = void 0;
 exports.default = stylexInclude;
 var messages = _interopRequireWildcard(require("./messages"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 && Object.prototype.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; }
 let number = 0;
 function uuid() {
   return `__included_${++number}__`;

package/lib/types/index.js.flow

@@ -10,7 +10,7 @@
 // import type { Color as ColorType } from './stylex-types-color';
 
 // We want all in one file?
-// option 1, creat interface an implement it in the class
+// option 1, create interface an implement it in the class
 // why? All the types have a single base definition of props
 // We want on type that defines CSS Types
 // Option 2: Do a union type and make

package/lib/utils/default-options.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultOptions = void 0;
 const defaultOptions = exports.defaultOptions = {
   dev: false,
-  runtimeInjection: false,
   useRemForFontSize: true,
   test: false,
   classNamePrefix: 'x',

package/lib/utils/normalizers/detect-unclosed-fns.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = detectUnclosedFns;
 var messages = _interopRequireWildcard(require("../../messages"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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 && Object.prototype.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 detectUnclosedFns(ast, _) {
   ast.walk(node => {
     if (node.type === 'function' && node.unclosed) {

package/lib/utils/normalizers/whitespace.d.ts

@@ -9,7 +9,7 @@
 
 /**
  * Use single spaces and remove spaces when not needed: around functions,
- * commas. But preserve spece around + and - as they are required in calc()
+ * commas. But preserve space around + and - as they are required in calc()
  */
 
 declare function normalizeWhitespace(

package/lib/utils/normalizers/whitespace.js.flow

@@ -9,7 +9,7 @@
 
 /**
  * Use single spaces and remove spaces when not needed: around functions,
- * commas. But preserve spece around + and - as they are required in calc()
+ * commas. But preserve space around + and - as they are required in calc()
  */
 
 declare export default function normalizeWhitespace(

package/lib/utils/split-css-value.js.flow

@@ -9,7 +9,7 @@
 
 import type { TStyleValue } from '../common-types';
 
-// Using split(' ') Isn't enough bcause of values like calc.
+// Using split(' ') Isn't enough because of values like calc.
 declare export default function splitValue(
   str: TStyleValue,
 ): $ReadOnlyArray<number | string | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/shared",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "main": "lib/index.js",
   "repository": "https://www.github.com/facebook/stylex",
   "license": "MIT",
@@ -13,7 +13,7 @@
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.3.0"
+    "@stylexjs/scripts": "0.4.1"
   },
   "jest": {
     "snapshotFormat": {