[dev-server-esbuild] test and document css loader

[LarsDenBakker]

We should add tests and document how to use the esbuild CSS loader, and add a shorthand css: true option.

[rbquantori]

I've tried to use suggested in parent topic

export default {
  plugins: [
    esbuildPlugin({
      target: 'auto',
      loaders: { '.css', 'css' }
    })
  ]
}

This, indeed, makes dev-server to load CSS into a test setup. However, it does it as if it is a js module. And, obviously, fails with SyntaxError. Any ideas how to overcome this? Should be a pretty common use-case, I guess.
I tried so far adding into TestRunnerConfig

   mimeTypes: {
        'css': 'text/css'
    },

And looking into esbuild doc. Neither does help.

[bashmish]

@rbquantori if esbuild loader converts CSS code to JS, then I think you don't want to set the mimeType to text/css?
I think the problem is that your browser gets a file with .css extension which contains JS code, which is weird and browser can't just parse it, and instead you either need to manipulate file names on the fly by changing .css to .css.js or by setting the mimeType to text/javascript

can you please share a quick reproduction of your issue as a repo on GitHub? I can look into it and try a few things then

[rbquantori]

Hey @bashmish, sorry, was doing staff on different topic.
So, here's the more-or-less minimal reproduction of what I wanted to do: https://github.com/rbquantori/esbuild-csbs/blob/master/src/pacman.spec.js#L2

[bashmish]

@rbquantori do you actually need esbuild in your case? Looks like you just need to import CSS for testing using WTR. Then you might be better off using this https://modern-web.dev/docs/dev-server/writing-plugins/examples/#importing-css

[rbquantori]

@bashmish, well, not for that, of course, that's just a minimal example. In real project there's a lot of stuff going on, e.g. we use TypeScript, so yes, there we need esbuild. Though, since my original post I've added @web/dev-server-rollup to the project to get through some libraries with CommonJS code, so I'll try those css plugins for rollup.

Looks like you just need to import CSS for testing using WTR.

That is true, I only use test runner.

But nevertheless, the topic is about css loader in esbuild. What is it for, if this is not a use case for it?

[rbquantori]

Thanks @bashmish, the rollup plugin from the docs, indeed, works!

import { esbuildPlugin } from "@web/dev-server-esbuild";
import rollupPostcss from "rollup-plugin-postcss";
import { fromRollup } from "@web/dev-server-rollup";

const postcss = fromRollup(rollupPostcss);

export default {
  mimeTypes: {
    "**/*.css": "js",
  },
  plugins: [
    postcss({ include: ["src/**/*.css"], modules: true }),
    esbuildPlugin({
      target: "auto",
    }),
  ],
};

And the reason I couldn't use it before, was that I have the css file in a different folder in an npm workspace and I couldn't make include to work with it (as it turned out!). However at some point I've just removed the include part altogether and it worked!