@stylexjs/stylex - npm Package Compare versions

Comparing version 0.2.0-beta.11 to 0.2.0-beta.12

lib/native/__tests__/stylex-test.js

@@ -412,2 +412,36 @@ "use strict";
 });
+describe('unsupported style properties', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error');
+    console.error.mockImplementation(() => {});
+  });
+  afterEach(() => {
+    console.error.mockRestore();
+  });
+  test('"filter"', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        filter: 'blur(1px)'
+      }
+    });
+    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(console.error).toHaveBeenCalled();
+  });
+  test('"transitionProperty" passthrough', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        transitionProperty: 'opacity'
+      }
+    });
+    expect(_stylex.stylex.spread(underTest, {
+      ...mockOptions,
+      passthroughProperties: ['transitionProperty']
+    })).toMatchSnapshot();
+    expect(console.error).not.toHaveBeenCalled();
+  });
+});
 describe('unsupported style values', () => {
@@ -414,0 +448,0 @@ beforeEach(() => {

lib/native/stylex.js

@@ -194,5 +194,6 @@ "use strict";
   let {
-    customProperties,
+    customProperties = {},
     inheritedFontSize,
     fontScale = 1,
+    passthroughProperties = [],
     viewportHeight,
@@ -244,3 +245,3 @@ viewportWidth,
     // NOTE: Any kind of prop name transformations should happen before this check.
-    if (!isReactNativeStyleProp(styleProp)) {
+    if (!isReactNativeStyleProp(styleProp) && passthroughProperties.indexOf(styleProp) === -1) {
       (0, _errorMsg.errorMsg)(`Encountered unsupported style property "${styleProp}"`);
@@ -247,0 +248,0 @@ delete flatStyle[styleProp];

lib/stylex.d.ts

@@ -6,83 +6,64 @@ /**
  * LICENSE file in the root directory of this source tree.
+ *
+ *
  */
 
-import { $ReadOnly } from 'utility-types';
-
-// Simulating an opaque type
-declare const classNameSymbol: unique symbol;
-
-export type ClassNameFor<K, V> = string & {
-  _tag: typeof classNameSymbol;
-  _key: K;
-  _value: V;
-};
-
-export type ClassNameForKey<K> = ClassNameFor<K, string | number>;
-export type ClassNameForValue<V> = ClassNameFor<string, V>;
-export type ClassName = ClassNameFor<string, string | number>;
-
-export type Namespace = {
-  readonly [K in string]: string | number | { [K in string]: string | number };
-};
-
-export type CompiledNamespace = {
-  readonly [K in string]:
-    | ClassNameFor<K, string | number>
-    | { [J in string]: ClassNameFor<`${K}+${J}`, string | number> };
-};
-
-export type NamespaceSet = {
-  readonly [K in string]: Namespace;
-};
-
-export type CompiledNamespaceSet = {
-  readonly [K in string]: CompiledNamespace;
-};
-
-type Stylex$Create = <S extends NamespaceSet>(
-  styles: S
-) => $ReadOnly<{
-  readonly [K in keyof S]: {
-    readonly [P in keyof S[K]]: S[K][P] extends string | number
-      ? ClassNameFor<P, S[K][P]>
-      : {
-          readonly [F in keyof S[K][P]]: ClassNameFor<`${P}+${F}`, S[K][P][F]>;
-        };
-  };
+import type {
+  Keyframes,
+  Stylex$Create,
+  StyleXArray,
+  MapNamespace,
+} from './StyleXTypes';
+import injectStyle from './stylex-inject';
+type DedupeStyles = Readonly<{
+  [key: string]: string | Readonly<{ [key: string]: string }>;
 }>;
-
-type StylexInclude = <S extends CompiledNamespace>(
-  compiledNamespace: S
-) => {
-  readonly [K in keyof S]: S[K] extends ClassNameFor<K, infer V> ? V : S[K];
-};
-
-type Stylex$Keyframes = <S extends NamespaceSet>(animationConfig: S) => string;
-
-type NestedArray<T> = T | Array<T | NestedArray<T>>;
-
-declare let stylex: {
+export declare function spread(
+  styles: StyleXArray<
+    | (null | undefined | DedupeStyles)
+    | boolean
+    | { [$$Key$$: string]: string | number }
+  >,
+  _options?: {}
+): { className: string; style: { [$$Key$$: string]: string | number } };
+type Stylex$Include = <
+  TStyles extends { readonly [$$Key$$: string]: string | number }
+>(
+  _styles: MapNamespace<TStyles>
+) => TStyles;
+export declare var create: Stylex$Create;
+export declare var include: Stylex$Include;
+export declare var keyframes: (_keyframes: Keyframes) => string;
+export declare var firstThatWorks: <T extends string | number>(
+  ..._styles: ReadonlyArray<T>
+) => ReadonlyArray<T>;
+export declare var inject: typeof injectStyle;
+export declare var UNSUPPORTED_PROPERTY: <T>(_props: T) => T;
+type IStyleX = {
   (
     ...styles: ReadonlyArray<
-      NestedArray<(CompiledNamespace | null | undefined) | boolean>
+      StyleXArray<(null | undefined | DedupeStyles) | boolean>
     >
   ): string;
+  spread: (
+    styles: ReadonlyArray<
+      StyleXArray<(null | undefined | DedupeStyles) | boolean>
+    >,
+    options?: {}
+  ) => { className: string; style: { [$$Key$$: string]: string | number } };
   create: Stylex$Create;
-  include: StylexInclude;
+  include: Stylex$Include;
+  firstThatWorks: <T extends string | number>(
+    ...v: ReadonlyArray<T>
+  ) => ReadonlyArray<T>;
   inject: (
     ltrRule: string,
     priority: number,
-    rtlRule: string | null | undefined
+    rtlRule: null | undefined | string
   ) => void;
-  keyframes: Stylex$Keyframes;
-  spread: (
-    ...styles: ReadonlyArray<
-      NestedArray<(Object | CompiledNamespace | null | undefined) | boolean>
-    >
-  ) => {
-    className: string;
-    style: { [key: string]: string | number };
-  };
+  keyframes: (keyframes: Keyframes) => string;
+  UNSUPPORTED_PROPERTY: <T>(props: T) => T;
 };
-
-export default stylex;
+declare const $$EXPORT_DEFAULT_DECLARATION$$: IStyleX;
+export default $$EXPORT_DEFAULT_DECLARATION$$;
+export declare var stylex: IStyleX;

lib/stylex.js

@@ -21,6 +21,3 @@ /**
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function spread() {
-  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
-    styles[_key] = arguments[_key];
-  }
+function spread(styles, _options) {
   const [className, style] = (0, _styleq.styleq)(styles);
@@ -57,4 +54,4 @@ return {
 function _stylex() {
-  for (var _len2 = arguments.length, styles = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    styles[_key2] = arguments[_key2];
+  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
+    styles[_key] = arguments[_key];
   }
@@ -61,0 +58,0 @@ const [className] = (0, _styleq.styleq)(styles);

package.json

 {
   "name": "@stylexjs/stylex",
-  "version": "0.2.0-beta.11",
+  "version": "0.2.0-beta.12",
   "description": "A styling library for React.",
@@ -11,2 +11,3 @@ "main": "lib/stylex.js",
   "scripts": {
+    "prebuild": "gen-types -i src/ -o lib/",
     "build": "babel src/ --out-dir lib/ --copy-files",
@@ -19,5 +20,8 @@ "build-haste": "HASTE=true babel src/ --out-dir lib/ --copy-files",
     "invariant": "^2.2.4",
-    "utility-types": "^3.10.0",
-    "styleq": "0.1.3"
+    "styleq": "0.1.3",
+    "utility-types": "^3.10.0"
   },
+  "devDependencies": {
+    "@stylexjs/scripts": "0.2.0-beta.12"
+  },
   "jest": {},
@@ -24,0 +28,0 @@ "files": [

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

145132

increased by146.52%

Number of package files

40

increased by135.29%

Lines of code

2677

increased by89.59%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

1

increased byInfinity%

No dependency changes