facebook / facebook/docusaurus

Ensure proper and stable CSS insertion ordering

Open
#3,678 19 comments 2 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

Edit: this issue is now about ensuring that we have a properly specified CSS insertion ordering with the ability to prevent regressions.

For Docusaurus 2.0 (https://github.com/facebook/docusaurus/issues/6113), CSS insertion ordering should become stable and documented. Upgrading Docusaurus should not lead to a different CSS ordering in particular for user-provided custom CSS.

See also https://github.com/facebook/docusaurus/pull/5987#issuecomment-975307942

---

Original bug report below:

## 🐛 Bug Report

During a little refactoring, I realized that the custom CSS files content is **not** at the end of final CSS file `styles.css` (as it expected). This makes it impossible to override the Docusaurus component styles without applying the `!important` rule (which in turn is bad practice).

@slorber could you please investigate this issue? Can we "force" the custom CSS content to be at the end of all other styles?

By the example of Docusaurus website you can see that custom CSS is somewhere in the middle of bundled CSS file.

![image](https://user-images.githubusercontent.com/4408379/97970313-659c1e80-1dd2-11eb-8c15-a2bb3875e502.png)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.