WIP: feature: testing Yarn PnP

[DanielRuf]

Details

Description

This PR is meant to test Yarn PnP (will have to switch to the macBook tomorrow).

[crysfel]

Nice addition!

[crysfel]

Could you document this under the "Package Management" section: https://docs.google.com/document/d/1DbdRZBsyjbeBl9vddUyXCUWsgwdgyyUY2NIQitf3_Z0/edit#heading=h.4wzazzv6mudg

[DanielRuf]

Could you document this under the "Package Management" section:

Will do so later.

We should also prefer csstools/normalize.css (and probably PostCSS instead of SCSS).

[emmabostian]

Why PostCSS instead of Scss?

[DanielRuf]

yarn
yarn install v1.12.0-20180926.1157
[1/5] 🔍  Resolving packages...
[2/5] 🚚  Fetching packages...
[3/5] 🔗  Linking dependencies...
warning " > @storybook/[email protected]" has unmet peer dependency "@storybook/addons@^3.3.0".
warning " > @storybook/[email protected]" has unmet peer dependency "babel-runtime@>=6.0.0".
warning " > [email protected]" has unmet peer dependency "webpack@^4.0.0".
warning " > [email protected]" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning " > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
[5/5] 📃  Building fresh packages...
✨  Done in 7.24s.

without PnP:

yarn
yarn install v1.12.0-20180926.1157
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @storybook/[email protected]" has unmet peer dependency "@storybook/addons@^3.3.0".
warning " > @storybook/[email protected]" has unmet peer dependency "babel-runtime@>=6.0.0".
warning " > [email protected]" has unmet peer dependency "webpack@^4.0.0".
warning " > [email protected]" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
warning " > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 36.30s.

But there are currently some blockers:

facebook/create-react-app#5103
facebook/create-react-app#5117

[DanielRuf]

Why PostCSS instead of Scss?

In general because building node-sass takes a while (node-gyp) and PostCSS is much faster and there is precss which adds this (nesting, variables and so on) for PostCSS what we have in SCSS.

See https://www.npmjs.com/package/precss

And also an article (one of many) about the reasons to switch: https://medium.com/@Kirkhammetz/moving-from-sass-to-postcss-why-what-and-how-f68b1bc760dc

Some benchmarks: https://github.com/postcss/benchmark

Some introduction into PostCSS: https://www.smashingmagazine.com/2015/12/introduction-to-postcss/

Also this enables us to add features like CSS variables and new CSS features which are transpiled for the targeted browsers (browserslist config in package.json).

PostCSS plugins: https://www.postcss.parts/

[DanielRuf]

But regarding PostCSS (which is just an idea and which we are currently evaluating in some projects), we are also evaluating stylis: https://github.com/thysultan/stylis.js (but PostCSS has a much bigger ecosystem)

https://www.npmjs.com/search?q=stylis%20plugin
https://www.npmjs.com/search?q=postcss%20plugin

[devictoribero]

what is the status of this? @DanielRuf @crysfel

[emmabostian]

Can someone please update the status?

[DanielRuf]

I would have to test it again. Sorry, had not much time while working on the projects at work. This PR can kept be open (still WIP and testing). Also PnP requires Yarn as it is not a standalone solution or portable.