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.
Files changed (45) hide show
  1. package/bin/helper.js +65 -0
  2. package/bin/lapikit.js +53 -0
  3. package/bin/modules/adapter.js +52 -0
  4. package/bin/modules/preset.js +11 -0
  5. package/dist/{server/modules → internal}/ansi.d.ts +0 -1
  6. package/dist/{server/modules → internal}/ansi.js +0 -11
  7. package/dist/internal/colors.d.ts +1 -0
  8. package/dist/internal/colors.js +50 -0
  9. package/dist/internal/index.d.ts +2 -0
  10. package/dist/internal/index.js +2 -0
  11. package/dist/internal/terminal.d.ts +1 -0
  12. package/dist/internal/terminal.js +12 -0
  13. package/dist/internal/types.d.ts +44 -0
  14. package/dist/internal/types.js +1 -0
  15. package/dist/plugin/modules/config.d.ts +2 -0
  16. package/dist/plugin/modules/config.js +54 -0
  17. package/dist/plugin/modules/importer.js +15 -0
  18. package/dist/{server/vite.d.ts → plugin/vitejs.d.ts} +1 -6
  19. package/dist/plugin/vitejs.js +26 -0
  20. package/dist/preset.d.ts +2 -0
  21. package/dist/preset.js +80 -0
  22. package/dist/style/css.d.ts +2 -0
  23. package/dist/style/css.js +31 -0
  24. package/dist/{styles → style}/normalize.css +2 -2
  25. package/dist/style/parser/color.d.ts +5 -0
  26. package/dist/style/parser/color.js +77 -0
  27. package/dist/style/parser/component.d.ts +2 -0
  28. package/dist/style/parser/component.js +115 -0
  29. package/dist/style/parser/device.d.ts +2 -0
  30. package/dist/style/parser/device.js +28 -0
  31. package/dist/style/parser/index.d.ts +4 -0
  32. package/dist/style/parser/index.js +4 -0
  33. package/dist/style/parser/variable.d.ts +2 -0
  34. package/dist/style/parser/variable.js +25 -0
  35. package/dist/utils/x11.d.ts +4 -0
  36. package/dist/utils/x11.js +151 -0
  37. package/package.json +11 -5
  38. package/dist/server/modules/css.d.ts +0 -1
  39. package/dist/server/modules/css.js +0 -137
  40. package/dist/server/modules/importer.js +0 -13
  41. package/dist/server/vite.js +0 -17
  42. package/dist/styles/variables.css +0 -7
  43. /package/dist/{server/modules → internal}/minify.d.ts +0 -0
  44. /package/dist/{server/modules → internal}/minify.js +0 -0
  45. /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
+ }
@@ -0,0 +1,11 @@
1
+ export const preset = `
2
+ /** @type {import('lapikit').Config} */
3
+ export default {
4
+ theme: {
5
+ colorScheme: 'light',
6
+ colors: {
7
+ svelte: '#ff3e00'
8
+ }
9
+ }
10
+ };
11
+ `;
@@ -38,4 +38,3 @@ export declare const ansi: {
38
38
  };
39
39
  };
40
40
  export type Ansi = typeof ansi;
41
- export declare const sendConsole: (type: "info" | "error" | "warn" | "success" | undefined, msg: string) => void;
@@ -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,2 @@
1
+ export * from './terminal.js';
2
+ export * from './ansi.js';
@@ -0,0 +1,2 @@
1
+ export * from './terminal.js';
2
+ export * from './ansi.js';
@@ -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,2 @@
1
+ import type { LapikitConfig } from '../../internal/types.js';
2
+ export declare const parseConfig: (props?: LapikitConfig) => import("../../internal/types.js").Lapikit;
@@ -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
- interface LapikitPlugin {
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
+ }
@@ -0,0 +1,2 @@
1
+ import type { Lapikit } from './internal/types.js';
2
+ export declare const config: Lapikit;
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,2 @@
1
+ import type { Lapikit } from '../internal/types.js';
2
+ export declare const processCSS: (config: Lapikit) => Promise<void>;
@@ -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(--font-sans, var(--kit-font-family-sans));
6
+ font-family: var(--kit-font-family-sans);
7
7
  }
8
8
 
9
9
  pre,
10
10
  code {
11
- font-family: var(--font-mono, var(--kit-font-family-mono));
11
+ font-family: var(--kit-font-family-mono);
12
12
  }
13
13
 
14
14
  body {
@@ -0,0 +1,5 @@
1
+ import type { Lapikit } from '../../internal/types.js';
2
+ export declare const colors: (config: Lapikit) => {
3
+ root: string;
4
+ className: string;
5
+ };
@@ -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,2 @@
1
+ import type { Lapikit } from '../../internal/types.js';
2
+ export declare const component: (config: Lapikit) => string;
@@ -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,2 @@
1
+ import type { Lapikit } from '../../internal/types.js';
2
+ export declare const devices: (config: Lapikit) => string;
@@ -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,4 @@
1
+ export * from './color.js';
2
+ export * from './component.js';
3
+ export * from './device.js';
4
+ export * from './variable.js';
@@ -0,0 +1,4 @@
1
+ export * from './color.js';
2
+ export * from './component.js';
3
+ export * from './device.js';
4
+ export * from './variable.js';
@@ -0,0 +1,2 @@
1
+ import type { Lapikit } from '../../internal/types.js';
2
+ export declare const variables: (config?: Lapikit) => string;
@@ -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,4 @@
1
+ export declare const x11Colors: {
2
+ [key: string]: string;
3
+ };
4
+ export declare const x11ColorNames: string[];
@@ -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.a2a7a4d",
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/server/vite.js"
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
- };
@@ -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