Bufferoverflow when using postcss with tailwind in the preprocessor config

[bluebrown]

Hi, I have the postcss configured and when It compiles tailwind, jest seems to run many times in quick succession. After a few seconds I get an error.

spawnSync C:\WINDOWS\system32\cmd.exe ENOBUFS

  at Object.process (node_modules/svelte-jester/src/transformer.js:15:17)
  at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:463:35)
  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:568:40)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:606:25)

svlete.config.js

const sveltePreprocess = require("svelte-preprocess");

module.exports = {
  preprocess: sveltePreprocess({
    postcss: true
  }),
};

postcss.config.js

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")]
}

package.json

"jest": {
   "moduleFileExtensions": [
     "js",
     "json",
     "svelte",
     "ts"
   ],
   "transform": {
     "^.+\\.stories\\.[jt]sx?$": "<rootDir>node_modules/@storybook/addon-storyshots/injectFileName",
      "^.+\\.js$": "babel-jest",
     "^.+\\.svelte$": ["svelte-jester", { "preprocess": true } ],
     "^.+\\.ts$": "ts-jest",
     "^.+\\.css$": "jest-transform-css"
   },
   "setupFilesAfterEnv": [
     "@testing-library/jest-dom/extend-expect"
   ],
   "cacheDirectory": "node_modules/.cache/jest"
 }

Environment

...
    "svelte-jester": "^1.1.5",
    "svelte-preprocess": "^4.2.1",
    "tailwindcss": "^1.7.6",
    "jest-transform-css": "^2.0.0",
...

[DorianGrey]

I've recently played a bit with a roughly equivalent setup, and it definitely has something to do with the way the tailwind directives are processed.

Playground project: https://github.com/DorianGrey/svelte-ts-playground
Running

pnpm test

Causes the same message as mentioned above.
Commenting this line (which handles the actual import) causes the test to run successfully.

The only alternative option for now seems to be to mock the setup with something empty to prevent it from becoming processed, like:

jest.mock("./src/TailwindSetup.svelte", () => ({}));

Though this does not seem like an optimal solution, at least not for a general case.

Simply speaking - since we're only talking about unit tests, it should be fine to be able to disable the style processing entirely, yet I have not found a way to achieve this for now.

[ilyavf]

Having the same issue. Digging deeper in my case, the package svelte-jester calls child_process.spawnSync. This function has default value for maxBuffer of 1Mb. Setting this to e.g. 10Mb fixes the issue. But the package does not provide API for this.

// https://github.com/mihar-22/svelte-jester/blob/master/src/transformer.js#L15-L17

processed = execSync(`node --unhandled-rejections=strict --abort-on-uncaught-exception "${preprocessor}"`, {
      env: { PATH: process.env.PATH, source, filename, svelteConfig },
      maxBuffer: 1024 * 1024 * 10.       // <<< here set to 10Mb
}).toString()

The workaround by @DorianGrey with mocking the Tailwindcss.svelte worked well for me! Thanks a lot!
Only I had to use a bit different syntax (manual mock creating __mock__ folder)

[mihar-22]

If I simply patch the spawned process to have a 10MB maxBuffer will it resolve this issue? I'm not entirely sure how to resolve this issue. Feel free to submit a PR and I'll merge it in ASAP.

[ilyavf]

As far as I picked up from this node's discussion its OK to set it to 10MB. And this solves the issue with TailwindCSS.

Please see the PR.

[mihar-22]

Thanks to @ilyavf this has been fixed in 1.2.0 🎉