Move svelte config + postcss config to package/config

This commit is contained in:
venashial 2022-04-02 23:18:57 -07:00
parent 85b7147927
commit ea1ff65db7
10 changed files with 355 additions and 321 deletions

View File

@ -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",
"unplugin-icons": "^0.13.3"
"typescript": "~4.6.2"
},
"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"
}
}

View File

@ -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({

523
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -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

View File

@ -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'

View File

@ -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;

View File

@ -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
}),
]

View File

@ -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);

View File

@ -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({
postcss: true,
}),
preprocess,
mdsvex(mdsvexConfig),
],
@ -28,12 +23,7 @@ const config = {
},
vite: {
plugins: [
svelteSvg(),
Icons({
compiler: 'svelte',
defaultClass: 'icon',
scale: 1.1428, // 1.1428rem = 16px when root size is 14px
}),
...plugins,
examples,
sveld(),
],
@ -52,6 +42,9 @@ const config = {
}
}
},
files: {
lib: 'src/package',
}
},
};