@stylexjs/shared - npm Package Compare versions

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

lib/index.d.ts

@@ -6,98 +6,35 @@ /**
  * LICENSE file in the root directory of this source tree.
+ *
+ *
  */
 
-export type TRawValue = number | string | Array<number | string>;
-
-export type TStyleValue = number | string | Array<number | string>;
-export type TNestableStyleValue =
-  | TStyleValue
-  | { readonly [key: string]: TStyleValue };
-
-export type RawStyles = $ReadOnly<{
-  [key: string]: TNestableStyleValue;
-}>;
-
-export type InjectableStyle = {
-  readonly priority: number;
-  readonly ltr: string;
-  readonly rtl?: string;
-};
-
-export type StyleRule = readonly [string, string, InjectableStyle];
-
-export type CompiledStyles = {
-  readonly [key: string]: string | null;
-  readonly $$css: true;
-};
-export type MutableCompiledStyles = {
-  [key: string]: string | null;
-  $$css: true;
-};
-
-export type CompiledNamespaces = { readonly [key: string]: CompiledStyles };
-
-export type MutableCompiledNamespaces = {
-  [key: string]: MutableCompiledStyles;
-};
-
-export function create<N extends { readonly [key: string]: RawStyles }>(
-  namespaces: N,
-  options?: StyleXOptions
-): readonly [CompiledNamespaces, { readonly [key: string]: InjectableStyle }];
-
-export function keyframes<
-  Obj extends {
-    readonly [key: string]: { readonly [k: string]: string | number };
-  }
->(animation: Obj, options?: StyleXOptions): readonly [string, InjectableStyle];
-
-export function include(animation: {
-  readonly [key: string]: string | number;
-}): readonly { [key: string]: IncludedStyles };
-
-export class IncludedStyles {
-  astNode: any;
-}
-
-export type StyleXOptions = {
-  dev: boolean;
-  test: boolean;
-  stylexSheetName?: string | undefined;
-  classNamePrefix: string;
-  definedStylexCSSVariables?: { [key: string]: any };
-  styleResolution:
-    | 'application-order' // The last style applied wins.
-    // More specific styles will win over less specific styles. (margin-top wins over margin)
-    | 'property-specificity'
-    // Legacy behavior, that expands shorthand properties into their longhand counterparts at compile-time.
-    // This is not recommended, and will be removed in a future version.
-    | 'legacy-expand-shorthands';
-  [key: string]: any;
-};
-
-export function firstThatWorks<T>(...args: T[]): T[];
-
-export const messages: {
-  ILLEGAL_ARGUMENT_LENGTH: string;
-  NON_STATIC_VALUE: string;
-  ESCAPED_STYLEX_VALUE: string;
-  UNBOUND_STYLEX_CALL_VALUE: string;
-  ONLY_TOP_LEVEL: string;
-  NON_OBJECT_FOR_STYLEX_CALL: string;
-  UNKNOWN_PROP_KEY: string;
-  INVALID_PSEUDO: string;
-  ILLEGAL_NAMESPACE_TYPE: string;
-  UNKNOWN_NAMESPACE: string;
-  ILLEGAL_NESTED_PSEUDO: string;
-  ILLEGAL_PROP_VALUE: string;
-  ILLEGAL_PROP_ARRAY_VALUE: string;
-  ILLEGAL_NAMESPACE_VALUE: string;
-  INVALID_SPREAD: string;
-  LINT_UNCLOSED_FUNCTION: string;
-  LOCAL_ONLY: string;
-  UNEXPECTED_ARGUMENT: string;
-  EXPECTED_FUNCTION_CALL: string;
-  INVALID_PSEUDO_OR_AT_RULE: string;
-  ONLY_TOP_LEVEL_INLCUDES: string;
-  DUPLICATE_CONDITIONAL: string;
-};
+export type {
+  RawStyles,
+  StyleRule,
+  TNestableStyleValue,
+  TRawValue,
+  TStyleValue,
+} from './common-types';
+import styleXCreateSet from './stylex-create';
+import stylexKeyframes from './stylex-keyframes';
+import stylexInclude, {
+  IncludedStyles as _IncludedStyles,
+} from './stylex-include';
+import stylexFirstThatWorks from './stylex-first-that-works';
+import * as m from './messages';
+import type {
+  InjectableStyle as _InjectableStyle,
+  CompiledNamespaces as _CompiledNamespaces,
+  MutableCompiledNamespaces as _MutableCompiledNamespaces,
+  StyleXOptions as _StyleXOptions,
+} from './common-types';
+export declare var create: typeof styleXCreateSet;
+export declare var keyframes: typeof stylexKeyframes;
+export declare var include: typeof stylexInclude;
+export declare var messages: typeof m;
+export declare var IncludedStyles: typeof _IncludedStyles;
+export declare var firstThatWorks: typeof stylexFirstThatWorks;
+export type InjectableStyle = _InjectableStyle;
+export type CompiledNamespaces = _CompiledNamespaces;
+export type MutableCompiledNamespaces = _MutableCompiledNamespaces;
+export type StyleXOptions = _StyleXOptions;

