Semicolon delimiter between font weights breaks Webpack-compiled CSS
Open
- Dominant language
- HTML
- Stars
- 20.5k
- Forks
- 2.9k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 95
Description
The semicolon delimiter used for multiple font weight selections breaks the compiled CSS when using SCSS / Webpack.
SCSS:
```
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
```
Compiled CSS:
```
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;
600&display=swap);
```
I'm assuming Webpack sees the semicolon as a line-ending character and puts the following text on a new line. This causes the import to fail in the compiled CSS.
**Solution**: Using the HTML entity for semicolons (%3B) resolves this issue. Suggesting that this be swapped in the import codes supplied by Google Fonts.
Contributor guide
Assessment
This issue has not been assessed yet.