webdiscus / pug-plugin

Renders Pug template to HTML or template function. Resolves source files of scripts, styles, images in Pug . Uses Pug template as entry point.
https://webdiscus.github.io/pug-plugin/hello-world
ISC License
74 stars 8 forks source link

[Windows] Inline CSS not working due to the difference between sourceRequest and rawRequest #56

Closed YUCLing closed 1 year ago

YUCLing commented 1 year ago

I'm trying to use inline CSS with the plugin, but what i got inside style is the resource url of the SCSS I required.

For example, if I use inline CSS using style=require('./styles.scss?inline'), the content of style will be style.3ef5f.css instead of the CSS code generated by webpack.

After some research, I found that the sourceRequest (index.js#L655) added to AssetSource is different from rawRequest (Resolver.js#L286) used by require.
The sourceRequest's path separator is \, which is Windows style (I'm working on Windows).
The rawRequest's path separator is /.
If I replace all / in rawRequest to \ using debugger, everything is working as expected.

webdiscus commented 1 year ago

Hello @YUCLing,

thank you for the issue report. I will try to fix it.

webdiscus commented 1 year ago

@YUCLing

the bug is fixed in v4.9.0, please update the package.

P.S. in v.4.9.0 is added supports for inline JS, see How to inline JS in HTML

YUCLing commented 1 year ago

Confirmed it's fixed.

But your inline JS seems to be not working properly. I'm not sure what caused it, I will try to find out when possible and open an new issue if necessary.
The following output is what I got from inline JS.

script=require("../test/config.ts?inline")

Outputs

<script>
  I: /path-to-project/test / config.ts
</script>
webdiscus commented 1 year ago

@YUCLing

I have the inline script test. It's work. You can do your own test based on my test to reproduce the issue.

P.S. yes, create please new issue for inline script.