@xstyled/core - npm Package Compare versions

Comparing version 3.0.0-beta.0 to 3.0.0-beta.1

dist/index.d.ts

 import * as _xstyled_system from '@xstyled/system';
-import { ITheme as ITheme$1, Screens, Colors, system, ThemeGetter, ThemeGetterType, StyleScalarValue } from '@xstyled/system';
+import { ITheme as ITheme$1, Screens, Colors, system, StyleGenerator, ThemeGetter, ThemeGetterType, CSSScalar } from '@xstyled/system';
 import * as React from 'react';
@@ -53,2 +53,5 @@
         props: string[];
+        cssGetters: {
+            [key: string]: _xstyled_system.ThemeGetter<any>;
+        };
         getStyle: _xstyled_system.StyleGenerator<_xstyled_system.SystemProps<_xstyled_system.Theme>>;
@@ -59,87 +62,6 @@ generators?: _xstyled_system.StyleGenerator<{}>[] | undefined;
 
-interface Transform {
-    (value: any): any;
-}
-declare const propGetters: {
-    margin: Transform;
-    'margin-top': Transform;
-    'margin-bottom': Transform;
-    'margin-left': Transform;
-    'margin-right': Transform;
-    padding: Transform;
-    'padding-top': Transform;
-    'padding-bottom': Transform;
-    'padding-left': Transform;
-    'padding-right': Transform;
-    gap: Transform;
-    'grid-gap': Transform;
-    'row-gap': Transform;
-    'grid-row-gap': Transform;
-    'column-gap': Transform;
-    'grid-column-gap': Transform;
-    color: _xstyled_system.ThemeGetter<_xstyled_system.ThemeColor<_xstyled_system.Theme>>;
-    'background-color': _xstyled_system.ThemeGetter<_xstyled_system.ThemeColor<_xstyled_system.Theme>>;
-    'border-color': _xstyled_system.ThemeGetter<_xstyled_system.ThemeColor<_xstyled_system.Theme>>;
-    'border-top-color': _xstyled_system.ThemeGetter<_xstyled_system.ThemeColor<_xstyled_system.Theme>>;
-    'border-right-color': _xstyled_system.ThemeGetter<_xstyled_system.ThemeColor<_xstyled_system.Theme>>;
-    'border-bottom-color': _xstyled_system.ThemeGetter<_xstyled_system.ThemeColor<_xstyled_system.Theme>>;
-    'border-left-color': _xstyled_system.ThemeGetter<_xstyled_system.ThemeColor<_xstyled_system.Theme>>;
-    'outline-color': _xstyled_system.ThemeGetter<_xstyled_system.ThemeColor<_xstyled_system.Theme>>;
-    fill: _xstyled_system.ThemeGetter<_xstyled_system.ThemeColor<_xstyled_system.Theme>>;
-    stroke: _xstyled_system.ThemeGetter<_xstyled_system.ThemeColor<_xstyled_system.Theme>>;
-    'border-radius': Transform;
-    'border-top-left-radius': Transform;
-    'border-top-right-radius': Transform;
-    'border-bottom-right-radius': Transform;
-    'border-bottom-left-radius': Transform;
-    border: Transform;
-    'border-top': Transform;
-    'border-right': Transform;
-    'border-bottom': Transform;
-    'border-left': Transform;
-    'border-width': Transform;
-    'border-top-width': Transform;
-    'border-right-width': Transform;
-    'border-bottom-width': Transform;
-    'border-left-width': Transform;
-    'outline-width': Transform;
-    'border-style': Transform;
-    'border-top-style': _xstyled_system.ThemeGetter<_xstyled_system.ThemeBorderStyle<_xstyled_system.Theme>>;
-    'border-right-style': _xstyled_system.ThemeGetter<_xstyled_system.ThemeBorderStyle<_xstyled_system.Theme>>;
-    'border-bottom-style': _xstyled_system.ThemeGetter<_xstyled_system.ThemeBorderStyle<_xstyled_system.Theme>>;
-    'border-left-style': _xstyled_system.ThemeGetter<_xstyled_system.ThemeBorderStyle<_xstyled_system.Theme>>;
-    'outline-style': _xstyled_system.ThemeGetter<_xstyled_system.ThemeBorderStyle<_xstyled_system.Theme>>;
-    'box-shadow': Transform;
-    'text-shadow': Transform;
-    width: Transform;
-    height: Transform;
-    'max-width': Transform;
-    'max-height': Transform;
-    'min-width': Transform;
-    'min-height': Transform;
-    'mask-size': Transform;
-    'z-index': Transform;
-    'font-family': _xstyled_system.ThemeGetter<_xstyled_system.ThemeFont<_xstyled_system.Theme>>;
-    'font-size': Transform;
-    'line-height': Transform;
-    'font-weight': _xstyled_system.ThemeGetter<_xstyled_system.ThemeFontWeight<_xstyled_system.Theme>>;
-    'letter-spacing': Transform;
-    transition: _xstyled_system.ThemeGetter<_xstyled_system.ThemeTransition<_xstyled_system.Theme>>;
-    'transition-duration': _xstyled_system.ThemeGetter<_xstyled_system.Duration<_xstyled_system.Theme>>;
-    'animation-duration': _xstyled_system.ThemeGetter<_xstyled_system.Duration<_xstyled_system.Theme>>;
-    animation: _xstyled_system.ThemeGetter<_xstyled_system.ThemeAnimation<_xstyled_system.Theme>>;
-    top: Transform;
-    right: Transform;
-    bottom: Transform;
-    left: Transform;
-    'animation-timing-function': _xstyled_system.ThemeGetter<_xstyled_system.ThemeTimingFunction<_xstyled_system.Theme>>;
-    'transition-timing-function': _xstyled_system.ThemeGetter<_xstyled_system.ThemeTimingFunction<_xstyled_system.Theme>>;
-    transform: _xstyled_system.ThemeGetter<_xstyled_system.ThemeTransform<_xstyled_system.Theme>>;
-    'transition-property': _xstyled_system.ThemeGetter<_xstyled_system.ThemeTransitionProperty<_xstyled_system.Theme>>;
-};
+declare const createTransform: (generator: StyleGenerator) => (rawValue: any) => any;
 
