🐛 PostCss-mixin not process correctly in react+vite project

[mohdmujahithali]

Issue

I am using postcss-mixin for font-faces in the vite + react app. It's not processed correctly.

• After build, in dist/style.css

@charset "UTF-8";@define-mixin fontFace $fontName,$folderName,$fileName,$fontWeight,$fontStyle{@font-face {font-family: $fontName; src: url(../fonts/#{$folderName}/#{$fileName}.woff2) format("woff2"),url(../fonts/#{$folderName}/#{$fileName}.woff) format("woff"); font-weight: $fontWeight; font-style: $fontStyle; font-display: swap;}}*,

• warning during build

../fonts/#{$folderName}/#{$fileName}.woff2 referenced in ../fonts/ didn't resolve at build time, it will remain unchanged to be resolved at runtime

../fonts/#{$folderName}/#{$fileName}.woff referenced in ../fonts/ didn't resolve at build time, it will remain unchanged to be resolved at runtime

Steps to reproduce

1) installed all the below packages

npm install postcss-nested postcss-mixins postcss-simple-vars postcss-import --save-dev

2) updated the postcss.config.js with the postcss plugins

export default {
plugins: {
'postcss-import': {},
'postcss-mixins': {},
'postcss-simple-vars': {},
'postcss-nested': {},
tailwindcss: {},
autoprefixer: {},
},
};

3) created a Mixin in CSS (font-faces.css)

@define-mixin fontFace $fontName, $folderName, $fileName, $fontWeight, $fontStyle {
@font-face {
font-family: $fontName;
src:
url('../fonts/#{$folderName}/#{$fileName}.woff2') format('woff2'),
url('../fonts/#{$folderName}/#{$fileName}.woff') format('woff');
font-weight: $fontWeight;
font-style: $fontStyle;
font-display: swap;
}
}

@layer base {
@mixin fontFace('Gotham', 'gotham', 'Gotham-Book', 400);
@mixin fontFace('Gotham', 'gotham', 'Gotham-BookItalic', 400, italic);
}