Environment
{
"dependencies": {
"@linaria/atomic": "^6.2.0",
"@linaria/core": "6.2.0",
"@linaria/react": "6.2.1",
"@wyw-in-js/babel-preset": "0.5.3",
"@wyw-in-js/shared": "0.5.3",
"@wyw-in-js/transform": "0.5.3",
"@wyw-in-js/vite": "0.5.3"
}
}
linaria({
sourceMap: isDev,
preprocessor: (selector, cssText) => {
try {
const result = sass.compileString(`${selector} {${cssText}}\n`);
return result.css.toString();
} catch (error) {
console.error("Error processing SCSS:", error);
return "";
}
}
})
- Linaria version:
6.2.0
- Bundler (+ version):
- Node.js version:
v20.8.0
- OS:
windows 11
Description
I am using a SCSS preprocessor (with great success), but getting errors when trying out the @linaria/atomic package.
I think, and created a small test which I believe confirms this, that the atomizer is running before the preprocessor (which naturally causes problems since all the SCSS needs to be compiled together, after which it can be safely atomized).
Simple example below showing the SCSS variable is not compiled when the atomizer is ran, resulting in color: $purple-900; being split out before SCSS can compile it alongside the variable declaration.
NB this example works just fine when using @linaria/core, the error is exclusive to @linaria/atomic


Reproducible Demo
Use the a custom preprocessor alongside @linaria/atomic.
Environment
{ "dependencies": { "@linaria/atomic": "^6.2.0", "@linaria/core": "6.2.0", "@linaria/react": "6.2.1", "@wyw-in-js/babel-preset": "0.5.3", "@wyw-in-js/shared": "0.5.3", "@wyw-in-js/transform": "0.5.3", "@wyw-in-js/vite": "0.5.3" } }6.2.0v20.8.0windows 11Description
I am using a SCSS preprocessor (with great success), but getting errors when trying out the
@linaria/atomicpackage.I think, and created a small test which I believe confirms this, that the atomizer is running before the preprocessor (which naturally causes problems since all the SCSS needs to be compiled together, after which it can be safely atomized).
Simple example below showing the SCSS variable is not compiled when the atomizer is ran, resulting in
color: $purple-900;being split out before SCSS can compile it alongside the variable declaration.Reproducible Demo
Use the a custom preprocessor alongside
@linaria/atomic.