css minification of @counter-style fails

levino 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.
[X] I have tried creating a repro with https://new.docusaurus.io.
[X] I have read the console error message carefully (if applicable).

Description

I cannot get this css to minify:

/**
 * 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.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #2e8555;
  --ifm-color-primary-dark: #29784c;
  --ifm-color-primary-darker: #277148;
  --ifm-color-primary-darkest: #205d3b;
  --ifm-color-primary-light: #33925d;
  --ifm-color-primary-lighter: #359962;
  --ifm-color-primary-lightest: #3cad6e;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

@counter-style braced-decimal {
  system: extends decimal;
  suffix: ') ';
  prefix: '(';
}

.legal {
  ol {
    list-style-type: braced-decimal;
  }

  ol.non-legal {
    list-style-type: decimal;
  }

  h3::before {
    counter-increment: paragraph-counter;
    content: '§ ' counter(paragraph-counter);
    margin-right: 0.5em;
  }

  counter-reset: paragraph-counter;
}

.paragraphHeadings {
  counter-reset: paragraph-counter;

  h3::before {
    counter-increment: paragraph-counter;
    content: '§ ' counter(paragraph-counter);
    margin-right: 0.5em;
  }
}

It works during development fine. However when I try to build, I get:

[WARNING] {"message":"assets/css/styles.689770c5.css from Css Minimizer plugin\nUnexpected '}' at assets/css/styles.689770c5.css:25:27844.","compilerPath":"client"}
[WARNING] {"message":"assets/css/styles.689770c5.css from Css Minimizer plugin\nInvalid property name 'ol{list-style-type' at assets/css/styles.689770c5.css:25:27714. Ignoring.","compilerPath":"client"}

The problem is the custom @counter-style! It seems like using it makes nanocss (or postcss) break.

Reproducible demo

No response

Steps to reproduce

Use above file as a custom.css and try to build.

Expected behavior

Build just works.

Actual behavior

Build works but css is broken. Styles are not applied.

Your environment

No response

Self-service

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

levino commented 1 month ago

Cannot reproduce on fresh docusaurus project. Will investigate and close until then.

levino commented 1 month ago

Turns out, my css was illegal. The following works fine:

/**
 * 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.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #2e8555;
  --ifm-color-primary-dark: #29784c;
  --ifm-color-primary-darker: #277148;
  --ifm-color-primary-darkest: #205d3b;
  --ifm-color-primary-light: #33925d;
  --ifm-color-primary-lighter: #359962;
  --ifm-color-primary-lightest: #3cad6e;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

@counter-style braced-decimal {
  system: extends decimal;
  suffix: ') ';
  prefix: '(';
}

.legal ol {
  list-style-type: braced-decimal;
}

.legal ol.non-legal {
  list-style-type: decimal;
}

.legal h3::before {
  counter-increment: paragraph-counter;
  content: '§ ' counter(paragraph-counter);
  margin-right: 0.5em;
}

.legal {
  counter-reset: paragraph-counter;
}

.paragraphHeadings {
  counter-reset: paragraph-counter;
}

.paragraphHeadings h3::before {
  counter-increment: paragraph-counter;
  content: '§ ' counter(paragraph-counter);
  margin-right: 0.5em;
}

Sorry for the spam.

slorber commented 1 month ago

Our current CSS setup doesn't support CSS nesting, duplicate of https://github.com/facebook/docusaurus/issues/9303

facebook / docusaurus