-declare function transform(rawValue: any): any;
+declare const createUseGetter: <T extends ThemeGetter<any>>(getter: T, useTheme: () => object) => (value: ThemeGetterType<T>, defaultValue?: CSSScalar) => CSSScalar;
 
-declare const createUseGetter: <T extends ThemeGetter<any>>(getter: T, useTheme: () => object) => (value: ThemeGetterType<T>, defaultValue?: StyleScalarValue) => StyleScalarValue;
-
 interface BoxElements {
@@ -324,2 +246,2 @@ aBox: 'a';
 
-export { BoxElements, ColorModeContext, ColorModeProviderProps, createBox, createColorModeProvider, createColorStyles, createUseGetter, getColorModeInitScriptElement, getColorModeInitScriptTag, propGetters, transform, useColorMode, useColorModeState, useColorModeTheme, useThemeBreakpoint, useThemeDown, useThemeScreens, useThemeUp, useViewportWidth };
+export { BoxElements, ColorModeContext, ColorModeProviderProps, createBox, createColorModeProvider, createColorStyles, createTransform, createUseGetter, getColorModeInitScriptElement, getColorModeInitScriptTag, useColorMode, useColorModeState, useColorModeTheme, useThemeBreakpoint, useThemeDown, useThemeScreens, useThemeUp, useViewportWidth };

dist/index.js

@@ -32,3 +32,3 @@ 'use strict';
 function useThemeScreens(theme) {
-  return system.getScreens({theme});
+  return system.getScreens({ theme });
 }
@@ -94,3 +94,3 @@ function useThemeMinValue(theme, key) {
     if (util.func(value)) {
-      next[key] = toVarValue(name, util.cascade(value, {theme}));
+      next[key] = toVarValue(name, util.cascade(value, { theme }));
       continue;
@@ -101,3 +101,3 @@ }
 }
-function toCustomPropertiesDeclarations(values, theme, keys = Object.keys(values), parent, state = {value: ""}) {
+function toCustomPropertiesDeclarations(values, theme, keys = Object.keys(values), parent, state = { value: "" }) {
   for (const i in keys) {
@@ -116,3 +116,3 @@ const key = keys[i];
     if (util.func(value)) {
-      state.value += toProp(toVarName(name), util.cascade(value, {theme}));
+      state.value += toProp(toVarName(name), util.cascade(value, { theme }));
       continue;
@@ -155,3 +155,3 @@ }
     ...theme,
-    colors: {...theme.colors, ...theme.colors.modes[mode]}
+    colors: { ...theme.colors, ...theme.colors.modes[mode] }
   };
@@ -183,6 +183,6 @@ }
 }
-function createColorStyles(theme, {targetSelector = "body"} = {}) {
+function createColorStyles(theme, { targetSelector = "body" } = {}) {
   if (!checkHasColorModes(theme))
     return null;
-  const {modes, ...colors} = theme.colors;
+  const { modes, ...colors } = theme.colors;
   const colorKeys = getUsedColorKeys(modes);
@@ -192,4 +192,4 @@ let styles = toCustomPropertiesDeclarations(colors, theme, colorKeys, XSTYLED_COLORS_PREFIX);
     const modeTheme = getModeTheme(theme, mode);
-    const {modes: modes2, ...colors2} = modeTheme.colors;
-    return toCustomPropertiesDeclarations({...colors2, ...modes2[mode]}, modeTheme, colorKeys, XSTYLED_COLORS_PREFIX);
+    const { modes: modes2, ...colors2 } = modeTheme.colors;
+    return toCustomPropertiesDeclarations({ ...colors2, ...modes2[mode] }, modeTheme, colorKeys, XSTYLED_COLORS_PREFIX);
   }
@@ -228,3 +228,3 @@ if (theme.useColorSchemeMediaQuery !== false) {
       const mql = getSystemModeMql(mode);
-      return mql ? {mode, mql} : null;
+      return mql ? { mode, mql } : null;
     }).filter(Boolean);
@@ -237,4 +237,4 @@ }, [theme]);
   React__namespace.useEffect(() => {
-    const cleans = configs.map(({mode, mql}) => {
-      const handler = ({matches}) => {
+    const cleans = configs.map(({ mode, mql }) => {
+      const handler = ({ matches }) => {
         if (matches) {
@@ -254,3 +254,3 @@ setSystemMode(mode);
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
-function useColorModeState(theme, {target} = {}) {
+function useColorModeState(theme, { target } = {}) {
   const systemMode = useSystemMode(theme);
@@ -324,3 +324,3 @@ const defaultColorMode = getDefaultColorModeName(theme);
       return theme;
-    const {modes, ...colors} = theme.colors;
+    const { modes, ...colors } = theme.colors;
     const colorKeys = getUsedColorKeys(modes);
@@ -345,3 +345,3 @@ return {
     if (mode === getInitialColorModeName(theme)) {
-      return {...theme, __colorMode: mode};
+      return { ...theme, __colorMode: mode };
     }
@@ -382,3 +382,3 @@ return {
     }
-    const colorState = useColorModeState(theme, {target});
+    const colorState = useColorModeState(theme, { target });
     const colorModeTheme = useColorModeTheme(theme, colorState[0]);
@@ -406,3 +406,3 @@ return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(ColorModeStyle, {
     key: "xstyled-color-mode-init",
-    dangerouslySetInnerHTML: {__html: getInitScript(options)}
+    dangerouslySetInnerHTML: { __html: getInitScript(options) }
   });
@@ -419,102 +419,2 @@ }
 
-const getNumber = (transform) => (value) => {
-  const num = Number(value);
-  return transform(Number.isNaN(num) ? value : num);
-};
-const SPACES = /\s+/;
-const getMultiDimensions = (transform) => (value) => {
-  const values = value.split(SPACES);
-  return (p) => values.map((value2) => transform(value2)(p)).join(" ");
-};
-const COMMA = /\s*,\s*/;
-const getMultiValues = (transform) => (value) => {
-  const values = value.split(COMMA);
-  return (p) => values.map((value2) => transform(value2)(p)).join(",");
-};
-const getNumberInset = getNumber(system.getInset);
-const getNumberSpace = getNumber(system.getSpace);
-const getMultiNumberSpace = getMultiDimensions(getNumberSpace);
-const getNumberBorder = getNumber(system.getBorder);
-const getNumberBorderWidth = getNumber(system.getBorderWidth);
-const getMultiNumberBorderWidth = getMultiDimensions(getNumberBorderWidth);
-const getNumberSize = getNumber(system.getSize);
-const getMultiBorderStyle = getMultiDimensions(system.getBorderStyle);
-const propGetters = {
-  margin: getMultiNumberSpace,
-  "margin-top": getNumberSpace,
-  "margin-bottom": getNumberSpace,
-  "margin-left": getNumberSpace,
-  "margin-right": getNumberSpace,
-  padding: getMultiNumberSpace,
-  "padding-top": getNumberSpace,
-  "padding-bottom": getNumberSpace,
-  "padding-left": getNumberSpace,
-  "padding-right": getNumberSpace,
-  gap: getMultiNumberSpace,
-  "grid-gap": getMultiNumberSpace,
-  "row-gap": getNumberSpace,
-  "grid-row-gap": getNumberSpace,
-  "column-gap": getNumberSpace,
-  "grid-column-gap": getNumberSpace,
-  color: system.getColor,
-  "background-color": system.getColor,
-  "border-color": system.getColor,
-  "border-top-color": system.getColor,
-  "border-right-color": system.getColor,
-  "border-bottom-color": system.getColor,
-  "border-left-color": system.getColor,
-  "outline-color": system.getColor,
-  fill: system.getColor,
-  stroke: system.getColor,
-  "border-radius": getMultiDimensions(getNumber(system.getRadius)),
-  "border-top-left-radius": getMultiDimensions(getNumber(system.getRadius)),
-  "border-top-right-radius": getMultiDimensions(getNumber(system.getRadius)),
-  "border-bottom-right-radius": getMultiDimensions(getNumber(system.getRadius)),
-  "border-bottom-left-radius": getMultiDimensions(getNumber(system.getRadius)),
-  border: getNumberBorder,
-  "border-top": getNumberBorder,
-  "border-right": getNumberBorder,
-  "border-bottom": getNumberBorder,
-  "border-left": getNumberBorder,
-  "border-width": getMultiNumberBorderWidth,
-  "border-top-width": getNumberBorderWidth,
-  "border-right-width": getNumberBorderWidth,
-  "border-bottom-width": getNumberBorderWidth,
-  "border-left-width": getNumberBorderWidth,
-  "outline-width": getNumberBorderWidth,
-  "border-style": getMultiBorderStyle,
-  "border-top-style": system.getBorderStyle,
-  "border-right-style": system.getBorderStyle,
-  "border-bottom-style": system.getBorderStyle,
-  "border-left-style": system.getBorderStyle,
-  "outline-style": system.getBorderStyle,
-  "box-shadow": getMultiValues(system.getShadow),
-  "text-shadow": getMultiValues(system.getShadow),
-  width: getNumberSize,
-  height: getNumberSize,
-  "max-width": getNumberSize,
-  "max-height": getNumberSize,
-  "min-width": getNumberSize,
-  "min-height": getNumberSize,
-  "mask-size": getMultiValues(getNumberSize),
-  "z-index": getNumber(system.getZIndex),
-  "font-family": system.getFont,
-  "font-size": getNumber(system.getFontSize),
-  "line-height": getNumber(system.getLineHeight),
-  "font-weight": system.getFontWeight,
-  "letter-spacing": getNumber(system.getLetterSpacing),
-  transition: system.getTransition,
-  "transition-duration": system.getDuration,
-  "animation-duration": system.getDuration,
-  animation: system.getAnimation,
-  top: getNumberInset,
-  right: getNumberInset,
-  bottom: getNumberInset,
-  left: getNumberInset,
-  "animation-timing-function": system.getTimingFunction,
-  "transition-timing-function": system.getTimingFunction,
-  transform: system.getTransform,
-  "transition-property": system.getTransitionProperty
-};
-
 const getMediaWidth = (getBreakpointBound) => (value) => (props) => {
@@ -535,3 +435,20 @@ const v = getBreakpointBound(system.getScreens(props), value);
 const MATCH_REGEXP = new RegExp(`(?:${PROP_PATT}|${MEDIA_PATT})`, `g`);
-function transform(rawValue) {
+const QUERY_REGEXP = new RegExp(`(\\(\\s*)(${PROP_CHAR}+)(\\s*:\\s*)([^\\)]*?)(\\s*\\))`, `g`);
+const mediaTransform = (rawValue) => {
+  let matches;
+  let lastIndex = 0;
+  const values = [];
+  while (matches = QUERY_REGEXP.exec(rawValue)) {
+    const [, open, prop, colon, value, close] = matches;
+    const getter = mediaGetters[prop];
+    if (getter) {
+      values.push(rawValue.slice(lastIndex, matches.index));
+      values.push((p) => `${open}${prop}${colon}${getter(value)(p)}${close}`);
+      lastIndex = matches.index + matches[0].length;
+    }
+  }
+  values.push(rawValue.slice(lastIndex, rawValue.length));
+  return values;
+};
+const createTransform = (generator) => (rawValue) => {
   if (typeof rawValue !== "string")
@@ -551,3 +468,3 @@ return rawValue;
     } else {
-      const getter = propGetters[prop];
+      const getter = generator.meta.cssGetters[prop];
       if (getter) {
@@ -562,28 +479,7 @@ values.push(rawValue.slice(lastIndex, matches.index));
   return values;
-}
-const QUERY_REGEXP = new RegExp(`(\\(\\s*)(${PROP_CHAR}+)(\\s*:\\s*)([^\\)]*?)(\\s*\\))`, `g`);
-function mediaTransform(rawValue) {
-  let matches;
-  let lastIndex = 0;
-  const values = [];
-  while (matches = QUERY_REGEXP.exec(rawValue)) {
-    const [, open, prop, colon, value, close] = matches;
-    const getter = mediaGetters[prop];
-    if (getter) {
-      values.push(rawValue.slice(lastIndex, matches.index));
-      values.push((p) => `${open}${prop}${colon}${getter(value)(p)}${close}`);
-      lastIndex = matches.index + matches[0].length;
-    }
-  }
-  values.push(rawValue.slice(lastIndex, rawValue.length));
-  return values;
-}
+};
 
 const createUseGetter = (getter, useTheme) => (value, defaultValue) => {
   const theme = useTheme();
-  return React.useMemo(() => getter(value, defaultValue)({theme}), [
-    value,
-    defaultValue,
-    theme
-  ]);
+  return React.useMemo(() => getter(value, defaultValue)({ theme }), [value, defaultValue, theme]);
 };
@@ -595,7 +491,6 @@
 exports.createColorStyles = createColorStyles;
+exports.createTransform = createTransform;
 exports.createUseGetter = createUseGetter;
 exports.getColorModeInitScriptElement = getColorModeInitScriptElement;
 exports.getColorModeInitScriptTag = getColorModeInitScriptTag;
-exports.propGetters = propGetters;
-exports.transform = transform;
 exports.useColorMode = useColorMode;
@@ -602,0 +497,0 @@ exports.useColorModeState = useColorModeState;

package.json

 {
   "name": "@xstyled/core",
   "description": "xstyled core utilities.",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.1",
   "sideEffects": false,
@@ -26,5 +26,5 @@ "main": "dist/index.js",
   "dependencies": {
-    "@xstyled/system": "^3.0.0-beta.0"
+    "@xstyled/system": "^3.0.0-beta.1"
   },
-  "gitHead": "9ef8a37adac6d421956b2ae1c00c0651d3d6e835"
+  "gitHead": "2ca7c7411e73dad6574a283d8d924faff7879648"
 }

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

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

112770

decreased by-18.58%

Lines of code

1149

decreased by-19.87%

Dependency changes

• Updated@xstyled/system@^3.0.0-beta.1