docs: run cssnano 5 in the playground

Can only use the lite config as postcss-declaration-sorter does not work in the browser.
cssnano · Apr 2, 2021 · abdd5de · abdd5de
1 parent 8ac5bfe
commit abdd5de
Show file tree

Hide file tree

Showing 4 changed files with 455 additions and 87 deletions.
diff --git a/site/package.json b/site/package.json
@@ -13,9 +13,10 @@
     "@docusaurus/preset-classic": "^2.0.0-alpha.72",
     "@monaco-editor/react": "^4.1.1",
     "classnames": "^2.3.0",
-    "cssnano-preset-advanced": "^4.0.7",
-    "cssnano-preset-default": "^4.0.7",
-    "cssnano-preset-lite": "^1.0.0",
+    "classnames": "^2.2.6",
+    "cssnano-preset-advanced": "^5.0.0-rc.2",
+    "cssnano-preset-default": "^5.0.0-rc.2",
+    "cssnano-preset-lite": "^2.0.0-rc.2",
     "postcss": "^8.2.6",
     "prettier": "^2.2.1",
     "react": "^17.0.2",
@@ -33,5 +34,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {}
 }
diff --git a/site/src/components/editor/postcss_runner.js b/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));

diff --git a/site/src/pages/playground.js b/site/src/pages/playground.js
@@ -28,7 +28,7 @@ export default () => {
       input: '/* write your css below */',
       config: `// cssnano config
 {
-  "preset" : "default",
+  "preset" : "lite", // online playground can use only the "lite" preset
 }
 `,
     };