Merge remote-tracking branch 'origin' into lex111/hide-sidebar-reduce…

…-motion

package.json

@@ -29,7 +29,7 @@
     "serve:v2:ssl:message": "echo '\n\n\nServing Docusaurus with HTTPS on localhost requires to disable the Chrome security: chrome://flags/#allow-insecure-localhost\n\n\n'",
     "serve:v2:ssl:serve": "serve website/build --ssl-cert ./website/.docusaurus/selfsigned.crt --ssl-key ./website/.docusaurus/selfsigned.key",
     "changelog": "lerna-changelog",
-    "postinstall": "yarn build:packages",
+    "postinstall": "yarn lock:update && yarn build:packages",
     "prettier": "prettier --config .prettierrc --write \"**/*.{js,ts}\"",
     "prettier:diff": "prettier --config .prettierrc --list-different \"**/*.{js,ts}\"",
     "prettier-docs": "prettier --config .prettierrc --write \"**/*.md\"",
@@ -40,7 +40,7 @@
     "test": "jest",
     "test:build:v2": "./admin/scripts/test-release.sh",
     "watch": "yarn lerna run --parallel --no-private watch",
-    "clear": "yarn workspace docusaurus-2-website clear && yarn lerna exec 'yarn rimraf lib' --ignore docusaurus",
+    "clear": "yarn workspace docusaurus-2-website clear && yarn lerna exec --ignore docusaurus yarn rimraf lib",
     "test:v1Migration:migrate": "rimraf website-1.x-migrated && docusaurus-migrate migrate ./website-1.x ./website-1.x-migrated && sed -i -- 's/docusaurus-1-website/docusaurus-1-website-migrated/g;' website-1.x-migrated/package.json",
     "test:v1Migration:start": "yarn workspace docusaurus-1-website-migrated start",
     "test:v1Migration:build": "yarn workspace docusaurus-1-website-migrated build",
@@ -51,7 +51,8 @@
     "netlify:deployPreview:v1:moveBuild": "mv website-1.x/build/docusaurus website/netlifyDeployPreview/v1",
     "netlify:deployPreview:v1-migrated": "yarn test:v1Migration:migrate && yarn netlify:deployPreview:v1-migrated:setBaseUrl && yarn netlify:deployPreview:v1-migrated:build",
     "netlify:deployPreview:v1-migrated:setBaseUrl": "sed -i -e 's,\"baseUrl\": \"/\",\"baseUrl\": \"/v1-migrated/\",g'  ./website-1.x-migrated/docusaurus.config.js",
-    "netlify:deployPreview:v1-migrated:build": "yarn workspace docusaurus-1-website-migrated build --out-dir=../website/netlifyDeployPreview/v1-migrated"
+    "netlify:deployPreview:v1-migrated:build": "yarn workspace docusaurus-1-website-migrated build --out-dir=../website/netlifyDeployPreview/v1-migrated",
+    "lock:update": "npx yarn-deduplicate"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.1",

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-bootstrap/src/theme/ThemeContext.ts

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import type {ThemeContextProps} from '@theme/hooks/useThemeContext';
+
+const ThemeContext = React.createContext<ThemeContextProps | undefined>(
+  undefined,
+);
+
+export default ThemeContext;

packages/docusaurus-theme-bootstrap/src/theme/ThemedImage/index.tsx

@@ -0,0 +1,53 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import clsx from 'clsx';
+
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useThemeContext from '@theme/hooks/useThemeContext';
+import type {Props} from '@theme/ThemedImage';
+
+import styles from './styles.module.css';
+
+const ThemedImage = (props: Props): JSX.Element => {
+  const {isClient} = useDocusaurusContext();
+  const {isDarkTheme} = useThemeContext();
+  const {sources, className, alt = '', ...propsRest} = props;
+
+  type SourceName = keyof Props['sources'];
+
+  const renderedSourceNames: SourceName[] = isClient
+    ? isDarkTheme
+      ? ['dark']
+      : ['light']
+    : // We need to render both images on the server to avoid flash
+      // See https://github.com/facebook/docusaurus/pull/3730
+      ['light', 'dark'];
+
+  return (
+    <>
+      {renderedSourceNames.map((sourceName) => {
+        return (
+          <img
+            key={sourceName}
+            src={sources[sourceName]}
+            alt={alt}
+            className={clsx(
+              styles.themedImage,
+              styles[`themedImage--${sourceName}`],
+              className,
+            )}
+            {...propsRest}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+export default ThemedImage;

packages/docusaurus-theme-bootstrap/src/theme/ThemedImage/styles.module.css

@@ -0,0 +1,11 @@
+.themedImage {
+  display: none;
+}
+
+html[data-theme='light'] .themedImage--light {
+  display: block;
+}
+
+html[data-theme='dark'] .themedImage--dark {
+  display: block;
+}

packages/docusaurus-theme-bootstrap/src/theme/hooks/useThemeContext.ts

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+
+import {useContext} from 'react';
+
+import ThemeContext from '@theme/ThemeContext';
+import type {ThemeContextProps} from '@theme/hooks/useThemeContext';
+
+// TODO: Un-stub the theme context (#3730)
+function useThemeContext(): ThemeContextProps {
+  const context = useContext<ThemeContextProps | undefined>(ThemeContext);
+  return context == null ? {isDarkTheme: false} : context;
+}
+
+export default useThemeContext;

packages/docusaurus-theme-bootstrap/src/types.d.ts

@@ -78,7 +78,7 @@ declare module '@theme/DocSidebar' {
 }
 
 declare module '@theme/Tabs' {
-  import type {ReactElement, ReactNode} from 'react';
+  import type {ReactElement} from 'react';
 
   export type Props = {
     readonly block?: boolean;
@@ -88,10 +88,24 @@ declare module '@theme/Tabs' {
     readonly groupId?: string;
   };
 
-  const Tabs: () => JSX.Element;
+  const Tabs: (props: Props) => JSX.Element;
   export default Tabs;
 }
 
+declare module '@theme/ThemedImage' {
+  import type {ComponentProps} from 'react';
+
+  export type Props = {
+    readonly sources: {
+      readonly light: string;
+      readonly dark: string;
+    };
+  } & Omit<ComponentProps<'img'>, 'src'>;
+
+  const ThemedImage: (props: Props) => JSX.Element;
+  export default ThemedImage;
+}
+
 declare module '@theme/Footer' {
   const Footer: () => JSX.Element | null;
   export default Footer;
@@ -125,6 +139,14 @@ declare module '@theme/hooks/useLogo' {
   export default useLogo;
 }
 
+declare module '@theme/hooks/useThemeContext' {
+  export type ThemeContextProps = {
+    isDarkTheme: boolean;
+  };
+
+  export default function useThemeContext(): ThemeContextProps;
+}
+
 declare module '@theme/Layout' {
   import type {ReactNode} from 'react';
 

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 {