url(..) calls

[voidus]

Hi, thank you so much for this library.

I am using this because I need auto-prefixing on my css, and I'm chaining postcss-loader before this. It's not working right now, and I don't really understand why.

Could we maybe document a known-good webpack config to do this?

[voidus]

Tbf I might just have a messed up config, this seems to work:

        {
          test: /\.lit.css$/,
          use: [
            "lit-css-loader",
            {loader: "postcss-loader", options: postcssLoaderOptions}
          ]
        },

[voidus]

Okay, so I think my real problem is that my url("img/foo.svg") isn't handled. For my usual css, I'm using this:

        {
          test: /\.lit.css$/,
          use: [
            "lit-css-loader",
            {loader: "postcss-loader", options: postcssLoaderOptions}
          ]
        },

But using css-loader or extract-loader breaks lit-css-loader.

Do you have any advice for this? I assume it is a common concern and would be interesting to others, too.

Sorry for thinking aloud in this issue, if you prefer I can gather my thoughts and open a new one.

[bennypowers]

I appreciate you walking through the issue, thanks

Can you elaborate on what is happening? a small reproduction case with expected output would be good

[voidus]

I'll look into it when I have a little time, shouldn't be too long.

[MartinEmanuelMaldonado93]

Hey i have the same issue, I know that the url(...) inside of css literals can be resolved using something like :

import logo from "./src/images/logo.png 

.image { 
   background: url(${ unsafeCss( logo ) });
}

---

yourFile.d.ts

declare module "*.png" {
    const val : any;
    export default val;
}

When the loader transpile the code to const style = css... ; the url is ommited and the problem is there i think

[bennypowers]

@MartinEmanuelMaldonado93 can you use the transform config property to transform those calls?

[MartinEmanuelMaldonado93]

Hey ! has been past few days and I realize that the loader works very well actually, i make the mistake because i misunderstood the webpack url behaviour when compiles. In my webpack.common.js i wrote that the output of my assets be written to the absolute path called "./assets" and in all of my css styles when i required i write url("./assets/myimage.png") and i solve the problem, i don't know if i was clear, but that is the solution i used for my little issue with url's thank you for your answers!