Add tag props to grid and cell components

README.md

@@ -44,31 +44,33 @@ Wrap your cells in `Grid`. Pretty simple.
 
 Props:
 
-* `columns`: The [grid-template-columns] CSS property. When a number is passed
+- `columns`: The [grid-template-columns] CSS property. When a number is passed
   it is a shorthand to specify the number of columns. Default is `12`.
-* `gap`: The [grid-gap] CSS property. Default is `"8px"`.
-* `minRowHeight`: Minimum height of each row. Default is `"20px"`.
-* `height`: The [height] CSS property. Default is `"auto"`.
-* `flow`: The [grid-auto-flow] CSS property. Default is `"row"`.
-* `rows`: The [grid-template-rows] CSS property. When a number is passed
+- `gap`: The [grid-gap] CSS property. Default is `"8px"`.
+- `minRowHeight`: Minimum height of each row. Default is `"20px"`.
+- `height`: The [height] CSS property. Default is `"auto"`.
+- `flow`: The [grid-auto-flow] CSS property. Default is `"row"`.
+- `rows`: The [grid-template-rows] CSS property. When a number is passed
   it is a shorthand to specify the number of columns. 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.
-* `justifyContent`: The [justify-content] CSS property. Not provided by default.
-* `alignContent`: The [align-content] 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.
+- `justifyContent`: The [justify-content] CSS property. Not provided by default.
+- `alignContent`: The [align-content] CSS property. Not provided by default.
+- `is`: The tag property. Default is `"div"`
 
 ### `Cell`
 
 A cell. Not too much to say...
 
 Props:
 
-* `width`: Cell width in units, default is `1`.
-* `height`: Cell height in units, default is `1`.
-* `left`: The [grid-column-start] CSS property. Not provided by default.
-* `top`: The [grid-row-start] CSS property. Not provided by default.
-* `middle`: Vertically align the contents of the cell. Default is `false`.
-* `center`: Horizontally align the text contents of the cell. Default is `false`.
-* `area`: The [grid-area] CSS property. Not provided by default.
+- `width`: Cell width in units, default is `1`.
+- `height`: Cell height in units, default is `1`.
+- `left`: The [grid-column-start] CSS property. Not provided by default.
+- `top`: The [grid-row-start] CSS property. Not provided by default.
+- `middle`: Vertically align the contents of the cell. Default is `false`.
+- `center`: Horizontally align the text contents of the cell. Default is `false`.
+- `area`: The [grid-area] CSS property. Not provided by default.
+- `is`: The tag property. Default is `"section"`
 
 ## browser support
 
@@ -81,7 +83,7 @@ You can use CSS grid _soon_ if you have to support the latest version of modern
 ![Can I use?](website/caniuse.png)
 
 [website]: https://styled-css-grid.js.org/
-[CSS grid]: https://mdn.io/CSS_Grid_Layout
+[css grid]: https://mdn.io/CSS_Grid_Layout
 [styled-components]: https://github.com/styled-components/styled-components
 [grid-auto-flow]: https://mdn.io/grid-auto-flow
 [grid-row-start]: https://mdn.io/grid-row-start

lib/Cell.js

@@ -1,7 +1,10 @@
 import styled from "styled-components";
 import PropTypes from "prop-types";
+import tag from "clean-tag";
 
-const Cell = styled.section`
+const Cell = styled(tag.section).attrs({
+  blacklist: ["width", "height", "top", "left", "middle", "center", "area"]
+})`
   height: 100%;
   min-width: 0;
   align-content: space-around;
@@ -32,7 +35,8 @@ Cell.propTypes = {
   left: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   middle: PropTypes.bool,
   center: PropTypes.bool,
-  area: PropTypes.string
+  area: PropTypes.string,
+  is: PropTypes.string
 };
 
 export default Cell;

lib/Grid.js

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import PropTypes from "prop-types";
+import tag from "clean-tag";
 
 const autoRows = ({ minRowHeight = "20px" }) => `minmax(${minRowHeight}, auto)`;
 
@@ -12,7 +13,19 @@ const flow = ({ flow = "row" }) => flow;
 
 const formatAreas = areas => areas.map(area => `"${area}"`).join(" ");
 
-const Grid = styled.div`
+const Grid = styled(tag.div).attrs({
+  blacklist: [
+    "columns",
+    "gap",
+    "height",
+    "minRowHeight",
+    "flow",
+    "rows",
+    "areas",
+    "justifyContent",
+    "alignContent"
+  ]
+})`
   display: grid;
   height: ${({ height = "auto" }) => height};
   grid-auto-flow: ${flow};
@@ -36,7 +49,8 @@ Grid.propTypes = {
   rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   areas: PropTypes.arrayOf(PropTypes.string),
   justifyContent: PropTypes.string,
-  alignContent: PropTypes.string
+  alignContent: PropTypes.string,
+  is: PropTypes.string
 };
 
 export default Grid;

package.json

@@ -8,15 +8,8 @@
   "repository": "https://github.com/azz/styled-css-grid",
   "author": "Lucas Azzola",
   "license": "MIT",
-  "files": [
-    "dist"
-  ],
-  "keywords": [
-    "grid",
-    "css",
-    "react",
-    "styled-components"
-  ],
+  "files": ["dist"],
+  "keywords": ["grid", "css", "react", "styled-components"],
   "scripts": {
     "lint": "eslint .",
     "prettier": "prettier --write \"{lib,website,scripts}/*.js\"",
@@ -32,7 +25,8 @@
     "styled-components": "^2"
   },
   "dependencies": {
-    "prop-types": "^15.6.0"
+    "prop-types": "^15.6.0",
+    "clean-tag": "^1.0.4"
   },
   "devDependencies": {
     "babel-core": "^6.25.0",

yarn.lock

@@ -940,6 +940,14 @@ circular-json@^0.3.1:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
 
+clean-tag@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clean-tag/-/clean-tag-1.0.4.tgz#9b407b306fadce114e6dffa774e7b61bdfc0c190"
+  dependencies:
+    html-tags "^2.0.0"
+    react ">=16.0.0"
+    styled-system ">=1.1 || >=2.0"
+
 cli-cursor@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
@@ -1886,6 +1894,10 @@ html-encoding-sniffer@^1.0.1:
   dependencies:
     whatwg-encoding "^1.0.1"
 
+html-tags@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
+
 http-proxy@^1.8.1:
   version "1.16.2"
   resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.16.2.tgz#06dff292952bf64dbe8471fa9df73066d4f37742"
@@ -3309,6 +3321,15 @@ react-test-renderer@next:
     fbjs "^0.8.9"
     object-assign "^4.1.0"
 
+react@>=16.0.0:
+  version "16.4.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
 react@next:
   version "16.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/react/-/react-16.0.0-beta.2.tgz#340bbaa28c8678499353586cf46d096438dee561"
@@ -3975,6 +3996,12 @@ styled-components@^2.1.1:
     stylis "^3.2.1"
     supports-color "^3.2.3"
 
+"styled-system@>=1.1 || >=2.0":
+  version "2.2.9"
+  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-2.2.9.tgz#1a9a2187b1856b4a385ed65a1daff771a253f3d9"
+  dependencies:
+    prop-types "^15.6.0"
+
 stylis@^3.2.1:
   version "3.2.8"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.2.8.tgz#9b23a3e06597f7944a3d9ae880d5796248b8784f"