Merge pull request #310 from pocketjoso/fix-font-family-case-insensitive

Fix font family case insensitive
pocketjoso · Oct 1, 2020 · 4488c32 · 4488c32
2 parents b6a6b46 + ffc4c12
commit 4488c32
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/src/postformatting/unused-fontface-remover.js b/src/postformatting/unused-fontface-remover.js
@@ -28,7 +28,7 @@ function getAllFontNameValues (ast) {
             const familyName = decodeFontName({
               type: 'Value',
               children: entry.nodes
-            })
+            }).toLowerCase()
             if (!fontNameValues.has(familyName)) {
               debuglog('found used font-family: ' + familyName)
               fontNameValues.add(familyName)
@@ -64,7 +64,7 @@ export default function unusedFontfaceRemover (ast) {
           const name = csstree.property(declaration.property).name
 
           if (name === 'font-family') {
-            const familyName = decodeFontName(declaration.value)
+            const familyName = decodeFontName(declaration.value).toLowerCase()
 
             // was this @font-face used?
             if (!fontNameValues.has(familyName)) {

diff --git a/test/post-formatting.test.js b/test/post-formatting.test.js
@@ -85,6 +85,19 @@ describe('penthouse post formatting tests', () => {
     expect(csstree.generate(ast)).toEqual(normaliseCss(expectedCss))
   })
 
+  it('should treat font-family names as case-insensitive', () => {
+    // contains mismatched case for font-name between @font-face and usage ("Roboto" vs "roboto")
+    // - should be kept regardless
+    const cssString = "@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local('Roboto Light')}#one{color:red;font-family:'roboto';font-weight:300}#one{color:blue}"
+    return penthouse({
+      url: staticServerFileUrl('case-sensitive.html'),
+      cssString
+    })
+      .then(css => {
+        expect(css).toEqual(normaliseCss(cssString))
+      })
+  })
+
   it('should only keep @keyframe rules used in critical css', () => {
     const originalCss = read(path.join(process.env.PWD, 'test', 'static-server', 'unused-keyframes.css'), 'utf8')
     const expectedCss = read(path.join(process.env.PWD, 'test', 'static-server', 'unused-keyframes--expected.css'), 'utf8')

diff --git a/test/static-server/case-sensitive.html b/test/static-server/case-sensitive.html
@@ -0,0 +1,7 @@
+<html>
+<head>
+</head>
+<body>
+    <div id="one">Lorem ipsum</div>
+</body>
+</html>