lapikit 0.0.0-insiders.a2a7a4d → 0.0.0-insiders.b14f086
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/helper.js +65 -0
- package/bin/lapikit.js +53 -0
- package/bin/modules/adapter.js +52 -0
- package/bin/modules/preset.js +11 -0
- package/dist/{server/modules → internal}/ansi.d.ts +0 -1
- package/dist/{server/modules → internal}/ansi.js +0 -11
- package/dist/internal/colors.d.ts +1 -0
- package/dist/internal/colors.js +50 -0
- package/dist/internal/index.d.ts +2 -0
- package/dist/internal/index.js +2 -0
- package/dist/internal/terminal.d.ts +1 -0
- package/dist/internal/terminal.js +12 -0
- package/dist/internal/types.d.ts +44 -0
- package/dist/internal/types.js +1 -0
- package/dist/plugin/modules/config.d.ts +2 -0
- package/dist/plugin/modules/config.js +54 -0
- package/dist/plugin/modules/importer.js +15 -0
- package/dist/{server/vite.d.ts → plugin/vitejs.d.ts} +1 -6
- package/dist/plugin/vitejs.js +26 -0
- package/dist/preset.d.ts +2 -0
- package/dist/preset.js +80 -0
- package/dist/style/css.d.ts +2 -0
- package/dist/style/css.js +31 -0
- package/dist/{styles → style}/normalize.css +2 -2
- package/dist/style/parser/color.d.ts +5 -0
- package/dist/style/parser/color.js +77 -0
- package/dist/style/parser/component.d.ts +2 -0
- package/dist/style/parser/component.js +115 -0
- package/dist/style/parser/device.d.ts +2 -0
- package/dist/style/parser/device.js +28 -0
- package/dist/style/parser/index.d.ts +4 -0
- package/dist/style/parser/index.js +4 -0
- package/dist/style/parser/variable.d.ts +2 -0
- package/dist/style/parser/variable.js +25 -0
- package/dist/utils/x11.d.ts +4 -0
- package/dist/utils/x11.js +151 -0
- package/package.json +11 -5
- package/dist/server/modules/css.d.ts +0 -1
- package/dist/server/modules/css.js +0 -137
- package/dist/server/modules/importer.js +0 -13
- package/dist/server/vite.js +0 -17
- package/dist/styles/variables.css +0 -7
- /package/dist/{server/modules → internal}/minify.d.ts +0 -0
- /package/dist/{server/modules → internal}/minify.js +0 -0
- /package/dist/{server → plugin}/modules/importer.d.ts +0 -0
package/bin/helper.js
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
export const color = {
|
|
2
|
+
red: `\x1b[31m${text}\x1b[0m`,
|
|
3
|
+
green: `\x1b[32m${text}\x1b[0m`,
|
|
4
|
+
yellow: `\x1b[33m${text}\x1b[0m`,
|
|
5
|
+
blue: `\x1b[34m${text}\x1b[0m`,
|
|
6
|
+
purple: `\x1b[35m${text}\x1b[0m`,
|
|
7
|
+
cyan: `\x1b[36m${text}\x1b[0m`
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export const variant = {
|
|
11
|
+
bold: `\x1b[1m${text}\x1b[0m`,
|
|
12
|
+
underline: `\x1b[4m${text}\x1b[0m`,
|
|
13
|
+
inverse: `\x1b[7m${text}\x1b[0m`
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export const bold = {
|
|
17
|
+
red: `\x1b[1m\x1b[31m${text}\x1b[0m`,
|
|
18
|
+
green: `\x1b[1m\x1b[32m${text}\x1b[0m`,
|
|
19
|
+
yellow: `\x1b[1m\x1b[33m${text}\x1b[0m`,
|
|
20
|
+
blue: `\x1b[1m\x1b[34m${text}\x1b[0m`,
|
|
21
|
+
purple: `\x1b[1m\x1b[35m${text}\x1b[0m`,
|
|
22
|
+
cyan: `\x1b[1m\x1b[36m${text}\x1b[0m`
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export const inverse = {
|
|
26
|
+
red: `\x1b[7m\x1b[31m${text}\x1b[0m`,
|
|
27
|
+
green: `\x1b[7m\x1b[32m${text}\x1b[0m`,
|
|
28
|
+
yellow: `\x1b[7m\x1b[33m${text}\x1b[0m`,
|
|
29
|
+
blue: `\x1b[7m\x1b[34m${text}\x1b[0m`,
|
|
30
|
+
purple: `\x1b[7m\x1b[35m${text}\x1b[0m`,
|
|
31
|
+
cyan: `\x1b[7m\x1b[36m${text}\x1b[0m`
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export const underline = {
|
|
35
|
+
red: `\x1b[4m\x1b[31m${text}\x1b[0m`,
|
|
36
|
+
green: `\x1b[4m\x1b[32m${text}\x1b[0m`,
|
|
37
|
+
yellow: `\x1b[4m\x1b[33m${text}\x1b[0m`,
|
|
38
|
+
blue: `\x1b[4m\x1b[34m${text}\x1b[0m`,
|
|
39
|
+
purple: `\x1b[4m\x1b[35m${text}\x1b[0m`,
|
|
40
|
+
cyan: `\x1b[4m\x1b[36m${text}\x1b[0m`
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export const terminal = (type = 'info', msg) => {
|
|
44
|
+
const name = ansi.color.cyan('lapikit');
|
|
45
|
+
|
|
46
|
+
if (type === 'error') console.error(name, ansi.bold.red('[error]'), msg);
|
|
47
|
+
else if (type === 'warn') console.warn(name, ansi.bold.yellow('[warn]'), msg);
|
|
48
|
+
else if (type === 'success') console.warn(name, ansi.bold.green('[success]'), msg);
|
|
49
|
+
else console.log(name, ansi.bold.blue('[info]'), msg);
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
export function getCssPathFromArgs() {
|
|
53
|
+
const args = process.argv.slice(2);
|
|
54
|
+
return args[1] || 'src/app.css';
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export async function envTypescript() {
|
|
58
|
+
const directory = process.cwd();
|
|
59
|
+
try {
|
|
60
|
+
await fs.readFile(path.resolve(directory, 'tsconfig.json'), 'utf-8');
|
|
61
|
+
return true;
|
|
62
|
+
} catch {
|
|
63
|
+
return false;
|
|
64
|
+
}
|
|
65
|
+
}
|
package/bin/lapikit.js
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { promises as fs } from 'fs';
|
|
2
|
+
import path from 'path';
|
|
3
|
+
import { color, bold, variant, terminal, envTypescript } from './helper';
|
|
4
|
+
import { preset } from './modules/preset';
|
|
5
|
+
import { adapterCSSConfig, adapterViteConfig } from './modules/adapter';
|
|
6
|
+
|
|
7
|
+
const [, , command] = process.argv;
|
|
8
|
+
const typescriptEnabled = envTypescript();
|
|
9
|
+
|
|
10
|
+
if (process.argv.includes('--help') || process.argv.includes('-h')) {
|
|
11
|
+
terminal(
|
|
12
|
+
'info',
|
|
13
|
+
`usage: ${color.yellow('npx lapikit init {cssPath}')}\n\n ${variant.bold('options:')}\n
|
|
14
|
+
- {cssPath}: (${color.cyan('src/app.css')}) customize path on your origin css file.\n\n`
|
|
15
|
+
);
|
|
16
|
+
process.exit(0);
|
|
17
|
+
} else if (command === 'init') {
|
|
18
|
+
console.log(' _ _ _ _ _ ');
|
|
19
|
+
console.log(' | | (_) | (_) | ');
|
|
20
|
+
console.log(' | | __ _ _ __ _| | ___| |_ ');
|
|
21
|
+
console.log(" | | / _` | '_ \\| | |/ / | __|");
|
|
22
|
+
console.log(' | |___| (_| | |_) | | <| | |_ ');
|
|
23
|
+
console.log(' |______\\__,_| .__/|_|_|\\_\\_|\\__|');
|
|
24
|
+
console.log(' | | ');
|
|
25
|
+
console.log(' |_| ');
|
|
26
|
+
|
|
27
|
+
terminal('info', `${bold.blue('LAPIKIT')} - Component Library for Svelte\n\n`);
|
|
28
|
+
|
|
29
|
+
const configPath = path.resolve(process.cwd(), 'lapikit.config.js');
|
|
30
|
+
try {
|
|
31
|
+
await fs.writeFile(configPath, preset.trim() + '\n', 'utf8');
|
|
32
|
+
terminal('success', `has create lapikit.config.js on your project.`);
|
|
33
|
+
} catch (error) {
|
|
34
|
+
terminal('error', `failed to create configuration file:\n\n ${error}`);
|
|
35
|
+
terminal(
|
|
36
|
+
'warn',
|
|
37
|
+
`you can create lapikit.config.js manually, please visite https://localhost:3000/docs for more information`
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
await adapterViteConfig(typescriptEnabled);
|
|
42
|
+
await adapterCSSConfig();
|
|
43
|
+
|
|
44
|
+
terminal(
|
|
45
|
+
'info',
|
|
46
|
+
`${bold.blue('Thank to use lapikit, discover all posibility with lapikit on https://localhost:3000/docs')}\n\n`
|
|
47
|
+
);
|
|
48
|
+
|
|
49
|
+
console.log('Github: https://github.com/nycolaide/lapikit');
|
|
50
|
+
console.log('Support the developement: https://buymeacoffee.com/nycolaide');
|
|
51
|
+
} else {
|
|
52
|
+
terminal('error', `Command not recognized. Try 'npx lapikit init'`);
|
|
53
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { promises as fs } from 'fs';
|
|
2
|
+
import path from 'path';
|
|
3
|
+
import { getCssPathFromArgs, terminal } from '../helper';
|
|
4
|
+
|
|
5
|
+
const importLapikitVite = `import { lapikit } from 'lapikit/vite';`;
|
|
6
|
+
const importLapikitCss = `@import 'lapikit/css';`;
|
|
7
|
+
|
|
8
|
+
export async function adapterViteConfig(typescript) {
|
|
9
|
+
const viteConfigPath = path.resolve(process.cwd(), `vite.config.${typescript ? 'ts' : 'js'}`);
|
|
10
|
+
try {
|
|
11
|
+
let viteConfig = await fs.readFile(viteConfigPath, 'utf8');
|
|
12
|
+
|
|
13
|
+
if (!viteConfig.includes(`${importLapikitVite}`))
|
|
14
|
+
viteConfig = `${importLapikitVite}\n` + viteConfig;
|
|
15
|
+
|
|
16
|
+
const pluginsRegex = /plugins:\s*\[([^\]]*)\]/;
|
|
17
|
+
const match = viteConfig.match(pluginsRegex);
|
|
18
|
+
|
|
19
|
+
if (match && !match[1].includes('lapikit()')) {
|
|
20
|
+
const updatedPlugins = match[1].trim() ? `${match[1].trim()}, lapikit()` : `lapikit()`;
|
|
21
|
+
|
|
22
|
+
viteConfig = viteConfig.replace(pluginsRegex, `plugins: [${updatedPlugins}]`);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
await fs.writeFile(viteConfigPath, viteConfig, 'utf8');
|
|
26
|
+
|
|
27
|
+
terminal('success', 'lapikit() has added on vite.config.(js|ts) successfully');
|
|
28
|
+
} catch (error) {
|
|
29
|
+
terminal(
|
|
30
|
+
'error',
|
|
31
|
+
`lapikit encountered a problem while editing vite.config.(js|ts): \n\n ${error}`
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export async function adapterCSSConfig() {
|
|
37
|
+
const cssPath = getCssPathFromArgs();
|
|
38
|
+
const resolvedPath = path.resolve(process.cwd(), cssPath);
|
|
39
|
+
try {
|
|
40
|
+
await fs.access(resolvedPath);
|
|
41
|
+
let appCssContent = await fs.readFile(resolvedPath, 'utf8');
|
|
42
|
+
appCssContent = `${importLapikitCss}\n\n` + appCssContent;
|
|
43
|
+
await fs.writeFile(resolvedPath, appCssContent, 'utf8');
|
|
44
|
+
|
|
45
|
+
terminal('success', `lapikit/css has added on ${cssPath}.`);
|
|
46
|
+
} catch (error) {
|
|
47
|
+
terminal(
|
|
48
|
+
'error',
|
|
49
|
+
`lapikit encountered a problem while editing ${cssPath}:\n\n ${error.message}.`
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -42,14 +42,3 @@ export const ansi = {
|
|
|
42
42
|
inverse,
|
|
43
43
|
underline
|
|
44
44
|
};
|
|
45
|
-
export const sendConsole = (type = 'info', msg) => {
|
|
46
|
-
const name = ansi.color.cyan('lapikit');
|
|
47
|
-
if (type === 'error')
|
|
48
|
-
console.error(name, ansi.bold.red('[error]'), msg);
|
|
49
|
-
else if (type === 'warn')
|
|
50
|
-
console.warn(name, ansi.bold.yellow('[warn]'), msg);
|
|
51
|
-
else if (type === 'success')
|
|
52
|
-
console.warn(name, ansi.bold.green('[success]'), msg);
|
|
53
|
-
else
|
|
54
|
-
console.log(name, ansi.bold.blue('[info]'), msg);
|
|
55
|
-
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const parseColor: (input: string) => string;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { x11Colors } from '../utils/x11.js';
|
|
2
|
+
export const parseColor = (input) => {
|
|
3
|
+
input = input.trim();
|
|
4
|
+
if (input.startsWith('#')) {
|
|
5
|
+
const rgb = hexToRgb(input);
|
|
6
|
+
return rgbToOklch(rgb.r, rgb.g, rgb.b);
|
|
7
|
+
}
|
|
8
|
+
if (input.startsWith('rgb')) {
|
|
9
|
+
const parts = input
|
|
10
|
+
.replace(/rgba?|\(|\)|\s+/g, '')
|
|
11
|
+
.split(',')
|
|
12
|
+
.map(Number);
|
|
13
|
+
return rgbToOklch(parts[0], parts[1], parts[2]);
|
|
14
|
+
}
|
|
15
|
+
if (input.startsWith('oklch('))
|
|
16
|
+
return input;
|
|
17
|
+
if (x11Colors[input]) {
|
|
18
|
+
const hex = x11Colors[input];
|
|
19
|
+
const rgb = hexToRgb(hex);
|
|
20
|
+
return rgbToOklch(rgb.r, rgb.g, rgb.b);
|
|
21
|
+
}
|
|
22
|
+
return input;
|
|
23
|
+
};
|
|
24
|
+
const hexToRgb = (hex) => {
|
|
25
|
+
const clean = hex.replace('#', '');
|
|
26
|
+
const bigint = parseInt(clean, 16);
|
|
27
|
+
return {
|
|
28
|
+
r: (bigint >> 16) & 255,
|
|
29
|
+
g: (bigint >> 8) & 255,
|
|
30
|
+
b: bigint & 255
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
const srgbToLinear = (c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
|
|
34
|
+
const rgbToOklch = (r, g, b) => {
|
|
35
|
+
r = srgbToLinear(r / 255);
|
|
36
|
+
g = srgbToLinear(g / 255);
|
|
37
|
+
b = srgbToLinear(b / 255);
|
|
38
|
+
const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
|
|
39
|
+
const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
|
|
40
|
+
const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
|
|
41
|
+
const l_ = Math.cbrt(l);
|
|
42
|
+
const m_ = Math.cbrt(m);
|
|
43
|
+
const s_ = Math.cbrt(s);
|
|
44
|
+
const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
|
|
45
|
+
const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
|
|
46
|
+
const b_ = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
|
|
47
|
+
const C = Math.sqrt(a * a + b_ * b_);
|
|
48
|
+
const h = (Math.atan2(b_, a) * 180) / Math.PI;
|
|
49
|
+
return `oklch(${(L * 100).toFixed(3)}% ${C.toFixed(4)} ${((h + 360) % 360).toFixed(2)})`;
|
|
50
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const terminal: (type: "info" | "error" | "warn" | "success" | undefined, msg: string) => void;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ansi } from './ansi.js';
|
|
2
|
+
export const terminal = (type = 'info', msg) => {
|
|
3
|
+
const name = ansi.color.cyan('lapikit');
|
|
4
|
+
if (type === 'error')
|
|
5
|
+
console.error(name, ansi.bold.red('[error]'), msg);
|
|
6
|
+
else if (type === 'warn')
|
|
7
|
+
console.warn(name, ansi.bold.yellow('[warn]'), msg);
|
|
8
|
+
else if (type === 'success')
|
|
9
|
+
console.warn(name, ansi.bold.green('[success]'), msg);
|
|
10
|
+
else
|
|
11
|
+
console.log(name, ansi.bold.blue('[info]'), msg);
|
|
12
|
+
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
export type FontFamily = {
|
|
2
|
+
[key: string]: string | string[];
|
|
3
|
+
};
|
|
4
|
+
export type Colors = {
|
|
5
|
+
[key: string]: {
|
|
6
|
+
light: string;
|
|
7
|
+
dark: string;
|
|
8
|
+
} | string;
|
|
9
|
+
};
|
|
10
|
+
export type Thresholds = {
|
|
11
|
+
[key: string]: number | string;
|
|
12
|
+
};
|
|
13
|
+
export type Radius = {
|
|
14
|
+
[key: string]: number | string;
|
|
15
|
+
};
|
|
16
|
+
export interface Lapikit {
|
|
17
|
+
options: {
|
|
18
|
+
normalize: boolean;
|
|
19
|
+
minify: boolean;
|
|
20
|
+
};
|
|
21
|
+
theme: {
|
|
22
|
+
colorScheme: string;
|
|
23
|
+
colors: Colors;
|
|
24
|
+
};
|
|
25
|
+
breakpoints: {
|
|
26
|
+
mobileBreakpoint: string;
|
|
27
|
+
tabletBreakpoint: string;
|
|
28
|
+
laptopBreakpoint: string;
|
|
29
|
+
thresholds: Thresholds;
|
|
30
|
+
};
|
|
31
|
+
styles: {
|
|
32
|
+
spacing: string;
|
|
33
|
+
corner: {
|
|
34
|
+
active: boolean;
|
|
35
|
+
radius: Radius;
|
|
36
|
+
};
|
|
37
|
+
font: FontFamily;
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
type DeepOptional<T> = {
|
|
41
|
+
[P in keyof T]?: T[P] extends (infer U)[] ? DeepOptional<U>[] : T[P] extends object ? DeepOptional<T[P]> : T[P];
|
|
42
|
+
};
|
|
43
|
+
export type LapikitConfig = DeepOptional<Lapikit>;
|
|
44
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { config } from '../../preset.js';
|
|
2
|
+
export const parseConfig = (props) => {
|
|
3
|
+
if (!props)
|
|
4
|
+
return config;
|
|
5
|
+
const newConfig = { ...config };
|
|
6
|
+
if (props?.options) {
|
|
7
|
+
if (props.options.normalize !== undefined)
|
|
8
|
+
newConfig.options.normalize = props.options.normalize;
|
|
9
|
+
if (props.options.minify !== undefined)
|
|
10
|
+
newConfig.options.minify = props.options.minify;
|
|
11
|
+
}
|
|
12
|
+
if (props?.theme) {
|
|
13
|
+
if (props.theme.colorScheme !== undefined)
|
|
14
|
+
newConfig.theme.colorScheme = props.theme.colorScheme;
|
|
15
|
+
if (props.theme.colors) {
|
|
16
|
+
newConfig.theme.colors = {
|
|
17
|
+
...newConfig.theme.colors,
|
|
18
|
+
...props.theme.colors
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
if (props?.breakpoints) {
|
|
23
|
+
if (props.breakpoints.mobileBreakpoint !== undefined)
|
|
24
|
+
newConfig.breakpoints.mobileBreakpoint = props.breakpoints.mobileBreakpoint;
|
|
25
|
+
if (props.breakpoints.tabletBreakpoint !== undefined)
|
|
26
|
+
newConfig.breakpoints.tabletBreakpoint = props.breakpoints.tabletBreakpoint;
|
|
27
|
+
if (props.breakpoints.laptopBreakpoint !== undefined)
|
|
28
|
+
newConfig.breakpoints.laptopBreakpoint = props.breakpoints.laptopBreakpoint;
|
|
29
|
+
if (props.breakpoints.thresholds)
|
|
30
|
+
newConfig.breakpoints.thresholds = {
|
|
31
|
+
...newConfig.breakpoints.thresholds,
|
|
32
|
+
...props.breakpoints.thresholds
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
if (props?.styles) {
|
|
36
|
+
if (props.styles.spacing !== undefined)
|
|
37
|
+
newConfig.styles.spacing = props.styles.spacing;
|
|
38
|
+
if (props.styles.corner !== undefined) {
|
|
39
|
+
if (props.styles.corner.active !== undefined)
|
|
40
|
+
newConfig.styles.corner.active = props.styles.corner.active;
|
|
41
|
+
if (props.styles.corner.radius)
|
|
42
|
+
newConfig.styles.corner.radius = {
|
|
43
|
+
...newConfig.styles.corner.radius,
|
|
44
|
+
...props.styles.corner.radius
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
if (props.styles.font)
|
|
48
|
+
newConfig.styles.font = {
|
|
49
|
+
...newConfig.styles.font,
|
|
50
|
+
...props.styles.font
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
return newConfig;
|
|
54
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import path from 'path';
|
|
2
|
+
import fs from 'fs';
|
|
3
|
+
import { terminal, ansi } from '../../internal/index.js';
|
|
4
|
+
const app = process.cwd();
|
|
5
|
+
const pathConfig = path.resolve(app, 'lapikit.config.js');
|
|
6
|
+
export const importer = async () => {
|
|
7
|
+
if (!fs.existsSync(pathConfig)) {
|
|
8
|
+
terminal('error', `config file not found\n ${ansi.color.yellow('Could not find lapikit.config.js. See https://localhost/docs/kit/vite to learn more about the configuration file.')}\n\n${ansi.color.blue('for initializing a new lapikit config, run:')}\n ${ansi.variant.bold('npx lapikit init')} ${ansi.bold.yellow('(preview)')}\n\n`);
|
|
9
|
+
process.exit(1);
|
|
10
|
+
}
|
|
11
|
+
const timestamp = Date.now();
|
|
12
|
+
const fileUrl = `file://${pathConfig}?t=${timestamp}`;
|
|
13
|
+
const content = await import(fileUrl);
|
|
14
|
+
return content.default;
|
|
15
|
+
};
|
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
import type { ViteDevServer } from 'vite';
|
|
2
|
-
|
|
3
|
-
normalize?: boolean;
|
|
4
|
-
minify?: boolean;
|
|
5
|
-
}
|
|
6
|
-
export declare function lapikit(options?: LapikitPlugin): Promise<{
|
|
2
|
+
export declare function lapikit(): Promise<{
|
|
7
3
|
name: string;
|
|
8
4
|
configResolved(): Promise<void>;
|
|
9
5
|
configureServer(server: ViteDevServer): Promise<void>;
|
|
10
6
|
}>;
|
|
11
|
-
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { importer } from './modules/importer.js';
|
|
2
|
+
import { processCSS } from '../style/css.js';
|
|
3
|
+
import { parseConfig } from './modules/config.js';
|
|
4
|
+
import { terminal } from '../internal/terminal.js';
|
|
5
|
+
export async function lapikit() {
|
|
6
|
+
return {
|
|
7
|
+
name: 'lapikit/vite.js',
|
|
8
|
+
async configResolved() {
|
|
9
|
+
const config = await importer();
|
|
10
|
+
const result = await parseConfig(config);
|
|
11
|
+
await processCSS(result);
|
|
12
|
+
terminal('info', 'lapikit is up!');
|
|
13
|
+
},
|
|
14
|
+
async configureServer(server) {
|
|
15
|
+
server.watcher.add('./lapikit.config.js');
|
|
16
|
+
server.watcher.on('change', async (filePath) => {
|
|
17
|
+
if (String(filePath).includes('lapikit.config.js')) {
|
|
18
|
+
const config = await importer();
|
|
19
|
+
const result = await parseConfig(config);
|
|
20
|
+
await processCSS(result);
|
|
21
|
+
terminal('info', 'lapikit config reloaded');
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
}
|
package/dist/preset.d.ts
ADDED
package/dist/preset.js
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
export const config = {
|
|
2
|
+
options: {
|
|
3
|
+
normalize: true, // true | false
|
|
4
|
+
minify: false // true | false
|
|
5
|
+
},
|
|
6
|
+
theme: {
|
|
7
|
+
colorScheme: 'dark', // 'light' | 'dark' | 'auto'
|
|
8
|
+
colors: {
|
|
9
|
+
primary: { light: 'oklch(45% 0.24 277.023)', dark: 'oklch(45% 0.24 277.023)' },
|
|
10
|
+
secondary: { light: 'oklch(65% 0.241 354.308)', dark: 'oklch(65% 0.241 354.308)' },
|
|
11
|
+
tertiary: { light: 'oklch(77% 0.152 181.912)', dark: 'oklch(77% 0.152 181.912)' },
|
|
12
|
+
neutral: { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
|
|
13
|
+
info: { light: 'oklch(74% 0.16 232.661)', dark: 'oklch(74% 0.16 232.661)' },
|
|
14
|
+
success: { light: 'oklch(76% 0.177 163.223)', dark: 'oklch(76% 0.177 163.223)' },
|
|
15
|
+
warning: { light: 'oklch(82% 0.189 84.429)', dark: 'oklch(82% 0.189 84.429)' },
|
|
16
|
+
error: { light: 'oklch(71% 0.194 13.428)', dark: 'oklch(71% 0.194 13.428)' },
|
|
17
|
+
base: { light: 'oklch(100% 0 0)', dark: 'oklch(25.33% 0.016 252.42)' },
|
|
18
|
+
surface: { light: 'oklch(98% 0 0)', dark: 'oklch(23.26% 0.014 253.1)' },
|
|
19
|
+
container: { light: 'oklch(95% 0 0)', dark: 'oklch(21.15% 0.012 254.09)' },
|
|
20
|
+
shadow: 'black'
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
breakpoints: {
|
|
24
|
+
mobileBreakpoint: 'sm',
|
|
25
|
+
tabletBreakpoint: 'md',
|
|
26
|
+
laptopBreakpoint: 'xl',
|
|
27
|
+
thresholds: {
|
|
28
|
+
none: 0, // 0px
|
|
29
|
+
xs: '28rem', //448px
|
|
30
|
+
sm: '40rem', //640px
|
|
31
|
+
md: '48rem', //768px
|
|
32
|
+
lg: '64rem', //1024px
|
|
33
|
+
xl: '80rem', //1280px
|
|
34
|
+
'2xl': '96rem', //1536px
|
|
35
|
+
'3xl': '112rem' //1792px
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
styles: {
|
|
39
|
+
spacing: '0.125rem', // 2px
|
|
40
|
+
corner: {
|
|
41
|
+
active: true, // true | false
|
|
42
|
+
radius: {
|
|
43
|
+
sm: '0.125rem', // 2px
|
|
44
|
+
md: '0.25rem', // 4px
|
|
45
|
+
lg: '0.5rem', // 8px
|
|
46
|
+
xl: '0.75rem', // 12px
|
|
47
|
+
'2xl': '1rem', // 16px
|
|
48
|
+
'3xl': '1.5rem', // 24px
|
|
49
|
+
full: '9999px' // 9999px
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
font: {
|
|
53
|
+
sans: [
|
|
54
|
+
'system-ui',
|
|
55
|
+
'-apple-system',
|
|
56
|
+
'BlinkMacSystemFont',
|
|
57
|
+
'Segoe UI',
|
|
58
|
+
'Roboto',
|
|
59
|
+
'Helvetica Neue',
|
|
60
|
+
'Arial',
|
|
61
|
+
'sans-serif',
|
|
62
|
+
'Apple Color Emoji',
|
|
63
|
+
'Segoe UI Emoji',
|
|
64
|
+
'Segoe UI Symbol'
|
|
65
|
+
],
|
|
66
|
+
mono: [
|
|
67
|
+
'SFMono-Regular',
|
|
68
|
+
'ui-monospace',
|
|
69
|
+
'SF Mono',
|
|
70
|
+
'Menlo',
|
|
71
|
+
'Monaco',
|
|
72
|
+
'Consolas',
|
|
73
|
+
'Liberation Mono',
|
|
74
|
+
'Courier New',
|
|
75
|
+
'monospace'
|
|
76
|
+
],
|
|
77
|
+
serif: ['Merriweather', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif']
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { fileURLToPath } from 'url';
|
|
2
|
+
import { dirname } from 'path';
|
|
3
|
+
import fs from 'fs';
|
|
4
|
+
import fsPromises from 'fs/promises';
|
|
5
|
+
import path from 'path';
|
|
6
|
+
import { minify } from '../internal/minify.js';
|
|
7
|
+
import { colors, component, devices, variables } from './parser/index.js';
|
|
8
|
+
import { terminal } from '../internal/terminal.js';
|
|
9
|
+
const __filename = fileURLToPath(import.meta.url);
|
|
10
|
+
const __dirname = dirname(__filename);
|
|
11
|
+
const __components = path.resolve('src/components');
|
|
12
|
+
export const processCSS = async (config) => {
|
|
13
|
+
const _normalize = fs.readFileSync(path.resolve(__dirname, './normalize.css'), 'utf-8');
|
|
14
|
+
let styles = ``;
|
|
15
|
+
if (config.options.normalize)
|
|
16
|
+
styles += `${_normalize}\n`;
|
|
17
|
+
const colorScheme = colors(config);
|
|
18
|
+
const deviceDisplay = devices(config);
|
|
19
|
+
const variablesStyles = variables(config);
|
|
20
|
+
styles += `${colorScheme.root}\n`;
|
|
21
|
+
styles += `${variablesStyles}\n`;
|
|
22
|
+
styles += `${colorScheme.className}\n`;
|
|
23
|
+
styles += `${deviceDisplay}\n`;
|
|
24
|
+
if (fs.existsSync(__components) && fs.statSync(__components).isDirectory())
|
|
25
|
+
styles += component(config);
|
|
26
|
+
if (config.options.minify) {
|
|
27
|
+
styles = minify(styles);
|
|
28
|
+
terminal('success', 'css minified');
|
|
29
|
+
}
|
|
30
|
+
fsPromises.writeFile(path.resolve(__dirname, '../styles.css'), styles);
|
|
31
|
+
};
|
|
@@ -3,12 +3,12 @@ html {
|
|
|
3
3
|
tab-size: 4;
|
|
4
4
|
line-height: 1.5;
|
|
5
5
|
box-sizing: border-box;
|
|
6
|
-
font-family: var(--
|
|
6
|
+
font-family: var(--kit-font-family-sans);
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
pre,
|
|
10
10
|
code {
|
|
11
|
-
font-family: var(--
|
|
11
|
+
font-family: var(--kit-font-family-mono);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
body {
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { parseColor } from '../../internal/colors.js';
|
|
2
|
+
export const colors = (config) => {
|
|
3
|
+
const schemes = {
|
|
4
|
+
light: {},
|
|
5
|
+
dark: {}
|
|
6
|
+
};
|
|
7
|
+
for (const [property, values] of Object.entries(config.theme.colors)) {
|
|
8
|
+
if (typeof values === 'string') {
|
|
9
|
+
// for all color scheme
|
|
10
|
+
const _refColor = parseColor(values);
|
|
11
|
+
schemes['light'][property] = _refColor;
|
|
12
|
+
schemes['dark'][property] = _refColor;
|
|
13
|
+
}
|
|
14
|
+
else {
|
|
15
|
+
// with specification
|
|
16
|
+
if ('light' in values && 'dark' in values) {
|
|
17
|
+
schemes['light'][property] = parseColor(values.light);
|
|
18
|
+
schemes['dark'][property] = parseColor(values.dark);
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
const _refColor = 'dark' in values ? parseColor(values['dark']) : parseColor(values['light']);
|
|
22
|
+
schemes['light'][property] = _refColor;
|
|
23
|
+
schemes['dark'][property] = _refColor;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
// css variables
|
|
28
|
+
let cssVariables = '';
|
|
29
|
+
if (config.theme.colorScheme === 'auto') {
|
|
30
|
+
for (const [themeName, colors] of Object.entries(schemes)) {
|
|
31
|
+
const used = themeName;
|
|
32
|
+
const inversed = used === 'light' ? 'dark' : 'light';
|
|
33
|
+
cssVariables += `@media (prefers-color-scheme: ${used}) {\n`;
|
|
34
|
+
cssVariables += `:root, .${used} {\n`;
|
|
35
|
+
cssVariables += `color-scheme: ${used};\n`;
|
|
36
|
+
for (const [colorName, colorValue] of Object.entries(colors)) {
|
|
37
|
+
cssVariables += `--kit-${colorName}: ${colorValue};\n`;
|
|
38
|
+
}
|
|
39
|
+
cssVariables += `}\n`;
|
|
40
|
+
cssVariables += `.${inversed} {\n`;
|
|
41
|
+
cssVariables += `color-scheme: ${used};\n`;
|
|
42
|
+
for (const [colorName, colorValue] of Object.entries(schemes[inversed])) {
|
|
43
|
+
cssVariables += `--kit-${colorName}: ${colorValue};\n`;
|
|
44
|
+
}
|
|
45
|
+
cssVariables += `}\n`;
|
|
46
|
+
cssVariables += `}\n`;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
const used = config.theme.colorScheme;
|
|
51
|
+
const inversed = config.theme.colorScheme === 'light' ? 'dark' : 'light';
|
|
52
|
+
cssVariables += `:root, .${used} {\n`;
|
|
53
|
+
cssVariables += `color-scheme: ${used};\n`;
|
|
54
|
+
for (const [colorName, colorValue] of Object.entries(schemes[used])) {
|
|
55
|
+
cssVariables += `--kit-${colorName}: ${colorValue};\n`;
|
|
56
|
+
}
|
|
57
|
+
cssVariables += `}\n`;
|
|
58
|
+
cssVariables += `.${inversed} {\n`;
|
|
59
|
+
cssVariables += `color-scheme: ${used};\n`;
|
|
60
|
+
for (const [colorName, colorValue] of Object.entries(schemes[inversed])) {
|
|
61
|
+
cssVariables += `--kit-${colorName}: ${colorValue};\n`;
|
|
62
|
+
}
|
|
63
|
+
cssVariables += `}\n`;
|
|
64
|
+
}
|
|
65
|
+
// class
|
|
66
|
+
let classStyles = '';
|
|
67
|
+
for (const [property] of Object.entries(schemes.light)) {
|
|
68
|
+
classStyles += `.${property} {\n`;
|
|
69
|
+
classStyles += `--background-color: var(--kit-${property});\n`;
|
|
70
|
+
classStyles += `--color: var(--kit-${property});\n`;
|
|
71
|
+
classStyles += `}\n`;
|
|
72
|
+
}
|
|
73
|
+
return {
|
|
74
|
+
root: cssVariables,
|
|
75
|
+
className: classStyles
|
|
76
|
+
};
|
|
77
|
+
};
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { fileURLToPath } from 'url';
|
|
2
|
+
import { dirname } from 'path';
|
|
3
|
+
import fs from 'fs';
|
|
4
|
+
import path from 'path';
|
|
5
|
+
const __filename = fileURLToPath(import.meta.url);
|
|
6
|
+
const __dirname = dirname(__filename);
|
|
7
|
+
export const component = (config) => {
|
|
8
|
+
let css = ``;
|
|
9
|
+
const tresholds = {
|
|
10
|
+
_default: '',
|
|
11
|
+
static: '',
|
|
12
|
+
min: '',
|
|
13
|
+
max: '',
|
|
14
|
+
all: ''
|
|
15
|
+
};
|
|
16
|
+
function loadComponentCSS(directory) {
|
|
17
|
+
fs.readdirSync(directory).forEach((File) => {
|
|
18
|
+
const absolutePath = path.join(directory, File);
|
|
19
|
+
if (fs.statSync(absolutePath).isDirectory())
|
|
20
|
+
return loadComponentCSS(absolutePath);
|
|
21
|
+
else if (absolutePath.endsWith('.css') && !absolutePath.includes('/_')) {
|
|
22
|
+
const content = parser(fs.readFileSync(absolutePath, 'utf-8'));
|
|
23
|
+
tresholds._default += content.allExtracted
|
|
24
|
+
.replaceAll('[breakpoint|min]', '[breakpoint]')
|
|
25
|
+
.replaceAll('[breakpoint|max]', '[breakpoint]')
|
|
26
|
+
.replaceAll('[breakpoint|all]', '[breakpoint]');
|
|
27
|
+
tresholds.static += content.defaultExtracted;
|
|
28
|
+
tresholds.min += content.minExtracted.replaceAll('[breakpoint|min]', '[breakpoint]');
|
|
29
|
+
tresholds.max += content.maxExtracted.replaceAll('[breakpoint|max]', '[breakpoint]');
|
|
30
|
+
tresholds.all += content.allModifierExtracted.replaceAll('[breakpoint|all]', '[breakpoint]');
|
|
31
|
+
return (css += `${content.cleaned}\n`);
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
loadComponentCSS(path.resolve(__dirname, '../../components'));
|
|
36
|
+
for (const property in config.breakpoints.thresholds) {
|
|
37
|
+
if (property !== '_default') {
|
|
38
|
+
const name = `.${/^\d/.test(property) ? `\\3${property}` : property}\\:`;
|
|
39
|
+
const value = typeof config.breakpoints.thresholds[property] === 'number'
|
|
40
|
+
? `${config.breakpoints.thresholds[property]}px`
|
|
41
|
+
: config.breakpoints.thresholds[property];
|
|
42
|
+
if (tresholds.static !== '' || tresholds.all !== '' || tresholds.min !== '') {
|
|
43
|
+
css += `@media screen and (min-width: ${value}) {\n`;
|
|
44
|
+
if (tresholds.static !== '')
|
|
45
|
+
css += tresholds.static.replaceAll('[breakpoint]', name);
|
|
46
|
+
if (tresholds.all !== '')
|
|
47
|
+
css += tresholds.all.replaceAll('[breakpoint]', name);
|
|
48
|
+
if (tresholds.min !== '')
|
|
49
|
+
css += tresholds.min.replaceAll('[breakpoint]', name);
|
|
50
|
+
css += `}\n`;
|
|
51
|
+
}
|
|
52
|
+
if (tresholds.max !== '' || tresholds.all !== '') {
|
|
53
|
+
css += `@media screen and (max-width: ${value}) {\n`;
|
|
54
|
+
if (tresholds.max !== '')
|
|
55
|
+
css += tresholds.max.replaceAll('[breakpoint]', name);
|
|
56
|
+
if (tresholds.all !== '')
|
|
57
|
+
css += tresholds.all.replaceAll('[breakpoint]', name);
|
|
58
|
+
css += `}\n`;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
css += tresholds._default.replaceAll('[breakpoint]', '.');
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
return css;
|
|
66
|
+
};
|
|
67
|
+
const parser = (css) => {
|
|
68
|
+
const regex = /([^{]+)\{([^}]+)\}/g;
|
|
69
|
+
let match;
|
|
70
|
+
const matchesToRemove = [];
|
|
71
|
+
const extractedByType = {
|
|
72
|
+
allExtracted: [],
|
|
73
|
+
defaultExtracted: [],
|
|
74
|
+
minExtracted: [],
|
|
75
|
+
maxExtracted: [],
|
|
76
|
+
allModifierExtracted: []
|
|
77
|
+
};
|
|
78
|
+
while ((match = regex.exec(css)) !== null) {
|
|
79
|
+
const fullMatch = match[0];
|
|
80
|
+
const selectors = match[1].trim();
|
|
81
|
+
const body = match[2].trim();
|
|
82
|
+
const selectorsArray = selectors.split(',').map((sel) => sel.trim());
|
|
83
|
+
let matchedType = null;
|
|
84
|
+
if (selectorsArray.some((sel) => sel.includes('[breakpoint|min]'))) {
|
|
85
|
+
matchedType = 'minExtracted';
|
|
86
|
+
}
|
|
87
|
+
else if (selectorsArray.some((sel) => sel.includes('[breakpoint|max]'))) {
|
|
88
|
+
matchedType = 'maxExtracted';
|
|
89
|
+
}
|
|
90
|
+
else if (selectorsArray.some((sel) => sel.includes('[breakpoint|all]'))) {
|
|
91
|
+
matchedType = 'allModifierExtracted';
|
|
92
|
+
}
|
|
93
|
+
else if (selectorsArray.some((sel) => sel.includes('[breakpoint]'))) {
|
|
94
|
+
matchedType = 'defaultExtracted';
|
|
95
|
+
}
|
|
96
|
+
if (matchedType) {
|
|
97
|
+
const rule = `${selectors} {\n${body}\n}`;
|
|
98
|
+
extractedByType.allExtracted.push(rule);
|
|
99
|
+
extractedByType[matchedType].push(rule);
|
|
100
|
+
matchesToRemove.push(fullMatch);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
let cleaned = css;
|
|
104
|
+
for (const rule of matchesToRemove) {
|
|
105
|
+
cleaned = cleaned.replace(rule, '').replace(/\n{2,}/g, '\n\n');
|
|
106
|
+
}
|
|
107
|
+
return {
|
|
108
|
+
allExtracted: extractedByType.allExtracted.join('\n\n').trim(),
|
|
109
|
+
defaultExtracted: extractedByType.defaultExtracted.join('\n\n').trim(),
|
|
110
|
+
minExtracted: extractedByType.minExtracted.join('\n\n').trim(),
|
|
111
|
+
maxExtracted: extractedByType.maxExtracted.join('\n\n').trim(),
|
|
112
|
+
allModifierExtracted: extractedByType.allModifierExtracted.join('\n\n').trim(),
|
|
113
|
+
cleaned: cleaned.trim()
|
|
114
|
+
};
|
|
115
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export const devices = (config) => {
|
|
2
|
+
let css = ``;
|
|
3
|
+
const list = {
|
|
4
|
+
mobile: config.breakpoints.mobileBreakpoint,
|
|
5
|
+
tablet: config.breakpoints.tabletBreakpoint,
|
|
6
|
+
laptop: config.breakpoints.laptopBreakpoint
|
|
7
|
+
};
|
|
8
|
+
for (const [key, value] of Object.entries(list)) {
|
|
9
|
+
const breakpointValue = config.breakpoints.thresholds[value];
|
|
10
|
+
const breakpointValueMax = key !== 'laptop'
|
|
11
|
+
? config.breakpoints.thresholds[key === 'mobile' ? list.tablet : key == 'tablet' ? list.laptop : '']
|
|
12
|
+
: undefined;
|
|
13
|
+
css += `.device-${key}, .only-on-${key} {\n`;
|
|
14
|
+
css += `display: none;\n`;
|
|
15
|
+
css += `}\n`;
|
|
16
|
+
css += `@media screen and (min-width: ${typeof breakpointValue === 'number' ? breakpointValue + 'px' : breakpointValue}) {\n`;
|
|
17
|
+
css += `.device-${key} {\n`;
|
|
18
|
+
css += `display: inherit !important;\n`;
|
|
19
|
+
css += `}\n`;
|
|
20
|
+
css += `}\n`;
|
|
21
|
+
css += `@media screen and (min-width: ${typeof breakpointValue === 'number' ? breakpointValue + 'px' : breakpointValue}) ${breakpointValueMax ? `and (max-width: ${typeof breakpointValueMax === 'number' ? breakpointValueMax + 'px' : breakpointValueMax})` : ''}{\n`;
|
|
22
|
+
css += `.only-on-${key} {\n`;
|
|
23
|
+
css += `display: inherit !important;\n`;
|
|
24
|
+
css += `}\n`;
|
|
25
|
+
css += `}\n`;
|
|
26
|
+
}
|
|
27
|
+
return css;
|
|
28
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export const variables = (config) => {
|
|
2
|
+
if (!config)
|
|
3
|
+
return '';
|
|
4
|
+
const { styles } = config;
|
|
5
|
+
let css = ``;
|
|
6
|
+
css += `:root {\n`;
|
|
7
|
+
css += `\t--kit-spacing: ${parser(styles.spacing)};\n`;
|
|
8
|
+
if (styles.corner.active) {
|
|
9
|
+
for (const [key, value] of Object.entries(styles.corner.radius)) {
|
|
10
|
+
css += `\t--kit-radius-${key}: ${typeof value === 'number' ? value + 'px' : value};\n`;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
for (const [key, value] of Object.entries(styles.font)) {
|
|
14
|
+
css += `\t--kit-font-family-${key}: ${parser(value)};\n`;
|
|
15
|
+
}
|
|
16
|
+
css += `}\n`;
|
|
17
|
+
return css;
|
|
18
|
+
};
|
|
19
|
+
const parser = (value) => {
|
|
20
|
+
if (typeof value === 'number')
|
|
21
|
+
return `${value}px`;
|
|
22
|
+
if (Array.isArray(value))
|
|
23
|
+
return value.join(', ');
|
|
24
|
+
return value;
|
|
25
|
+
};
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
export const x11Colors = {
|
|
2
|
+
aliceblue: '#F0F8FF',
|
|
3
|
+
antiquewhite: '#FAEBD7',
|
|
4
|
+
aqua: '#00FFFF',
|
|
5
|
+
aquamarine: '#7FFFD4',
|
|
6
|
+
azure: '#F0FFFF',
|
|
7
|
+
beige: '#F5F5DC',
|
|
8
|
+
bisque: '#FFE4C4',
|
|
9
|
+
black: '#000000',
|
|
10
|
+
blanchedalmond: '#FFEBCD',
|
|
11
|
+
blue: '#0000FF',
|
|
12
|
+
blueviolet: '#8A2BE2',
|
|
13
|
+
brown: '#A52A2A',
|
|
14
|
+
burlywood: '#DEB887',
|
|
15
|
+
cadetblue: '#5F9EA0',
|
|
16
|
+
chartreuse: '#7FFF00',
|
|
17
|
+
chocolate: '#D2691E',
|
|
18
|
+
coral: '#FF7F50',
|
|
19
|
+
cornflowerblue: '#6495ED',
|
|
20
|
+
cornsilk: '#FFF8DC',
|
|
21
|
+
crimson: '#DC143C',
|
|
22
|
+
cyan: '#00FFFF',
|
|
23
|
+
darkblue: '#00008B',
|
|
24
|
+
darkcyan: '#008B8B',
|
|
25
|
+
darkgoldenrod: '#B8860B',
|
|
26
|
+
darkgray: '#A9A9A9',
|
|
27
|
+
darkgrey: '#A9A9A9',
|
|
28
|
+
darkgreen: '#006400',
|
|
29
|
+
darkkhaki: '#BDB76B',
|
|
30
|
+
darkmagenta: '#8B008B',
|
|
31
|
+
darkolivegreen: '#556B2F',
|
|
32
|
+
darkorange: '#FF8C00',
|
|
33
|
+
darkorchid: '#9932CC',
|
|
34
|
+
darkred: '#8B0000',
|
|
35
|
+
darksalmon: '#E9967A',
|
|
36
|
+
darkseagreen: '#8FBC8F',
|
|
37
|
+
darkslateblue: '#483D8B',
|
|
38
|
+
darkslategray: '#2F4F4F',
|
|
39
|
+
darkslategrey: '#2F4F4F',
|
|
40
|
+
darkturquoise: '#00CED1',
|
|
41
|
+
darkviolet: '#9400D3',
|
|
42
|
+
deeppink: '#FF1493',
|
|
43
|
+
deepskyblue: '#00BFFF',
|
|
44
|
+
dimgray: '#696969',
|
|
45
|
+
dimgrey: '#696969',
|
|
46
|
+
dodgerblue: '#1E90FF',
|
|
47
|
+
firebrick: '#B22222',
|
|
48
|
+
floralwhite: '#FFFAF0',
|
|
49
|
+
forestgreen: '#228B22',
|
|
50
|
+
fuchsia: '#FF00FF',
|
|
51
|
+
gainsboro: '#DCDCDC',
|
|
52
|
+
ghostwhite: '#F8F8FF',
|
|
53
|
+
gold: '#FFD700',
|
|
54
|
+
goldenrod: '#DAA520',
|
|
55
|
+
gray: '#808080',
|
|
56
|
+
grey: '#808080',
|
|
57
|
+
green: '#008000',
|
|
58
|
+
greenyellow: '#ADFF2F',
|
|
59
|
+
honeydew: '#F0FFF0',
|
|
60
|
+
hotpink: '#FF69B4',
|
|
61
|
+
indianred: '#CD5C5C',
|
|
62
|
+
indigo: '#4B0082',
|
|
63
|
+
ivory: '#FFFFF0',
|
|
64
|
+
khaki: '#F0E68C',
|
|
65
|
+
lavender: '#E6E6FA',
|
|
66
|
+
lavenderblush: '#FFF0F5',
|
|
67
|
+
lawngreen: '#7CFC00',
|
|
68
|
+
lemonchiffon: '#FFFACD',
|
|
69
|
+
lightblue: '#ADD8E6',
|
|
70
|
+
lightcoral: '#F08080',
|
|
71
|
+
lightcyan: '#E0FFFF',
|
|
72
|
+
lightgoldenrodyellow: '#FAFAD2',
|
|
73
|
+
lightgray: '#D3D3D3',
|
|
74
|
+
lightgrey: '#D3D3D3',
|
|
75
|
+
lightgreen: '#90EE90',
|
|
76
|
+
lightpink: '#FFB6C1',
|
|
77
|
+
lightsalmon: '#FFA07A',
|
|
78
|
+
lightseagreen: '#20B2AA',
|
|
79
|
+
lightskyblue: '#87CEFA',
|
|
80
|
+
lightslategray: '#778899',
|
|
81
|
+
lightslategrey: '#778899',
|
|
82
|
+
lightsteelblue: '#B0C4DE',
|
|
83
|
+
lightyellow: '#FFFFE0',
|
|
84
|
+
lime: '#00FF00',
|
|
85
|
+
limegreen: '#32CD32',
|
|
86
|
+
linen: '#FAF0E6',
|
|
87
|
+
magenta: '#FF00FF',
|
|
88
|
+
maroon: '#800000',
|
|
89
|
+
mediumaquamarine: '#66CDAA',
|
|
90
|
+
mediumblue: '#0000CD',
|
|
91
|
+
mediumorchid: '#BA55D3',
|
|
92
|
+
mediumpurple: '#9370DB',
|
|
93
|
+
mediumseagreen: '#3CB371',
|
|
94
|
+
mediumslateblue: '#7B68EE',
|
|
95
|
+
mediumspringgreen: '#00FA9A',
|
|
96
|
+
mediumturquoise: '#48D1CC',
|
|
97
|
+
mediumvioletred: '#C71585',
|
|
98
|
+
midnightblue: '#191970',
|
|
99
|
+
mintcream: '#F5FFFA',
|
|
100
|
+
mistyrose: '#FFE4E1',
|
|
101
|
+
moccasin: '#FFE4B5',
|
|
102
|
+
navajowhite: '#FFDEAD',
|
|
103
|
+
navy: '#000080',
|
|
104
|
+
oldlace: '#FDF5E6',
|
|
105
|
+
olive: '#808000',
|
|
106
|
+
olivedrab: '#6B8E23',
|
|
107
|
+
orange: '#FFA500',
|
|
108
|
+
orangered: '#FF4500',
|
|
109
|
+
orchid: '#DA70D6',
|
|
110
|
+
palegoldenrod: '#EEE8AA',
|
|
111
|
+
palegreen: '#98FB98',
|
|
112
|
+
paleturquoise: '#AFEEEE',
|
|
113
|
+
palevioletred: '#DB7093',
|
|
114
|
+
papayawhip: '#FFEFD5',
|
|
115
|
+
peachpuff: '#FFDAB9',
|
|
116
|
+
peru: '#CD853F',
|
|
117
|
+
pink: '#FFC0CB',
|
|
118
|
+
plum: '#DDA0DD',
|
|
119
|
+
powderblue: '#B0E0E6',
|
|
120
|
+
purple: '#800080',
|
|
121
|
+
rebeccapurple: '#663399',
|
|
122
|
+
red: '#FF0000',
|
|
123
|
+
rosybrown: '#BC8F8F',
|
|
124
|
+
royalblue: '#4169E1',
|
|
125
|
+
saddlebrown: '#8B4513',
|
|
126
|
+
salmon: '#FA8072',
|
|
127
|
+
sandybrown: '#F4A460',
|
|
128
|
+
seagreen: '#2E8B57',
|
|
129
|
+
seashell: '#FFF5EE',
|
|
130
|
+
sienna: '#A0522D',
|
|
131
|
+
silver: '#C0C0C0',
|
|
132
|
+
skyblue: '#87CEEB',
|
|
133
|
+
slateblue: '#6A5ACD',
|
|
134
|
+
slategray: '#708090',
|
|
135
|
+
slategrey: '#708090',
|
|
136
|
+
snow: '#FFFAFA',
|
|
137
|
+
springgreen: '#00FF7F',
|
|
138
|
+
steelblue: '#4682B4',
|
|
139
|
+
tan: '#D2B48C',
|
|
140
|
+
teal: '#008080',
|
|
141
|
+
thistle: '#D8BFD8',
|
|
142
|
+
tomato: '#FF6347',
|
|
143
|
+
turquoise: '#40E0D0',
|
|
144
|
+
violet: '#EE82EE',
|
|
145
|
+
wheat: '#F5DEB3',
|
|
146
|
+
white: '#FFFFFF',
|
|
147
|
+
whitesmoke: '#F5F5F5',
|
|
148
|
+
yellow: '#FFFF00',
|
|
149
|
+
yellowgreen: '#9ACD32'
|
|
150
|
+
};
|
|
151
|
+
export const x11ColorNames = Object.keys(x11Colors);
|
package/package.json
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lapikit",
|
|
3
|
-
"version": "0.0.0-insiders.
|
|
3
|
+
"version": "0.0.0-insiders.b14f086",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
6
|
+
},
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/Nycolaide/lapikit.git",
|
|
10
|
+
"directory": "packages/lapikit"
|
|
11
|
+
},
|
|
4
12
|
"scripts": {
|
|
5
13
|
"dev": "vite dev",
|
|
6
14
|
"build": "vite build && npm run prepack",
|
|
@@ -14,10 +22,8 @@
|
|
|
14
22
|
"test:unit": "vitest",
|
|
15
23
|
"test": "npm run test:unit -- --run"
|
|
16
24
|
},
|
|
17
|
-
"publishConfig": {
|
|
18
|
-
"access": "public"
|
|
19
|
-
},
|
|
20
25
|
"files": [
|
|
26
|
+
"bin",
|
|
21
27
|
"dist",
|
|
22
28
|
"!dist/**/*.test.*",
|
|
23
29
|
"!dist/**/*.spec.*"
|
|
@@ -34,7 +40,7 @@
|
|
|
34
40
|
"svelte": "./dist/index.js"
|
|
35
41
|
},
|
|
36
42
|
"./vite": {
|
|
37
|
-
"default": "./dist/
|
|
43
|
+
"default": "./dist/plugin/vitejs.js"
|
|
38
44
|
},
|
|
39
45
|
"./css": "./dist/styles.css"
|
|
40
46
|
},
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const processCSS: (minified?: boolean, normalize?: boolean) => Promise<void>;
|
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
import { fileURLToPath } from 'url';
|
|
2
|
-
import { dirname } from 'path';
|
|
3
|
-
import fs from 'fs';
|
|
4
|
-
import fsPromises from 'fs/promises';
|
|
5
|
-
import path from 'path';
|
|
6
|
-
import { ansi, sendConsole } from './ansi.js';
|
|
7
|
-
import { minify } from './minify.js';
|
|
8
|
-
const __filename = fileURLToPath(import.meta.url);
|
|
9
|
-
const __dirname = dirname(__filename);
|
|
10
|
-
const __components = path.resolve('src/components');
|
|
11
|
-
// temps
|
|
12
|
-
const breakpoints = {
|
|
13
|
-
_default: 0,
|
|
14
|
-
desktop: 1024,
|
|
15
|
-
tablet: '768vw',
|
|
16
|
-
mobile: 480
|
|
17
|
-
};
|
|
18
|
-
export const processCSS = async (minified, normalize) => {
|
|
19
|
-
console.log(ansi.bold.blue('Processing CSS...'));
|
|
20
|
-
const _normalize = fs.readFileSync(path.resolve(__dirname, '../../styles/normalize.css'), 'utf-8');
|
|
21
|
-
const _variables = fs.readFileSync(path.resolve(__dirname, '../../styles/variables.css'), 'utf-8');
|
|
22
|
-
let styles = `${_variables}\n`;
|
|
23
|
-
if (normalize)
|
|
24
|
-
styles += `${_normalize}\n`;
|
|
25
|
-
if (fs.existsSync(__components) && fs.statSync(__components).isDirectory()) {
|
|
26
|
-
const tresholds = {
|
|
27
|
-
_default: '',
|
|
28
|
-
static: '',
|
|
29
|
-
min: '',
|
|
30
|
-
max: '',
|
|
31
|
-
all: ''
|
|
32
|
-
};
|
|
33
|
-
function loadComponentCSS(directory) {
|
|
34
|
-
fs.readdirSync(directory).forEach((File) => {
|
|
35
|
-
const absolutePath = path.join(directory, File);
|
|
36
|
-
if (fs.statSync(absolutePath).isDirectory())
|
|
37
|
-
return loadComponentCSS(absolutePath);
|
|
38
|
-
else if (absolutePath.endsWith('.css') && !absolutePath.includes('/_')) {
|
|
39
|
-
const content = parser(fs.readFileSync(absolutePath, 'utf-8'));
|
|
40
|
-
tresholds._default += content.allExtracted
|
|
41
|
-
.replaceAll('[breakpoint|min]', '[breakpoint]')
|
|
42
|
-
.replaceAll('[breakpoint|max]', '[breakpoint]')
|
|
43
|
-
.replaceAll('[breakpoint|all]', '[breakpoint]');
|
|
44
|
-
tresholds.static += content.defaultExtracted;
|
|
45
|
-
tresholds.min += content.minExtracted.replaceAll('[breakpoint|min]', '[breakpoint]');
|
|
46
|
-
tresholds.max += content.maxExtracted.replaceAll('[breakpoint|max]', '[breakpoint]');
|
|
47
|
-
tresholds.all += content.allModifierExtracted.replaceAll('[breakpoint|all]', '[breakpoint]');
|
|
48
|
-
return (styles += `${content.cleaned}\n`);
|
|
49
|
-
}
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
loadComponentCSS(path.resolve(__dirname, '../../components'));
|
|
53
|
-
for (const property in breakpoints) {
|
|
54
|
-
if (property !== '_default') {
|
|
55
|
-
const name = `.${/^\d/.test(property) ? `\\3${property}` : property}\\:`;
|
|
56
|
-
const value = typeof breakpoints[property] === 'number'
|
|
57
|
-
? `${breakpoints[property]}px`
|
|
58
|
-
: breakpoints[property];
|
|
59
|
-
if (tresholds.static !== '' || tresholds.all !== '' || tresholds.min !== '') {
|
|
60
|
-
styles += `@media screen and (min-width: ${value}) {\n`;
|
|
61
|
-
if (tresholds.static !== '')
|
|
62
|
-
styles += tresholds.static.replaceAll('[breakpoint]', name);
|
|
63
|
-
if (tresholds.all !== '')
|
|
64
|
-
styles += tresholds.all.replaceAll('[breakpoint]', name);
|
|
65
|
-
if (tresholds.min !== '')
|
|
66
|
-
styles += tresholds.min.replaceAll('[breakpoint]', name);
|
|
67
|
-
styles += `}\n`;
|
|
68
|
-
}
|
|
69
|
-
if (tresholds.max !== '' || tresholds.all !== '') {
|
|
70
|
-
styles += `@media screen and (max-width: ${value}) {\n`;
|
|
71
|
-
if (tresholds.max !== '')
|
|
72
|
-
styles += tresholds.max.replaceAll('[breakpoint]', name);
|
|
73
|
-
if (tresholds.all !== '')
|
|
74
|
-
styles += tresholds.all.replaceAll('[breakpoint]', name);
|
|
75
|
-
styles += `}\n`;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
else {
|
|
79
|
-
styles += tresholds._default.replaceAll('[breakpoint]', '.');
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
if (minified) {
|
|
84
|
-
styles = minify(styles);
|
|
85
|
-
sendConsole('success', 'css minified');
|
|
86
|
-
}
|
|
87
|
-
fsPromises.writeFile(path.resolve(__dirname, '../../styles.css'), styles);
|
|
88
|
-
};
|
|
89
|
-
const parser = (css) => {
|
|
90
|
-
const regex = /([^{]+)\{([^}]+)\}/g;
|
|
91
|
-
let match;
|
|
92
|
-
const matchesToRemove = [];
|
|
93
|
-
const extractedByType = {
|
|
94
|
-
allExtracted: [],
|
|
95
|
-
defaultExtracted: [],
|
|
96
|
-
minExtracted: [],
|
|
97
|
-
maxExtracted: [],
|
|
98
|
-
allModifierExtracted: []
|
|
99
|
-
};
|
|
100
|
-
while ((match = regex.exec(css)) !== null) {
|
|
101
|
-
const fullMatch = match[0];
|
|
102
|
-
const selectors = match[1].trim();
|
|
103
|
-
const body = match[2].trim();
|
|
104
|
-
const selectorsArray = selectors.split(',').map((sel) => sel.trim());
|
|
105
|
-
let matchedType = null;
|
|
106
|
-
if (selectorsArray.some((sel) => sel.includes('[breakpoint|min]'))) {
|
|
107
|
-
matchedType = 'minExtracted';
|
|
108
|
-
}
|
|
109
|
-
else if (selectorsArray.some((sel) => sel.includes('[breakpoint|max]'))) {
|
|
110
|
-
matchedType = 'maxExtracted';
|
|
111
|
-
}
|
|
112
|
-
else if (selectorsArray.some((sel) => sel.includes('[breakpoint|all]'))) {
|
|
113
|
-
matchedType = 'allModifierExtracted';
|
|
114
|
-
}
|
|
115
|
-
else if (selectorsArray.some((sel) => sel.includes('[breakpoint]'))) {
|
|
116
|
-
matchedType = 'defaultExtracted';
|
|
117
|
-
}
|
|
118
|
-
if (matchedType) {
|
|
119
|
-
const rule = `${selectors} {\n${body}\n}`;
|
|
120
|
-
extractedByType.allExtracted.push(rule);
|
|
121
|
-
extractedByType[matchedType].push(rule);
|
|
122
|
-
matchesToRemove.push(fullMatch);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
let cleaned = css;
|
|
126
|
-
for (const rule of matchesToRemove) {
|
|
127
|
-
cleaned = cleaned.replace(rule, '').replace(/\n{2,}/g, '\n\n');
|
|
128
|
-
}
|
|
129
|
-
return {
|
|
130
|
-
allExtracted: extractedByType.allExtracted.join('\n\n').trim(),
|
|
131
|
-
defaultExtracted: extractedByType.defaultExtracted.join('\n\n').trim(),
|
|
132
|
-
minExtracted: extractedByType.minExtracted.join('\n\n').trim(),
|
|
133
|
-
maxExtracted: extractedByType.maxExtracted.join('\n\n').trim(),
|
|
134
|
-
allModifierExtracted: extractedByType.allModifierExtracted.join('\n\n').trim(),
|
|
135
|
-
cleaned: cleaned.trim()
|
|
136
|
-
};
|
|
137
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import path from 'path';
|
|
2
|
-
import fs from 'fs';
|
|
3
|
-
import { ansi } from './ansi.js';
|
|
4
|
-
const app = process.cwd();
|
|
5
|
-
const pathConfig = path.resolve(app, 'lapikit.config.js');
|
|
6
|
-
export const importer = async () => {
|
|
7
|
-
if (!fs.existsSync(pathConfig)) {
|
|
8
|
-
console.error(ansi.color.cyan('lapikit'), ansi.bold.red('[error]'), 'config file not found\n', ansi.color.yellow('Could not find lapikit.config.js. See https://localhost/docs/kit/vite to learn more about the configuration file.'), '\n\n', ansi.color.blue('for initializing a new lapikit config, run:\n'), ' ' + ansi.variant.bold('npx lapikit init') + ' ' + ansi.bold.yellow('(preview)'), '\n\n');
|
|
9
|
-
process.exit(1);
|
|
10
|
-
}
|
|
11
|
-
const content = await import(pathConfig);
|
|
12
|
-
return content.default;
|
|
13
|
-
};
|
package/dist/server/vite.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { ansi } from './modules/ansi.js';
|
|
2
|
-
import { importer } from './modules/importer.js';
|
|
3
|
-
import { processCSS } from './modules/css.js';
|
|
4
|
-
export async function lapikit(options = {}) {
|
|
5
|
-
return {
|
|
6
|
-
name: 'lapikit/vite.js',
|
|
7
|
-
async configResolved() {
|
|
8
|
-
console.log(ansi.bold.blue('Vite plugin loaded'), options);
|
|
9
|
-
const config = await importer();
|
|
10
|
-
await processCSS(options.minify, options.normalize);
|
|
11
|
-
// console.log('config', config);
|
|
12
|
-
},
|
|
13
|
-
async configureServer(server) {
|
|
14
|
-
// console.log(ansi.inverse.red('Vite server configured'), server);
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--kit-font-family-sans:
|
|
3
|
-
system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
|
4
|
-
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
5
|
-
--kit-font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
|
6
|
-
--kit-spacing: 0.25rem;
|
|
7
|
-
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|