chore(docs): update website to webpack 5 and cssnano 5

* run cssnano 5 in the playground
Can only use the lite config as postcss-declaration-sorter
does not work in the browser
* 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

site/docusaurus.config.js

@@ -13,7 +13,7 @@ module.exports = {
         alt: 'CSSNANO Logo',
         src: 'img/logo-alt.svg',
       },
-      links: [
+      items: [
         {
           to: 'docs/introduction',
           label: 'Guide',
@@ -93,7 +93,7 @@ module.exports = {
           ],
         },
       ],
-      copyright: `Latest release v5.0.1 · Distributed under the MIT License.`,
+      copyright: `Latest release v5.0.2 · Distributed under the MIT License.`,
     },
   },
   presets: [
@@ -112,6 +112,4 @@ module.exports = {
       },
     ],
   ],
-  stylesheets: ['https://at-ui.github.io/feather-font/css/iconfont.css', ''],
-  plugins: [require.resolve('./docusaurus-webpack-plugin')],
 };

site/package.json

@@ -9,19 +9,18 @@
     "deploy": "docusaurus deploy"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-alpha.48",
-    "@docusaurus/preset-classic": "^2.0.0-alpha.48",
-    "@monaco-editor/react": "^3.3.0",
-    "classnames": "^2.2.6",
-    "cssnano-preset-advanced": "^4.0.7",
-    "cssnano-preset-default": "^4.0.7",
-    "cssnano-preset-lite": "^1.0.0",
-    "postcss": "^7.0.16",
-    "prettier": "^2.0.4",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
-    "react-icons": "^3.9.0",
-    "react-spinners-kit": "^1.9.1"
+    "@docusaurus/core": "^2.0.0-alpha.75",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.75",
+    "@monaco-editor/react": "^4.1.2",
+    "classnames": "^2.3.1",
+    "cssnano-preset-advanced": "^5.0.1",
+    "cssnano-preset-default": "^5.0.1",
+    "cssnano-preset-lite": "^2.0.0",
+    "postcss": "^8.2.13",
+    "prettier": "^2.2.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-icons": "^4.2.0"
   },
   "browserslist": {
     "production": [
@@ -34,5 +33,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {}
 }

site/src/components/editor/RingSpinner.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import styles from './RingSpinner.module.css';
+
+/* eslint-disable import/prefer-default-export */
+export function RingSpinner() {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.circle}></div>
+    </div>
+  );
+}

site/src/components/editor/RingSpinner.module.css

@@ -0,0 +1,60 @@
+/* Original styles by https://dmitrymorozoff.github.io/react-spinners-kit/ */
+.wrapper {
+  width: 30px;
+  height: 30px;
+}
+
+.circle {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+}
+
+.circle::before, .circle::after {
+  width: 100%;
+  height: 100%;
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out; 
+}
+
+.circle::before {
+  box-shadow: inset 0 0 0 3px #00ff89;
+  animation-name: firstPulse;
+}
+
+.circle::after {
+  box-shadow: 0 0 0 0 #00ff89;
+  animation-name: secondPulse;
+}
+
+@keyframes firstPulse {
+  0% {
+    box-shadow: inset 0 0 0 3px #00ff89;
+    opacity: 1;
+  }
+
+  50%, 100% {
+    box-shadow: inset 0 0 0 0 #00ff89;
+    opacity: 0
+  }
+}
+
+@keyframes secondPulse {
+  0%, 50% {
+    box-shadow: inset 0 0 0 0 #00ff89;
+    opacity: 0;
+  }
+
+  100% {
+    box-shadow: inset 0 0 0 3px #00ff89;
+    opacity: 1
+  }
+}

