feat: split CSS into separate files

Just a hack for now

example/src/global.scss

@@ -1,4 +1,5 @@
 @import "~teenyui/theme/light";
+@import "teenyui/dist/bundle.css"; // TODO: Remove once proper CSS splitting has been fixed.
 
 html,
 body {

package.json

@@ -2,7 +2,7 @@
   "name": "teenyui",
   "version": "0.1.3",
   "description": "Tiny UI library for Preact",
-  "module": "./dist/src/index.js",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
   "repository": "git@github.com:dsluijk/teenyui.git",
@@ -25,7 +25,7 @@
     "eslint-config-prettier": "^6.12.0",
     "preact": "^10.5.5",
     "rollup": "^2.33.1",
-    "rollup-plugin-postcss": "^3.1.8",
+    "rollup-plugin-styles": "^3.12.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.29.0",
     "sass": "^1.29.0",

rollup.config.js

@@ -1,5 +1,6 @@
 import typescript from "rollup-plugin-typescript2";
-import postcss from "rollup-plugin-postcss";
+import styles from "rollup-plugin-styles";
+
 import { terser } from "rollup-plugin-terser";
 
 export default {
@@ -8,6 +9,7 @@ export default {
     dir: "dist",
     format: "esm",
     sourcemap: true,
+    assetFileNames: "[name][extname]", // TODO: Remove once proper CSS splitting has been fixed.
   },
   external: ["preact", "preact/hooks"],
   preserveModules: true,
@@ -15,9 +17,9 @@ export default {
     typescript({
       module: "ESNext",
     }),
-    postcss({
-      minimize: true,
+    styles({
       modules: true,
+      mode: ["extract", "bundle.css"],
     }),
     terser({
       ecma: 2016,