Skip to content

Commit

Permalink
Upgrade to PostCSS 8 (#963)
Browse files Browse the repository at this point in the history
  • Loading branch information
@onigoetz
onigoetz committed Nov 11, 2021
1 parent 98191b0 commit d469f8f
Show file tree
Hide file tree
Showing 20 changed files with 455 additions and 901 deletions.
3 changes: 1 addition & 2 deletions docs/05_Packages/05_crafty-preset-postcss/CSS_Features.md
View file
Expand Up @@ -11,7 +11,6 @@ All included plugins have a short example accompanying them below.
| Plugin | Description |
| ------------------------------------ | ------------------------------------------- |
| `postcss-assets` | Embed images & size functions |
| `postcss-filter-gradient` | Gradient fallback for IE9 |
| `postcss-import` | Import files |
| `postcss-scss` | Inline comments support |
| `postcss-url` | Update relative URLs after import |
Expand Down Expand Up @@ -809,7 +808,7 @@ You can write your CSS following the W3C standards and Autoprefixer will handle
}
```

### Browser support (`postcss-font-family-system-ui`, `postcss-pseudoelements`, `postcss-replace-overflow-wrap`, `postcss-filter-gradient`, `postcss-font-variant`)
### Browser support (`postcss-font-family-system-ui`, `postcss-pseudoelements`, `postcss-replace-overflow-wrap`, `postcss-font-variant`)

Some ways of writing CSS are compatible with modern browsers but not with older ones.
These plugins ensure some properties include a fallback.
Expand Down
10 changes: 5 additions & 5 deletions packages/crafty-preset-postcss/package.json
View file
Expand Up @@ -18,18 +18,18 @@
"@swissquote/stylelint-config-swissquote": "1.17.2",
"css-loader": "6.5.1",
"end-of-stream": "1.4.4",
"gulp-postcss": "8.0.0",
"gulp-postcss": "9.0.1",
"gulp-rename": "2.0.0",
"gulp-sourcemaps": "3.0.0",
"mini-css-extract-plugin": "2.4.4",
"postcss": "7.0.39",
"postcss": "8.3.11",
"postcss-loader": "6.2.0",
"postcss-reporter": "6.0.1",
"postcss-scss": "2.1.1",
"postcss-reporter": "7.0.4",
"postcss-scss": "4.0.2",
"resolve-from": "5.0.0",
"stream-exhaust": "1.0.2",
"style-loader": "3.3.1",
"stylelint": "13.13.1",
"stylelint": "14.0.1",
"through2": "4.0.2",
"webpack": "5.64.0"
},
Expand Down
6 changes: 3 additions & 3 deletions packages/crafty-preset-postcss/src/commands/lint_css.js
View file
Expand Up @@ -54,9 +54,9 @@ process.argv.push("--config");
process.argv.push(tmpfile);

// Define syntax if it isn't already defined
if (process.argv.indexOf("--syntax") === -1) {
process.argv.push("--syntax");
process.argv.push("scss");
if (process.argv.indexOf("--custom-syntax") === -1) {
process.argv.push("--custom-syntax");
process.argv.push("postcss-scss");
}

require("stylelint/bin/stylelint");
105 changes: 52 additions & 53 deletions packages/crafty-preset-postcss/src/lint_reporter.js
View file
@@ -1,5 +1,4 @@
const util = require("postcss-reporter/lib/util");
const postcss = require("postcss");
const formatter = require("stylelint/lib/formatters/stringFormatter");

function hasError(messages) {
Expand All @@ -17,70 +16,70 @@ function shouldThrowError(sources) {
return sources.length && sources.some(entry => entry.errored);
}

function reporter(opts) {
module.exports = opts => {
const options = opts || {};

let shouldThrow = false;
const completeReport = [];

function innerReporter(css, result) {
const resultSource = result.root.source
? result.root.source.input.file || result.root.source.input.id
: "";
return {
postcssPlugin: "stylelint-reporter",
OnceExit(root, { result }) {
const messagesToLog = result.messages;

const messagesToLog = result.messages;
const sourceGroupedMessages = messagesToLog.reduce(
(innerResult, message) => {
const key = util.getLocation(message).file || resultSource;
if (!message.severity) {
message.severity = message.type || "warning";
}
const resultSource = result.root.source
? result.root.source.input.file || result.root.source.input.id
: "";

if (hasOwnProperty.call(innerResult, key)) {
innerResult[key].push(message);
} else {
innerResult[key] = [message];
}
return innerResult;
},
{}
);
const sourceGroupedMessages = messagesToLog.reduce(
(innerResult, message) => {
const key = util.getLocation(message).file || resultSource;
if (!message.severity) {
message.severity = message.type || "warning";
}

const prepared = [];
Object.keys(sourceGroupedMessages).forEach(source => {
const messages = sourceGroupedMessages[source];
prepared.push({
warnings: messages,
source,
deprecations: [],
invalidOptionWarnings: [],
errored: hasError(messages)
if (hasOwnProperty.call(innerResult, key)) {
innerResult[key].push(message);
} else {
innerResult[key] = [message];
}
return innerResult;
},
{}
);

const prepared = [];
Object.keys(sourceGroupedMessages).forEach(source => {
const messages = sourceGroupedMessages[source];
prepared.push({
warnings: messages,
source,
deprecations: [],
invalidOptionWarnings: [],
errored: hasError(messages)
});
});
});

if (options.clearReportedMessages) {
result.messages = [];
}
if (options.clearReportedMessages) {
result.messages = [];
}

const report = formatter(prepared).trim();
if (report !== "") {
completeReport.push(report);
}
const report = formatter(prepared).trim();
if (report !== "") {
completeReport.push(report);
}

if (options.throwError && shouldThrowError(prepared)) {
shouldThrow = true;
}
}
if (options.throwError && shouldThrowError(prepared)) {
shouldThrow = true;
}
},
report() {
if (completeReport.length) {
console.log(`\n${completeReport.join("\n\n")}\n`);
}

innerReporter.report = function() {
if (completeReport.length) {
console.log(`\n${completeReport.join("\n\n")}\n`);
return !shouldThrow;
}

return !shouldThrow;
};

return innerReporter;
}

module.exports = postcss.plugin("stylelint-reporter", reporter);
};
module.exports.postcss = true;
52 changes: 26 additions & 26 deletions packages/integration/__tests__/__snapshots__/crafty-preset-postcss-gulp.js.snap
View file
Expand Up @@ -90,13 +90,13 @@ css/imported.scss
1:1 ✖ Types are allowed only inside a scope swissquote/no-type-outside-scope
css/style.scss
4:1 ✖ Types are allowed only inside a scope swissquote/no-type-outside-scope
6:14 ⚠ Unexpected unit length-zero-no-unit
10:1 ✖ Expected class selector \\".notAComponent\\" to match pattern \\"/^(_)?(?:(?:u|t|(?:i|ha)?s)+-[a-z$]+[a-zA-Z0-9$()]*|(?:[a-z$][a-zA-Z0-9$()]+-)?[A-Z$][a-zA-Z0-9$()]*(__[a-z0-9$][a-zA-Z0-9$()]*)*(--[a-z0-9$][a-zA-Z0-9$()]*)*)$/\\" selector-class-pattern
15:1 ✖ A state must be linked to a component swissquote/no-state-without-component
20:1 ✖ Expected \\"#no-id\\" to have no more than 0 ID selectors selector-max-id
28:13 ✖ Expected nesting depth to be no more than 2 max-nesting-depth
31:6 ⚠ Insert \\"⏎\\" prettier/prettier
4:1 ✖ Types are allowed only inside a scope swissquote/no-type-outside-scope
6:14 ⚠ Unexpected unit length-zero-no-unit
10:1 ✖ Expected class selector \\".notAComponent\\" to match pattern \\"/^(_)?(?:(?:u|t|(?:i|ha)?s)+-[a-z$]+[a-zA-Z0-9$()]*|(?:[a-z$][a-zA-Z0-9$()]+-)?[A-Z$][a-zA-Z0-9$()]*(__[a-z0-9$][a-zA-Z0-9$()]*)*(--[a-z0-9$][a-zA-Z0-9$()]*)*)$/\\" selector-class-pattern
15:1 ✖ A state must be linked to a component swissquote/no-state-without-component
20:1 ✖ Expected \\"#no-id\\" to have no more than 0 ID selectors selector-max-id
28:13 ✖ Expected nesting depth to be no more than 2 max-nesting-depth
31:6 ⚠ Insert \\"⏎\\" prettier/prettier
[__:__:__] Finished 'css__lint' after ____ ms
[__:__:__] Finished 'default' after ____ ms
Expand All @@ -118,13 +118,13 @@ css/imported.scss
1:1 ✖ Types are allowed only inside a scope swissquote/no-type-outside-scope
css/style.scss
4:1 ✖ Types are allowed only inside a scope swissquote/no-type-outside-scope
6:14 ✖ Unexpected unit length-zero-no-unit
10:1 ✖ Expected class selector \\".notAComponent\\" to match pattern \\"/^(_)?(?:(?:u|t|(?:i|ha)?s)+-[a-z$]+[a-zA-Z0-9$()]*|(?:[a-z$][a-zA-Z0-9$()]+-)?[A-Z$][a-zA-Z0-9$()]*(__[a-z0-9$][a-zA-Z0-9$()]*)*(--[a-z0-9$][a-zA-Z0-9$()]*)*)$/\\" selector-class-pattern
15:1 ✖ A state must be linked to a component swissquote/no-state-without-component
20:1 ✖ Expected \\"#no-id\\" to have no more than 0 ID selectors selector-max-id
28:13 ✖ Expected nesting depth to be no more than 2 max-nesting-depth
31:6 ✖ Insert \\"⏎\\" prettier/prettier
4:1 ✖ Types are allowed only inside a scope swissquote/no-type-outside-scope
6:14 ✖ Unexpected unit length-zero-no-unit
10:1 ✖ Expected class selector \\".notAComponent\\" to match pattern \\"/^(_)?(?:(?:u|t|(?:i|ha)?s)+-[a-z$]+[a-zA-Z0-9$()]*|(?:[a-z$][a-zA-Z0-9$()]+-)?[A-Z$][a-zA-Z0-9$()]*(__[a-z0-9$][a-zA-Z0-9$()]*)*(--[a-z0-9$][a-zA-Z0-9$()]*)*)$/\\" selector-class-pattern
15:1 ✖ A state must be linked to a component swissquote/no-state-without-component
20:1 ✖ Expected \\"#no-id\\" to have no more than 0 ID selectors selector-max-id
28:13 ✖ Expected nesting depth to be no more than 2 max-nesting-depth
31:6 ✖ Insert \\"⏎\\" prettier/prettier
[__:__:__] 'css__lint' errored after ____ ms
[__:__:__] Stylelint: Errors were found
Expand All @@ -148,7 +148,7 @@ Object {
[__:__:__] Starting 'css__lint' ...
css/style.scss
104:5 ⚠ Unexpected browser feature \\"css-resize\\" is not supported by Edge 18, Safari on iOS 15,13.0-13.1,13.2,13.3,13.4-13.7,14.0-14.4,14.5-14.8 plugin/no-unsupported-browser-features
104:5 ⚠ Unexpected browser feature \\"css-resize\\" is not supported by Edge 18, Safari on iOS 15,13.0-13.1,13.2,13.3,13.4-13.7,14.0-14.4,14.5-14.8 plugin/no-unsupported-browser-features
[__:__:__] Finished 'css__lint' after ____ ms
[__:__:__] Finished 'default' after ____ ms
Expand Down Expand Up @@ -258,12 +258,12 @@ exports[`Experiment with all CSS 2`] = `
/* Help with RTL languages (postcss-logical, postcss-dir-pseudo-class) */
.Banner:dir(ltr) {
[dir=\\"ltr\\"] .Banner {
padding-left: 20px;
padding-right: 40px;
}
.Banner:dir(rtl) {
[dir=\\"rtl\\"] .Banner {
padding-right: 20px;
padding-left: 40px;
}
Expand Down Expand Up @@ -467,7 +467,6 @@ button:hover,button:focus,.button:hover,.button:focus {
* postcss-font-family-system-ui
* postcss-pseudoelements
* postcss-replace-overflow-wrap
* postcss-filter-gradient
* postcss-font-variant
*/
Expand Down Expand Up @@ -530,10 +529,9 @@ Object {
[__:__:__] Starting 'css__lint' ...
css/style.scss
104:5 ⚠ Unexpected browser feature \\"css-resize\\" is not supported by IE 9 plugin/no-unsupported-browser-features
158:5 ⚠ Unexpected browser feature \\"css-animation\\" is not supported by IE 9 plugin/no-unsupported-browser-features
274:5 ⚠ Unexpected browser feature \\"flexbox\\" is not supported by IE 9 plugin/no-unsupported-browser-features
295:5 ⚠ Unexpected browser feature \\"wordwrap\\" is only partially supported by IE 9 plugin/no-unsupported-browser-features
104:5 ⚠ Unexpected browser feature \\"css-resize\\" is not supported by IE 11 plugin/no-unsupported-browser-features
274:5 ⚠ Unexpected browser feature \\"flexbox\\" is only partially supported by IE 11 plugin/no-unsupported-browser-features
294:5 ⚠ Unexpected browser feature \\"wordwrap\\" is only partially supported by IE 11 plugin/no-unsupported-browser-features
[__:__:__] Finished 'css__lint' after ____ ms
[__:__:__] Finished 'default' after ____ ms
Expand Down Expand Up @@ -635,12 +633,12 @@ exports[`Experiment with all CSS, old browsers 2`] = `
/* Help with RTL languages (postcss-logical, postcss-dir-pseudo-class) */
.Banner:dir(ltr) {
[dir=\\"ltr\\"] .Banner {
padding-left: 20px;
padding-right: 40px;
}
.Banner:dir(rtl) {
[dir=\\"rtl\\"] .Banner {
padding-right: 20px;
padding-left: 40px;
}
Expand Down Expand Up @@ -831,6 +829,10 @@ button:hover,button:focus,.button:hover,.button:focus {
display: flex;
}
:-ms-fullscreen .Link {
display: flex;
}
:fullscreen .Link {
display: flex;
}
Expand All @@ -840,7 +842,6 @@ button:hover,button:focus,.button:hover,.button:focus {
* postcss-font-family-system-ui
* postcss-pseudoelements
* postcss-replace-overflow-wrap
* postcss-filter-gradient
* postcss-font-variant
*/
Expand All @@ -858,7 +859,6 @@ button:hover,button:focus,.button:hover,.button:focus {
.Buy {
background: linear-gradient(to bottom, #1e5799, #7db9e8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1e5799', endColorstr='#ff7db9e8', GradientType=0);
}
.Heading.Heading--small {
Expand Down
3 changes: 1 addition & 2 deletions packages/integration/__tests__/__snapshots__/crafty-preset-postcss-webpack.js.snap
View file
Expand Up @@ -177,7 +177,6 @@ chunk (runtime: default) myBundle.min.js (default) ___ KiB (javascript) ___ byte
dependent modules ___ KiB [dependent] 7 modules
runtime modules ___ bytes 4 modules
./js/app.js + 1 modules ___ KiB [built] [code generated]
webpack compiled with 1 warning
Failed to compile.
Expand All @@ -189,7 +188,7 @@ Syntax error: __PATH__/packages/integration/fixtures/crafty-preset-postcss-webpa
11 | }
12 | }
Δt ____ms ✖ 2 problems (1 error, 1 warning)
Δt ____ms ✖ 1 problem (1 error, 0 warnings)
[__:__:__] 'js_myBundle' errored after ____ ms
[__:__:__] Webpack compilation failed
Expand Down

0 comments on commit d469f8f

Please sign in to comment.