rollup-plugin-postcss: Error: The "fileName" or "name" properties of emitted files must be strings that are neither absolute nor relative paths and do not contain invalid characters

This comment by @lukastaegert provides the full solution. What I had to do was:

13c05ebd 2020-04-29 | Fix issues with rollup-plugin-postcss (HEAD -> charge-purchase-history) [Austin Ziegler]

diff --git a/assets/rollup.config.js b/assets/rollup.config.js
index 1e976e0f..f1a365a1 100644
--- a/assets/rollup.config.js
+++ b/assets/rollup.config.js
@@ -60,13 +60,14 @@ const plugins = [
 ]
 
 function postcssPlugin(appType) {
-  return postcss({ extract: `${destination}/css/${appType}-app.css`, plugins: [autoprefixer] })
+  return postcss({ extract: `css/${appType}-app.css`, plugins: [autoprefixer] })
 }
 
 const employee = {
   input: 'src/employee-app.js',
   output: {
-    dir: `${destination}/js`,
+    dir: destination,
+    entryFileNames: 'js/[name].js',
     format: 'iife',
     sourcemap: !isProduction ? 'inline' : false,
   },
@@ -76,7 +77,8 @@ const employee = {
 const customer = {
   input: 'src/customer-app.js',
   output: {
-    dir: `${destination}/js`,
+    dir: destination,
+    entryFileNames: 'js/[name].js',
     format: 'iife',
     sourcemap: !isProduction ? 'inline' : false,
   },

This works perfectly.

I’ve done this workaround using rollup-plugin-copy and rollup-plugin-delete

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: packageJson.main,
        format: 'cjs',
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal({
        includeDependencies: true,
      }),
      resolve(),
      commonjs(),
      typescript({ tsconfig: './tsconfig.json' }),
      postcss({
        extract: true,
        modules: true,
        minimize: true,
      }),
      terser(),
      visualizer(),
    ],
  },
  {
    input: 'dist/esm/types/index.d.ts',
    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
    plugins: [
      copy({
        targets: [{ src: 'dist/cjs/index.css', dest: 'dist/styles' }],
        verbose: true,
        hook: 'buildStart',
      }),
      del({
        targets: ['dist/cjs/index.css', 'dist/esm/index.css'],
        verbose: true,
        hook: 'buildEnd',
      }),
      dts(),
    ],
    external: [/\.(css|less|scss)$/],
    watch: false,
  },
];

It has not been fix this issue for 100 years

I tried passing extract: '../bundle.css' but that didn’t work.

Same for me with v2.8.2, I’m getting the error with this snippet in my rollup.conf

      postcss({
        plugins: postcssPlugins(!dev),
        extract: path.resolve(__dirname, './static/global.css'),
      } ),

The issue should be re-opened until fixed no?

@evdama @jhoffmcd

Unless I’ve misunderstood what you need, the quick fix is to use a path like static/output.css in the extract option, rather than ./static/output.css (with a .). It’s resolved relative to the output.dir set in the main rollup config.

If you want to use a relative path (e.g. outside of the output.dir), that’s not officially supported by the rollup emitFile API, which this plugin uses. When I was playing around directly with emitFile API though, I did have success using a file path like notarealfolder/../../outsideOfOutputDir.file.

I’ve not tried this for rollup-plugin-postcss, but if that suits your use case, it might be worth giving it a go.

I came here with the hope of seeing this being fixed, and yet after 2 years still not fixed, unbelievable!!!

Here is my config and yet didn’t work;

As per the config above, added the “dist” directory with the hope of producing a single stylesheet for both ESM and CJS but not lucky, instead, both ESM and CJS ended up with their own stylehseet.css but in a nested folder, the “dist”, like so;

This is absolutely shocking!

Another thing that works to copy to the correct path is using rollup-plugin-copy:

       postcss({
          plugins: [
            require('autoprefixer'),
            require('cssnano')
          ],
          extract: 'dist/css/shepherd.css'
        }),
        copy({
          targets: [
            { src: 'dist/js/dist/css/*', dest: 'dist/css' }
          ]
        }),

I just released a new version v2.8.2 and hope it solves your problem.

Thank you! It almost solved it. Previously I had more control on where the outputted file goes. Now it seems to be created in output.dir, which in my case I have multiple; dist/esm and dist/cjs. Before I could output the CSS file in dist/bundle.css, now it’s created in those output folders.

I tried passing extract: '../bundle.css' but that didn’t work.

I have just tried 4.0.2 which is the latest version at the moment and it is still broken. Any plans to fix this issue?

Hi @evdama that’s now separated and this template is now using svelte-preprocess instead of compiling postcss with rollup-plugin-postcss. Take a look at https://github.com/nhristov/sapper-template-rollup/blob/master/rollup.config.js.