Quotes and apostrophes stripped from style

dovholuknf commented 1 year 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

yarn build is somehow linting CSS and removing double quotes as well as apostrophes. Easily reproduced via the "steps to reproduce" provided

Reproducible demo

No response

Steps to reproduce

npx create-docusaurus@latest my-website classic
cd my-website/
vi src/pages/index.js and replace the Link with <p className={styles.example}>hi</p>
vi src/pages/index.module.css and add the example class: .example { font-family: "anything"; }
run yarn build
run grep -r anything build/*
find font-family:anything in the output as shown

Expected behavior

the quotes should not be stripped. This impacts fonts which are quoted like "Lucinda Sans", "Russo One" etc

Actual behavior

quotes are removed inappropriately

Your environment

Public source code: https://github.com/openziti/ziti-doc/blob/main/docusaurus
Public site URL: N/A
Docusaurus version used: 2.1.0
Environment name and version (e.g. Chrome 89, Node.js 16.4): Brave + Node 18.x
Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows + WSL Ubuntu 20.04 but another discord user reproduced too

Self-service

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

dovholuknf commented 1 year ago

trivial workaround for this issue exists to use a CSS variable. the quotes are not stripped from those. For example adding:

  --welcome-page-font-family: "Russo One", "Open Sans", Tahoma, Helvetica, sans-serif;

and referencing it with:

  font-family: var(--welcome-page-font-family);

can work around the problem

slorber commented 1 year ago

According to my tests, the absence/presence of quotes has no impact 🤷‍♂️

Please prove me with a video of devtools that any of these 2 options would render a fantasy font. It renders Open Sans for me in both cases. Make sure you don't have a typo (it's Lucida and not Lucinda afaik)

There's a --no-minify option to build without the CSS minifier (that removes the quotes).

If you still believe I'm wrong, then you should open a bug on the cssnano repo because it's what removes the quotes: https://github.com/cssnano/cssnano

dovholuknf commented 1 year ago

Did you happen to test in Firefox? Chrome/brave exhibited the behavior for me but Firefox didn't.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family States, "Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers.” so stripping the quotes is a bug. I'll try filling it in the repo you indicate.

slorber commented 1 year ago

Thanks @dovholuknf , the Mozilla doc you link to seems to say so indeed.

In practice it works for me in Firefox, and devtools even underline the currently selected font (nice DX, very convenient)

In both cases quotes or without, the Open Sans font is selected

CleanShot 2022-10-12 at 13 59 31@2x

Firefox for MacOS 102.0.1

So maybe you are theoretically right, but removing the quotes remains a valid pragmatic optimization. 🤷‍♂️

If someone fails for you, please prove it with a screenshot and a firefox version for example, that would help to at least repro it reliably because I currently can't.

We use both cleancss and cssnano, but I can confirm it's cssnano that removes the quotes

slorber commented 1 year ago

Did you happen to test in Firefox? Chrome/brave exhibited the behavior for me but Firefox didn't.

Oh misunderstood your sentence. I tested first in Chrome (latest 106) , and later in Firefox. Both worked fine for me 👍

dovholuknf commented 1 year ago

Thanks @dovholuknf , the Mozilla doc you link to seems to say so indeed.

In practice it works for me in Firefox, and devtools even underline the currently selected font (nice DX, very convenient)

In both cases quotes or without, the Open Sans font is selected

Firefox for MacOS 102.0.1

So maybe you are theoretically right, but removing the quotes remains a valid pragmatic optimization. 🤷‍♂️

If someone fails for you, please prove it with a screenshot and a firefox version for example, that would help to at least repro it reliably because I currently can't.

We use both cleancss and cssnano, but I can confirm it's cssnano that removes the quotes

Sure, I posted this into the discord yesterday and another prolific user in that discord indicated they could replicate. I'll have to find that later today. I'll post it back

facebook / docusaurus