[!] (plugin styles) Error: EACCES: permission denied, open '/.config/postcssrc'

[milahu]

rollup-plugin-styles is trying to read a postcss config from the root folder of my filesystem

caused by src/index.js per https://windicss.org/integrations/rollup.html

import "virtual:windi.css"

when i remove the import, i have no styles

node_modules/rollup-plugin-styles/dist/index.js

async function loadConfig (id, config) {
  // ...
  const {
    ext,
    dir,
    base
  } = path__default["default"].parse(id);
  const searchPath = config.path ? path__default["default"].resolve(config.path) : dir;

  console.dir({f: "loadConfig", searchPath, config_path: config.path, dir, id})
  // id: '/@windicss/windi.css'
  // searchPath: '/@windicss'

  const found = await cosmiconfig.cosmiconfig("postcss").search(searchPath);
  // throws: Error: EACCES: permission denied, open '/.config/postcssrc'

code is at https://github.com/milahu/solidjs-rollup-web-extension-starter

i guess / means root of the project, so cosmiconfig should try /tmp/myproject/.config/postcssrc

rollup-plugin-windicss transforms import "virtual:windi.css"
to the rollup chunk id /@windicss/windi.css.
other rollup chunks have absolute paths like /tmp/myproject/src/index.js

[milahu]

finally got windicss working with postcss

// rollup.config.js
import { babel } from "@rollup/plugin-babel";
import WindiCSS from "rollup-plugin-windicss";
import postcss from "rollup-plugin-postcss";

export default {
  plugins: [
    // virtual:windi.css -> chunk id /@windicss/windi.css
    WindiCSS({
      //preflight: false, // normalize default styles
      // scan js/ts files to find css class names
      scan: {
        dirs: [
          'src/',
        ],
        fileExtensions: ['html', 'js', 'ts', 'jsx', 'tsx']
      }
    }),
    // solidjs: jsx to js
    babel({
      extensions,
      babelHelpers: "bundled",
      presets: [
        ["babel-preset-solid", solidOptions || {}],
        //"@babel/preset-typescript",
        ["@babel/preset-env", { bugfixes: true, targets: babelTargets }],
      ],
    }),
    // inject css chunks into html
    postcss({
      //inject: { insertAt: 'top' },
    }),
    // import "./file" -> import "./file.jsx"
    resolve({
      extensions,
      dedupe: [
        //"svelte"
      ],
    }),
  ],
}

after trying

• rollup-plugin-styles
• babel-plugin-styled-windicss
• rollup-plugin-css-only
• rollup-plugin-hot-css
• rollup-plugin-import-css