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