Correct rules order about used-styles

[theKashey]

A way to make it right - to use webpack-imported

import { stylesheetCorrectOrder } from "webpack-imported/css";
import configuration from './build/imported.json'; // <<---- generate file using WebpackImportedPlugin

// get  all css files
const cssFiles = configuration.assets
	.filter((asset) => asset.type === "css")
	.map(({ name }) => name);

// map to chunks
const cssToChunk = Object.entries(configuration.chunkMap).reduce((acc, [key, value]) => {
	if (value.css) {
		value.css.forEach((css) => {
			acc[css] = key;
		});
	}

	return acc;
}, {} as Record<string, string>);

// "correct order", list all chunks in the prority webpack will list them
// __ this line is the main deal breaker here __
const order = stylesheetCorrectOrder(configuration);

// generate style data
const styleData = discoverProjectStyles(process.env.PUBLIC_DIR!, (name) => {
	const asset = cssFiles.find((clientAsset) => name.includes(clientAsset));

	if (asset && cssToChunk[asset]) {
		return order.indexOf(cssToChunk[asset]);
	}

	return false;
});