lib/preprocess-rules/legacy-expand-shorthands.js

@@ -18,142 +18,3 @@ "use strict";
 
-const borderWidthKeywords = new Set(['thin', 'medium', 'thick']);
-const borderStyleKeywords = new Set(['none', 'hidden', 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inside',
-// Non-standard
-'inset', 'outset']);
-const globalKeywords = new Set(['initial', 'inherit', 'unset']);
-// eslint-disable-next-line no-unused-vars
-function borderDetector(borderParts) {
-  const parts = borderParts.filter(Boolean).slice();
-  let suffix = '';
-  for (let i = 0; i < parts.length; i++) {
-    const part = parts[i];
-    if (typeof part === 'string' && part.endsWith('!important')) {
-      parts[i] = part.replace('!important', '').trim();
-      suffix = ' !important';
-    }
-  }
-  if (parts.length === 1 && typeof parts[0] === 'string' && globalKeywords.has(parts[0])) {
-    return [parts[0], parts[0], parts[0]];
-  }
-
-  // Find the part that starts with a number
-  // This is most likely to be the borderWidth
-  let width = parts.find(part => typeof part === 'number' || part.match(/^\.?\d+/) || borderWidthKeywords.has(part));
-  if (typeof width === 'number') {
-    width = String(width) + 'px';
-  }
-  // console.log('width', width);
-  if (width != null) {
-    parts.splice(parts.indexOf(width), 1);
-  }
-  if (parts.length === 0) {
-    return [String(width) + suffix, null, null];
-  }
-  const style = parts.find(part => typeof part === 'string' && borderStyleKeywords.has(part));
-  if (style != null) {
-    parts.splice(parts.indexOf(style), 1);
-  }
-  if (parts.length === 2 && width == null) {
-    width = parts[0];
-    parts.splice(0, 1);
-  }
-  if (width != null && parts.length > 1) {
-    throw new Error('Invalid border shorthand value');
-  }
-  const color = parts[0];
-  return [width, style, color].map(part => part != null ? part + suffix : null);
-}
 const expansions = {
-  // TODO: Due to UI regressions internally, we need to maintain the buggy behaviour of
-  // border shorthand for now. This will be fixed in a future release.
-  // border: (rawValue: TStyleValue): TReturn => {
-  //   if (typeof rawValue === 'number') {
-  //     return expansions.borderWidth(rawValue);
-  //   }
-
-  //   const parts = splitValue(rawValue);
-  //   const [width, style, color] = borderDetector(parts);
-
-  //   return [
-  //     ...(width != null ? expansions.borderWidth(width) : []),
-  //     ...(style != null ? expansions.borderStyle(style) : []),
-  //     ...(color != null ? expansions.borderColor(color) : []),
-  //   ];
-  // },
-  // borderTop: (rawValue: TStyleValue): TReturn => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderTopWidth', rawValue]];
-  //   }
-  //   const parts = splitValue(rawValue);
-  //   const [width, style, color] = borderDetector(parts);
-
-  //   return [
-  //     width != null ? ['borderTopWidth', width] : null,
-  //     style != null ? ['borderTopStyle', style] : null,
-  //     color != null ? ['borderTopColor', color] : null,
-  //   ].filter(Boolean);
-  // },
-  // borderEnd: (rawValue: TStyleValue): TReturn => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderEndWidth', rawValue]];
-  //   }
-
-  //   const parts = splitValue(rawValue);
-  //   const [width, style, color] = borderDetector(parts);
-
-  //   return [
-  //     width != null ? ['borderEndWidth', width] : null,
-  //     style != null ? ['borderEndStyle', style] : null,
-  //     color != null ? ['borderEndColor', color] : null,
-  //   ].filter(Boolean);
-  // },
-  // borderRight: (rawValue: TStyleValue): TReturn => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderRightWidth', rawValue]];
-  //   }
-  //   const parts = splitValue(rawValue);
-  //   const [width, style, color] = borderDetector(parts);
-  //   return [
-  //     width != null ? ['borderRightWidth', width] : null,
-  //     style != null ? ['borderRightStyle', style] : null,
-  //     color != null ? ['borderRightColor', color] : null,
-  //   ].filter(Boolean);
-  // },
-  // borderBottom: (rawValue: TStyleValue): TReturn => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderBottomWidth', rawValue]];
-  //   }
-  //   const parts = splitValue(rawValue);
-  //   const [width, style, color] = borderDetector(parts);
-  //   return [
-  //     width != null ? ['borderBottomWidth', width] : null,
-  //     style != null ? ['borderBottomStyle', style] : null,
-  //     color != null ? ['borderBottomColor', color] : null,
-  //   ].filter(Boolean);
-  // },
-  // borderStart: (rawValue: TStyleValue): TReturn => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderStartWidth', rawValue]];
-  //   }
-  //   const parts = splitValue(rawValue);
-  //   const [width, style, color] = borderDetector(parts);
-  //   return [
-  //     width != null ? ['borderStartWidth', width] : null,
-  //     style != null ? ['borderStartStyle', style] : null,
-  //     color != null ? ['borderStartColor', color] : null,
-  //   ].filter(Boolean);
-  // },
-  // borderLeft: (rawValue: TStyleValue): TReturn => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderLeftWidth', rawValue]];
-  //   }
-  //   const parts = splitValue(rawValue);
-  //   const [width, style, color] = borderDetector(parts);
-  //   return [
-  //     width != null ? ['borderLeftWidth', width] : null,
-  //     style != null ? ['borderLeftStyle', style] : null,
-  //     color != null ? ['borderLeftColor', color] : null,
-  //   ].filter(Boolean);
-  // },
-
   border: rawValue => {
@@ -160,0 +21,0 @@ return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];

lib/utils/normalizers/font-size-px-to-rem.js

@@ -12,3 +12,8 @@ /**
 
-const parser = require('postcss-value-parser');
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = convertFontSizeToRem;
+var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ROOT_FONT_SIZE = 16;
@@ -21,3 +26,3 @@
  */
-module.exports = function convertFontSizeToRem(ast, key) {
+function convertFontSizeToRem(ast, key) {
   if (key !== 'fontSize') {
@@ -30,3 +35,3 @@ return ast;
     }
-    const dimension = parser.unit(node.value);
+    const dimension = _postcssValueParser.default.unit(node.value);
     if (dimension && dimension.unit === 'px') {
@@ -37,2 +42,2 @@ node.value = `${parseFloat(dimension.number) / ROOT_FONT_SIZE}rem`;
   return ast;
-};
+}

package.json

 {
   "name": "@stylexjs/shared",
-  "version": "0.2.0-beta.11",
+  "version": "0.2.0-beta.12",
   "main": "lib/index.js",
@@ -8,2 +8,3 @@ "repository": "https://www.github.com/facebook/stylex",
   "scripts": {
+    "prebuild": "gen-types -i src/ -o lib/",
     "build": "babel src/ --out-dir lib/ --copy-files",
@@ -16,2 +17,3 @@ "test": "jest"
   "devDependencies": {
+    "@stylexjs/scripts": "0.2.0-beta.12",
     "typescript": "^4.7.4"
@@ -18,0 +20,0 @@ },

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

Number of package files

116

increased by136.73%

Worsened metrics

Total package byte prevSize

182608

decreased by-2.98%

Dev dependency count

2

increased by100%

Lines of code

3606

decreased by-12.69%

No dependency changes