jsx-to-styled - npm Package Compare versions

Comparing version 1.5.0 to 1.5.1

CHANGELOG.md

@@ -7,5 +7,14 @@ ### Changelog
 
+#### [1.5.1](https://github.com/mleralec/jsx-to-styled/compare/1.5.0...1.5.1)
+
+- perf: iterate over props instead of configs [`1133dab`](https://github.com/mleralec/jsx-to-styled/commit/1133dab636a538858824a561b3d85d22057fb091)
+- docs: update README [`f4065db`](https://github.com/mleralec/jsx-to-styled/commit/f4065db8bc8b075fdc501b7c15ee5b3b226b3924)
+- docs: update README [`99b4bba`](https://github.com/mleralec/jsx-to-styled/commit/99b4bba8bd2c51ee37f73ab87730147bcc232351)
+
 #### [1.5.0](https://github.com/mleralec/jsx-to-styled/compare/1.4.0...1.5.0)
 
+> 7 July 2022
+
 - feat: responsive (breakpoints) [`97d9de9`](https://github.com/mleralec/jsx-to-styled/commit/97d9de9ccdbd3fc6dc3e409dba100210667025bb)
+- chore: release v1.5.0 [`7654b08`](https://github.com/mleralec/jsx-to-styled/commit/7654b08f9a5d528cf070d34bfc9aad8b36a434f2)
 
@@ -12,0 +21,0 @@ #### [1.4.0](https://github.com/mleralec/jsx-to-styled/compare/1.3.2...1.4.0)

dist/index.es.js

@@ -18,10 +18,17 @@ const get = (key, theme, scope) => {
 };
-const getStyles = (config, props) => {
+const isJsxToStyledProp = (prop) => prop.startsWith("$");
+const getStyles = (configs, props) => {
   let styles = {};
-  config.forEach(({ jsxProperty, scope, cssProperties }) => {
-    const value = props[jsxProperty];
+  for (const key in props) {
+    if (!isJsxToStyledProp(key))
+      continue;
+    const value = props[key];
+    if (!value)
+      continue;
+    const config = configs.find((config2) => config2.jsxProperty === key);
+    if (!config)
+      continue;
+    const { scope, cssProperties, jsxProperty } = config;
+    const { theme } = props;
     const formattedJsxProperty = jsxProperty.substring(1);
-    const { theme } = props;
-    if (!value)
-      return;
     if (typeof value === "string") {
@@ -36,5 +43,5 @@ styles = {
       const breakpoints = Object.keys((theme == null ? void 0 : theme.breakpoints) || {});
-      Object.keys(value).forEach((key) => {
-        const v = value[key];
-        if (key === "_") {
+      Object.keys(value).forEach((key2) => {
+        const v = value[key2];
+        if (key2 === "_") {
           styles = {
@@ -45,4 +52,4 @@ ...styles,
         }
-        if (states.includes(key)) {
-          const state = theme.states[key];
+        if (states.includes(key2)) {
+          const state = theme.states[key2];
           styles[state] = {
@@ -53,4 +60,4 @@ ...styles[state],
         }
-        if (breakpoints.includes(key)) {
-          const breakpoint = createMediaQuery(theme.breakpoints[key]);
+        if (breakpoints.includes(key2)) {
+          const breakpoint = createMediaQuery(theme.breakpoints[key2]);
           styles[breakpoint] = {
@@ -63,3 +70,3 @@ ...styles[breakpoint],
     }
-  });
+  }
   return styles;
@@ -66,0 +73,0 @@ };

dist/index.umd.js

@@ -1,1 +0,1 @@
-(function(o,a){typeof exports=="object"&&typeof module!="undefined"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(o=typeof globalThis!="undefined"?globalThis:o||self,a(o["jsx-to-styled"]={}))})(this,function(o){"use strict";const a=(t,p,r)=>{var i;return((i=p==null?void 0:p[r])==null?void 0:i[t])||t},T=t=>`@media(min-width: ${t})`,$=(t,p,r,i,y)=>{const n={},c=a(r,i,y);return t?t.forEach(d=>{n[d]=c}):n[p]=c,n},k=(t,p)=>{let r={};return t.forEach(({jsxProperty:i,scope:y,cssProperties:n})=>{const c=p[i],d=i.substring(1),{theme:e}=p;if(!!c&&(typeof c=="string"&&(r={...r,...$(n,d,c,e,y)}),typeof c=="object")){const O=Object.keys((e==null?void 0:e.states)||{}),F=Object.keys((e==null?void 0:e.breakpoints)||{});Object.keys(c).forEach(P=>{const S=c[P];if(P==="_"&&(r={...r,...$(n,d,S,e,y)}),O.includes(P)){const j=e.states[P];r[j]={...r[j],...$(n,d,S,e,y)}}if(F.includes(P)){const j=T(e.breakpoints[P]);r[j]={...r[j],...$(n,d,S,e,y)}}})}}),r},s=(...t)=>p=>{const r=[];return t.forEach(i=>r.push(...i)),k(r,p)},x=[{jsxProperty:"$background"},{jsxProperty:"$backgroundImage"},{jsxProperty:"$backgroundSize"},{jsxProperty:"$backgroundPosition"},{jsxProperty:"$backgroundRepeat"}],w=s(x),g=[{jsxProperty:"$border"},{jsxProperty:"$borderWidth",scope:"borderWidths"},{jsxProperty:"$borderStyle"},{jsxProperty:"$borderColor",scope:"colors"},{jsxProperty:"$borderRadius",scope:"radii"},{jsxProperty:"$borderTop"},{jsxProperty:"$borderTopWidth",scope:"borderWidths"},{jsxProperty:"$borderTopStyle"},{jsxProperty:"$borderTopColor",scope:"colors"},{jsxProperty:"$borderTopLeftRadius",scope:"radii"},{jsxProperty:"$borderTopRightRadius",scope:"radii"},{jsxProperty:"$borderRight"},{jsxProperty:"$borderRightWidth",scope:"borderWidths"},{jsxProperty:"$borderRightStyle"},{jsxProperty:"$borderRightColor",scope:"colors"},{jsxProperty:"$borderBottom"},{jsxProperty:"$borderBottomWidth",scope:"borderWidths"},{jsxProperty:"$borderBottomStyle"},{jsxProperty:"$borderBottomColor",scope:"colors"},{jsxProperty:"$borderBottomLeftRadius",scope:"radii"},{jsxProperty:"$borderBottomRightRadius",scope:"radii"},{jsxProperty:"$borderLeft"},{jsxProperty:"$borderLeftWidth",scope:"borderWidths"},{jsxProperty:"$borderLeftStyle"},{jsxProperty:"$borderLeftColor",scope:"colors"}],B=s(g),f=[{jsxProperty:"$color",scope:"colors"},{jsxProperty:"$backgroundColor",scope:"colors"},{jsxProperty:"$opacity"}],z=s(f),l=[{jsxProperty:"$alignItems"},{jsxProperty:"$alignContent"},{jsxProperty:"$justifyItems"},{jsxProperty:"$justifyContent"},{jsxProperty:"$flex"},{jsxProperty:"$flexBasis"},{jsxProperty:"$flexDirection"},{jsxProperty:"$flexGrow"},{jsxProperty:"$flexShrink"},{jsxProperty:"$flexWrap"},{jsxProperty:"$justifySelf"},{jsxProperty:"$alignSelf"},{jsxProperty:"$order"}],L=s(l),b=[{jsxProperty:"$gridGap",scope:"spaces"},{jsxProperty:"$gridRowGap",scope:"spaces"},{jsxProperty:"$gridColumnGap",scope:"spaces"},{jsxProperty:"$gridColumn"},{jsxProperty:"$gridRow"},{jsxProperty:"$gridArea"},{jsxProperty:"$gridAutoFlow"},{jsxProperty:"$gridAutoRows"},{jsxProperty:"$gridAutoColumns"},{jsxProperty:"$gridTemplateRows"},{jsxProperty:"$gridTemplateColumns"},{jsxProperty:"$gridTemplateAreas"}],v=s(b),u=[{jsxProperty:"$w",scope:"sizes",cssProperties:["width"]},{jsxProperty:"$h",scope:"sizes",cssProperties:["height"]},{jsxProperty:"$minW",scope:"sizes",cssProperties:["minWidth"]},{jsxProperty:"$maxW",scope:"sizes",cssProperties:["maxWidth"]},{jsxProperty:"$minH",scope:"sizes",cssProperties:["minHeight"]},{jsxProperty:"$maxH",scope:"sizes",cssProperties:["maxHeight"]},{jsxProperty:"$display"},{jsxProperty:"$verticalAlign"},{jsxProperty:"$overflow"},{jsxProperty:"$overflowX"},{jsxProperty:"$overflowY"}],A=s(u),m=[{jsxProperty:"$cursor"},{jsxProperty:"$float"},{jsxProperty:"$objectFit"},{jsxProperty:"$objectPosition"},{jsxProperty:"$transform"},{jsxProperty:"$visibility"}],H=s(m),h=[{jsxProperty:"$position"},{jsxProperty:"$zIndex"},{jsxProperty:"$top",scope:"spaces"},{jsxProperty:"$right",scope:"spaces"},{jsxProperty:"$bottom",scope:"spaces"},{jsxProperty:"$left",scope:"spaces"}],E=s(h),C=[{jsxProperty:"$m",scope:"spaces",cssProperties:["margin"]},{jsxProperty:"$mt",scope:"spaces",cssProperties:["marginTop"]},{jsxProperty:"$mr",scope:"spaces",cssProperties:["marginRight"]},{jsxProperty:"$mb",scope:"spaces",cssProperties:["marginBottom"]},{jsxProperty:"$ml",scope:"spaces",cssProperties:["marginLeft"]},{jsxProperty:"$my",scope:"spaces",cssProperties:["marginTop","marginBottom"]},{jsxProperty:"$mx",scope:"spaces",cssProperties:["marginRight","marginLeft"]},{jsxProperty:"$p",scope:"spaces",cssProperties:["padding"]},{jsxProperty:"$pt",scope:"spaces",cssProperties:["paddingTop"]},{jsxProperty:"$pr",scope:"spaces",cssProperties:["paddingRight"]},{jsxProperty:"$pb",scope:"spaces",cssProperties:["paddingBottom"]},{jsxProperty:"$pl",scope:"spaces",cssProperties:["paddingLeft"]},{jsxProperty:"$py",scope:"spaces",cssProperties:["paddingTop","paddingBottom"]},{jsxProperty:"$px",scope:"spaces",cssProperties:["paddingRight","paddingLeft"]}],G=s(C),R=[{jsxProperty:"$fontFamily",scope:"fonts"},{jsxProperty:"$fontSize",scope:"fontSizes"},{jsxProperty:"$fontWeight",scope:"fontWeights"},{jsxProperty:"$lineHeight",scope:"lineHeights"},{jsxProperty:"$letterSpacing",scope:"letterSpacings"},{jsxProperty:"$textAlign"},{jsxProperty:"$fontStyle"},{jsxProperty:"$textDecoration"}],I=s(R),W=s(x,g,f,l,b,u,m,h,C,R);o.background=w,o.backgroundConfig=x,o.border=B,o.borderConfig=g,o.color=z,o.colorConfig=f,o.compose=s,o.default=W,o.flex=L,o.flexConfig=l,o.grid=v,o.gridConfig=b,o.layout=A,o.layoutConfig=u,o.other=H,o.otherConfig=m,o.position=E,o.positionConfig=h,o.space=G,o.spaceConfig=C,o.system=W,o.typography=I,o.typographyConfig=R,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(o,a){typeof exports=="object"&&typeof module!="undefined"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(o=typeof globalThis!="undefined"?globalThis:o||self,a(o["jsx-to-styled"]={}))})(this,function(o){"use strict";const a=(s,p,r)=>{var i;return((i=p==null?void 0:p[r])==null?void 0:i[s])||s},w=s=>`@media(min-width: ${s})`,x=(s,p,r,i,c)=>{const y={},n=a(r,i,c);return s?s.forEach(P=>{y[P]=n}):y[p]=n,y},B=s=>s.startsWith("$"),z=(s,p)=>{let r={};for(const i in p){if(!B(i))continue;const c=p[i];if(!c)continue;const y=s.find(W=>W.jsxProperty===i);if(!y)continue;const{scope:n,cssProperties:P,jsxProperty:_}=y,{theme:t}=p,$=_.substring(1);if(typeof c=="string"&&(r={...r,...x(P,$,c,t,n)}),typeof c=="object"){const W=Object.keys((t==null?void 0:t.states)||{}),D=Object.keys((t==null?void 0:t.breakpoints)||{});Object.keys(c).forEach(d=>{const T=c[d];if(d==="_"&&(r={...r,...x(P,$,T,t,n)}),W.includes(d)){const j=t.states[d];r[j]={...r[j],...x(P,$,T,t,n)}}if(D.includes(d)){const j=w(t.breakpoints[d]);r[j]={...r[j],...x(P,$,T,t,n)}}})}}return r},e=(...s)=>p=>{const r=[];return s.forEach(i=>r.push(...i)),z(r,p)},g=[{jsxProperty:"$background"},{jsxProperty:"$backgroundImage"},{jsxProperty:"$backgroundSize"},{jsxProperty:"$backgroundPosition"},{jsxProperty:"$backgroundRepeat"}],L=e(g),f=[{jsxProperty:"$border"},{jsxProperty:"$borderWidth",scope:"borderWidths"},{jsxProperty:"$borderStyle"},{jsxProperty:"$borderColor",scope:"colors"},{jsxProperty:"$borderRadius",scope:"radii"},{jsxProperty:"$borderTop"},{jsxProperty:"$borderTopWidth",scope:"borderWidths"},{jsxProperty:"$borderTopStyle"},{jsxProperty:"$borderTopColor",scope:"colors"},{jsxProperty:"$borderTopLeftRadius",scope:"radii"},{jsxProperty:"$borderTopRightRadius",scope:"radii"},{jsxProperty:"$borderRight"},{jsxProperty:"$borderRightWidth",scope:"borderWidths"},{jsxProperty:"$borderRightStyle"},{jsxProperty:"$borderRightColor",scope:"colors"},{jsxProperty:"$borderBottom"},{jsxProperty:"$borderBottomWidth",scope:"borderWidths"},{jsxProperty:"$borderBottomStyle"},{jsxProperty:"$borderBottomColor",scope:"colors"},{jsxProperty:"$borderBottomLeftRadius",scope:"radii"},{jsxProperty:"$borderBottomRightRadius",scope:"radii"},{jsxProperty:"$borderLeft"},{jsxProperty:"$borderLeftWidth",scope:"borderWidths"},{jsxProperty:"$borderLeftStyle"},{jsxProperty:"$borderLeftColor",scope:"colors"}],v=e(f),l=[{jsxProperty:"$color",scope:"colors"},{jsxProperty:"$backgroundColor",scope:"colors"},{jsxProperty:"$opacity"}],A=e(l),b=[{jsxProperty:"$alignItems"},{jsxProperty:"$alignContent"},{jsxProperty:"$justifyItems"},{jsxProperty:"$justifyContent"},{jsxProperty:"$flex"},{jsxProperty:"$flexBasis"},{jsxProperty:"$flexDirection"},{jsxProperty:"$flexGrow"},{jsxProperty:"$flexShrink"},{jsxProperty:"$flexWrap"},{jsxProperty:"$justifySelf"},{jsxProperty:"$alignSelf"},{jsxProperty:"$order"}],H=e(b),u=[{jsxProperty:"$gridGap",scope:"spaces"},{jsxProperty:"$gridRowGap",scope:"spaces"},{jsxProperty:"$gridColumnGap",scope:"spaces"},{jsxProperty:"$gridColumn"},{jsxProperty:"$gridRow"},{jsxProperty:"$gridArea"},{jsxProperty:"$gridAutoFlow"},{jsxProperty:"$gridAutoRows"},{jsxProperty:"$gridAutoColumns"},{jsxProperty:"$gridTemplateRows"},{jsxProperty:"$gridTemplateColumns"},{jsxProperty:"$gridTemplateAreas"}],G=e(u),m=[{jsxProperty:"$w",scope:"sizes",cssProperties:["width"]},{jsxProperty:"$h",scope:"sizes",cssProperties:["height"]},{jsxProperty:"$minW",scope:"sizes",cssProperties:["minWidth"]},{jsxProperty:"$maxW",scope:"sizes",cssProperties:["maxWidth"]},{jsxProperty:"$minH",scope:"sizes",cssProperties:["minHeight"]},{jsxProperty:"$maxH",scope:"sizes",cssProperties:["maxHeight"]},{jsxProperty:"$display"},{jsxProperty:"$verticalAlign"},{jsxProperty:"$overflow"},{jsxProperty:"$overflowX"},{jsxProperty:"$overflowY"}],I=e(m),h=[{jsxProperty:"$cursor"},{jsxProperty:"$float"},{jsxProperty:"$objectFit"},{jsxProperty:"$objectPosition"},{jsxProperty:"$transform"},{jsxProperty:"$visibility"}],O=e(h),C=[{jsxProperty:"$position"},{jsxProperty:"$zIndex"},{jsxProperty:"$top",scope:"spaces"},{jsxProperty:"$right",scope:"spaces"},{jsxProperty:"$bottom",scope:"spaces"},{jsxProperty:"$left",scope:"spaces"}],E=e(C),R=[{jsxProperty:"$m",scope:"spaces",cssProperties:["margin"]},{jsxProperty:"$mt",scope:"spaces",cssProperties:["marginTop"]},{jsxProperty:"$mr",scope:"spaces",cssProperties:["marginRight"]},{jsxProperty:"$mb",scope:"spaces",cssProperties:["marginBottom"]},{jsxProperty:"$ml",scope:"spaces",cssProperties:["marginLeft"]},{jsxProperty:"$my",scope:"spaces",cssProperties:["marginTop","marginBottom"]},{jsxProperty:"$mx",scope:"spaces",cssProperties:["marginRight","marginLeft"]},{jsxProperty:"$p",scope:"spaces",cssProperties:["padding"]},{jsxProperty:"$pt",scope:"spaces",cssProperties:["paddingTop"]},{jsxProperty:"$pr",scope:"spaces",cssProperties:["paddingRight"]},{jsxProperty:"$pb",scope:"spaces",cssProperties:["paddingBottom"]},{jsxProperty:"$pl",scope:"spaces",cssProperties:["paddingLeft"]},{jsxProperty:"$py",scope:"spaces",cssProperties:["paddingTop","paddingBottom"]},{jsxProperty:"$px",scope:"spaces",cssProperties:["paddingRight","paddingLeft"]}],F=e(R),S=[{jsxProperty:"$fontFamily",scope:"fonts"},{jsxProperty:"$fontSize",scope:"fontSizes"},{jsxProperty:"$fontWeight",scope:"fontWeights"},{jsxProperty:"$lineHeight",scope:"lineHeights"},{jsxProperty:"$letterSpacing",scope:"letterSpacings"},{jsxProperty:"$textAlign"},{jsxProperty:"$fontStyle"},{jsxProperty:"$textDecoration"}],M=e(S),k=e(g,f,l,b,u,m,h,C,R,S);o.background=L,o.backgroundConfig=g,o.border=v,o.borderConfig=f,o.color=A,o.colorConfig=l,o.compose=e,o.default=k,o.flex=H,o.flexConfig=b,o.grid=G,o.gridConfig=u,o.layout=I,o.layoutConfig=m,o.other=O,o.otherConfig=h,o.position=E,o.positionConfig=C,o.space=F,o.spaceConfig=R,o.system=k,o.typography=M,o.typographyConfig=S,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

dist/types/utils/index.d.ts

 import type { CSSObject } from 'styled-components';
 import type { Config, ThemeProp, SystemProps } from '../types';
-export declare const getStyles: (config: Config[], props: SystemProps & ThemeProp) => CSSObject;
+export declare const getStyles: (configs: Config[], props: SystemProps & ThemeProp) => CSSObject;
 export declare const compose: (...configs: Config[][]) => (props: SystemProps & ThemeProp) => CSSObject;

package.json

 {
   "name": "jsx-to-styled",
   "description": "jsx-to-styled adds styled props to your React components",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "author": "mleralec",
@@ -6,0 +6,0 @@ "license": "MIT",

README.md

@@ -45,6 +45,6 @@ <div align="center">
 import styled, { ThemeProvider } from 'styled-components'
-import system, { System } from 'jsx-to-styled'
+import system from 'jsx-to-styled'
 
 // create your styled component with system props
-const Box = styled.div<System>(system)
+const Box = styled.div(system)
 
@@ -80,6 +80,6 @@ // create your theme
 ```tsx
-import system, { System } from 'jsx-to-styled'
+import system, { SystemProps } from 'jsx-to-styled'
 
-// don't forget to add System type to your styled-component definition
-const Box = styled.div<System>(system)
+// don't forget to add SystemProps type to your styled-component definition
+const Box = styled.div<SystemProps>(system)
 ```
@@ -117,11 +117,7 @@
 
-// now you can use props with object style
+// flexDirection will be "column" by default and "row" on screens > 600px
 return (
-  <Box $display="flex" $flexDirection={{ _: 'row', sm: 'column' }}>
-    <Box $w="200px" $h="200px">
-      A
-    </Box>
-    <Box $w="200px" $h="200px">
-      B
-    </Box>
+  <Box $display="flex" $flexDirection={{ _: 'column', sm: 'row' }}>
+    <Box>A</Box>
+    <Box>B</Box>
   </Box>
@@ -147,3 +143,3 @@ )
 
-// now you can use props with object style
+// color will be "white" by default and "tomato" on hover
 return <Box $color={{ _: 'primary', hover: 'secondary' }}>Hello World!</Box>
@@ -150,0 +146,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

344751

increased by0.27%

Lines of code

2326

increased by0.35%

Worsened metrics

Number of lines in readme file

300

decreased by-1.32%

No dependency changes