init

Author: Sean King

.eslintrc

@@ -0,0 +1,23 @@
+{
+  "extends": "eslint:recommended",
+  "plugins": [
+    "jest"
+  ],
+  "env": {
+    "es6": true,
+    "node": true,
+    "jest/globals": true
+  },
+  "rules": {
+    "no-console": "warn",
+    "no-undefined": "error",
+    "no-unused-vars": "warn",
+    "indent": ["error", 2, {
+      "SwitchCase": 1,
+      "VariableDeclarator": { "var": 2, "let": 2, "const": 3 }
+    }],
+    "linebreak-style": ["error", "unix"],
+    "semi": ["error", "always"],
+    "valid-jsdoc": 2
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+*.log

.travis.yml

@@ -0,0 +1,7 @@
+language: node_js
+cache: yarn
+node_js:
+  - node
+  - "8"
+  - "6"
+  - "4"

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright 2018 Sean King <sean@seanking.org>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,39 @@
+# PostCSS Subgrid
+![ci-img][ci]
+
+[PostCSS] plugin that shims some _very_ basic behavior of the proposed CSS grid `display: subgrid` [spec].
+
+**Note:** This plugin only provides a shorthand for mimicing a single use-case for CSS subgrids: inheriting the parent grid for full-width containers with placed children.
+
+See [this Codepen][codepen] for a demonstration.
+
+```css
+.foo {
+  display: subgrid;
+}
+```
+
+```css
+.foo {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: inherit;
+  grid-gap: inherit;
+  margin: 0;
+  padding: 0;
+}
+```
+
+## Usage
+
+```js
+postcss([ require('postcss-subgrid') ])
+```
+
+See [PostCSS] docs for examples for your environment.
+
+[spec]: https://www.w3.org/TR/css-grid-2/#subgrids
+[PostCSS]: https://github.com/postcss/postcss
+[codepen]: https://codepen.io/seaneking/pen/MVePPv
+[ci-img]:  https://travis-ci.org/seaneking/postcss-subgrid.svg
+[ci]:      https://travis-ci.org/seaneking/postcss-subgrid

index.js

@@ -0,0 +1,23 @@
+var postcss = require('postcss');
+
+const PROPS = [
+  { prop: 'grid-column', value: '1 / -1' },
+  { prop: 'grid-template-columns', value: 'inherit' },
+  { prop: 'grid-gap', value: 'inherit' },
+  { prop: 'margin', value: '0' },
+  { prop: 'padding', value: '0' },
+];
+
+module.exports = postcss.plugin('postcss-subgrid', () => {
+
+  return root => {
+    root.walkRules(rule => {
+      rule.walkDecls('display', decl => {
+        if (decl.value === 'subgrid') {
+          decl.value = 'grid';
+          PROPS.reverse().forEach(prop => decl.after(prop));
+        }
+      });
+    });
+  };
+});

index.test.js

@@ -0,0 +1,14 @@
+const postcss = require('postcss');
+const plugin = require('./');
+
+function run(input, output, opts) {
+  return postcss([ plugin(opts) ]).process(input)
+    .then(result => {
+      expect(result.css).toEqual(output);
+      expect(result.warnings().length).toBe(0);
+    });
+}
+
+it('shims display: subgrid', () => {
+  return run('a{ display: subgrid; }', 'a{ display: grid; grid-column: 1 / -1; grid-template-columns: inherit; grid-gap: inherit; margin: 0; padding: 0; }', {});
+});