Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
styled-css-grid
Advanced tools
styled-css-grid - npm Package Compare versions
Comparing version 0.4.0 to 0.4.1
@@ -1,66 +0,1 @@ | ||
| import styled from 'styled-components'; | ||
| var taggedTemplateLiteral = function (strings, raw) { | ||
| return Object.freeze(Object.defineProperties(strings, { | ||
| raw: { | ||
| value: Object.freeze(raw) | ||
| } | ||
| })); | ||
| }; | ||
| var _templateObject = taggedTemplateLiteral(["\n height: 100%;\n min-width: 0;\n overflow: hidden;\n align-content: space-around;\n grid-column-end: ", ";\n grid-row-end: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n height: 100%;\n min-width: 0;\n overflow: hidden;\n align-content: space-around;\n grid-column-end: ", ";\n grid-row-end: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n"]); | ||
| var Cell = styled.section(_templateObject, function (_ref) { | ||
| var _ref$width = _ref.width, | ||
| width = _ref$width === undefined ? 1 : _ref$width; | ||
| return "span " + width; | ||
| }, function (_ref2) { | ||
| var _ref2$height = _ref2.height, | ||
| height = _ref2$height === undefined ? 1 : _ref2$height; | ||
| return "span " + height; | ||
| }, function (_ref3) { | ||
| var left = _ref3.left; | ||
| return left && "grid-column-start: " + left; | ||
| }, function (_ref4) { | ||
| var top = _ref4.top; | ||
| return top && "grid-row-start: " + top; | ||
| }, function (_ref5) { | ||
| var _ref5$center = _ref5.center, | ||
| center = _ref5$center === undefined ? false : _ref5$center; | ||
| return center && "text-align: center;"; | ||
| }, /* prettier-ignore */ | ||
| function (_ref6) { | ||
| var _ref6$middle = _ref6.middle, | ||
| middle = _ref6$middle === undefined ? false : _ref6$middle; | ||
| return middle && "\n display: inline-flex;\n flex-flow: column wrap;\n justify-content: center;\n justify-self: stretch;\n "; | ||
| }); | ||
| var _templateObject$1 = taggedTemplateLiteral(["\n min-height: 100%;\n display: grid;\n grid-auto-flow: ", ";\n grid-auto-rows: ", ";\n grid-template-rows: ", ";\n grid-template-columns: ", ";\n grid-gap: ", ";\n"], ["\n min-height: 100%;\n display: grid;\n grid-auto-flow: ", ";\n grid-auto-rows: ", ";\n grid-template-rows: ", ";\n grid-template-columns: ", ";\n grid-gap: ", ";\n"]); | ||
| var minmax = function minmax(_ref) { | ||
| var _ref$minRowHeight = _ref.minRowHeight, | ||
| minRowHeight = _ref$minRowHeight === undefined ? "20px" : _ref$minRowHeight; | ||
| return "minmax(" + minRowHeight + ", auto)"; | ||
| }; | ||
| var columnRepeat = function columnRepeat(_ref2) { | ||
| var _ref2$columns = _ref2.columns, | ||
| columns = _ref2$columns === undefined ? 12 : _ref2$columns; | ||
| return "repeat(" + columns + ", 1fr)"; | ||
| }; | ||
| var gap = function gap(_ref3) { | ||
| var _ref3$gap = _ref3.gap, | ||
| gap = _ref3$gap === undefined ? "8px" : _ref3$gap; | ||
| return gap + " " + gap; | ||
| }; | ||
| var flow = function flow(_ref4) { | ||
| var _ref4$flow = _ref4.flow, | ||
| flow = _ref4$flow === undefined ? "row" : _ref4$flow; | ||
| return flow; | ||
| }; | ||
| var Grid = styled.div(_templateObject$1, flow, minmax, minmax, columnRepeat, 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(n){var t=n.width;return"span "+(void 0===t?1:t)},function(n){var t=n.height;return"span "+(void 0===t?1:t)},function(n){var t=n.left;return t&&"grid-column-start: "+t},function(n){var t=n.top;return t&&"grid-row-start: "+t},function(n){var t=n.center;return void 0!==t&&t&&"text-align: center;"},function(n){var t=n.middle;return void 0!==t&&t&&"\n display: inline-flex;\n flex-flow: column wrap;\n justify-content: center;\n justify-self: stretch;\n "}),minmax=function(n){var t=n.minRowHeight;return"minmax("+(void 0===t?"20px":t)+", auto)"},columnRepeat=function(n){var t=n.columns;return"repeat("+(void 0===t?12:t)+", 1fr)"},gap=function(n){var t=n.gap,i=void 0===t?"8px":t;return i+" "+i},flow=function(n){var t=n.flow,i=void 0===t?"row":t;return i},Grid=styled.div.withConfig({displayName:"Grid__Grid"})(["min-height:100%;display:grid;grid-auto-flow:",";grid-auto-rows:",";grid-template-rows:",";grid-template-columns:",";grid-gap:",";"],flow,minmax,minmax,columnRepeat,gap);export{Cell,Grid}; |
@@ -1,77 +0,1 @@ | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('styled-components')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'styled-components'], factory) : | ||
| (factory((global.StyledCssGrid = {}),global.styled)); | ||
| }(this, (function (exports,styled) { 'use strict'; | ||
| styled = styled && styled.hasOwnProperty('default') ? styled['default'] : styled; | ||
| var taggedTemplateLiteral = function (strings, raw) { | ||
| return Object.freeze(Object.defineProperties(strings, { | ||
| raw: { | ||
| value: Object.freeze(raw) | ||
| } | ||
| })); | ||
| }; | ||
| var _templateObject = taggedTemplateLiteral(["\n height: 100%;\n min-width: 0;\n overflow: hidden;\n align-content: space-around;\n grid-column-end: ", ";\n grid-row-end: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n height: 100%;\n min-width: 0;\n overflow: hidden;\n align-content: space-around;\n grid-column-end: ", ";\n grid-row-end: ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n ", ";\n"]); | ||
| var Cell = styled.section(_templateObject, function (_ref) { | ||
| var _ref$width = _ref.width, | ||
| width = _ref$width === undefined ? 1 : _ref$width; | ||
| return "span " + width; | ||
| }, function (_ref2) { | ||
| var _ref2$height = _ref2.height, | ||
| height = _ref2$height === undefined ? 1 : _ref2$height; | ||
| return "span " + height; | ||
| }, function (_ref3) { | ||
| var left = _ref3.left; | ||
| return left && "grid-column-start: " + left; | ||
| }, function (_ref4) { | ||
| var top = _ref4.top; | ||
| return top && "grid-row-start: " + top; | ||
| }, function (_ref5) { | ||
| var _ref5$center = _ref5.center, | ||
| center = _ref5$center === undefined ? false : _ref5$center; | ||
| return center && "text-align: center;"; | ||
| }, /* prettier-ignore */ | ||
| function (_ref6) { | ||
| var _ref6$middle = _ref6.middle, | ||
| middle = _ref6$middle === undefined ? false : _ref6$middle; | ||
| return middle && "\n display: inline-flex;\n flex-flow: column wrap;\n justify-content: center;\n justify-self: stretch;\n "; | ||
| }); | ||
| var _templateObject$1 = taggedTemplateLiteral(["\n min-height: 100%;\n display: grid;\n grid-auto-flow: ", ";\n grid-auto-rows: ", ";\n grid-template-rows: ", ";\n grid-template-columns: ", ";\n grid-gap: ", ";\n"], ["\n min-height: 100%;\n display: grid;\n grid-auto-flow: ", ";\n grid-auto-rows: ", ";\n grid-template-rows: ", ";\n grid-template-columns: ", ";\n grid-gap: ", ";\n"]); | ||
| var minmax = function minmax(_ref) { | ||
| var _ref$minRowHeight = _ref.minRowHeight, | ||
| minRowHeight = _ref$minRowHeight === undefined ? "20px" : _ref$minRowHeight; | ||
| return "minmax(" + minRowHeight + ", auto)"; | ||
| }; | ||
| var columnRepeat = function columnRepeat(_ref2) { | ||
| var _ref2$columns = _ref2.columns, | ||
| columns = _ref2$columns === undefined ? 12 : _ref2$columns; | ||
| return "repeat(" + columns + ", 1fr)"; | ||
| }; | ||
| var gap = function gap(_ref3) { | ||
| var _ref3$gap = _ref3.gap, | ||
| gap = _ref3$gap === undefined ? "8px" : _ref3$gap; | ||
| return gap + " " + gap; | ||
| }; | ||
| var flow = function flow(_ref4) { | ||
| var _ref4$flow = _ref4.flow, | ||
| flow = _ref4$flow === undefined ? "row" : _ref4$flow; | ||
| return flow; | ||
| }; | ||
| var Grid = styled.div(_templateObject$1, flow, minmax, minmax, columnRepeat, gap); | ||
| exports.Cell = Cell; | ||
| exports.Grid = Grid; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| }))); | ||
| !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 "}),i=function(e){var n=e.minRowHeight;return"minmax("+(void 0===n?"20px":n)+", auto)"},r=n.div.withConfig({displayName:"Grid__Grid"})(["min-height:100%;display:grid;grid-auto-flow:",";grid-auto-rows:",";grid-template-rows:",";grid-template-columns:",";grid-gap:",";"],function(e){var n=e.flow,t=void 0===n?"row":n;return t},i,i,function(e){var n=e.columns;return"repeat("+(void 0===n?12:n)+", 1fr)"},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})}); |
| { | ||
| "name": "styled-css-grid", | ||
| "version": "0.4.0", | ||
| "version": "0.4.1", | ||
| "description": "A tiny CSS grid layout for React, built with styled-components", | ||
| "homepage": "https://styled-css-grid.js.org", | ||
| "main": "dist/syled-css-grid.umd.js", | ||
| "module": "dist/syled-css-grid.esm.js", | ||
| "main": "dist/styled-css-grid.umd.js", | ||
| "module": "dist/styled-css-grid.esm.js", | ||
| "repository": "https://github.com/azz/styled-css-grid", | ||
@@ -21,3 +21,3 @@ "author": "Lucas Azzola", | ||
| "scripts": { | ||
| "lint": "eslint . --ignore-path .gitignore", | ||
| "lint": "eslint .", | ||
| "prettier": "prettier --write \"{lib,website,scripts}/*.js\"", | ||
@@ -38,2 +38,3 @@ "test": "jest", | ||
| "babel-plugin-external-helpers": "^6.22.0", | ||
| "babel-plugin-styled-components": "^1.1.7", | ||
| "babel-preset-es2015": "^6.24.1", | ||
@@ -40,0 +41,0 @@ "babel-preset-react": "^6.24.1", |
@@ -1,2 +0,2 @@ | ||
| # `styled-css-grid` | ||
| # `styled-css-grid 🍱` | ||
@@ -3,0 +3,0 @@ [](https://travis-ci.org/azz/styled-css-grid) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis 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
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-28.68%
8274
- Dev dependency count
- increased by3.13%
33
- Lines of code
- decreased by-91.13%
11
- Number of low quality alerts
- increased by100%
2
No dependency changes