escaped dashicon not working

[mmjaeger]

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]

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

[dryabov]

Do you apply CSSO before CSS preprocessor?

[mmjaeger]

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 <#455 (comment)>, 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.com>ttps://mmjaeger.com || https://www.instagram.com/marco.m.jaeger

[dryabov]

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]

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 <#455 (comment)>, 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.com>ttps://mmjaeger.com || https://www.instagram.com/marco.m.jaeger

[mmjaeger]

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 > <#455 (comment)>, 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.com>ttps://mmjaeger.com || https://www.instagram.com/marco.m.jaeger

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

[dryabov]

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]

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:

Apply font-family:

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

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.:

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

[mmjaeger]

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 <#455 (comment)>, 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.com>ttps://mmjaeger.com || https://www.instagram.com/marco.m.jaeger