@xstyled/styled-components - npm Package Compare versions

Comparing version 2.5.0 to 3.0.0-beta.0

dist/index.js

@@ -0,8 +1,245 @@
+'use strict';
 
-'use strict'
+Object.defineProperty(exports, '__esModule', { value: true });
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./styled-components.cjs.production.min.js')
-} else {
-  module.exports = require('./styled-components.cjs.development.js')
+var scStyled = require('styled-components');
+var util = require('@xstyled/util');
+var core = require('@xstyled/core');
+var system = require('@xstyled/system');
+var react = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var scStyled__default = /*#__PURE__*/_interopDefaultLegacy(scStyled);
+
+function css(...args) {
+  const scCssArgs = scStyled.css(...args);
+  const flattenedArgs = util.flattenStrings(scCssArgs);
+  return flattenedArgs.map(core.transform);
 }
+
+const createGlobalStyle = (first, ...interpolations) => {
+  return scStyled.createGlobalStyle([css(first, ...interpolations)]);
+};
+
+const createShouldForwardProp = (generator) => {
+  const propSet = new Set(generator.meta.props);
+  const shouldForwardProp = (prop, defaultValidatorFn, elementToBeCreated) => {
+    if (propSet.has(prop)) {
+      return false;
+    }
+    if (typeof elementToBeCreated === "string") {
+      return defaultValidatorFn(prop);
+    }
+    return true;
+  };
+  return shouldForwardProp;
+};
+
+function getCreateStyle(baseCreateStyle, ...generators) {
+  const createStyle = (...args) => baseCreateStyle`${css(...args, ...generators)}`;
+  createStyle.attrs = (attrs) => getCreateStyle(baseCreateStyle.attrs(attrs), ...generators);
+  createStyle.withConfig = (config) => getCreateStyle(baseCreateStyle.withConfig(config), ...generators);
+  return createStyle;
+}
+const styled = (component) => getCreateStyle(scStyled__default['default'](component));
+const styledWithGenerator = (component, generator) => getCreateStyle(scStyled__default['default'](component), generator);
+const shouldForwardProp = createShouldForwardProp(system.system);
+styled.box = styledWithGenerator("div", system.system).withConfig({
+  shouldForwardProp
+});
+Object.keys(scStyled__default['default']).forEach((key) => {
+  styled[key] = styled(key);
+  styled[`${key}Box`] = styledWithGenerator(key, system.system).withConfig({
+    shouldForwardProp
+  });
+});
+
+const createX = (generator) => {
+  const x = {
+    extend: (...generators) => createX(system.compose(generator, ...generators))
+  };
+  const shouldForwardProp = createShouldForwardProp(generator);
+  Object.keys(scStyled__default['default']).forEach((tag) => {
+    x[tag] = styledWithGenerator(tag, generator).withConfig({
+      shouldForwardProp
+    })``;
+  });
+  return x;
+};
+
+const x = createX(system.system);
+
+const ColorModeStyle = scStyled.createGlobalStyle`${(p) => core.createColorStyles(p.theme, {targetSelector: p.targetSelector})}`;
+const ColorModeProvider = core.createColorModeProvider({
+  ThemeContext: scStyled.ThemeContext,
+  ThemeProvider: scStyled.ThemeProvider,
+  ColorModeStyle
+});
+
+const useTheme = () => {
+  return react.useContext(scStyled.ThemeContext);
+};
+const useTh = core.createUseGetter(system.th, useTheme);
+const useAngle = core.createUseGetter(system.th.angle, useTheme);
+const useAnimation = core.createUseGetter(system.th.animation, useTheme);
+const useBorder = core.createUseGetter(system.th.border, useTheme);
+const useBorderColor = core.createUseGetter(system.th.borderColor, useTheme);
+const useBorderStyle = core.createUseGetter(system.th.borderStyle, useTheme);
+const useBorderWidth = core.createUseGetter(system.th.borderWidth, useTheme);
+const useColor = core.createUseGetter(system.th.color, useTheme);
+const useDuration = core.createUseGetter(system.th.duration, useTheme);
+const useFont = core.createUseGetter(system.th.font, useTheme);
+const useFontSize = core.createUseGetter(system.th.fontSize, useTheme);
+const useFontWeight = core.createUseGetter(system.th.fontWeight, useTheme);
+const useInset = core.createUseGetter(system.th.inset, useTheme);
+const useLetterSpacing = core.createUseGetter(system.th.letterSpacing, useTheme);
+const useLineHeight = core.createUseGetter(system.th.lineHeight, useTheme);
+const usePercent = core.createUseGetter(system.th.percent, useTheme);
+const usePx = core.createUseGetter(system.th.px, useTheme);
+const useRadius = core.createUseGetter(system.th.radius, useTheme);
+const useRingWidth = core.createUseGetter(system.th.ringWidth, useTheme);
+const useShadow = core.createUseGetter(system.th.shadow, useTheme);
+const useSize = core.createUseGetter(system.th.size, useTheme);
+const useSpace = core.createUseGetter(system.th.space, useTheme);
+const useTimingFunction = core.createUseGetter(system.th.timingFunction, useTheme);
+const useTransform = core.createUseGetter(system.th.transform, useTheme);
+const useTransition = core.createUseGetter(system.th.transition, useTheme);
+const useTransitionProperty = core.createUseGetter(system.th.transitionProperty, useTheme);
+const useZIndex = core.createUseGetter(system.th.zIndex, useTheme);
+
+const useScreens = () => {
+  return core.useThemeScreens(useTheme());
+};
+const useBreakpoint = () => {
+  return core.useThemeBreakpoint(useTheme());
+};
+const useUp = (key) => {
+  return core.useThemeUp(useTheme(), key);
+};
+const useDown = (key) => {
+  return core.useThemeDown(useTheme(), key);
+};
+
+const Preflight = system.createPreflight({createGlobalStyle: scStyled.createGlobalStyle});
+
+Object.defineProperty(exports, 'ServerStyleSheet', {
+  enumerable: true,
+  get: function () {
+    return scStyled.ServerStyleSheet;
+  }
+});
+Object.defineProperty(exports, 'StyleSheetManager', {
+  enumerable: true,
+  get: function () {
+    return scStyled.StyleSheetManager;
+  }
+});
+Object.defineProperty(exports, 'ThemeConsumer', {
+  enumerable: true,
+  get: function () {
+    return scStyled.ThemeConsumer;
+  }
+});
+Object.defineProperty(exports, 'ThemeContext', {
+  enumerable: true,
+  get: function () {
+    return scStyled.ThemeContext;
+  }
+});
+Object.defineProperty(exports, 'ThemeProvider', {
+  enumerable: true,
+  get: function () {
+    return scStyled.ThemeProvider;
+  }
+});
+Object.defineProperty(exports, 'isStyledComponent', {
+  enumerable: true,
+  get: function () {
+    return scStyled.isStyledComponent;
+  }
+});
+Object.defineProperty(exports, 'keyframes', {
+  enumerable: true,
+  get: function () {
+    return scStyled.keyframes;
+  }
+});
+Object.defineProperty(exports, 'withTheme', {
+  enumerable: true,
+  get: function () {
+    return scStyled.withTheme;
+  }
+});
+Object.defineProperty(exports, 'getColorModeInitScriptElement', {
+  enumerable: true,
+  get: function () {
+    return core.getColorModeInitScriptElement;
+  }
+});
+Object.defineProperty(exports, 'getColorModeInitScriptTag', {
+  enumerable: true,
+  get: function () {
+    return core.getColorModeInitScriptTag;
+  }
+});
+Object.defineProperty(exports, 'useColorMode', {
+  enumerable: true,
+  get: function () {
+    return core.useColorMode;
+  }
+});
+Object.defineProperty(exports, 'useViewportWidth', {
+  enumerable: true,
+  get: function () {
+    return core.useViewportWidth;
+  }
+});
+exports.ColorModeProvider = ColorModeProvider;
+exports.Preflight = Preflight;
+exports.createGlobalStyle = createGlobalStyle;
+exports.createX = createX;
+exports.css = css;
+exports.default = styled;
+exports.useAngle = useAngle;
+exports.useAnimation = useAnimation;
+exports.useBorder = useBorder;
+exports.useBorderColor = useBorderColor;
+exports.useBorderStyle = useBorderStyle;
+exports.useBorderWidth = useBorderWidth;
+exports.useBreakpoint = useBreakpoint;
+exports.useColor = useColor;
+exports.useDown = useDown;
+exports.useDuration = useDuration;
+exports.useFont = useFont;
+exports.useFontSize = useFontSize;
+exports.useFontWeight = useFontWeight;
+exports.useInset = useInset;
+exports.useLetterSpacing = useLetterSpacing;
+exports.useLineHeight = useLineHeight;
+exports.usePercent = usePercent;
+exports.usePx = usePx;
+exports.useRadius = useRadius;
+exports.useRingWidth = useRingWidth;
+exports.useScreens = useScreens;
+exports.useShadow = useShadow;
+exports.useSize = useSize;
+exports.useSpace = useSpace;
+exports.useTh = useTh;
+exports.useTheme = useTheme;
+exports.useTimingFunction = useTimingFunction;
+exports.useTransform = useTransform;
+exports.useTransition = useTransition;
+exports.useTransitionProperty = useTransitionProperty;
+exports.useUp = useUp;
+exports.useZIndex = useZIndex;
+exports.x = x;
+Object.keys(system).forEach(function (k) {
+  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () {
+      return system[k];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "@xstyled/styled-components",
   "description": "A utility-first CSS-in-JS framework built for React (styled-components bindings).",
-  "version": "2.5.0",
+  "version": "3.0.0-beta.0",
   "keywords": [
@@ -19,5 +19,4 @@ "styled-components",
   "scripts": {
-    "reset": "rm -rf dist && rm -rf node_modules/.cache",
-    "watch": "tsdx watch",
-    "build": "tsdx build",
+    "reset": "rm -rf dist",
+    "build": "../../node_modules/.bin/rollup -c ../../build/rollup.config.js",
     "prepublishOnly": "yarn reset && yarn build"
@@ -38,7 +37,7 @@ },
   "dependencies": {
-    "@xstyled/core": "^2.5.0",
-    "@xstyled/system": "^2.5.0",
-    "@xstyled/util": "^2.2.3"
+    "@xstyled/core": "^3.0.0-beta.0",
+    "@xstyled/system": "^3.0.0-beta.0",
+    "@xstyled/util": "^3.0.0-beta.0"
   },
-  "gitHead": "902e7a65749b54d4238f83081fbb78faf4218469"
+  "gitHead": "9ef8a37adac6d421956b2ae1c00c0651d3d6e835"
 }

New alerts

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

174608

decreased by-19.54%

Number of package files

9

decreased by-59.09%

Lines of code

1111

decreased by-28.32%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@xstyled/core@3.8.1(transitive)

• + Added@xstyled/system@3.8.1(transitive)

• + Added@xstyled/util@3.7.0(transitive)

• - Removed@xstyled/core@2.5.0(transitive)

• - Removed@xstyled/system@2.5.0(transitive)

• - Removed@xstyled/util@2.2.3(transitive)

• Updated@xstyled/core@^3.0.0-beta.0

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

• Updated@xstyled/util@^3.0.0-beta.0