Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Correct handling of <family-name> in font-family #120

Closed
yisibl opened this issue Mar 22, 2022 · 4 comments
Closed

Correct handling of <family-name> in font-family #120

yisibl opened this issue Mar 22, 2022 · 4 comments
Labels
bug Something isn't working

Comments

@yisibl
Copy link
Contributor

yisibl commented Mar 22, 2022

Input

.foo {
  font-family: 'sans-serif', 'default';
}

Output

.foo {
  font-family: sans-serif, default;
}

image

Expected

.foo {
  font-family: 'sans-serif', 'default';
}

font-family: sans-serif means that a generic sans-serif font family will be used, while font-family: 'sans-serif' (with quotes) refers to an actual font that goes by the name of sans-serif.

CSS Spec

Note: this means that if you really have a font whose name is the same as one of the names, or the common-keywords|CSS-wide keyword values, it must be quoted.

To illustrate this, the following unusual font family names are valid because they are quoted:
font-family: "sans-serif", sans-serif;
font-family: "default", sans-serif;
font-family: "initial", sans-serif;
font-family: "inherit", sans-serif;

The full CSS-wide keyword(common-keywords) and <generic-family> in the current specification include:

CSS-wide keyword

https://www.w3.org/TR/css-values-4/#common-keywords

"initial"
"inherit"
"unset"

<generic-family>

https://www.w3.org/TR/css-fonts-4/#generic-font-families

"serif"
"sans-serif"
"cursive"
"fantasy"
"monospace"
"system-ui"
"emoji"
"math"
"fangsong"
"ui-serif"
"ui-sans-serif"
"ui-monospace"
"ui-rounded"

Here's a lint tool: https://mothereff.in/font-family

@devongovett
Copy link
Member

Fixed by facbffd

@yisibl
Copy link
Contributor Author

yisibl commented Mar 24, 2022

There are more case test failures:

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#valid_family_names

Input

.foo {
  font-family: "Goudy Bookletter 1911", sans-serif;
  font-family: "test@foo", sans-serif;
  font-family: "#POUND", sans-serif;
  font-family: "Hawaii 5-0", sans-serif;  
}

.bar {
  font-family: "Red/Black", sans-serif;
}

Output

.foo{font-family:"Hawaii 5-0",sans-serif}
.bar{font-family:Red\/Black,sans-serif}

Expected

.foo{font-family:"Goudy Bookletter 1911",sans-serif;font-family:"test@foo",sans-serif;font-family:"#POUND",sans-serif;font-family:"Hawaii 5-0",sans-serif}
.bar{font-family:"Red/Black",sans-serif}

@devongovett
Copy link
Member

What's invalid in that output? Looks like the identifier is properly escaped?

@yisibl
Copy link
Contributor Author

yisibl commented Mar 25, 2022

@devongovett I added the expected results.

mischnic pushed a commit to mischnic/rust-css-transformer that referenced this issue Apr 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants