@stylexjs/shared 0.5.0-alpha.4 → 0.5.1

package/lib/index.d.ts

@@ -26,6 +26,11 @@ import hash from './hash';
 import genFileBasedIdentifier from './utils/file-based-identifier';
 import * as m from './messages';
 export * as types from './types';
+import {
+  PSEUDO_CLASS_PRIORITIES as _PSEUDO_CLASS_PRIORITIES,
+  AT_RULE_PRIORITIES as _AT_RULE_PRIORITIES,
+  PSEUDO_ELEMENT_PRIORITY as _PSEUDO_ELEMENT_PRIORITY,
+} from './utils/property-priorities';
 import type {
   InjectableStyle as _InjectableStyle,
   CompiledNamespaces as _CompiledNamespaces,
@@ -44,6 +49,9 @@ export declare const utils: {
 export declare const messages: typeof m;
 export declare const IncludedStyles: typeof _IncludedStyles;
 export declare const firstThatWorks: typeof stylexFirstThatWorks;
+export declare const PSEUDO_CLASS_PRIORITIES: typeof _PSEUDO_CLASS_PRIORITIES;
+export declare const AT_RULE_PRIORITIES: typeof _AT_RULE_PRIORITIES;
+export declare const PSEUDO_ELEMENT_PRIORITY: typeof _PSEUDO_ELEMENT_PRIORITY;
 export type InjectableStyle = _InjectableStyle;
 export type CompiledNamespaces = _CompiledNamespaces;
 export type MutableCompiledNamespaces = _MutableCompiledNamespaces;

package/lib/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.utils = exports.types = exports.messages = exports.keyframes = exports.include = exports.firstThatWorks = exports.defineVars = exports.createTheme = exports.create = exports.IncludedStyles = void 0;
+exports.utils = exports.types = exports.messages = exports.keyframes = exports.include = exports.firstThatWorks = exports.defineVars = exports.createTheme = exports.create = exports.PSEUDO_ELEMENT_PRIORITY = exports.PSEUDO_CLASS_PRIORITIES = exports.IncludedStyles = exports.AT_RULE_PRIORITIES = void 0;
 var _stylexCreate = _interopRequireDefault(require("./stylex-create"));
 var _stylexDefineVars = _interopRequireDefault(require("./stylex-define-vars"));
 var _stylexCreateTheme = _interopRequireDefault(require("./stylex-create-theme"));
@@ -15,6 +15,7 @@ var _fileBasedIdentifier = _interopRequireDefault(require("./utils/file-based-id
 var m = _interopRequireWildcard(require("./messages"));
 var _types = _interopRequireWildcard(require("./types"));
 exports.types = _types;
+var _propertyPriorities = require("./utils/property-priorities");
 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 }; }
@@ -29,4 +30,7 @@ const utils = exports.utils = {
 };
 const messages = exports.messages = m;
 const IncludedStyles = exports.IncludedStyles = _stylexInclude.IncludedStyles;
-const firstThatWorks = exports.firstThatWorks = _stylexFirstThatWorks.default;
+const firstThatWorks = exports.firstThatWorks = _stylexFirstThatWorks.default;
+const PSEUDO_CLASS_PRIORITIES = exports.PSEUDO_CLASS_PRIORITIES = _propertyPriorities.PSEUDO_CLASS_PRIORITIES;
+const AT_RULE_PRIORITIES = exports.AT_RULE_PRIORITIES = _propertyPriorities.AT_RULE_PRIORITIES;
+const PSEUDO_ELEMENT_PRIORITY = exports.PSEUDO_ELEMENT_PRIORITY = _propertyPriorities.PSEUDO_ELEMENT_PRIORITY;

package/lib/index.js.flow

@@ -32,6 +32,11 @@ import hash from './hash';
 import genFileBasedIdentifier from './utils/file-based-identifier';
 import * as m from './messages';
 export * as types from './types';
+import {
+  PSEUDO_CLASS_PRIORITIES as _PSEUDO_CLASS_PRIORITIES,
+  AT_RULE_PRIORITIES as _AT_RULE_PRIORITIES,
+  PSEUDO_ELEMENT_PRIORITY as _PSEUDO_ELEMENT_PRIORITY,
+} from './utils/property-priorities';
 
 import type {
   InjectableStyle as _InjectableStyle,
@@ -52,6 +57,9 @@ declare export const utils: {
 declare export const messages: typeof m;
 declare export const IncludedStyles: typeof _IncludedStyles;
 declare export const firstThatWorks: typeof stylexFirstThatWorks;
+declare export const PSEUDO_CLASS_PRIORITIES: typeof _PSEUDO_CLASS_PRIORITIES;
+declare export const AT_RULE_PRIORITIES: typeof _AT_RULE_PRIORITIES;
+declare export const PSEUDO_ELEMENT_PRIORITY: typeof _PSEUDO_ELEMENT_PRIORITY;
 
 export type InjectableStyle = _InjectableStyle;
 export type CompiledNamespaces = _CompiledNamespaces;

package/lib/preprocess-rules/index.js

@@ -18,7 +18,10 @@ function getExpandedKeys(options) {
   return Object.keys(expansions[options.styleResolution ?? 'application-order']);
 }
 function flatMapExpandedShorthands(objEntry, options) {
-  const [key, value] = objEntry;
+  let [key, value] = objEntry;
+  if (key.startsWith('var(') && key.endsWith(')')) {
+    key = key.slice(4, -1);
+  }
   const expansion = expansions[options.styleResolution ?? 'application-order'][key];
   if (expansion) {
     if (Array.isArray(value)) {

package/lib/utils/normalizers/whitespace.js

@@ -19,6 +19,16 @@ function normalizeWhitespace(ast, _) {
           break;
         }
       case 'div':
+        {
+          if (node.value === ',') {
+            node.before = '';
+            node.after = '';
+          } else {
+            node.before = ' ';
+            node.after = ' ';
+          }
+          break;
+        }
       case 'function':
         {
           node.before = '';

package/lib/utils/normalizers/zero-dimensions.js

@@ -9,7 +9,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const angles = ['deg', 'grad', 'turn', 'rad'];
 const timings = ['ms', 's'];
 function normalizeZeroDimensions(ast, _) {
+  let endFunction = 0;
   ast.walk(node => {
+    if (node.type === 'function' && !endFunction) {
+      endFunction = node.sourceEndIndex ?? 0;
+    }
+    if (endFunction > 0 && node.sourceIndex > endFunction) {
+      endFunction = 0;
+    }
     if (node.type !== 'word') {
       return;
     }
@@ -21,7 +28,7 @@ function normalizeZeroDimensions(ast, _) {
       node.value = '0deg';
     } else if (timings.indexOf(dimension.unit) !== -1) {
       node.value = '0s';
-    } else {
+    } else if (!endFunction) {
       node.value = '0';
     }
   });

package/lib/utils/property-priorities.d.ts

@@ -7,5 +7,64 @@
  *
  */
 
+type PseudoClassPriorities = {
+  ':is': 40;
+  ':where': 40;
+  ':not': 40;
+  ':has': 45;
+  ':dir': 50;
+  ':lang': 51;
+  ':first-child': 52;
+  ':first-of-type': 53;
+  ':last-child': 54;
+  ':last-of-type': 55;
+  ':only-child': 56;
+  ':only-of-type': 57;
+  ':nth-child': 60;
+  ':nth-last-child': 61;
+  ':nth-of-type': 62;
+  ':nth-last-of-type': 63;
+  ':empty': 70;
+  ':link': 80;
+  ':any-link': 81;
+  ':local-link': 82;
+  ':target-within': 83;
+  ':target': 84;
+  ':visited': 85;
+  ':enabled': 91;
+  ':disabled': 92;
+  ':required': 93;
+  ':optional': 94;
+  ':read-only': 95;
+  ':read-write': 96;
+  ':placeholder-shown': 97;
+  ':in-range': 98;
+  ':out-of-range': 99;
+  ':default': 100;
+  ':checked': 101;
+  ':indeterminate': 101;
+  ':blank': 102;
+  ':valid': 103;
+  ':invalid': 104;
+  ':user-invalid': 105;
+  ':autofill': 110;
+  ':picture-in-picture': 120;
+  ':modal': 121;
+  ':fullscreen': 122;
+  ':paused': 123;
+  ':playing': 124;
+  ':current': 125;
+  ':past': 126;
+  ':future': 127;
+  ':hover': 130;
+  ':focusWithin': 140;
+  ':focus': 150;
+  ':focusVisible': 160;
+  ':active': 170;
+};
+export declare const PSEUDO_CLASS_PRIORITIES: Readonly<PseudoClassPriorities>;
+type AtRulePriorities = { '@supports': 30; '@media': 200; '@container': 300 };
+export declare const AT_RULE_PRIORITIES: Readonly<AtRulePriorities>;
+export declare const PSEUDO_ELEMENT_PRIORITY: number;
 declare function getPriority(key: string): number;
 export default getPriority;

package/lib/utils/property-priorities.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.PSEUDO_ELEMENT_PRIORITY = exports.PSEUDO_CLASS_PRIORITIES = exports.AT_RULE_PRIORITIES = void 0;
 exports.default = getPriority;
 const longHandPhysical = new Set();
 const longHandLogical = new Set();
@@ -440,7 +441,7 @@ longHandLogical.add('math-depth');
 longHandLogical.add('math-shift');
 longHandLogical.add('math-style');
 longHandLogical.add('touch-action');
-const PRIORITIES = {
+const PSEUDO_CLASS_PRIORITIES = exports.PSEUDO_CLASS_PRIORITIES = {
   ':is': 40,
   ':where': 40,
   ':not': 40,
@@ -495,25 +496,31 @@ const PRIORITIES = {
   ':focusVisible': 160,
   ':active': 170
 };
+const AT_RULE_PRIORITIES = exports.AT_RULE_PRIORITIES = {
+  '@supports': 30,
+  '@media': 200,
+  '@container': 300
+};
+const PSEUDO_ELEMENT_PRIORITY = exports.PSEUDO_ELEMENT_PRIORITY = 5000;
 function getPriority(key) {
   if (key.startsWith('--')) {
     return 1;
   }
   if (key.startsWith('@supports')) {
-    return 30;
+    return AT_RULE_PRIORITIES['@supports'];
   }
   if (key.startsWith('@media')) {
-    return 200;
+    return AT_RULE_PRIORITIES['@media'];
   }
   if (key.startsWith('@container')) {
-    return 300;
+    return AT_RULE_PRIORITIES['@container'];
   }
   if (key.startsWith('::')) {
-    return 5000;
+    return PSEUDO_ELEMENT_PRIORITY;
   }
   if (key.startsWith(':')) {
     const prop = key.startsWith(':') && key.includes('(') ? key.slice(0, key.indexOf('(')) : key;
-    return PRIORITIES[prop] ?? 40;
+    return PSEUDO_CLASS_PRIORITIES[prop] ?? 40;
   }
   if (longHandPhysical.has(key)) {
     return 4000;

package/lib/utils/property-priorities.js.flow

@@ -7,4 +7,72 @@
  * @flow strict
  */
 
+type PseudoClassPriorities = {
+  ':is': 40,
+  ':where': 40,
+  ':not': 40,
+  ':has': 45,
+  ':dir': 50,
+  ':lang': 51,
+  ':first-child': 52,
+  ':first-of-type': 53,
+  ':last-child': 54,
+  ':last-of-type': 55,
+  ':only-child': 56,
+  ':only-of-type': 57,
+  ':nth-child': 60,
+  ':nth-last-child': 61,
+  ':nth-of-type': 62,
+  ':nth-last-of-type': 63, // 'nth-last-of-type' is the same priority as 'nth-of-type
+  ':empty': 70,
+  ':link': 80,
+  ':any-link': 81,
+  ':local-link': 82,
+  ':target-within': 83,
+  ':target': 84,
+  ':visited': 85,
+  ':enabled': 91,
+  ':disabled': 92,
+  ':required': 93,
+  ':optional': 94,
+  ':read-only': 95,
+  ':read-write': 96,
+  ':placeholder-shown': 97,
+  ':in-range': 98,
+  ':out-of-range': 99,
+  ':default': 100,
+  ':checked': 101,
+  ':indeterminate': 101,
+  ':blank': 102,
+  ':valid': 103,
+  ':invalid': 104,
+  ':user-invalid': 105,
+  ':autofill': 110,
+  ':picture-in-picture': 120,
+  ':modal': 121,
+  ':fullscreen': 122,
+  ':paused': 123,
+  ':playing': 124,
+  ':current': 125,
+  ':past': 126,
+  ':future': 127,
+  ':hover': 130,
+  ':focusWithin': 140,
+  ':focus': 150,
+  ':focusVisible': 160,
+  ':active': 170,
+};
+
+declare export const PSEUDO_CLASS_PRIORITIES: $ReadOnly<PseudoClassPriorities>;
+
+type AtRulePriorities = {
+  '@supports': 30,
+  '@media': 200,
+  '@container': 300,
+};
+
+declare export const AT_RULE_PRIORITIES: $ReadOnly<AtRulePriorities>;
+
+declare export const PSEUDO_ELEMENT_PRIORITY: number;
+
 declare export default function getPriority(key: string): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/shared",
-  "version": "0.5.0-alpha.4",
+  "version": "0.5.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.5.0-alpha.4"
+    "@stylexjs/scripts": "0.5.1"
   },
   "jest": {
     "snapshotFormat": {