search

css / csso

CSS minifier with structural optimizations
https://css.github.io/csso/csso.html
MIT License
3.74k stars 189 forks source link

escaped dashicon not working #455

Open mmjaeger opened 2 years ago

mmjaeger commented 2 years ago

Hello the following code isn't working after compressing: `a.read-more { font-size: 0.8em; text-transform: uppercase;

&:after {
    font-family: "dashicons";
    content: '\f344'; // arrow-right
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 16px/1;
    vertical-align: middle;

   margin-bottom: 2px;
    margin-left: 5px;    
}

}`

this line fails: content: '\f344'; // arrow-right - it ends up as empty string !!

how this gets fixed soon.

mmjaeger commented 2 years ago

actually that's not all - the whole font-family declaration is stripped as well !!!!!

dryabov commented 2 years ago

Do you apply CSSO before CSS preprocessor?

mmjaeger commented 2 years ago

couldn't tell you - it is a built in feature to use CSSO in the codekit app (https://codekitapp.com) - you may want to get in touch with that developer but as I said escaped strings turn out to be empty and yesterday I discovered that the whole font-family declaration was removed as well.

On Thu, May 19, 2022 at 2:12 AM Denis Ryabov @.***> wrote:

Do you apply CSSO before CSS preprocessor?

— Reply to this email directly, view it on GitHub https://github.com/css/csso/issues/455#issuecomment-1131445251, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAL3RFDOIWY4Y76YBFN7SITVKYAXPANCNFSM5WCH6SOQ . You are receiving this because you authored the thread.Message ID: @.***>

-- Marco M. Jaeger h http://net4visions.comttps://mmjaeger.com || https://www.instagram.com/marco.m.jaeger

dryabov commented 2 years ago

Seems I've found where the issue comes from. Usually the font property (in your example it is font: normal 16px/1) overrides all previous font-* properties. But in you example the font rule is malformed (font family is not specified), and so the browser drops it and uses previous font-family rule. In turn, CSSO firstly detects that font rule exist and previous font-family rule may be removed, and then it founds that font is malformed and may be safely removed too. As a result, both font-related properties are removed.

Most likely, the simplest solution is to fix the font property, e.g. by including font family there (font: normal 16px/1 "dashicons").

mmjaeger commented 2 years ago

Not sure whether I'm following you - I do have a font family declaration in my scss file - it gets fully stripped when compressing - this is the full scss:

/* Read more

*/ a.read-more { font-size: 0.8em; text-transform: uppercase;

&:after {
    font-family: "dashicons";
    content: '\f344'; // arrow-right
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 16px/1;
    vertical-align: middle;

margin-bottom: 2px; margin-left: 5px; } }

On Thu, May 19, 2022 at 5:01 AM Denis Ryabov @.***> wrote:

Seems I've found where the issue comes from. Usually the font property (in your example it is font: normal 16px/1) overrides all previous font-* properties. But in you example the font rule is malformed (font family is not specified), and so the browser drops it and uses previous font-family rule. In turn, CSSO firstly detects that font rule exist and previous font-family rule may be removed, and then it founds that font is malformed and may be safely removed too. As a result, both font-related properties are removed.

Most likely, the simplest solution is to fix the font property, e.g. by including font family there (font: normal 16px/1 "dashicons").

— Reply to this email directly, view it on GitHub https://github.com/css/csso/issues/455#issuecomment-1131600258, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAL3RFDJONWO5INTMEZOVITVKYUSXANCNFSM5WCH6SOQ . You are receiving this because you authored the thread.Message ID: @.***>

-- Marco M. Jaeger h http://net4visions.comttps://mmjaeger.com || https://www.instagram.com/marco.m.jaeger

mmjaeger commented 2 years ago

tried to replace what I had with your font declaration - not working - this is what I'm getting:

a.read-more{font-size:.8em;text-transform:uppercase}a.read-more:after{content:"";display:inline-block;-webkit-font-smoothing:antialiased;font:16px/1;vertical-align:middle;margin-bottom:2px;margin-left:5px}

the content is still empty and font family is not declared

On Thu, May 19, 2022 at 10:48 AM Marco M. Jaeger @.***> wrote:

Not sure whether I'm following you - I do have a font family declaration in my scss file - it gets fully stripped when compressing - this is the full scss:

/* Read more

*/ a.read-more { font-size: 0.8em; text-transform: uppercase;

&:after {
    font-family: "dashicons";
    content: '\f344'; // arrow-right
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 16px/1;
    vertical-align: middle;

margin-bottom: 2px; margin-left: 5px; } }

On Thu, May 19, 2022 at 5:01 AM Denis Ryabov @.***> wrote:

Seems I've found where the issue comes from. Usually the font property (in your example it is font: normal 16px/1) overrides all previous font-* properties. But in you example the font rule is malformed (font family is not specified), and so the browser drops it and uses previous font-family rule. In turn, CSSO firstly detects that font rule exist and previous font-family rule may be removed, and then it founds that font is malformed and may be safely removed too. As a result, both font-related properties are removed.

Most likely, the simplest solution is to fix the font property, e.g. by including font family there (font: normal 16px/1 "dashicons").

— Reply to this email directly, view it on GitHub https://github.com/css/csso/issues/455#issuecomment-1131600258, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAL3RFDJONWO5INTMEZOVITVKYUSXANCNFSM5WCH6SOQ . You are receiving this because you authored the thread.Message ID: @.***>

-- Marco M. Jaeger h http://net4visions.comttps://mmjaeger.com || https://www.instagram.com/marco.m.jaeger

-- Marco M. Jaeger h http://net4visions.comttps://mmjaeger.com || https://www.instagram.com/marco.m.jaeger

dryabov commented 2 years ago

Look at this line in your CSS code:

      font: normal 16px/1;

It's malformed, because it doesn't contain the font family, though CSS spec requires it.

lahmatiy commented 1 year ago
  1. You need to change an order of your font declarations. Since font is a shorthand, it overrides any font-* declaration before itself. So any browser will discard font-family before font.

Discard font-family:

image

Apply font-family:

image
  1. As mentioned by @dryabov, a font declaration is invalid. You can test it here: image

To fix it, you need to add any valid value for the font-family (the value doesn't make sense if font-family declaration goes next), e.g.:

image

Combine font and font-family is also an option: font: normal 16px/1 "dashicons"

mmjaeger commented 1 year ago

this is what I'm getting: a.read-more{font-size:.8em;text-transform:uppercase}a.read-more:after{font:16px/1"dashicons";content:"";display:inline-block;-webkit-font-smoothing:antialiased;vertical-align:middle;margin-bottom:2px;margin-left:5px}

content declaration is still not working using the following scss: a.read-more { font-size: 0.8em; text-transform: uppercase;

&:after {
    font: normal 16px/1 "dashicons";
    //font-family: "dashicons";
    content: '\f344'; // arrow-right
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;

margin-bottom: 2px; margin-left: 5px; } }

On Thu, May 19, 2022 at 11:30 AM Denis Ryabov @.***> wrote:

Look at this line in your CSS code:

  font: normal 16px/1;

It's malformed, because it doesn't contain the font family, though CSS spec requires it.

— Reply to this email directly, view it on GitHub https://github.com/css/csso/issues/455#issuecomment-1132057418, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAL3RFG2JV2FULTW3KZ6323VK2CCXANCNFSM5WCH6SOQ . You are receiving this because you authored the thread.Message ID: @.***>

-- Marco M. Jaeger h http://net4visions.comttps://mmjaeger.com || https://www.instagram.com/marco.m.jaeger