chore(docs): update website

[ludofischer]

• Remove unsupported stylesheets config
• update to new React Monaco editor API
• correct invalid React inline style property
• get rid of console warning on home page
• Remove dependency on old Styled Components release
• Remove example blog posts

[ludofischer]

I could not update the playground to cssnano 5 because webpack fails to bundle css-declaration-sorter@6 so I put this out here so someone else can use it as a base to also update the playground. The playground does work if you only include cssnano-preset-lite since that does not use css-delcaration-sorter.

[codecov-io]

Codecov Report

Merging #1022 (0e94122) into master (53a5d66) will not change coverage.
The diff coverage is n/a.

❗ Current head 0e94122 differs from pull request most recent head abdd5de. Consider uploading reports for the commit abdd5de to get more accurate results

@@           Coverage Diff           @@
##           master    #1022   +/-   ##
=======================================
  Coverage   97.54%   97.54%           
=======================================
  Files         116      116           
  Lines        3581     3581           
  Branches     1058     1058           
=======================================
  Hits         3493     3493           
  Misses         81       81           
  Partials        7        7           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 53a5d66...abdd5de. Read the comment docs.

[alexander-akait]

@ludofischer

I could not update the playground to cssnano 5 because webpack fails to bundle css-declaration-sorter@6 so I put this out here so someone else can use it as a base to also update the playground.

What is error?

[ludofischer]

The error is

TypeError: __webpack_require__(...).promises is undefined

Notice that Docusaurus is still on webpack 4.
Does it have something to do with the fact that css-declaration-sorter uses type: module? https://github.com/Siilwyn/css-declaration-sorter/blob/master/package.json

[alexander-akait]

TypeError: webpack_require(...).promises is undefined

Yep, we need webpack v5 here, as workaround fix it using externals, https://github.com/webpack/webpack/blob/master/lib/node/NodeTargetPlugin.js, here using fs.promises I think

[ludofischer]

I am sorry I don't think I understand what I need to do. The webpack configuration is already custommized https://github.com/cssnano/cssnano/blob/master/site/docusaurus-webpack-plugin.js
I think I need to change it to something like:

 async configureWebpack(config) {
      config.node = {
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
      };
     config.externals = {
       'fs/promises': ??
     };
    },

I don't know what to put in place of ??.

[alexander-akait]

Because we are in browser we should return nothing, we don't have fs in browser (alternative using memfs), maybe we can improve it on css-declaration-sorter and avoid hack

[ludofischer]

Still cannot make it work. I have tried

 config.externals = {
        'fs/promises': 'empty',
     };

and

 config.externals = {
        'fs/promises': false,
     };

I don't feel like working more on the playground, since it is not a bug in cssnano, also docusaurus is probably going to have webpack 5 in the future. I also don't think that the playground should block the release, at worst we can turn it off or link to CodeSandbox. For reference, this is the branch with the playground changes: https://github.com/cssnano/cssnano/tree/playground-update

[ludofischer]

The problem should have nothing to do with type: module because we pinned css-declaration-sorter at 6.0.0 before they introduced ESM:

cssnano/packages/cssnano-preset-default/package.json

Line 17 in 60d107b

"css-declaration-sorter": "6.0.0",

Otherwise cssnano would require Node >= 12. Anyway, they use

const { readFile } = require('fs').promises;

to read some browser data in a file from disk. https://github.com/Siilwyn/css-declaration-sorter/blob/33fd613d10f4708bc00709c43dc5883ad02914e3/src/main.js#L36 So I have no idea of how that would run in a browser (memfs ?)

[alexander-akait]

Why they you fs, because we should replace it on empty module because maybe we never go to lines where it used

[ludofischer]

I think they use fs to load the ordered property list from a JSON file, so it's pretty essential to their functionality.
https://github.com/Siilwyn/css-declaration-sorter/blob/33fd613d10f4708bc00709c43dc5883ad02914e3/src/main.js#L36
You could probably change the JSON to a JS regular JS file and require or import it, though. Maybe we can open a pull request to discuss that?

[ludofischer]

The problem is that even if css-declaration-sorter make a new release with the change, if we use it in the preset we have to require Node > 12 since css-declaration-sorter has switched to type: module.

[alexander-akait]

Yep, they have bug https://github.com/Siilwyn/css-declaration-sorter/blob/master/package.json#L9, but no cjs verison in src

[ludofischer]

Yep, they have bug https://github.com/Siilwyn/css-declaration-sorter/blob/master/package.json#L9, but no cjs verison in src

But they introduced that in 6.0.1, while cssnano uses 6.0.0:
https://github.com/Siilwyn/css-declaration-sorter/blob/v6.0.0/package.json

[alexander-akait]

@ludofischer it is breaking change, adding exports in patch release is bad, because it can break many things, we need to open an issue, for example require('css-declaration-sorter/package.json') is broken, also no cjs version

[ludofischer]

@sokra OK, will you open the issue with css-declaration-sorter yourself? I think you've got a clearer idea of how to fix this sort of problem than I do and we can move the discussion over there.

[alexander-akait]

