Skip to content

Unkown word Error due to font name typing syntax in CSS #2042

@hazho

Description

@hazho

🐛 Bug Report: Incorrect Handling of Font Names in font-family Property

Summary:

When parsing CSS that includes font names with spaces or special characters in the font-family property, PostCSS incorrectly identifies parts of the font names and adjacent punctuation as unknown words.​

Example CSS:

html, body, td {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Observed Behavior:

During parsing, the following warnings are logged:

Unknown word: "Helvetica" at offset 86
Unknown word: "," at offset 105
Unknown word: "Segoe" at offset 123
Unknown word: "," at offset 136

Expected Behavior:

Font names, including those with spaces and enclosed in quotes, as well as commas separating them, should be correctly recognized as valid parts of the font-family property and not flagged as unknown words.​

Environment:

PostCSS Version: 8.4.31
CSS Parser Plugin: Used within GrapesJS
Browser: any
Operating System: any​

Additional Context:

This issue was encountered while using PostCSS as a plugin within GrapesJS. The parser seems to misinterpret certain font names and punctuation in the font-family property, leading to incorrect warnings about unknown words.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions