Merge pull request #1126 from ReactTooltip/fix/docs-css

fix: custom css was broken on docs on production build

Author: danielbarion

README.md

@@ -72,6 +72,14 @@ React Tooltip is proud to be sponsored by [Frigade](https://frigade.com/?source=
   <img alt="Dopt" style="height: 200px; width: 200px;" src="docs/static/img/sponsors/dopt.png" />
 </a>
 
+## Powered by
+
+<p>
+  <a href="https://www.digitalocean.com/?refcode=0813b3be1161&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge">
+    <img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_blue.svg" width="201px">
+  </a>
+</p>
+
 ## Usage
 
 1 . Import the CSS file to set default styling.
@@ -135,14 +143,6 @@ Please check our [troubleshooting section](https://react-tooltip.com/docs/troubl
 If you can't find your problem here, make sure there isn't [an open issue](https://github.com/ReactTooltip/react-tooltip/issues) already covering it.
 If there isn't, feel free to [submit a new issue](https://github.com/ReactTooltip/react-tooltip/issues/new/choose).
 
-## Powered by
-
-<p>
-  <a href="https://www.digitalocean.com/?refcode=0813b3be1161&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge">
-    <img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_blue.svg" width="201px">
-  </a>
-</p>
-
 ## Article
 
 [How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)

docs/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
   presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
-};
+}

docs/docusaurus.config.js

@@ -1,10 +1,24 @@
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable max-len */
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
 const lightCodeTheme = require('prism-react-renderer/themes/github')
 const darkCodeTheme = require('prism-react-renderer/themes/dracula')
+const postcssPresetEnv = require('postcss-preset-env')
+
+/** @return {import('@docusaurus/types').Plugin} */
+function customPostCssPlugin() {
+  return {
+    name: 'custom-postcss',
+    configurePostCss(options) {
+      // Append new PostCSS plugins here.
+      options.plugins.push(postcssPresetEnv) // allow newest CSS syntax
+      return options
+    },
+  }
+}
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -29,6 +43,8 @@ const config = {
     locales: ['en'],
   },
 
+  plugins: [customPostCssPlugin],
+
   scripts: [
     // {
     //   src: 'https://securepubads.g.doubleclick.net/tag/js/gpt.js',

docs/package.json

@@ -15,8 +15,8 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.4.1",
-    "@docusaurus/preset-classic": "^2.4.1",
+    "@docusaurus/core": "2.4.3",
+    "@docusaurus/preset-classic": "2.4.3",
     "@mdx-js/react": "1.6.22",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
@@ -28,6 +28,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^2.4.1",
     "@tsconfig/docusaurus": "^1.0.5",
+    "postcss-preset-env": "^9.3.0",
     "typescript": "4.9.5"
   },
   "browserslist": {