--ifm-color-primary not used unless USE_SIMPLE_CSS_MINIFIER=true is set

MSohm commented 1 month ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] I'm using the latest version of Docusaurus.
[X] I have tried the npm run clear or yarn clear command.
[X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
[ ] I have tried creating a repro with https://new.docusaurus.io.
[ ] I have read the console error message carefully (if applicable).

Description

The custom theme colours (and possibly other CSS) is not applied after yarn build. The custom css is used for yarn start. If I set the environment variable USE_SIMPLE_CSS_MINIFIER to true, the custom css is available in the production build.

Workaround Sent the environment variable USE_SIMPLE_CSS_MINIFIER to true.

Reproducible demo

CodeSandbox-Demo

Steps to reproduce

Steps to Reproduce

Use the custom.css below.
Ensure USE_SIMPLE_CSS_MINIFIER is not set (or set to false).
Run yarn start and observe the hero background and links are orange.
Run yarn build
Run yarn serve

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* Custom fonts */
@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 900;
    font-stretch: 75% 125%;
}

html {
    font-family: 'Figtree';
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Figtree';
}

/* You can override the default Infima variables here. */
:root {
    --ifm-color-primary: #f26336;
    --ifm-color-primary-dark: #f04d1a;
    --ifm-color-primary-darker: #ec440f;
    --ifm-color-primary-darkest: #c3380d;
    --ifm-color-primary-light: #f47952;
    --ifm-color-primary-lighter: #f58360;
    --ifm-color-primary-lightest: #f7a489;
    --ifm-code-font-size: 95%;
    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);

    /* Docusaurus theme background colors */
    --doc-light-theme-background: #e3e3e3;
    --doc-dark-theme-background: #1c1e21;

    --doc-dark-theme-content: #e3e3e3;
    --doc-light-theme-content: #1c1e21;

    --ifm-font-size-base: 110%;

    article header h1 {
        font-size: 2.5rem !important;
    }

    .table-of-contents {
        font-size: 0.9rem;
    }

    /* Copied from dev portal global.css */
    --header-height: 60px;

    /* Legacy Colours */
    --slate: #2e2e2e;
    --naval: #293643;
    --burnt-orange: #bf4320;
    --deep-orange: #7e2d16;
    --smoke: #f2f2f2;
    --white: #ffffff;
    --deep-cyan: #2b5776;
    --copper: #b67935;
    --emerald: #3e8551;
    --black: #000000;
    --grey: #d9d9d9;
    --light-grey: #e5e5e5;
    --neutral-grey: #d9d9d9;
    --snow: #fafafa;
    --azure-grey: #4a4e57;
    --tricorn-black: #282828;
    --smoke: #f2f2f2;

    /* New Colours */
    --dark-grey: #2a3135;
    --teal: #007484;
    --light-teal: #53ced6;
    --beige: #f5f2ea;
    --white: #ffffff;
    --background: #fafafa;
    --black: #000000;
    --error-red: #ca3232;
    --orange: #ff6230;
    --grey-f4: #f4f4f4;
    --grey-e5: #e5e5e5;
    --grey-d9: #d9d9d9;
    --grey-c8: #c8c8c8;
    --muted-orange: #fce0d7;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
    --ifm-color-primary: #f26336;
    --ifm-color-primary-dark: #f04d1a;
    --ifm-color-primary-darker: #ec440f;
    --ifm-color-primary-darkest: #c3380d;
    --ifm-color-primary-light: #f47952;
    --ifm-color-primary-lighter: #f58360;
    --ifm-color-primary-lightest: #f7a489;
    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/* Used to prevent a doc from appearing in the autogenerated sidebard */
.hiddenDoc {
    display: none !important;
}

Expected behavior

The hero background and links are orange.

Actual behavior

The hero background and links are blue.

Your environment

Public source code: Not available
Public site URL: Still a work in progress
Docusaurus version used: 3.5.2
Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 128.0.6613.138, Node v20.11.1, Yarn 1.22.19
Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 14.6.1

Self-service

[ ] I'd be willing to fix this bug myself.

Josh-Cena commented 1 month ago

I'm fairly sure this is because of https://github.com/facebook/docusaurus/issues/9303. The problem is not with --ifm-color-primary (everyone uses it including ourselves so the chance of it not working is 0). It's with the CSS nesting syntax you are using, which invalidates :root. It works once you take them out.

slorber commented 1 month ago

yes that looks like it's the same CSS nesting issue

MSohm commented 1 month ago

I found the root cause was an incorrect path to the font. If I change:

@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 900;
    font-stretch: 75% 125%;
}

To (remove static from the path)

@font-face {
    font-family: 'Figtree';
    src: url('/fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 900;
    font-stretch: 75% 125%;
}

It works.

facebook / docusaurus