feat(v2): introduce new minification of CSS bundle

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());
+      });
+    };
+  },
+);

packages/docusaurus-theme-classic/src/theme/CodeBlock/styles.module.css

@@ -45,11 +45,7 @@
 }
 
 .codeBlockTitle:hover + .codeBlockContent .copyButton,
-.codeBlockContent:hover > .copyButton {
-  outline: none;
-  opacity: 1;
-}
-
+.codeBlockContent:hover > .copyButton,
 .copyButton:focus {
   opacity: 1;
 }

packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css

@@ -107,11 +107,9 @@
   width: 24px;
 }
 
-/* TODO: Move to Infima */
 :global(.menu__list) :global(.menu__list) {
   overflow-y: hidden;
   will-change: height;
-  /* Same as "arrow" transition */
   transition: height var(--ifm-transition-fast) linear;
 }
 

packages/docusaurus-theme-classic/src/theme/Heading/styles.css

@@ -9,7 +9,6 @@
   display: block;
   position: relative;
   top: -0.5rem;
-  outline: none;
 }
 
 .hash-link {

packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css

@@ -10,7 +10,6 @@
   display: flex;
   height: 10px;
   justify-content: center;
-  position: relative;
   width: 10px;
 }
 .toggle::before {
@@ -25,21 +24,10 @@
  */
 :global(.react-toggle) {
   touch-action: pan-x;
-
   display: inline-block;
   position: relative;
   cursor: pointer;
-  background-color: transparent;
-  border: 0;
-  padding: 0;
-
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
-
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;
 }
@@ -50,7 +38,6 @@
   height: 1px;
   margin: -1px;
   overflow: hidden;
-  padding: 0;
   position: absolute;
   width: 1px;
 }
@@ -62,11 +49,8 @@
 :global(.react-toggle-track) {
   width: 50px;
   height: 24px;
-  padding: 0;
   border-radius: 30px;
   background-color: #4d4d4d;
-  -webkit-transition: all 0.2s ease;
-  -moz-transition: all 0.2s ease;
   transition: all 0.2s ease;
 }
 
@@ -76,21 +60,16 @@
   height: 10px;
   top: 0px;
   bottom: 0px;
-  margin-top: auto;
-  margin-bottom: auto;
+  margin: auto 0;
   line-height: 0;
   left: 8px;
   opacity: 0;
-  -webkit-transition: opacity 0.25s ease;
-  -moz-transition: opacity 0.25s ease;
   transition: opacity 0.25s ease;
 }
 
 :global([data-theme='dark'] .react-toggle .react-toggle-track-check),
 :global(.react-toggle--checked .react-toggle-track-check) {
   opacity: 1;
-  -webkit-transition: opacity 0.25s ease;
-  -moz-transition: opacity 0.25s ease;
   transition: opacity 0.25s ease;
 }
 
@@ -100,13 +79,10 @@
   height: 10px;
   top: 0px;
   bottom: 0px;
-  margin-top: auto;
-  margin-bottom: auto;
+  margin: auto 0;
   line-height: 0;
   right: 10px;
   opacity: 1;
-  -webkit-transition: opacity 0.25s ease;
-  -moz-transition: opacity 0.25s ease;
   transition: opacity 0.25s ease;
 }
 
@@ -125,13 +101,6 @@
   border: 1px solid #4d4d4d;
   border-radius: 50%;
   background-color: #fafafa;
-
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-
-  -webkit-transition: all 0.25s ease;
-  -moz-transition: all 0.25s ease;
   transition: all 0.25s ease;
 }
 
@@ -142,13 +111,9 @@
 }
 
 :global(.react-toggle--focus .react-toggle-thumb) {
-  -webkit-box-shadow: 0px 0px 3px 2px #0099e0;
-  -moz-box-shadow: 0px 0px 3px 2px #0099e0;
   box-shadow: 0px 0px 2px 3px #0099e0;
 }
 
 :global(.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb) {
-  -webkit-box-shadow: 0px 0px 5px 5px #0099e0;
-  -moz-box-shadow: 0px 0px 5px 5px #0099e0;
   box-shadow: 0px 0px 5px 5px #0099e0;
 }

packages/docusaurus/package.json

@@ -45,17 +45,19 @@
     "@babel/preset-typescript": "^7.12.1",
     "@babel/runtime": "^7.12.5",
     "@babel/runtime-corejs3": "^7.12.5",
+    "@docusaurus/cssnano-preset": "2.0.0-alpha.66",
     "@docusaurus/types": "2.0.0-alpha.66",
     "@docusaurus/utils": "2.0.0-alpha.66",
     "@docusaurus/utils-validation": "2.0.0-alpha.66",
     "@endiliey/static-site-generator-webpack-plugin": "^4.0.0",
     "@svgr/webpack": "^5.4.0",
     "babel-loader": "^8.2.1",
-    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "babel-plugin-dynamic-import-node": "^2.3.0",
     "boxen": "^4.2.0",
     "cache-loader": "^4.1.0",
     "chalk": "^3.0.0",
     "chokidar": "^3.4.3",
+    "clean-css": "^4.2.3",
     "commander": "^4.0.1",
     "copy-webpack-plugin": "^6.3.0",
     "core-js": "^2.6.5",

packages/docusaurus/src/client/PendingNavigation.tsx

@@ -13,7 +13,7 @@ import clientLifecyclesDispatcher from './client-lifecycles-dispatcher';
 import preload from './preload';
 import normalizeLocation from './normalizeLocation';
 
-import 'nprogress/nprogress.css';
+import './nprogress.css';
 
 nprogress.configure({showSpinner: false});
 

packages/docusaurus/src/client/nprogress.css

@@ -0,0 +1,36 @@
+/**
+ * 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.
+ */
+
+/**
+ * Styles for NProgress
+ * Copied over to remove unused styles for the spinner.
+ * https://github.com/rstacruz/nprogress/blob/master/nprogress.css
+ */
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #29d;
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+
+#nprogress .peg {
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1;
+  transform: rotate(3deg) translate(0px, -4px);
+}