@stylexjs/stylex 0.11.1 → 0.13.0

package/lib/es/types/VarTypes.js.flow

@@ -0,0 +1,102 @@
+/**
+ * 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 { ValueWithDefault } from './StyleXUtils';
+
+export type CSSSyntax =
+  | '*'
+  | '<length>'
+  | '<number>'
+  | '<percentage>'
+  | '<length-percentage>'
+  | '<color>'
+  | '<image>'
+  | '<url>'
+  | '<integer>'
+  | '<angle>'
+  | '<time>'
+  | '<resolution>'
+  | '<transform-function>'
+  | '<custom-ident>'
+  | '<transform-list>';
+
+type CSSSyntaxType = CSSSyntax;
+type InnerValue = null | string | number;
+
+interface ICSSType<+_T: InnerValue> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Angle<+T: InnerValue> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Color<+T: InnerValue> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Url<+T: InnerValue> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Image<+T: InnerValue> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Integer<+T: InnerValue> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class LengthPercentage<+T: InnerValue> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Length<+T: InnerValue> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Percentage<+T: InnerValue> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Num<+T: InnerValue> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Resolution<+T: InnerValue> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Time<+T: InnerValue> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class TransformFunction<+T: InnerValue> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class TransformList<+T: InnerValue> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+
+export type CSSType<+T: InnerValue> =
+  | Angle<T>
+  | Color<T>
+  | Url<T>
+  | Image<T>
+  | Integer<T>
+  | LengthPercentage<T>
+  | Length<T>
+  | Percentage<T>
+  | Num<T>
+  | Resolution<T>
+  | Time<T>
+  | TransformFunction<T>
+  | TransformList<T>;

package/package.json

@@ -1,43 +1,35 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "description": "A library for defining styles for optimized user interfaces.",
-  "main": "./lib/stylex.js",
+  "main": "./lib/cjs/stylex.js",
   "module": "./lib/es/stylex.mjs",
-  "types": "./lib/stylex.d.ts",
+  "types": "./lib/cjs/stylex.d.ts",
   "exports": {
     ".": {
       "import": "./lib/es/stylex.mjs",
-      "require": "./lib/stylex.js",
-      "types": "./lib/stylex.d.ts"
-    },
-    "./lib/StyleXTypes": {
-      "import": "./lib/StyleXTypes.js",
-      "require": "./lib/StyleXTypes.js",
-      "types": "./lib/StyleXTypes.d.ts"
-    },
-    "./lib/StyleXSheet": {
-      "import": "./lib/es/StyleXSheet.mjs",
-      "require": "./lib/StyleXSheet.js",
-      "types": "./lib/StyleXSheet.d.ts"
+      "require": "./lib/cjs/stylex.js",
+      "types": "./lib/cjs/stylex.d.ts"
     },
     "./lib/stylex-inject": {
-      "import": "./lib/es/stylex-inject.mjs",
-      "require": "./lib/stylex-inject.js",
-      "types": "./lib/stylex-inject.d.ts"
+      "import": "./lib/es/inject.mjs",
+      "require": "./lib/cjs/inject.js",
+      "types": "./lib/cjs/inject.d.ts"
     },
     "./package.json": "./package.json"
   },
-  "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/",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src/ --out-dir lib/ --copy-files",
-    "build:esm": "cross-env BABEL_ENV=esm babel src/ --out-dir lib/es --out-file-extension .mjs",
-    "postbuild:esm": "rollup -c ./rollup.config.mjs",
+    "prebuild": "rimraf lib && gen-types -i src/ -o lib/cjs && cp -r lib/cjs lib/es",
+    "build:cjs": "cross-env BABEL_ENV=cjs rollup -c ./rollup.config.mjs",
+    "build:esm": "cross-env BABEL_ENV=esm rollup -c ./rollup.config.mjs",
     "build": "npm run build:cjs && npm run build:esm",
-    "build-haste": "rewrite-imports -i src/ -o lib/",
-    "test": "jest"
+    "build-haste": "rimraf lib && rewrite-imports -i src/ -o lib/",
+    "test": "cross-env BABEL_ENV=test jest --coverage"
   },
   "dependencies": {
     "css-mediaquery": "^0.1.2",
@@ -60,12 +52,12 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
-    "@stylexjs/scripts": "0.11.1",
     "babel-plugin-syntax-hermes-parser": "^0.26.0",
     "cross-env": "^7.0.3",
-    "rollup": "^4.24.0"
+    "rimraf": "^5.0.10",
+    "rollup": "^4.24.0",
+    "scripts": "0.13.0"
   },
-  "jest": {},
   "files": [
     "lib/*"
   ]

package/lib/StyleXCSSTypes.js

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

package/lib/StyleXOpaqueTypes.js

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

package/lib/StyleXSheet.d.ts

@@ -1,49 +0,0 @@
-/**
- * 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 { LegacyThemeStyles as Theme } from './StyleXTypes';
-type SheetOptions = Readonly<{
-  rootDarkTheme?: Theme;
-  rootTheme?: Theme;
-  supportsVariables?: boolean;
-}>;
-/**
- * This class manages the CSS stylesheet for the page and the injection of new
- * CSS rules.
- */
-export declare class StyleXSheet {
-  static LIGHT_MODE_CLASS_NAME: string;
-  static DARK_MODE_CLASS_NAME: string;
-  constructor(opts: SheetOptions);
-  rootTheme: null | undefined | Theme;
-  rootDarkTheme: null | undefined | Theme;
-  supportsVariables: boolean;
-  rules: Array<string>;
-  injected: boolean;
-  tag: null | undefined | HTMLStyleElement;
-  ruleForPriority: Map<number, string>;
-  getVariableMatch(): RegExp;
-  isHeadless(): boolean;
-  getTag(): HTMLStyleElement;
-  getCSS(): string;
-  getRulePosition(rule: string): number;
-  getRuleCount(): number;
-  inject(): void;
-  injectTheme(): void;
-  __injectCustomThemeForTesting(selector: string, theme: Theme): void;
-  delete(rule: string): void;
-  normalizeRule(rule: string): string;
-  getInsertPositionForPriority(priority: number): number;
-  insert(
-    rawLTRRule: string,
-    priority: number,
-    rawRTLRule: null | undefined | string,
-  ): void;
-}
-export declare const styleSheet: StyleXSheet;

