Move svelte config + postcss config to package/config

package.json

@@ -1,6 +1,6 @@
 {
   "name": "omorphia",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "A beautiful Svelte component & style library",
   "scripts": {
     "dev": "svelte-kit dev",
@@ -16,40 +16,23 @@
     "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.1.1",
-    "@iconify-json/heroicons-outline": "^1.1.1",
-    "@iconify-json/heroicons-solid": "^1.1.1",
-    "@iconify-json/lucide": "^1.1.7",
-    "@poppanator/sveltekit-svg": "^0.3.1",
     "@sveltejs/adapter-static": "^1.0.0-next.29",
     "@sveltejs/kit": "next",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
-    "autoprefixer": "^10.4.2",
-    "cssnano": "^5.1.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",
     "mdsvex": "^0.10.5",
     "mdsvexamples": "^0.0.8",
     "nodemon": "^2.0.15",
-    "postcss": "^8.4.8",
-    "postcss-extend-rule": "^4.0.0",
-    "postcss-import": "^14.0.2",
-    "postcss-import-ext-glob": "^2.0.1",
-    "postcss-load-config": "^3.1.1",
-    "postcss-nested": "^5.0.6",
-    "postcss-preset-env": "^7.4.2",
-    "postcss-pxtorem": "^6.0.0",
-    "postcss-strip-inline-comments": "^0.1.5",
     "sveld": "^0.13.4",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.10.1",
     "svelte2tsx": "^0.5.5",
     "tslib": "^2.3.1",
-    "typescript": "~4.6.2",
+    "typescript": "~4.6.2"
-    "unplugin-icons": "^0.13.3"
   },
   "type": "module",
   "svelte": "index.js",
@@ -69,13 +52,31 @@
   },
   "homepage": "https://omorphia.modrinth.com",
   "dependencies": {
+    "@iconify-json/carbon": "^1.1.1",
+    "@iconify-json/heroicons-outline": "^1.1.1",
+    "@iconify-json/heroicons-solid": "^1.1.1",
+    "@iconify-json/lucide": "^1.1.7",
+    "@poppanator/sveltekit-svg": "^0.3.1",
+    "autoprefixer": "^10.4.2",
+    "cssnano": "^5.1.1",
     "highlight.js": "^11.5.0",
     "insane": "^2.6.2",
     "lodash.uniqueid": "^4.0.1",
     "marked": "^4.0.12",
+    "postcss": "^8.4.8",
+    "postcss-easy-import": "^4.0.0",
+    "postcss-extend-rule": "^4.0.0",
+    "postcss-import": "^14.0.2",
+    "postcss-import-ext-glob": "^2.0.1",
+    "postcss-load-config": "^3.1.4",
+    "postcss-nested": "^5.0.6",
+    "postcss-preset-env": "^7.4.2",
+    "postcss-pxtorem": "^6.0.0",
+    "postcss-strip-inline-comments": "^0.1.5",
     "sanitize.css": "^13.0.0",
-    "svelte-tiny-virtual-list": "^2.0.0",
+    "svelte-tiny-virtual-list": "^2.0.1",
     "svelte-use-click-outside": "^1.0.0",
-    "throttle-debounce": "^3.0.1"
+    "throttle-debounce": "^3.0.1",
+    "unplugin-icons": "^0.13.3"
   }
 }

plugins/sveld.js

@@ -1,8 +1,8 @@
 import {ComponentParser} from 'sveld'
-import sveltePreprocess from 'svelte-preprocess'
 import * as svelte from 'svelte/compiler'
 import fs from 'fs/promises'
 import path from 'path'
+import {preprocess} from "../src/package/config/svelte.config.js";
 
 export default function sveld() {
     return {
@@ -43,7 +43,7 @@ export default function sveld() {
 }
 
 async function parseRaw(raw, filePath) {
-    let { code } = await svelte.preprocess(raw, sveltePreprocess({ postcss: true }), {
+    let { code } = await svelte.preprocess(raw, preprocess, {
         filename: filePath
     })
     return new ComponentParser({

postcss.config.cjs

@@ -1,32 +1 @@
-const config = {
+module.exports = require('./src/package/config/postcss.config.cjs')
-  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/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);
 

svelte.config.js

@@ -1,22 +1,17 @@
 import {mdsvex} from 'mdsvex';
 import mdsvexConfig from './mdsvex.config.js';
 import adapter from '@sveltejs/adapter-static';
-import preprocess from 'svelte-preprocess';
-import sveltePreprocess from 'svelte-preprocess';
-import Icons from 'unplugin-icons/vite';
-import svelteSvg from '@poppanator/sveltekit-svg';
 import examples from 'mdsvexamples/vite'
 import sveld from './plugins/sveld.js'
 import path from "path";
+import { preprocess, plugins } from './src/package/config/svelte.config.js'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
     extensions: ['.svelte', ...mdsvexConfig.extensions],
 
     preprocess: [
-        preprocess({
+        preprocess,
-            postcss: true,
-        }),
         mdsvex(mdsvexConfig),
     ],
 
@@ -28,12 +23,7 @@ const config = {
         },
         vite: {
             plugins: [
-                svelteSvg(),
+                ...plugins,
-                Icons({
-                    compiler: 'svelte',
-                    defaultClass: 'icon',
-                    scale: 1.1428, // 1.1428rem = 16px when root size is 14px
-                }),
                 examples,
                 sveld(),
             ],
@@ -52,6 +42,9 @@ const config = {
                 }
             }
         },
+        files: {
+            lib: 'src/package',
+        }
     },
 };