styled-css-grid - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

dist/styled-css-grid.esm.js

@@ -1,1 +0,1 @@
-import styled from"styled-components";var Cell=styled.section.withConfig({displayName:"Cell__Cell"})(["height:100%;min-width:0;overflow:hidden;align-content:space-around;grid-column-end:",";grid-row-end:",";",";",";",";",";"],function(n){var r=n.width;return"span "+(void 0===r?1:r)},function(n){var r=n.height;return"span "+(void 0===r?1:r)},function(n){var r=n.left;return r&&"grid-column-start: "+r},function(n){var r=n.top;return r&&"grid-row-start: "+r},function(n){var r=n.center;return void 0!==r&&r&&"text-align: center;"},function(n){var r=n.middle;return void 0!==r&&r&&"\n    display: inline-flex;\n    flex-flow: column wrap;\n    justify-content: center;\n    justify-self: stretch;\n  "}),autoRows=function(n){var r=n.minRowHeight;return"minmax("+(void 0===r?"20px":r)+", auto)"},columns=function(n){var r=n.columns,t=void 0===r?12:r;return"number"==typeof t?"repeat("+t+", 1fr)":t},gap=function(n){var r=n.gap,t=void 0===r?"8px":r;return t+" "+t},flow=function(n){var r=n.flow,t=void 0===r?"row":r;return t},Grid=styled.div.withConfig({displayName:"Grid__Grid"})(["min-height:100%;display:grid;grid-auto-flow:",";grid-auto-rows:",";",";grid-template-columns:",";grid-gap:",";"],flow,autoRows,function(n){var r=n.rows;return r&&"grid-template-rows: "+r},columns,gap);export{Cell,Grid};
+import styled from"styled-components";var Cell=styled.section.withConfig({displayName:"Cell__Cell"})(["height:100%;min-width:0;overflow:hidden;align-content:space-around;grid-column-end:",";grid-row-end:",";",";",";",";",";",";"],function(r){var n=r.width;return"span "+(void 0===n?1:n)},function(r){var n=r.height;return"span "+(void 0===n?1:n)},function(r){var n=r.left;return n&&"grid-column-start: "+n},function(r){var n=r.top;return n&&"grid-row-start: "+n},function(r){var n=r.center;return void 0!==n&&n&&"text-align: center;"},function(r){var n=r.area;return n&&"grid-area: "+n},function(r){var n=r.middle;return void 0!==n&&n&&"\n    display: inline-flex;\n    flex-flow: column wrap;\n    justify-content: center;\n    justify-self: stretch;\n  "}),autoRows=function(r){var n=r.minRowHeight;return"minmax("+(void 0===n?"20px":n)+", auto)"},columns=function(r){var n=r.columns,t=void 0===n?12:n;return"number"==typeof t?"repeat("+t+", 1fr)":t},gap=function(r){var n=r.gap,t=void 0===n?"8px":n;return t+" "+t},flow=function(r){var n=r.flow,t=void 0===n?"row":n;return t},formatAreas=function(r){return r.map(function(r){return'"'+r+'"'}).join(" ")},Grid=styled.div.withConfig({displayName:"Grid__Grid"})(["min-height:100%;display:grid;grid-auto-flow:",";grid-auto-rows:",";",";grid-template-columns:",";grid-gap:",";",";"],flow,autoRows,function(r){var n=r.rows;return n&&"grid-template-rows: "+n},columns,gap,function(r){var n=r.areas;return n&&"grid-template-areas: "+formatAreas(n)});export{Cell,Grid};

dist/styled-css-grid.umd.js

