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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions