PostCSS setup

ssciwr · Sep 19, 2024 · d9885d6 · d9885d6
1 parent 04be377
commit d9885d6
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 13 deletions.
diff --git a/bundle/index.html b/bundle/index.html
@@ -4,8 +4,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Svelte Component</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" type="text/css" crossorigin href="bundle.css">
     <script src="bundle.js"></script>
 </head>
 <body>

diff --git a/package.json b/package.json
@@ -18,17 +18,19 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@tsconfig/svelte": "^5.0.4",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.20",
     "flowbite-svelte": "^0.46.13",
     "flowbite-svelte-icons": "^1.0.2",
     "oclif": "^4.14.11",
-    "postcss": "^8.4.32",
+    "postcss": "^8.4.47",
     "postcss-load-config": "^5.0.2",
     "rollup": "^4.21.2",
     "rollup-plugin-css-only": "^4.5.2",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svelte": "^7.2.2",
     "svelte": "^4.2.18",
     "svelte-check": "^3.8.1",
+    "svelte-preprocess": "^6.0.2",
     "tailwind-merge": "^2.4.0",
     "tailwindcss": "^3.4.4",
     "tslib": "^2.6.3",

diff --git a/rollup.config.js b/rollup.config.js
@@ -2,8 +2,9 @@ import svelte from 'rollup-plugin-svelte';
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import replace from '@rollup/plugin-replace';
-import css from 'rollup-plugin-css-only';
 import terser from '@rollup/plugin-terser';
+import postcss from 'rollup-plugin-postcss';
+import { sveltePreprocess } from 'svelte-preprocess';
 
 export default {
   input: './src/bundle.js',
@@ -16,6 +17,9 @@ export default {
   plugins: [
     svelte({
       emitCss: true,
+      preprocess: sveltePreprocess({
+        postcss: true, // Use PostCSS to process TailwindCSS
+      }),
       compilerOptions: {
         customElement: true
       }
@@ -26,9 +30,7 @@ export default {
       },
       delimiters: ['', '']
     }),
-    css({
-      output: 'bundle.css'
-    }),
+    postcss(),
     resolve({
       browser: true,
       dedupe: ['svelte', 'flowbite-svelte']

diff --git a/src/components/EasyDBDetailView.svelte b/src/components/EasyDBDetailView.svelte
@@ -1,10 +1,8 @@
-<svelte:options customElement={{
-  tag: 'easydb-detail-view',
-  shadow: 'none'
-  }}
-/>
+<svelte:options customElement='easydb-detail-view' />
 
 <script>
+  import '../app.pcss';
+
   import { pregen_instance } from "../lib/easydbPregen";
   import { appLanguageStore, dataLanguagesStore, easydbInstanceStore, easydbInstanceDataStore, userGivenMasksToRenderStore, uuidStore } from "../lib/stores";