Move svelte config + postcss config to package/config

src/package/components/Avatar.svelte

@@ -2,7 +2,7 @@
     // TODO: Make square icon `md` more rounded
 
     import { onMount } from 'svelte'
-    import { classCombine } from '$package/utils/classCombine'
+    import { classCombine } from '../utils/classCombine'
 
     /** Optional, as a default icon will be substituted if no image was specified */
     export let src: string | undefined

src/package/components/Button.svelte

@@ -3,7 +3,7 @@
     // TODO: icon only buttons should have uniform padding
     // TODO: Could be a class
 
-    import { classCombine } from '$package/utils/classCombine'
+    import { classCombine } from '../utils/classCombine'
 
     /** The element to be styled as a button */
     export let as: 'button' | 'a' | 'summary' | 'input' = 'button'

src/package/config/postcss.config.cjs

@@ -0,0 +1,32 @@
+const config = {
+    plugins: [
+        require('postcss-import-ext-glob'),
+        require('postcss-import'),
+        require('postcss-strip-inline-comments'),
+        require('postcss-extend-rule'),
+        require('postcss-nested'),
+        require('postcss-preset-env')({
+            features: {
+                'custom-media-queries': {
+                    importFrom: [
+                        {
+                            customMedia: {
+                                '--sm': '(min-width: 544px)',
+                                '--md': '(min-width: 768px)',
+                                '--lg': '(min-width: 1012px)',
+                                '--xl': '(min-width: 1280px)',
+                            },
+                        },
+                    ]
+                }
+            }
+        }),
+        require('postcss-pxtorem'),
+        require('autoprefixer'),
+        process.env.NODE_ENV === 'development' && require('cssnano')({
+            preset: 'default',
+        })
+    ],
+};
+
+module.exports = config;

src/package/config/svelte.config.js

@@ -0,0 +1,15 @@
+import sveltePreprocess from 'svelte-preprocess';
+import Icons from 'unplugin-icons/vite';
+import svelteSvg from '@poppanator/sveltekit-svg';
+
+export const preprocess = sveltePreprocess({
+    postcss: true,
+})
+
+export const plugins = [svelteSvg(),
+    Icons({
+        compiler: 'svelte',
+        defaultClass: 'icon',
+        scale: 1.1428, // 1.1428rem = 16px when root size is 14px
+    }),
+]

src/package/styles/classes/base.postcss

@@ -1,12 +1,9 @@
 .base {
-    display: flex;
-    justify-content: center;
     background-color: var(--color-bg);
     color: var(--color-text);
     font-family: var(--font-standard);
     font-size: var(--font-size-nm);
     font-weight: var(--font-weight-regular);
-    padding: 1rem;
 
     scrollbar-color: var(--color-scrollbar) var(--color-bg);