Custom css not loaded the same way with yarn start and yarn build

[ArtFlag]

🐛 Bug Report

I have a simple setup using the classic theme in which I've modified the admonition styling.

In my case, I have only overridden the admonition class and admonition-tip|note|important classes. I didn't touch the alert class which is also used in the admonitions.

• When I build my output with yarn start I get this, which I what I expect:

• When I build my output with yarn build I get this, which is unexpected:

Somehow, the classes are not in the same order, which might be the reason (??).

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Add some admonition classes to custom.css
2. Build with yarn start
3. Build with yarn build
4. Compare

Expected behavior

I should get the same visual output.

Actual Behavior

I do not get the same visual output.

Your Environment

• Docusaurus version used:

 "dependencies": {
    "@docusaurus/core": "2.0.0-alpha.70",
    "@docusaurus/preset-classic": "2.0.0-alpha.70",
    "@docusaurus/theme-search-algolia": "^2.0.0-alpha.70",
    "@mdx-js/react": "^1.6.21",
    "antd": "^4.9.4",
    "clsx": "^1.1.1",
    "core-js": "^3.8.1",
    "docusaurus-plugin-sass": "^0.1.11",
    "mobx": "^6.0.4",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "redoc": "^2.0.0-rc.45",
    "redocusaurus": "^0.2.2",
    "styled-components": "^5.2.1"
  },

• Environment name and version: Node v15.3.0. FF 85.0.2. Chrome 88.0.4324.150
• Operating system and version:MacOs 10.15.7

Reproducible Demo

See codesandbox but obviously that's not going to help build the packaged app.

[slorber]

I suspect this is related to #3678

We should find a way to ensure that the custom CSS provided by the user is always at the end of the stylesheet and allows to override properly the theme CSS modules + infima

[slorber]

@ArtFlag can you try the @canary npm dist tag and see if your issue is fixed by #4240 ?

Otherwise we'll re-open

[ArtFlag]

Hi Sébastien,

Thanks for the quick action and follow-up 👍

If using the canary dist is just about yarn remove docusaurus && yarn install docusaurus@canary, then I experience the same problem 😢

If not, then how should I use the canary dist?

[lex111]

Apparently the canary release for fix to this issue was not created https://github.com/facebook/docusaurus/runs/1927814807

[slorber]

@ArtFlag you can use canary versions found in https://www.npmjs.com/package/@docusaurus/core

    "@docusaurus/core": "2.0.0-alpha.a58baacdc",
    "@docusaurus/preset-classic": "2.0.0-alpha.a58baacdc",

[ArtFlag]

Using these versions, I get scss modules errors in 2 of my components that I didn't have with the latest non-canary versions:

ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'onlyLocals'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }

 @ ./docs/dev/entities.mdx
 @ ./.docusaurus/registry.js
 @ ./node_modules/@docusaurus/core/lib/client/exports/ComponentCreator.js
 @ ./.docusaurus/routes.js
 @ ./node_modules/@docusaurus/core/lib/client/clientEntry.js
 @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/@docusaurus/core/lib/client/clientEntry.js

I'm still using "docusaurus-plugin-sass": "^0.1.11". Is it expected or am I doing something wrong?

[slorber]

Yes there's a bug in the sass plugin after we upgraded some depenczncies I've opened a PR but it's not merged yet, but you can use the git fork as dependency temporarily Le sam. 20 févr. 2021 à 16:35, Arthur <[email protected]> a écrit :

…

Using these versions, I get scss modules errors in 2 of my components that I didn't have with the latest non-canary versions: ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'onlyLocals'. These properties are valid: object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? } @ ./docs/dev/entities.mdx @ ./.docusaurus/registry.js @ .***@***.***/core/lib/client/exports/ComponentCreator.js @ ./.docusaurus/routes.js @ .***@***.***/core/lib/client/clientEntry.js @ multi ./node_modules/react-dev-utils/webpackHotDevClient.js .***@***.***/core/lib/client/clientEntry.js I'm still using "docusaurus-plugin-sass": "^0.1.11". Is it expected or am I doing something wrong? — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#4231 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFW6PU5N4ARYBW6OEEXRIDS77JE3ANCNFSM4XX34IZQ> .

[ArtFlag]

Your fix works 🥳 !

Thanks 👍