escaped dashicon not working

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.

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

Do you apply CSSO before CSS preprocessor?

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

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").

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

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

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.

@dryabov

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:

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"

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

Navigation Menu

Repository navigation

escaped dashicon not working #455

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

escaped dashicon not working #455

Description

Activity

mmjaeger commented on May 18, 2022

dryabov commented on May 19, 2022

mmjaeger commented on May 19, 2022

dryabov commented on May 19, 2022

mmjaeger commented on May 19, 2022

mmjaeger commented on May 19, 2022

dryabov commented on May 19, 2022

lahmatiy commented on Jul 14, 2022

mmjaeger commented on Oct 11, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions