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

Used fonts are improperly discarded #726

Closed
GreenGremlin opened this issue Mar 26, 2019 · 6 comments
Closed

Used fonts are improperly discarded #726

GreenGremlin opened this issue Mar 26, 2019 · 6 comments
Labels
Milestone

Comments

@GreenGremlin
Copy link

GreenGremlin commented Mar 26, 2019

Given the following css:

@font-face {
    font-family: 'FontAwesome';
    src: url('/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
         url('/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff');
}

.icon {
    font: normal normal normal 14px/1 FontAwesome;
}

...the FontAwesome @font-face definition is improperly removed. This appears to be the expected behavior, however this is valid css and should properly be detected as a use of the font. Would you be open to a PR that adds support for proper font use detection with mixed quote styles?

@alexander-akait
Copy link
Member

@GreenGremlin i don't understand you, removing @font-face is unsafe operation so we don't do this. Please prove more information. What you actually have and what you expected.

@GreenGremlin
Copy link
Author

I apologize, I should have mentioned that I'm using the postcss-discard-unused plugin specifically to remove unused css from a concatenated css file. I believe this is also possible through cssnano using the discardUnused option. The problem is that, in this case, it is removing a font that is actually used.

@alexander-akait
Copy link
Member

@GreenGremlin can you provide example or minimum reproducible test repo?

@GreenGremlin
Copy link
Author

GreenGremlin commented Mar 27, 2019

I just created #727 to fix the issue. The code block above is a decent, minimal example. Simply processing that block of css through postcss with the postcss-discard-unused plugin enabled with the default settings will produce the bug.

const rawCss = `
    @font-face {
        font-family: 'FontAwesome';
        src: url('/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
             url('/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff');
    }
    .icon {
        font: normal normal normal 14px/1 FontAwesome;
    }
`;
const {css: processedCss} = postcss([postcssDiscardUnused]).process(rawCss);

console.assert(processedCss === rawCss);
> AssertionError [ERR_ASSERTION]: false == true
    at Console.assert (console.js:194:23)

console.info(processedCss);
>    .icon {
>            font: normal normal normal 14px/1 FontAwesome;
>    }

The fontAwesome @font-face should not be discarded, but it is.

@smac89
Copy link

smac89 commented May 2, 2019

In case anyone stumbles upon this problem, may I suggest making sure that your fontawesome.css file does not have something like:

i @font-face {
  font-family: 'FontAwesome';
  src: url('../../fonts/vendor/fontawesome-webfont.eot?v=4.1.0');
  src: url('../../fonts/vendor/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../../fonts/vendor/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../../fonts/vendor/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../../fonts/vendor/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

I'm talking about the extra i prepended to the font declaration. After I removed the offending character, cssnano worked for me.

@ludofischer
Copy link
Collaborator

This seems fixed in 5.0.0-rc.2

@ludofischer ludofischer added this to the 5.0.0 milestone Mar 31, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants