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>
This commit is contained in:
Alexey Pyltsyn 2020-11-13 16:06:24 +03:00 committed by GitHub
parent 9afe4b5447
commit 487a9f98e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 386 additions and 107 deletions

View file

@ -85,6 +85,14 @@ Compiles your site for production.
| `--out-dir` | `build` | The full path for the new output directory, relative to the current workspace. |
| `--no-minify` | `false` | Build website without minimizing JS/CSS bundles. |
:::info
For advanced minification of CSS bundle, we use the [advanced cssnano preset](https://github.com/cssnano/cssnano/tree/master/packages/cssnano-preset-advanced) (along with additional several PostCSS plugins) and [level 2 optimization of clean-css](https://github.com/jakubpawlowicz/clean-css#level-2-optimizations).
If as a result of this advanced CSS minification you find broken CSS, build your website with the environment variable `USE_SIMPLE_CSS_MINIFIER=true` to minify CSS with the [default cssnano preset](https://github.com/cssnano/cssnano/tree/master/packages/cssnano-preset-default).
**Please [fill out an issue](https://github.com/facebook/docusaurus/issues/new?labels=bug%2C+needs+triage&template=bug.md) if you experience CSS minification bugs.**
:::
### `docusaurus swizzle`
:::caution

View file

@ -103,14 +103,12 @@
}
.indexCtasGetStartedButton {
border: 1px solid var(--ifm-color-primary);
display: inline-block;
border: 2px solid var(--ifm-color-primary);
line-height: 1.2em;
text-decoration: none !important;
text-transform: uppercase;
transition: background 0.3s, color 0.3s;
border-radius: 8px;
border-width: 2px;
color: #fff;
font-size: 24px;
font-weight: bold;