@ludofischer I am from mobile right now 😞

[ludofischer]

Yep, they have bug https://github.com/Siilwyn/css-declaration-sorter/blob/master/package.json#L9, but no cjs verison in src

I checked the actual package and they do correctly ship in main.cjs (they generate it during publish). But coming back to the website, I think using a CodeSandbox instead of the current playground might be an overall improvement. I've noticed people who open issues often paste code they say they tried in the playground so having an actual code sandbox they can fork would make it even easier to reproduce.

[alexander-akait]

Make sense, our plan?

[ludofischer]

I've investigated code sandbox. Unfortunately I don't think it is a solution as it expects a web page.

I would promote the current RC to latest, and shut down the playground or warn that it is outdated. That way we can unblock webpack-contrib/css-minimizer-webpack-plugin#63 so then create-react-app can update when they switch to webpack 5 facebook/create-react-app#9994, as well as other consumers like angular-cli. Otherwise we will keep being bombarded by issues already fixed on master.

After going through the issues, I believe the current 5 rc is likely better quality than the 4x.x releases. It fixes bugs and after opening a few pull requests againt downstreams I don't think it's likely there are big regressions. I have finalize the release notes here: #1021

[ludofischer]

Might want to merge #1034 before releasing to @latest so people are less anxious about vulnerabilities.

[ludofischer]

I think the best solution for now is to only allow the lite preset in the playground. I have experimented with embedding repl.it, but it does not feel right as you need to open the CSS file, edit it, click run, open the output file... You can;t see the input and output side-by-side.

[alexander-akait]

Very weird, why it works with v4?

[ludofischer]

Very weird, why it works with v4?

It's because of css-delcaration-sorter. We've already discussed this (see #1022 (comment) and following comments).

[alexander-akait]

Let's disable this plugin for playground and we will try to fix it in css-delcaration-sorter repo

[anikethsaha]

I think disabling the plugin through cssnano config would not solve this.
one solution can be to break the cssnano default preset and create the config manually in the playground and not including the css-delcaration-sort plugin.
other solution can be to use codesandbox.
IMO the main use of the playground for us is to have a reproducible examples which can be done using codesandbox as well.

so till it gets fixed in css-delcaration-sort we can approach either two options.
lets not block the release for the playground.

[ludofischer]

If you disable the plugin in the cssnano config it would still break because the import declaration would stay, but I imagine you could use the webpack config to resolve css-declaration-sorter with a plugin that does nothing. The problem I see with this is that preset-default in the playground would give a different result than offline.

I have tried code sandbox but I could not find a way to get rid of the browser inside the sandbox, so as in our case there is not web page to serve, it shows an error, which looks ugly. But I did not spend much time with it or repl.it, so maybe someone else can build a better demo.

[ludofischer]

What do you think then? Are we ready to release 5.0.0?

[alexander-akait]

I think yes, if we have regressions, we will fix them in 5.0.x, no need worry, sometimes we make mistakes (but I think we don't ahve them 😄 ), that's ok

[ludofischer]

I have created the v5 commit #1039 Besides that we need to publish the release notes #1021 update the website (I think only @anikethsaha can update the website because of their token is in the release script)

[anikethsaha]

I have created the v5 commit #1039 Besides that we need to publish the release notes #1021 update the website (I think only @anikethsaha can update the website because of their token is in the release script)

You can change it to your username as well. it should work. It is for github pages and a workaround to make it work with docusaurus.
If it doesnt work, let me know what I have to do in order to deploy it .

[codecov-commenter]

Codecov Report

Merging #1022 (f3b19a6) into master (9381b74) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #1022   +/-   ##
=======================================
  Coverage   96.34%   96.34%           
=======================================
  Files         116      116           
  Lines        3583     3583           
  Branches     1058     1058           
=======================================
  Hits         3452     3452           
  Misses        122      122           
  Partials        9        9           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9381b74...f3b19a6. Read the comment docs.

[ludofischer]

You can change it to your username as well. it should work. It is for github pages and a workaround to make it work with docusaurus.
If it doesnt work, let me know what I have to do in order to deploy it .

Hey, I actually managed to deploy the website base on this branch: https://cssnano.co/ There were a lot of broken links that I have fixed too. Maybe take a look at the website if everything is fine. Then I suggest we merge this pull request to master. And revisit the playground bundling issue after Docusaurus updates to webpack 5.

[ludofischer]

FYI the build:site script in the root package.json mostly works. It just seems to crash at the end and creates some broken links in the website. It might be worthwhile to fix it, since it can update the changelog and footer based on the published package versions.

[ludofischer]

I've finally managed to migrate the website to webpack 5 and repair the automated changelog generation. The goof news is that now we can build the playground with preset-lite without any polyfills. The bad news is that preset-default still does not build. So the only way to get the dfault preset working in the playground is proposing a change to https://github.com/Siilwyn/css-declaration-sorter

[ludofischer]

I've deployed this update, so you can check for example:

• the changelog: https://cssnano.co/docs/changelog
• the contributors page: https://cssnano.co/docs/community/

[alexander-akait]

Looks good ⭐