feat(v2): introduce new minification of CSS bundle (#3716)

* feat(v2): optimize CSS bundle

* Move to separate preset

* Move custom scrollbar styles to separate class

* Cleanup styles

* Remove unactual styles

* Various CSS optimizations, cleanup styles for NProgress

* Add ability to back to old way of minifying CSS

* chore(v2): downgrade babel-plugin-dynamic-import-node to 2.3.0

* Use env var for back to simple CSS minifier

* remove unnecessary typing [skip-ci]

* Remove missing dep

* Update website/docs/cli.md

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>

packages/docusaurus-cssnano-preset/index.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const advancedBasePreset = require('cssnano-preset-advanced');
+const postCssCombineDuplicatedSelectors = require('postcss-combine-duplicated-selectors');
+const postCssSortMediaQueries = require('postcss-sort-media-queries');
+const postCssRemoveOverriddenCustomProperties = require('./src/remove-overridden-custom-properties');
+
+const preset = advancedBasePreset({autoprefixer: {add: true}});
+
+preset.plugins.unshift(
+  [postCssCombineDuplicatedSelectors, {removeDuplicatedProperties: true}],
+  [postCssSortMediaQueries],
+  [postCssRemoveOverriddenCustomProperties],
+);
+
+module.exports = preset;

packages/docusaurus-cssnano-preset/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@docusaurus/cssnano-preset",
+  "version": "2.0.0-alpha.66",
+  "description": "Advanced cssnano preset for maximum optimization",
+  "main": "index.js",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/docusaurus.git",
+    "directory": "packages/docusaurus-cssnano-preset"
+  },
+  "dependencies": {
+    "postcss": "^7.0.2",
+    "postcss-combine-duplicated-selectors": "^9.1.0",
+    "postcss-sort-media-queries": "^1.7.26",
+    "cssnano-preset-advanced": "^4.0.7"
+  },
+  "devDependencies": {
+    "to-vfile": "^6.0.0"
+  }
+}

packages/docusaurus-cssnano-preset/src/remove-overridden-custom-properties/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`remove-overridden-custom-properties overridden custom properties should be removed 1`] = `
+":root {
+  --color-secondary: green;
+  --color-primary: blue;
+  --color-header: gray;
+}
+"
+`;
+
+exports[`remove-overridden-custom-properties overridden custom properties with \`!important\` rule should not be removed 1`] = `
+":root {
+  --color-primary: blue;
+  --color-header: gray !important;
+  --color-secondary: yellow !important;
+}
+"
+`;

packages/docusaurus-cssnano-preset/src/remove-overridden-custom-properties/__tests__/fixtures/important_rule.css

@@ -0,0 +1,8 @@
+:root {
+  --color-primary: red;
+  --color-secondary: green;
+  --color-primary: blue;
+  --color-header: gray !important;
+  --color-header: black;
+  --color-secondary: yellow !important;
+}

packages/docusaurus-cssnano-preset/src/remove-overridden-custom-properties/__tests__/fixtures/normal.css

@@ -0,0 +1,7 @@
+:root {
+  --color-primary: red;
+  --color-primary: red;
+  --color-secondary: green;
+  --color-primary: blue;
+  --color-header: gray;
+}

packages/docusaurus-cssnano-preset/src/remove-overridden-custom-properties/__tests__/index.test.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const path = require('path');
+const vfile = require('to-vfile');
+const postcss = require('postcss');
+const postCssRemoveOverriddenCustomProperties = require('../index');
+
+const processFixture = (name) => {
+  const input = vfile.readSync(
+    path.join(__dirname, 'fixtures', `${name}.css`),
+    'utf8',
+  );
+  const output = postcss([postCssRemoveOverriddenCustomProperties]).process(
+    input,
+  );
+
+  return output.css;
+};
+
+describe('remove-overridden-custom-properties', () => {
+  test('overridden custom properties should be removed', () => {
+    expect(processFixture('normal')).toMatchSnapshot();
+  });
+
+  test('overridden custom properties with `!important` rule should not be removed', () => {
+    expect(processFixture('important_rule')).toMatchSnapshot();
+  });
+});

packages/docusaurus-cssnano-preset/src/remove-overridden-custom-properties/index.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const postcss = require('postcss');
+
+/*
+This PostCSS plugin will remove duplicate/same custom properties (which are actually overridden ones) **only** from `:root` selector.
+
+Depending on the presence of an `!important` rule in value of custom property, the following actions will happens:
+
+- If the same custom properties do **not** have an `!important` rule, then all of them will be removed except for the last one (which will actually be applied).
+- If the same custom properties have at least one `!important` rule, then only those properties that do not have this rule will be removed.
+*/
+
+module.exports = postcss.plugin(
+  'postcss-remove-overridden-custom-properties',
+  () => {
+    return (root) => {
+      root.walkDecls((decl) => {
+        if (decl.parent.selector !== ':root') {
+          return;
+        }
+
+        const sameProperties =
+          decl.parent.nodes.filter((n) => n.prop === decl.prop) || [];
+        const hasImportantProperties = sameProperties.some((p) =>
+          p.hasOwnProperty('important'),
+        );
+
+        const overriddenProperties = hasImportantProperties
+          ? sameProperties.filter((p) => !p.hasOwnProperty('important'))
+          : sameProperties.slice(0, -1);
+
+        overriddenProperties.map((p) => p.remove());
+      });
+    };
+  },
+);