3

In VS project we have 3 files.

fonts.less: This file contains fonts as shown in below example

@font-face{
    font-family: "Trade Gothic Next";
    src: url("/assets/example.eot");
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    .custom-font();
}

utility.less: This file contains some functions. One function as an example is given below

.custom-font() {
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    &:before {
        position: relative;
    }
}

app.less: This is main app less file which contains reference of all .less files with @import as shown below

// Global App Styles
@import "utility.less";
@import "fonts.less";
and so on ...

app.css: This is main app file. Since we have installed Bundling and Minification and Web Compiler VS extension so while saving any .less file, all .less file are complied and final CSS output is produced in app.css file. Further based on Bundling and Minification configuration, app.min.css file is being created but this minification process is failing due to incorrect code generated in app.css file. While analyzing we found below code in app.css seems to be the reason of minification failure.

@font-face {
    font-family: "Trade Gothic Next";
    src: url("/assets/example.eot");
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    : before

{
    position: relative;
}

Code written in .custom-font() function is incorrectly placed in app.css file. Is there any alternate way to write this code without any impact on end user experience?

---Update 1:---

I made below change in all @font-face section in fonts.less file. With this minification is working properly. I'm not getting any failure during minification process but I'm not sure if this is right approach. I couldn't find any way to validate this change on website as well

@font-face{
    font-family: "Trade Gothic Next";
    src: url("/assets/example.eot");
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}:before {
  position: relative;
}
Sukhjeevan
  • 3,074
  • 9
  • 46
  • 89
  • Is the expected result as [this](https://jsfiddle.net/PBC43/tfpng9zh/1/) or like [that](https://jsfiddle.net/PBC43/du7s4mr6/2/)? – Philippe May 25 '23 at 10:27
  • @Philippe I made some changes. Please see updates in post. – Sukhjeevan May 30 '23 at 16:50
  • Hi. Not being able to exactly figure out the desired end result, I need to know if the second compilation in my precedent question matches the desired CCS effects or not. Please would you test [these rules](https://jsfiddle.net/PBC43/du7s4mr6/2/)? – Philippe May 31 '23 at 09:13
  • @Philippe If I'm using `:before {position: relative;}` inside @font-face block, then I'm getting minificaiton error while saving file. On mouse hover on that section, I'm getting `":before" is not a valid pseudo class` message. If do update as I explained in question, then I'm not getting any minification error. But I'm not sure if that is correct CSS syntax. Unfortunately we're not sure where to test this change. – Sukhjeevan May 31 '23 at 14:59

1 Answers1

2

@font-face doesn‘t select any dom node and can thus not have a position or :before. Your code therefore generates invalid css. See https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

zıəs uɐɟəʇs
  • 1,728
  • 3
  • 14
  • 27