package/lib/StyleXSheet.js

@@ -1,188 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.styleSheet = exports.StyleXSheet = void 0;
-var _invariant = _interopRequireDefault(require("invariant"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const LIGHT_MODE_CLASS_NAME = '__fb-light-mode';
-const DARK_MODE_CLASS_NAME = '__fb-dark-mode';
-function buildTheme(selector, theme) {
-  const lines = [];
-  lines.push(`${selector} {`);
-  for (const key in theme) {
-    const value = theme[key];
-    lines.push(`  --${key}: ${value};`);
-  }
-  lines.push('}');
-  return lines.join('\n');
-}
-function makeStyleTag() {
-  const tag = document.createElement('style');
-  tag.setAttribute('type', 'text/css');
-  tag.setAttribute('data-stylex', 'true');
-  const head = document.head || document.getElementsByTagName('head')[0];
-  (0, _invariant.default)(head, 'expected head');
-  head.appendChild(tag);
-  return tag;
-}
-function doesSupportCSSVariables() {
-  return globalThis.CSS != null && globalThis.CSS.supports != null && globalThis.CSS.supports('--fake-var:0');
-}
-const VARIABLE_MATCH = /var\(--(.*?)\)/g;
-class StyleXSheet {
-  static LIGHT_MODE_CLASS_NAME = (() => LIGHT_MODE_CLASS_NAME)();
-  static DARK_MODE_CLASS_NAME = (() => DARK_MODE_CLASS_NAME)();
-  constructor(opts) {
-    this.tag = null;
-    this.injected = false;
-    this.ruleForPriority = new Map();
-    this.rules = [];
-    this.rootTheme = opts.rootTheme;
-    this.rootDarkTheme = opts.rootDarkTheme;
-    this.supportsVariables = opts.supportsVariables ?? doesSupportCSSVariables();
-  }
-  getVariableMatch() {
-    return VARIABLE_MATCH;
-  }
-  isHeadless() {
-    return this.tag == null || globalThis?.document?.body == null;
-  }
-  getTag() {
-    const {
-      tag
-    } = this;
-    (0, _invariant.default)(tag != null, 'expected tag');
-    return tag;
-  }
-  getCSS() {
-    return this.rules.join('\n');
-  }
-  getRulePosition(rule) {
-    return this.rules.indexOf(rule);
-  }
-  getRuleCount() {
-    return this.rules.length;
-  }
-  inject() {
-    if (this.injected) {
-      return;
-    }
-    this.injected = true;
-    if (globalThis.document?.body == null) {
-      this.injectTheme();
-      return;
-    }
-    this.tag = makeStyleTag();
-    this.injectTheme();
-  }
-  injectTheme() {
-    if (this.rootTheme != null) {
-      this.insert(buildTheme(`:root, .${LIGHT_MODE_CLASS_NAME}`, this.rootTheme), 0);
-    }
-    if (this.rootDarkTheme != null) {
-      this.insert(buildTheme(`.${DARK_MODE_CLASS_NAME}:root, .${DARK_MODE_CLASS_NAME}`, this.rootDarkTheme), 0);
-    }
-  }
-  __injectCustomThemeForTesting(selector, theme) {
-    if (theme != null) {
-      this.insert(buildTheme(selector, theme), 0);
-    }
-  }
-  delete(rule) {
-    const index = this.rules.indexOf(rule);
-    (0, _invariant.default)(index >= 0, "Couldn't find the index for rule %s", rule);
-    this.rules.splice(index, 1);
-    if (this.isHeadless()) {
-      return;
-    }
-    const tag = this.getTag();
-    const sheet = tag.sheet;
-    (0, _invariant.default)(sheet, 'expected sheet');
-    sheet.deleteRule(index);
-  }
-  normalizeRule(rule) {
-    const {
-      rootTheme
-    } = this;
-    if (this.supportsVariables || rootTheme == null) {
-      return rule;
-    }
-    return rule.replace(VARIABLE_MATCH, (_match, name) => {
-      return rootTheme[name];
-    });
-  }
-  getInsertPositionForPriority(priority) {
-    const priorityRule = this.ruleForPriority.get(priority);
-    if (priorityRule != null) {
-      return this.rules.indexOf(priorityRule) + 1;
-    }
-    const priorities = Array.from(this.ruleForPriority.keys()).sort((a, b) => b - a).filter(num => num > priority ? 1 : 0);
-    if (priorities.length === 0) {
-      return this.getRuleCount();
-    }
-    const lastPriority = priorities.pop();
-    if (lastPriority == null) {
-      return this.getRuleCount();
-    }
-    return this.rules.indexOf(this.ruleForPriority.get(lastPriority));
-  }
-  insert(rawLTRRule, priority, rawRTLRule) {
-    if (this.injected === false) {
-      this.inject();
-    }
-    if (rawRTLRule != null) {
-      this.insert(addAncestorSelector(rawLTRRule, "html:not([dir='rtl'])"), priority);
-      this.insert(addAncestorSelector(rawRTLRule, "html[dir='rtl']"), priority);
-      return;
-    }
-    const rawRule = rawLTRRule;
-    if (this.rules.includes(rawRule)) {
-      return;
-    }
-    const rule = this.normalizeRule(addSpecificityLevel(rawRule, Math.floor(priority / 1000)));
-    const insertPos = this.getInsertPositionForPriority(priority);
-    this.rules.splice(insertPos, 0, rule);
-    this.ruleForPriority.set(priority, rule);
-    if (this.isHeadless()) {
-      return;
-    }
-    const tag = this.getTag();
-    const sheet = tag.sheet;
-    if (sheet != null) {
-      try {
-        sheet.insertRule(rule, Math.min(insertPos, sheet.cssRules.length));
-      } catch (err) {
-        console.error('insertRule error', err, rule, insertPos);
-      }
-    }
-  }
-}
-exports.StyleXSheet = StyleXSheet;
-function addAncestorSelector(selector, ancestorSelector) {
-  if (!selector.startsWith('@')) {
-    return `${ancestorSelector} ${selector}`;
-  }
-  const firstBracketIndex = selector.indexOf('{');
-  const mediaQueryPart = selector.slice(0, firstBracketIndex + 1);
-  const rest = selector.slice(firstBracketIndex + 1);
-  return `${mediaQueryPart}${ancestorSelector} ${rest}`;
-}
-function addSpecificityLevel(selector, index) {
-  if (selector.startsWith('@keyframes')) {
-    return selector;
-  }
-  const pseudo = Array.from({
-    length: index
-  }).map(() => ':not(#\\#)').join('');
-  const lastOpenCurly = selector.includes('::') ? selector.indexOf('::') : selector.lastIndexOf('{');
-  const beforeCurly = selector.slice(0, lastOpenCurly);
-  const afterCurly = selector.slice(lastOpenCurly);
-  return `${beforeCurly}${pseudo}${afterCurly}`;
-}
-const styleSheet = exports.styleSheet = new StyleXSheet({
-  supportsVariables: true,
-  rootTheme: {},
-  rootDarkTheme: {}
-});

package/lib/StyleXSheet.js.flow

@@ -1,49 +0,0 @@
-/**
- * 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 { LegacyThemeStyles as Theme } from './StyleXTypes';
-
-// Stylesheet options
-type SheetOptions = $ReadOnly<{
-  rootDarkTheme?: Theme,
-  rootTheme?: Theme,
-  supportsVariables?: boolean,
-}>;
-
-/**
- * This class manages the CSS stylesheet for the page and the injection of new
- * CSS rules.
- */
-declare export class StyleXSheet {
-  static LIGHT_MODE_CLASS_NAME: string;
-  static DARK_MODE_CLASS_NAME: string;
-  constructor(opts: SheetOptions): void;
-  rootTheme: ?Theme;
-  rootDarkTheme: ?Theme;
-  supportsVariables: boolean;
-  rules: Array<string>;
-  injected: boolean;
-  tag: ?HTMLStyleElement;
-  ruleForPriority: Map<number, string>;
-  getVariableMatch(): RegExp;
-  isHeadless(): boolean;
-  getTag(): HTMLStyleElement;
-  getCSS(): string;
-  getRulePosition(rule: string): number;
-  getRuleCount(): number;
-  inject(): void;
-  injectTheme(): void;
-  __injectCustomThemeForTesting(selector: string, theme: Theme): void;
-  delete(rule: string): void;
-  normalizeRule(rule: string): string;
-  getInsertPositionForPriority(priority: number): number;
-  insert(rawLTRRule: string, priority: number, rawRTLRule: ?string): void;
-}
-
-declare export const styleSheet: StyleXSheet;

package/lib/StyleXTypes.js

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

package/lib/VarTypes.js

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

package/lib/es/StyleXCSSTypes.mjs

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