callstack / callstack/linaria

Atomic atomizer running before custom preprocessor

Open
#1,411 0 comments 0 reactions 0 assignees View on GitHub
bug report 🦗 bundler: webpack 📦 needs: complete repro 🖥️
Dominant language
TypeScript
Stars
12.4k
Forks
413
PR merge metrics
No merged PRs in 30d

Description

## Environment

```json
{
"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"
}
}
```

```javascript
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`

![image](https://github.com/callstack/linaria/assets/17837575/daa0908f-e6f9-4508-b9b4-095f5e67a287)

![image](https://github.com/callstack/linaria/assets/17837575/b8ad8dff-b29e-4d59-97e7-02a81e9285e0)

## Reproducible Demo

Use the a custom preprocessor alongside ` @linaria/atomic`.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.