@@ -1,1 +0,1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("styled-components")):"function"==typeof define&&define.amd?define(["exports","styled-components"],n):n(e.StyledCssGrid={},e.styled)}(this,function(e,n){"use strict";var t=(n=n&&n.hasOwnProperty("default")?n.default:n).section.withConfig({displayName:"Cell__Cell"})(["height:100%;min-width:0;overflow:hidden;align-content:space-around;grid-column-end:",";grid-row-end:",";",";",";",";",";"],function(e){var n=e.width;return"span "+(void 0===n?1:n)},function(e){var n=e.height;return"span "+(void 0===n?1:n)},function(e){var n=e.left;return n&&"grid-column-start: "+n},function(e){var n=e.top;return n&&"grid-row-start: "+n},function(e){var n=e.center;return void 0!==n&&n&&"text-align: center;"},function(e){var n=e.middle;return void 0!==n&&n&&"\n    display: inline-flex;\n    flex-flow: column wrap;\n    justify-content: center;\n    justify-self: stretch;\n  "}),r=n.div.withConfig({displayName:"Grid__Grid"})(["min-height:100%;display:grid;grid-auto-flow:",";grid-auto-rows:",";",";grid-template-columns:",";grid-gap:",";"],function(e){var n=e.flow,t=void 0===n?"row":n;return t},function(e){var n=e.minRowHeight;return"minmax("+(void 0===n?"20px":n)+", auto)"},function(e){var n=e.rows;return n&&"grid-template-rows: "+n},function(e){var n=e.columns,t=void 0===n?12:n;return"number"==typeof t?"repeat("+t+", 1fr)":t},function(e){var n=e.gap,t=void 0===n?"8px":n;return t+" "+t});e.Cell=t,e.Grid=r,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("styled-components")):"function"==typeof define&&define.amd?define(["exports","styled-components"],e):e(n.StyledCssGrid={},n.styled)}(this,function(n,e){"use strict";var t=(e=e&&e.hasOwnProperty("default")?e.default:e).section.withConfig({displayName:"Cell__Cell"})(["height:100%;min-width:0;overflow:hidden;align-content:space-around;grid-column-end:",";grid-row-end:",";",";",";",";",";",";"],function(n){var e=n.width;return"span "+(void 0===e?1:e)},function(n){var e=n.height;return"span "+(void 0===e?1:e)},function(n){var e=n.left;return e&&"grid-column-start: "+e},function(n){var e=n.top;return e&&"grid-row-start: "+e},function(n){var e=n.center;return void 0!==e&&e&&"text-align: center;"},function(n){var e=n.area;return e&&"grid-area: "+e},function(n){var e=n.middle;return void 0!==e&&e&&"\n    display: inline-flex;\n    flex-flow: column wrap;\n    justify-content: center;\n    justify-self: stretch;\n  "}),r=function(n){return n.map(function(n){return'"'+n+'"'}).join(" ")},i=e.div.withConfig({displayName:"Grid__Grid"})(["min-height:100%;display:grid;grid-auto-flow:",";grid-auto-rows:",";",";grid-template-columns:",";grid-gap:",";",";"],function(n){var e=n.flow,t=void 0===e?"row":e;return t},function(n){var e=n.minRowHeight;return"minmax("+(void 0===e?"20px":e)+", auto)"},function(n){var e=n.rows;return e&&"grid-template-rows: "+e},function(n){var e=n.columns,t=void 0===e?12:e;return"number"==typeof t?"repeat("+t+", 1fr)":t},function(n){var e=n.gap,t=void 0===e?"8px":e;return t+" "+t},function(n){var e=n.areas;return e&&"grid-template-areas: "+r(e)});n.Cell=t,n.Grid=i,Object.defineProperty(n,"__esModule",{value:!0})});

package.json

 {
   "name": "styled-css-grid",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A tiny CSS grid layout for React, built with styled-components",
@@ -5,0 +5,0 @@ "homepage": "https://styled-css-grid.js.org",

README.md

@@ -53,2 +53,3 @@ # `styled-css-grid 🍱`
 * `center`: Horizontally align the text contents of the cell. Default is `false`.
+* `area`: The [grid-area] CSS property. Not provided by default.
 
@@ -67,2 +68,3 @@ ### `Grid`
 * `rows`: The [grid-template-rows] CSS property. Not provided by default.
+* `areas`: The [grid-template-areas] CSS property. Pass an array of strings, e.g. `["a a", "b c"]`. Not provided by default.
 
@@ -77,1 +79,4 @@ [website]: https://styled-css-grid.js.org/
 [grid-template-rows]: https://mdn.io/grid-template-rows
+[grid-template-areas]: https://mdn.io/grid-template-areas
+[grid-area]: https://mdn.io/grid-area
+

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

Total package byte prevSize

9295

increased by8.08%

Lines of code

13

increased by18.18%

Number of lines in readme file

80

increased by6.67%

No dependency changes