Verify Webpack Documentation

[timbomckay]

The documentation for Webpack didn't work for me

postcss-lit/README.md

Lines 33 to 60 in 48c6f36

	### PostCSS with webpack
	If you use webpack to execute postcss, you must ensure the right order of
	loaders, like so:
	```ts
	module.exports = {
	entry: './src/my-element.ts',
	module: {
	rules: [
	{
	test: /\.ts$/,
	use: ['postcss-loader', 'ts-loader'],
	exclude: /node_modules/
	}
	]
	},
	resolve: {
	extensions: ['.ts']
	},
	output: {
	filename: 'bundle.js'
	}
	};
	```
	This is important as postcss will transform your CSS _before_ typescript
	transpiles to JS (which is what you want to happen).

When I switched it around it started working as expected. Here's our order:

{
  test: /\.ts$/,
  use: [
    'babel-loader',
    'ts-loader',
    'postcss-loader',
  ],
  exclude: /node_modules/
}

We're on Webpack version 5 in a monorepo, though I don't think that matters much.

After further investigation, as your readme states "postcss will transform your CSS before typescript transpiles", Webpack loaders are executed in reverse order (see Webpack's documentation). So we'd want postcss-loader last in the array so it can be first. I still don't understand why Webpack works this way, I'm sure there's a lengthy thread somewhere but it's illogical to me.

[43081j]

how come you have a babel loader and a typescript loader? both transpile typescript.

and i do remember the whole 'reverse order' thing. ill try it myself at some point just to double check as im surprised it worked in the first place if thats the case (it did, i tested it many times). maybe i just got lucky 😂

[timbomckay]

Yeah the babel & typescript config was written by someone before me, been meaning to review it haha. Probably could've left that out but it's what we have at the moment.