@component-driven/mixins - npm Package Compare versions

Comparing version 2.0.1 to 3.0.0

CHANGELOG.md

 # @component-driven/mixins
 
+## 3.0.0
+
+### Major Changes
+
+- 3829331: Convert to TypeScript
+
 ## 2.0.1
@@ -4,0 +10,0 @@

dist/mixins.cjs.dev.js

@@ -8,4 +8,4 @@ 'use strict';
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-// theme-ui provides theme as an argument where styled-system uses props.theme
 
+// Check if it's a props object or the theme
 function getTheme(theme) {
@@ -16,3 +16,4 @@ if (theme === void 0) {
 
-  return theme['theme'] || theme;
+  // @ts-ignore theme-ui provides theme as an argument where styled-system uses props.theme
+  return theme["theme"] || theme;
 }
@@ -52,8 +53,8 @@ /**
 
-  return function (theme) {
-    var themeColor = color.transparentize(color$1, 0)(getTheme(theme)); // This serves as a getter from theme
+  return function (props) {
+    var themeColor = color.transparentize(color$1, 0)(getTheme(props)); // This serves as a getter from theme
 
     if (disabled) {
       return {
-        outline: 'none'
+        outline: "none"
       };
@@ -63,6 +64,6 @@ }
     return _extends({
-      outline: 'none',
+      outline: "none",
       borderColor: themeColor,
-      transition: 'box-shadow .25s'
-    }, focusBoxShadow(themeColor)(theme));
+      transition: "box-shadow .25s"
+    }, focusBoxShadow(themeColor)(props));
   };
@@ -89,9 +90,9 @@ };
 
-  return function (theme) {
-    var styles = focusRingStyles(color, disabled)(getTheme(theme));
+  return function (props) {
+    var styles = focusRingStyles(color, disabled)(getTheme(props));
     var baseStyles = {
-      '.js-focus-visible &:focus:not(.focus-visible)': {
+      ".js-focus-visible &:focus:not(.focus-visible)": {
         outline: 0
       },
-      '&.focus-visible': styles
+      "&.focus-visible": styles
     };
@@ -101,3 +102,3 @@
       return _extends({}, baseStyles, {
-        '&:hover:not(:disabled)': styles
+        "&:hover:not(:disabled)": styles
       });
@@ -110,9 +111,9 @@ }
 var disabledStyles = {
-  opacity: '0.6',
-  filter: 'saturate(60%)',
-  cursor: 'not-allowed'
+  opacity: "0.6",
+  filter: "saturate(60%)",
+  cursor: "not-allowed"
 };
 function disabled() {
   return {
-    '&:disabled': disabledStyles
+    "&:disabled": disabledStyles
   };
@@ -119,0 +120,0 @@ }

dist/mixins.cjs.prod.js

@@ -30,4 +30,4 @@ "use strict";
 }, focusRingStyles = function(color$1, disabled) {
-  return void 0 === disabled && (disabled = !1), function(theme) {
-    var themeColor = color.transparentize(color$1, 0)(getTheme(theme));
+  return void 0 === disabled && (disabled = !1), function(props) {
+    var themeColor = color.transparentize(color$1, 0)(getTheme(props));
     return disabled ? {
@@ -39,8 +39,8 @@ outline: "none"
       transition: "box-shadow .25s"
-    }, focusBoxShadow(themeColor)(theme));
+    }, focusBoxShadow(themeColor)(props));
   };
 }, focusRing = function(color, disabled, hover) {
   return void 0 === disabled && (disabled = !1), void 0 === hover && (hover = !1), 
-  function(theme) {
-    var styles = focusRingStyles(color, disabled)(getTheme(theme)), baseStyles = {
+  function(props) {
+    var styles = focusRingStyles(color, disabled)(getTheme(props)), baseStyles = {
       ".js-focus-visible &:focus:not(.focus-visible)": {
@@ -47,0 +47,0 @@ outline: 0

dist/mixins.esm.js

 import { transparentize } from '@theme-ui/color';
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-// theme-ui provides theme as an argument where styled-system uses props.theme
 
+// Check if it's a props object or the theme
 function getTheme(theme) {
@@ -11,3 +11,4 @@ if (theme === void 0) {
 
-  return theme['theme'] || theme;
+  // @ts-ignore theme-ui provides theme as an argument where styled-system uses props.theme
+  return theme["theme"] || theme;
 }
@@ -47,8 +48,8 @@ /**
 
-  return function (theme) {
-    var themeColor = transparentize(color, 0)(getTheme(theme)); // This serves as a getter from theme
+  return function (props) {
+    var themeColor = transparentize(color, 0)(getTheme(props)); // This serves as a getter from theme
 
     if (disabled) {
       return {
-        outline: 'none'
+        outline: "none"
       };
@@ -58,6 +59,6 @@ }
     return _extends({
-      outline: 'none',
+      outline: "none",
       borderColor: themeColor,
-      transition: 'box-shadow .25s'
-    }, focusBoxShadow(themeColor)(theme));
+      transition: "box-shadow .25s"
+    }, focusBoxShadow(themeColor)(props));
   };
@@ -84,9 +85,9 @@ };
 
-  return function (theme) {
-    var styles = focusRingStyles(color, disabled)(getTheme(theme));
+  return function (props) {
+    var styles = focusRingStyles(color, disabled)(getTheme(props));
     var baseStyles = {
-      '.js-focus-visible &:focus:not(.focus-visible)': {
+      ".js-focus-visible &:focus:not(.focus-visible)": {
         outline: 0
       },
-      '&.focus-visible': styles
+      "&.focus-visible": styles
     };
@@ -96,3 +97,3 @@
       return _extends({}, baseStyles, {
-        '&:hover:not(:disabled)': styles
+        "&:hover:not(:disabled)": styles
       });
@@ -105,9 +106,9 @@ }
 var disabledStyles = {
-  opacity: '0.6',
-  filter: 'saturate(60%)',
-  cursor: 'not-allowed'
+  opacity: "0.6",
+  filter: "saturate(60%)",
+  cursor: "not-allowed"
 };
 function disabled() {
   return {
-    '&:disabled': disabledStyles
+    "&:disabled": disabledStyles
   };
@@ -114,0 +115,0 @@ }

package.json

 {
   "name": "@component-driven/mixins",
   "description": "UI mixins to use with CSS-in-JS libraries",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "main": "dist/mixins.cjs.js",
@@ -10,9 +10,17 @@ "module": "dist/mixins.esm.js",
     "@theme-ui/color": "^0.3.1",
-    "focus-visible": "^5.0.2"
+    "focus-visible": "^5.0.2",
+    "styled-system": "^5.1.5",
+    "@styled-system/css": "^5.1.5"
   },
   "peerDependencies": {
-    "focus-visible": ">=5.0",
     "react": ">=16.0",
     "react-dom": ">=16.0"
   },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.3",
+    "@types/styled-system": "^5.1.10",
+    "@types/styled-system__css": "^5.0.13",
+    "@types/theme-ui": "^0.6.0",
+    "@types/theme-ui__color": "^0.3.2"
+  },
   "author": "Andrey Okonetchnikov <[e-mail]>",
@@ -19,0 +27,0 @@ "license": "MIT",

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

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

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

Improved metrics

Total package byte prevSize

234825

increased by1799.72%

Number of package files

12

increased by33.33%

Lines of code

3623

increased by978.27%

Worsened metrics

Dependency count

7

increased by16.67%

Dev dependency count

5

increased byInfinity%

Number of low supply chain risk alerts

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@styled-system/css@^5.1.5

• + Addedstyled-system@^5.1.5

• + Added@styled-system/background@5.1.2(transitive)

• + Added@styled-system/border@5.1.5(transitive)

• + Added@styled-system/color@5.1.2(transitive)

• + Added@styled-system/core@5.1.2(transitive)

• + Added@styled-system/css@5.1.5(transitive)

• + Added@styled-system/flexbox@5.1.2(transitive)

• + Added@styled-system/grid@5.1.2(transitive)

• + Added@styled-system/layout@5.1.2(transitive)

• + Added@styled-system/position@5.1.2(transitive)

• + Added@styled-system/shadow@5.1.2(transitive)

• + Added@styled-system/space@5.1.2(transitive)

• + Added@styled-system/typography@5.1.2(transitive)

• + Added@styled-system/variant@5.1.5(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedstyled-system@5.1.5(transitive)