SASS files and _components CSS cannot be generated to the same output path

[folliehiyuki]

Version

3.1.4

Platform

Linux

What steps will reproduce the bug?

If the value of site.options.components.cssFile is the same as the output of a SASS source file, Lume fails to build the final website.

Example:

• SASS plugin is used with an entry /style.scss in the source directory.
• Lume configuration: lume({ cssFile: "/style.css" });

How often does it reproduce? Is there a required condition?

No response

What is the expected behavior?

The output of component styles and compiled SASS source should be combined in the final style.css result.

What do you see instead?

Error: The pages /style.scss and (generated) have the same output path "/style.css". Use distinct 'url' values to resolve the conflict.
    at FSWriter.savePage (https://cdn.jsdelivr.net/gh/lumeland/lume@3.1.4/core/writer.ts:83:15)
    at eventLoopTick (ext:core/01_core.js:187:7)
    at async https://cdn.jsdelivr.net/gh/lumeland/lume@3.1.4/core/writer.ts:50:13
    at async Promise.all (index 9)
    at async concurrent (https://cdn.jsdelivr.net/gh/lumeland/lume@3.1.4/core/utils/concurrent.ts:21:3)
    at async FSWriter.savePages (https://cdn.jsdelivr.net/gh/lumeland/lume@3.1.4/core/writer.ts:47:5)
    at async Site.build (https://cdn.jsdelivr.net/gh/lumeland/lume@3.1.4/core/site.ts:731:19)
    at async buildSite (https://cdn.jsdelivr.net/gh/lumeland/lume@3.1.4/cli/utils.ts:25:3)
    at async build (https://cdn.jsdelivr.net/gh/lumeland/lume@3.1.4/cli/build_worker.ts:116:5)

Additional information

#659 was closed with the fix applied only to JS/TS files, so I created this one.

The issue with CSS here is a bit more complicated. Since SASS syntax is not compatible with CSS, we can't append the generated component styles into the SASS source file (it works with SCSS though). I also think this is actually a problem in the SASS plugin instead of how components are currently handled, as it can be reproduced using UnoCSS plugin as well, if it's used before the SASS plugin.

[oscarotero]

Hmm, I see.
Maybe the current JS/TS fix is not the best solution but for now it does the job. I have to think of a more elegant way to fix this and that work for both CSS and JS.
Perhaps it should be fixed by each plugin (esbuild, lightningcss, sass, postcss, etc) instead of Lume core. For example, if sass detects that an entry point (example.scss) outputs to an existing url (example.css) it should be merged somehow. And the same for esbuild (TS->JS), etc. This would fix also other possible conflicts not covered currently like different source files (script.js, script.ts, script.jsx...) or (style.sass, style.scss, style.css...) that output the same file.