imports and url loading broken (using scss) since post preact-cli@3.0.0-rc.10

[smjnab]

Do you want to request a feature or report a bug?
A bug

What is the current behaviour?
To begin with it seems this is not a problem with scss/sassLoader, rather somewhere else. Up to rc10 it has been working, after rc13 and rc14 it is broken.

Using scss with files located in root/src/style/*.scss, in those importing scss and css files from other folders, such as root/node_modules/ or root/work_files/ using @import "" or url("). The content does not show up in the browser and in the browser console warnings such as "Error in parsing value for ‘background-image’. Declaration dropped." will appear.

sassLoader itself will not throw any errors in the terminal console when running preact watch or preact build, it finds and loads the files just fine it seems. Changing the paths will make sassLoader complain it does not find the files, indicating sassLoader is not the issue.

If the current behaviour is a bug, please provide the steps to reproduce.

• preact create a typescript template
• npm install node-sass
• npm install sass-loader
• npm install flag-icon-css (to test importing)
• rename src/style/index.css to src/style/index.scss
• change src/index.js import of css to import "./style";
• in src/style/index.scss add @import "../../node_modules/flag-icon-css/css/flag-icon.min.css"; . (you can also test using a background-image: url(""))
• in src/routes/home/index.tsx add <a class="flag-icon flag-icon-gb" data-flag="en" /> below Home header.

Run watch and visit site. If using rc10 all good, should see a flag and no warning in console, if rc13 or rc14 no flag and a console full of warnings (if FF, chrome is silent).

What is the expected behaviour?
content import to scss outside of src/ should show up in the browser. It seems with rc13 and rc14 you have to use src/* for the content to both load with scss and show up in browser.

If this is a feature request, what is motivation or use case for changing the behaviour?

Please mention other relevant information.
This is the info from the test project I did with the above steps. My regular project where I first encountered the issue is up-to-date with the packages. Both have the issue.

Environment Info:
System:
OS: Linux 5.6 KDE neon 5.18
CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
Binaries:
Node: 12.16.3 - ~/.npm-global/bin/node
npm: 6.14.5 - ~/.npm-global/bin/npm
Browsers:
Chrome: 83.0.4103.61
Firefox: 76.0.1
npmPackages:
preact: ^10.3.1 => 10.4.4
preact-cli: ^3.0.0-rc.14 => 3.0.0-rc.14
preact-render-to-string: ^5.1.4 => 5.1.8
preact-router: ^3.2.1 => 3.2.1
npmGlobalPackages:
preact-cli: 3.0.0-rc.10

[rschristian]

* in src/routes/home/index.tsx add  below Home header.

I believe you got distracted and didn't finish this thought, but I have been able to reproduce your issue. No warnings in FireFox for myself, but the flag is missing indeed.

You should probably also add installation of node-sass to your steps, as it is required for sass use.

[smjnab]

Updated, thank you!

[rschristian]

I am looking around currently, but as I'm not expert, you'll have to bear with me, as I might not be able to fully track this down.

To document, it seems that on Preact-CLI versions > 3.0.0-rc.10, the background image url is being incorrectly supplied, resulting in the following:

background-image: url([object Module]);

[rschristian]

Sorry for the delay.

I've found the issue, it has to do with the older css-loader version. Bumping it will solve your problem.

However, this will cause issues with typings-for-css-modules-loader that is included in the template, as it is no longer being maintained and can't support newer css-loader versions.

If you don't use modules, then great, nothing more needed. If you do, I'm going to try to get a fix soon-ish here so that people can use the newer css-loader versions.

If you get the chance to try this out, let me know if it works for you.

[rschristian]

PR has been submitted here, you can copy and paste the changes into your app and everything should be working as expected.

[smjnab]

Amazing. Thank you very much for doing this so swiftly.

I tested the edits and everything was working again. Tested the typings and css was working fine, did a test with scss as well and that too generated working typings (with an edit of the globpattern).

[rschristian]

Glad to hear it. Hopefully that fix will be merged in soon so manual edits won't be necessary.

[rschristian]

Should be fixed as of preactjs-templates/typescript#29