[CSS] optimize with @parcel/css

[daKmoR]

https://github.com/parcel-bundler/parcel-css

[daKmoR]

This will enable smaller css files and support for @import in css.

[rodydavis]

I'm working to enable postCSS and also cannot get it to work:

import postcss from "rollup-plugin-postcss";
import pluginImport from "postcss-import";
import pluginNested from "postcss-nested";
import pluginHct from "postcss-color-hct";
import pluginAutoprefixer from "autoprefixer";
import pluginApply from "postcss-apply";
import cssnano from "cssnano";

import { addPlugin } from "plugins-manager";

import { CLASSES } from "../site/src/utils/classes.js";

export default /** @type {import('@rocket/cli').RocketCliOptions} */ ({
  absoluteBaseUrl: "http://localhost:8080",
  setupDevServerAndBuildPlugins: [
    addPlugin(postcss, {
      extract: true,
      plugins: [
        pluginImport(),
        pluginNested(),
        pluginApply({ sets: CLASSES }),
        pluginHct(),
        pluginAutoprefixer(),
        cssnano(),
      ],
    }),
  ],
});

output css file still has import:

@import url(./reset.css);

body {
  font-family: "Roboto", sans-serif;
}