Main CSS file got corrupted during .less files compilation

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;
}

@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