Impossible to extract CSS in a parent folder

[akaibukai]

Hi,
I had many difficulties to replace (from scratch) a webpack pipeline with a rollup pipeline.
And in order to be transparent against my current workflow I want to end up with two outputed files static/js/app.js and static/css/app.css.
Now I am able to extract the CSS ouput in its own app.css file, but it remains on the static/js/ directory.
When I put for example extract: '../css/app.css' I got the following 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, received "../css/app.css".

What's weird is that when I use an absolute path like the following (and I deliberately changed the name): extract: '/public/static/css/app.css'
I still got the same error with the relative parent path (two dots ../):

The "fileName" or "name" properties of emitted files must be strings that are neither absolute nor relative paths and do not contain invalid characters, received "../css/app.css".

So somewhere the tool is smart enough to interpret the path, but why I'm not able to extract to a sibling or parent directory?

In the meantime, does anyone know how I can manage to get the CSS generated in that file?

[SASUKE40]

Try to replace static/css/app.css with path.resolve('static/css/app.css'), because of rollup v2 emitFile not allow generate file with absolute nor relative paths.

[SASUKE40]

related #266

[akaibukai]

Hi @SASUKE40 and thank you for the reply..
However, I still have the exact same error..
If I put the absolute path like so:
postcss({ extract: path.resolve('/public/static/css/app.css') }),
I got the following error (with the path correctly interpreted):

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, received "../css/app.css".

And if I put a relative path like so:
postcss({ extract: path.resolve('../css/app.css') }),
I got the error with a weird parent path:

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, received "../../../css/app.css".

I'm using rollup v. 2.6.1 and rollup-plugin-postcss v. 2.8.2

[SASUKE40]

Hi @SASUKE40 and thank you for the reply..
However, I still have the exact same error..
If I put the absolute path like so:
postcss({ extract: path.resolve('/public/static/css/app.css') }),
I got the following error (with the path correctly interpreted):

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, received "../css/app.css".

And if I put a relative path like so:
postcss({ extract: path.resolve('../css/app.css') }),
I got the error with a weird parent path:

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, received "../../../css/app.css".

I'm using rollup v. 2.6.1 and rollup-plugin-postcss v. 2.8.2

The location of the generated file outside the bundle directory is not allowed in rollup v2, use v2.6.4 to fix the problem first.

[akaibukai]

Hi again @SASUKE40 ,

I assumed that you were talking about v2.6.4 of this plugin rather than rollup itself which doesn't have 2.6.4 btw (I know it's obvious).

Indeed, now it's working, but in this case

• It still doesn't work if I'm using a relative path which is easier tbh..
• Even if I'm using path.resolve (with or without __dirname)
• But now using an absolute path works even without using path.resolve
• So just using postcss({ extract: '/public/static/css/app.css'}), works
• I got the following warning:

A plugin is directly adding properties to the bundle object in the "generateBundle" hook. This is deprecated and will be removed in a future Rollup version, please use "this.emitFile" instead.

So I guess it's a trade-off to deal with for the moment..

I'm new to this front-end frameworks, pipeline and tooling world..
And I know that all about this huge tooling systems need a lot of amount of works..
But I'm a bit confused about how it could be this difficult to "just" write a file using a relative path..

But I'm learning a lot BTW..

Anyway, thanks again for all the great work..

[SASUKE40]

Hi again @SASUKE40 ,

I assumed that you were talking about v2.6.4 of this plugin rather than rollup itself which doesn't have 2.6.4 btw (I know it's obvious).

Indeed, now it's working, but in this case

• It still doesn't work if I'm using a relative path which is easier tbh..
• Even if I'm using path.resolve (with or without __dirname)
• But now using an absolute path works even without using path.resolve
• So just using postcss({ extract: '/public/static/css/app.css'}), works
• I got the following warning:

A plugin is directly adding properties to the bundle object in the "generateBundle" hook. This is deprecated and will be removed in a future Rollup version, please use "this.emitFile" instead.

So I guess it's a trade-off to deal with for the moment..

I'm new to this front-end frameworks, pipeline and tooling world..
And I know that all about this huge tooling systems need a lot of amount of works..
But I'm a bit confused about how it could be this difficult to "just" write a file using a relative path..

But I'm learning a lot BTW..

Anyway, thanks again for all the great work..

I am dealing with unpublishing the versions between v2.6.4 and v3, and ready to publish a new version for breaking change about rollup upgrade.

[halostatue]

This is basically the same issue as #250, and my comment shows a diff on how this can be avoided.