Skip to content

Commit 95b6dfc

Browse files
sylvainpolletvillardsylvainpolletvillard
committed
upgrade to PostCSS 8
1 parent 253ff0f commit 95b6dfc

File tree

6 files changed

+167
-127
lines changed

6 files changed

+167
-127
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ Use different `grid-kiss` declarations in media queries to easily get responsive
104104
- with [npm](https://www.npmjs.com/)
105105

106106
```bash
107-
npm install postcss-grid-kiss --save-dev
107+
npm install --save-dev postcss postcss-grid-kiss
108108
```
109109

110110
- with [yarn](https://yarnpkg.com/)

‎lib/index.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎lib/main.js‎

Lines changed: 92 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
const
2-
postcss = require("postcss"),
3-
optimizeRule = require("postcss-merge-grid-template/dist/optimize"),
2+
optimizeRule = require("postcss-merge-grid-template/lib/optimize"),
43

54
caniuse = require("./caniuse"),
65
parse = require("./parse"),
@@ -28,94 +27,101 @@ module.exports = function (options) {
2827
isIEHackNeeded = options.fallback;
2928
}
3029

31-
return (css, result) => css.walkDecls('grid-kiss', function (decl) {
32-
33-
const
34-
{ rows, cols, zones, rowIndexes, colIndexes } = parse(decl, options),
35-
grid = { props: new Map, rule: decl.parent },
36-
indent = decl.raws.before.match(/.*$/)[0],
37-
nameMapping = new Map(),
38-
rowDims = getGridRows({ rows, colIndexes, rowIndexes, options }),
39-
colDims = getGridCols({ decl, rows, zones, colIndexes, rowIndexes, options })
40-
41-
grid.props.set("display", "grid");
42-
grid.props.set("align-content", getAlignContent({ rows }));
43-
grid.props.set("justify-content", getJustifyContent({ cols }));
44-
grid.props.set("grid-template-rows", rowDims.join(" "));
45-
grid.props.set("grid-template-columns", colDims.join(" "));
46-
grid.props.set("grid-template-areas", getGridAreas({ zones, rowIndexes, colIndexes, indent }));
47-
48-
// grid properties
49-
for (let [prop, value] of grid.props) {
50-
if (value) {
51-
decl.cloneBefore({ prop, value, raws: { before: '\n\t', after: '' } });
52-
}
53-
}
54-
55-
if (options.optimize) {
56-
optimizeRule(grid.rule, nameMapping);
57-
}
58-
59-
// zone declarations
60-
zones.filter(zone => zone.selector).forEach((zone, i, zonesWithSelector) => {
61-
zone.props = new Map;
62-
63-
let name = zone.name;
64-
if (options.optimize && nameMapping.has(zone.name)) {
65-
name = nameMapping.get(zone.name);
66-
}
67-
68-
zone.props.set("grid-area", name);
69-
zone.props.set("justify-self", getJustifySelf(zone));
70-
zone.props.set("align-self", getAlignSelf(zone));
71-
72-
zone.rule = postcss.rule({
73-
selector: `${grid.rule.selector} > ${zone.selector}`,
74-
source: decl.source,
75-
raws: { before: '\n\n', after: '\n' }
76-
});
77-
78-
for (let [prop, value] of zone.props) {
79-
if (value) {
80-
zone.rule.append({ prop, value, raws: { before: '\n\t', after: '' } });
30+
return {
31+
postcssPlugin: 'postcss-grid-kiss',
32+
Declaration: {
33+
"grid-kiss": (decl, { result, Rule, AtRule }) => {
34+
const
35+
{ rows, cols, zones, rowIndexes, colIndexes } = parse(decl, options),
36+
grid = { props: new Map, rule: decl.parent },
37+
indent = decl.raws.before.match(/.*$/)[0],
38+
nameMapping = new Map(),
39+
rowDims = getGridRows({ rows, colIndexes, rowIndexes, options }),
40+
colDims = getGridCols({ decl, rows, zones, colIndexes, rowIndexes, options })
41+
42+
let lastRule = grid.rule;
43+
44+
grid.props.set("display", "grid");
45+
grid.props.set("align-content", getAlignContent({ rows }));
46+
grid.props.set("justify-content", getJustifyContent({ cols }));
47+
grid.props.set("grid-template-rows", rowDims.join(" "));
48+
grid.props.set("grid-template-columns", colDims.join(" "));
49+
grid.props.set("grid-template-areas", getGridAreas({ zones, rowIndexes, colIndexes, indent }));
50+
51+
// grid properties
52+
for (let [prop, value] of grid.props) {
53+
if (value) {
54+
decl.cloneBefore({ prop, value, raws: { before: '\n\t', after: '' } });
55+
}
8156
}
82-
}
8357

84-
const lastRule = (zonesWithSelector[i - 1] || grid).rule;
85-
grid.rule.parent.insertAfter(lastRule, zone.rule);
86-
})
87-
88-
if (isFallbackNeeded) {
89-
const fallback = getFallback({
90-
zones, grid, decl, result, options, colIndexes, rowIndexes, colDims, rowDims
91-
});
92-
93-
const supportsRule = postcss.atRule({
94-
name: "supports",
95-
params: 'not (grid-template-areas:"test")'
96-
});
97-
98-
const ieHackRule = postcss.atRule({
99-
name: "media",
100-
params: 'screen and (min-width:0\\0)'
101-
});
102-
103-
supportsRule.append(fallback.grid.rule.clone({ raws: { before: '\n\t', after: '\n\t' } }));
104-
ieHackRule.append(fallback.grid.rule.clone({ raws: { before: '\n\t', after: '\n\t' } }));
105-
for (let zoneFallback of fallback.zones.values()) {
106-
supportsRule.append(zoneFallback.rule.clone({ raws: { before: '\n\n\t', after: '\n\t' } }));
107-
ieHackRule.append(zoneFallback.rule.clone({ raws: { before: '\n\n\t', after: '\n\t' } }));
108-
}
58+
if (options.optimize) {
59+
optimizeRule(grid.rule, nameMapping);
60+
}
10961

110-
const lastRule = (zones[zones.length - 1] || grid).rule;
62+
// zone declarations
63+
64+
zones.filter(zone => zone.selector).forEach((zone, i, zonesWithSelector) => {
65+
zone.props = new Map;
66+
67+
let name = zone.name;
68+
if (options.optimize && nameMapping.has(zone.name)) {
69+
name = nameMapping.get(zone.name);
70+
}
71+
72+
zone.props.set("grid-area", name);
73+
zone.props.set("justify-self", getJustifySelf(zone));
74+
zone.props.set("align-self", getAlignSelf(zone));
75+
76+
zone.rule = new Rule({
77+
selector: `${grid.rule.selector} > ${zone.selector}`,
78+
source: decl.source,
79+
raws: { before: '\n\n', after: '\n' }
80+
});
81+
82+
for (let [prop, value] of zone.props) {
83+
if (value) {
84+
zone.rule.append({ prop, value, raws: { before: '\n\t', after: '' } });
85+
}
86+
}
87+
88+
grid.rule.parent.insertAfter(lastRule, zone.rule);
89+
lastRule = zone.rule
90+
})
91+
92+
if (isFallbackNeeded) {
93+
const fallback = getFallback({
94+
zones, grid, decl, result, options, colIndexes, rowIndexes, colDims, rowDims
95+
});
96+
97+
const supportsRule = new AtRule({
98+
name: "supports",
99+
params: 'not (grid-template-areas:"test")'
100+
});
101+
102+
const ieHackRule = new AtRule({
103+
name: "media",
104+
params: 'screen and (min-width:0\\0)'
105+
});
106+
107+
supportsRule.append(fallback.grid.rule.clone({ raws: { before: '\n\t', after: '\n\t' } }));
108+
ieHackRule.append(fallback.grid.rule.clone({ raws: { before: '\n\t', after: '\n\t' } }));
109+
for (let zoneFallback of fallback.zones.values()) {
110+
supportsRule.append(zoneFallback.rule.clone({ raws: { before: '\n\n\t', after: '\n\t' } }));
111+
ieHackRule.append(zoneFallback.rule.clone({ raws: { before: '\n\n\t', after: '\n\t' } }));
112+
}
113+
114+
if (isIEHackNeeded) {
115+
grid.rule.parent.insertAfter(lastRule, ieHackRule);
116+
}
117+
118+
grid.rule.parent.insertAfter(lastRule, supportsRule);
119+
}
111120

112-
if (isIEHackNeeded) {
113-
grid.rule.parent.insertAfter(lastRule, ieHackRule);
121+
decl.remove(); // remove grid-kiss rule in output
114122
}
115-
116-
grid.rule.parent.insertAfter(lastRule, supportsRule);
117123
}
124+
}
125+
};
118126

119-
decl.remove(); // remove grid-kiss rule in output
120-
})
121-
};
127+
module.exports.postcss = true

‎package-lock.json‎

Lines changed: 60 additions & 24 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)