@stylexjs/stylex - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0-alpha.1

lib/stylex.d.ts

@@ -41,2 +41,11 @@ /**
 }>;
+export declare function attrs(
+  ...styles: ReadonlyArray<
+    StyleXArray<
+      | (null | undefined | CompiledStyles)
+      | boolean
+      | Readonly<[CompiledStyles, InlineStyles]>
+    >
+  >
+): Readonly<{ class?: string; style?: string }>;
 type Stylex$Include = <
@@ -135,2 +144,11 @@ TStyles extends {
   }>;
+  attrs: (
+    ...styles: ReadonlyArray<
+      StyleXArray<
+        | (null | undefined | CompiledStyles)
+        | boolean
+        | Readonly<[CompiledStyles, InlineStyles]>
+      >
+    >
+  ) => Readonly<{ class?: string; style?: string }>;
   create: Stylex$Create;
@@ -147,4 +165,4 @@ defineVars: StyleX$DefineVars;
 };
-export declare const stylex: IStyleX;
+export declare const legacyMerge: IStyleX;
 declare const $$EXPORT_DEFAULT_DECLARATION$$: IStyleX;
 export default $$EXPORT_DEFAULT_DECLARATION$$;

lib/stylex.js

@@ -7,6 +7,9 @@ 'use strict';
 exports.__monkey_patch__ = __monkey_patch__;
-exports.keyframes = exports.include = exports.firstThatWorks = exports.defineVars = exports.default = exports.createTheme = exports.create = void 0;
+exports.attrs = attrs;
+exports.legacyMerge = exports.keyframes = exports.include = exports.firstThatWorks = exports.defineVars = exports.default = exports.createTheme = exports.create = void 0;
 exports.props = props;
-exports.types = exports.stylex = void 0;
+exports.types = void 0;
 var _styleq = require("styleq");
+const errorForFn = name => new Error(`'stylex.${name}' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'`);
+const errorForType = key => errorForFn(`types.${key}`);
 function props() {
@@ -30,2 +33,16 @@ const options = this;
 }
+function attrs() {
+  const {
+    className,
+    style
+  } = props(...arguments);
+  const result = {};
+  if (className != null && className !== '') {
+    result.class = className;
+  }
+  if (style != null && Object.keys(style).length > 0) {
+    result.style = Object.keys(style).map(key => `${key}:${style[key]};`).join('');
+  }
+  return result;
+}
 function stylexCreate(styles) {
@@ -36,3 +53,3 @@ if (__implementations.create != null) {
   }
-  throw new Error('stylex.create should never be called. It should be compiled away.');
+  throw errorForFn('create');
 }
@@ -43,3 +60,3 @@ function stylexDefineVars(styles) {
   }
-  throw new Error('stylex.defineVars should never be called. It should be compiled away.');
+  throw errorForFn('defineVars');
 }
@@ -50,3 +67,3 @@ const stylexCreateTheme = (baseTokens, overrides) => {
   }
-  throw new Error('stylex.createTheme should never be called. It should be compiled away.');
+  throw errorForFn('createTheme');
 };
@@ -57,3 +74,3 @@ const stylexInclude = styles => {
   }
-  throw new Error('stylex.extends should never be called. It should be compiled away.');
+  throw errorForFn('include');
 };
@@ -66,42 +83,41 @@ const create = exports.create = stylexCreate;
   angle: _v => {
-    throw new Error(errorForType('angle'));
+    throw errorForType('angle');
   },
   color: _v => {
-    throw new Error(errorForType('color'));
+    throw errorForType('color');
   },
   url: _v => {
-    throw new Error(errorForType('url'));
+    throw errorForType('url');
   },
   image: _v => {
-    throw new Error(errorForType('image'));
+    throw errorForType('image');
   },
   integer: _v => {
-    throw new Error(errorForType('integer'));
+    throw errorForType('integer');
   },
   lengthPercentage: _v => {
-    throw new Error(errorForType('lengthPercentage'));
+    throw errorForType('lengthPercentage');
   },
   length: _v => {
-    throw new Error(errorForType('length'));
+    throw errorForType('length');
   },
   percentage: _v => {
-    throw new Error(errorForType('percentage'));
+    throw errorForType('percentage');
   },
   number: _v => {
-    throw new Error(errorForType('number'));
+    throw errorForType('number');
   },
   resolution: _v => {
-    throw new Error(errorForType('resolution'));
+    throw errorForType('resolution');
   },
   time: _v => {
-    throw new Error(errorForType('time'));
+    throw errorForType('time');
   },
   transformFunction: _v => {
-    throw new Error(errorForType('transformFunction'));
+    throw errorForType('transformFunction');
   },
   transformList: _v => {
-    throw new Error(errorForType('transformList'));
+    throw errorForType('transformList');
   }
 };
-const errorForType = type => `stylex.types.${type} should be compiled away by @stylexjs/babel-plugin`;
 const keyframes = keyframes => {
@@ -111,3 +127,3 @@ if (__implementations.keyframes) {
   }
-  throw new Error('stylex.keyframes should never be called');
+  throw errorForFn('keyframes');
 };
@@ -119,3 +135,3 @@ exports.keyframes = keyframes;
   }
-  throw new Error('stylex.firstThatWorks should never be called.');
+  throw errorForFn('firstThatWorks');
 };
@@ -131,2 +147,3 @@ exports.firstThatWorks = firstThatWorks;
 _stylex.props = props;
+_stylex.attrs = attrs;
 _stylex.create = create;
@@ -147,3 +164,3 @@ _stylex.defineVars = defineVars;
 }
-const stylex = exports.stylex = _stylex;
+const legacyMerge = exports.legacyMerge = _stylex;
 var _default = exports.default = _stylex;

package.json

 {
   "name": "@stylexjs/stylex",
-  "version": "0.4.1",
+  "version": "0.5.0-alpha.1",
   "description": "A library for defining styles for optimized user interfaces.",
-  "main": "lib/stylex.js",
-  "types": "lib/stylex.d.ts",
+  "main": "./lib/stylex.js",
+  "module": "./lib/es/stylex.js",
+  "types": "./lib/stylex.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/es/stylex.js",
+      "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.js",
+      "require": "./lib/StyleXSheet.js",
+      "types": "./lib/StyleXSheet.d.ts"
+    },
+    "./lib/stylex-inject": {
+      "import": "./lib/es/stylex-inject.js",
+      "require": "./lib/stylex-inject.js",
+      "types": "./lib/stylex-inject.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
   "repository": "https://www.github.com/facebook/stylex",
@@ -11,3 +35,6 @@ "license": "MIT",
     "prebuild": "gen-types -i src/ -o lib/",
-    "build": "babel src/ --out-dir lib/ --copy-files",
+    "build:cjs": "BABEL_ENV=cjs babel src/ --out-dir lib/ --copy-files",
+    "build:esm": "BABEL_ENV=esm babel src/ --out-dir lib/es --copy-files",
+    "postbuild:esm": "rollup -c ./rollup.config.mjs",
+    "build": "npm run build:cjs && npm run build:esm",
     "build-haste": "rewrite-imports -i src/ -o lib/",
@@ -23,3 +50,3 @@ "test": "jest"
   "devDependencies": {
-    "@stylexjs/scripts": "0.4.1"
+    "@stylexjs/scripts": "0.5.0-alpha.1"
   },
@@ -26,0 +53,0 @@ "jest": {},

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

154758

increased by19.46%

Number of package files

23

increased by35.29%

Lines of code

2865

increased by33.94%

No dependency changes