Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Start work on PostCSS 8 Migration #963

Merged
merged 1 commit into from
Nov 11, 2021
Merged

Start work on PostCSS 8 Migration #963

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions docs/05_Packages/05_crafty-preset-postcss/CSS_Features.md
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Loading