site/src/components/editor/config.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
-import { ControlledEditor as Editor } from '@monaco-editor/react';
-import { RingSpinner as Loader } from 'react-spinners-kit';
+import Editor from '@monaco-editor/react';
+import { RingSpinner as Loader } from './RingSpinner.js';
 
 class ConfigEditor extends Component {
   render() {
@@ -14,7 +14,6 @@ class ConfigEditor extends Component {
           loading={<Loader />}
           value={this.props.config}
           onChange={this.props.handleOnChange}
-          editorDidMount={this.handleEditorDidMount}
           options={{ lineNumbers: 'on' }}
         />
       </div>

site/src/components/editor/main.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { ControlledEditor as Editor } from '@monaco-editor/react';
-import { RingSpinner as Loader } from 'react-spinners-kit';
+import Editor from '@monaco-editor/react';
+import { RingSpinner as Loader } from './RingSpinner.js';
 
 class MainEditor extends Component {
   constructor(props) {
@@ -24,7 +24,7 @@ class MainEditor extends Component {
           loading={<Loader />}
           value={this.props.input}
           onChange={this.props.handleOnChange}
-          editorDidMount={this.handleEditorDidMount}
+          onMount={this.handleEditorDidMount}
           options={{ lineNumbers: 'on' }}
         />
       </div>

site/src/components/editor/output.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import Editor from '@monaco-editor/react';
-import { RingSpinner as Loader } from 'react-spinners-kit';
+import { RingSpinner as Loader } from './RingSpinner.js';
 
 class OutputEditor extends Component {
   render() {

site/src/components/editor/postcss_runner.js

@@ -1,44 +1,25 @@
 /* eslint-disable no-warning-comments */
 /* eslint-disable no-unused-vars */
 import postcss from 'postcss';
+import cssnanoPresetLite from 'cssnano-preset-lite';
 import { pkgnameToVarName } from '../../helper/naming';
 
-/**
- * using moduleMaps and not with imports to lazy load them because of this error
- * editor lazy namespace object?f49d:5 Uncaught (in promise) Error: Cannot find module 'cssnano-preset-default'
-    at eval (eval at ./src/components/editor lazy recursive
- * need to fix this
- */
-const moduleMap = {
-  cssnanoPresetDefault: require('cssnano-preset-default'),
-  cssnanoPresetAdvanced: require('cssnano-preset-advanced'),
-  cssnanoPresetLite: require('cssnano-preset-lite'),
-};
-
-function initializePlugin(plugin, css, result) {
-  if (Array.isArray(plugin)) {
+export default (input, config) => {
+  const { plugins: nanoPlugins } = cssnanoPresetLite();
+  console.log(cssnanoPresetLite);
+  const postcssPlugins = [];
+  for (const plugin of nanoPlugins) {
     const [processor, opts] = plugin;
     if (
       typeof opts === 'undefined' ||
-      (typeof opts === 'object' && !opts.exclude)
+      (typeof opts === 'object' && !opts.exclude) ||
+      (typeof opts === 'boolean' && opts === true)
     ) {
-      return Promise.resolve(processor(opts)(css, result));
+      postcssPlugins.push(processor(opts));
     }
-  } else {
-    return Promise.resolve(plugin()(css, result));
   }
-  // Handle excluded plugins
-  return Promise.resolve();
-}
-
-export default (input, config) => {
-  const { plugins } = moduleMap[pkgnameToVarName(config[0])](config[1]);
-  const pluginRunner = (css, result) =>
-    plugins.reduce((promise, plugin) => {
-      return promise.then(initializePlugin.bind(null, plugin, css, result));
-    }, Promise.resolve());
   return new Promise((resolve, reject) => {
-    postcss(pluginRunner)
+    postcss(postcssPlugins)
       .process(input)
       .then((res) => resolve(res))
       .catch((err) => reject(err));

site/src/pages/index.js

@@ -197,10 +197,7 @@ function Home() {
                   >
                     <tbody>
                       {minifyTableData.map(({ property, value }, i) => (
-                        <tr
-                          key={i}
-                          style={{ width: '100%', 'max-width': '100%' }}
-                        >
+                        <tr key={i} style={{ width: '100%', maxWidth: '100%' }}>
                           <td>{property}</td>
                           <td>{value}</td>
                         </tr>

site/src/pages/playground.js

@@ -4,7 +4,7 @@ import prettier from 'prettier/standalone';
 import cssParser from 'prettier/parser-postcss';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import className from 'classnames';
-import { RingSpinner as Loader } from 'react-spinners-kit';
+import { RingSpinner as Loader } from '../components/editor/RingSpinner.js';
 import MainEditor from '../components/editor/main';
 import OutputEditor from '../components/editor/output';
 import unicode from '../helper/unicode';
@@ -28,28 +28,28 @@ export default () => {
       input: '/* write your css below */',
       config: `// cssnano config
 {
-  "preset" : "default",
+  "preset" : "lite", // online playground can use only the "lite" preset
 }
 `,
     };
 
   const context = useDocusaurusContext();
   const { siteConfig = {} } = context;
-  const [theme, setTheme] = useState('dark');
+  const [theme, setTheme] = useState('vs-dark');
   const [editorLoading, setEditorLoading] = useState(false);
   const [output, setOutput] = useState('/* your optimized output here */');
   const [input, setInput] = useState(intializedState.input);
   const [config, setConfig] = useState(intializedState.config);
 
   function toggleTheme() {
-    setTheme(theme === 'light' ? 'dark' : 'light');
+    setTheme(theme === 'light' ? 'vs-dark' : 'light');
   }
 
-  function handleConfigChange(e, value) {
+  function handleConfigChange(value) {
     setConfig(value);
   }
 
-  function handleOnInput(e, value) {
+  function handleOnInput(value) {
     setInput(value);
   }