lapikit 0.0.0-insiders.83afa82 → 0.0.0-insiders.a2a7a4d

package/dist/server/modules/ansi.d.ts

@@ -38,3 +38,4 @@ export declare const ansi: {
     };
 };
 export type Ansi = typeof ansi;
+export declare const sendConsole: (type: "info" | "error" | "warn" | "success" | undefined, msg: string) => void;

package/dist/server/modules/ansi.js

@@ -42,3 +42,14 @@ export const ansi = {
     inverse,
     underline
 };
+export const sendConsole = (type = 'info', msg) => {
+    const name = ansi.color.cyan('lapikit');
+    if (type === 'error')
+        console.error(name, ansi.bold.red('[error]'), msg);
+    else if (type === 'warn')
+        console.warn(name, ansi.bold.yellow('[warn]'), msg);
+    else if (type === 'success')
+        console.warn(name, ansi.bold.green('[success]'), msg);
+    else
+        console.log(name, ansi.bold.blue('[info]'), msg);
+};

package/dist/server/modules/css.d.ts

@@ -0,0 +1 @@
+export declare const processCSS: (minified?: boolean, normalize?: boolean) => Promise<void>;

package/dist/server/modules/css.js

@@ -0,0 +1,137 @@
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import fs from 'fs';
+import fsPromises from 'fs/promises';
+import path from 'path';
+import { ansi, sendConsole } from './ansi.js';
+import { minify } from './minify.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const __components = path.resolve('src/components');
+// temps
+const breakpoints = {
+    _default: 0,
+    desktop: 1024,
+    tablet: '768vw',
+    mobile: 480
+};
+export const processCSS = async (minified, normalize) => {
+    console.log(ansi.bold.blue('Processing CSS...'));
+    const _normalize = fs.readFileSync(path.resolve(__dirname, '../../styles/normalize.css'), 'utf-8');
+    const _variables = fs.readFileSync(path.resolve(__dirname, '../../styles/variables.css'), 'utf-8');
+    let styles = `${_variables}\n`;
+    if (normalize)
+        styles += `${_normalize}\n`;
+    if (fs.existsSync(__components) && fs.statSync(__components).isDirectory()) {
+        const tresholds = {
+            _default: '',
+            static: '',
+            min: '',
+            max: '',
+            all: ''
+        };
+        function loadComponentCSS(directory) {
+            fs.readdirSync(directory).forEach((File) => {
+                const absolutePath = path.join(directory, File);
+                if (fs.statSync(absolutePath).isDirectory())
+                    return loadComponentCSS(absolutePath);
+                else if (absolutePath.endsWith('.css') && !absolutePath.includes('/_')) {
+                    const content = parser(fs.readFileSync(absolutePath, 'utf-8'));
+                    tresholds._default += content.allExtracted
+                        .replaceAll('[breakpoint|min]', '[breakpoint]')
+                        .replaceAll('[breakpoint|max]', '[breakpoint]')
+                        .replaceAll('[breakpoint|all]', '[breakpoint]');
+                    tresholds.static += content.defaultExtracted;
+                    tresholds.min += content.minExtracted.replaceAll('[breakpoint|min]', '[breakpoint]');
+                    tresholds.max += content.maxExtracted.replaceAll('[breakpoint|max]', '[breakpoint]');
+                    tresholds.all += content.allModifierExtracted.replaceAll('[breakpoint|all]', '[breakpoint]');
+                    return (styles += `${content.cleaned}\n`);
+                }
+            });
+        }
+        loadComponentCSS(path.resolve(__dirname, '../../components'));
+        for (const property in breakpoints) {
+            if (property !== '_default') {
+                const name = `.${/^\d/.test(property) ? `\\3${property}` : property}\\:`;
+                const value = typeof breakpoints[property] === 'number'
+                    ? `${breakpoints[property]}px`
+                    : breakpoints[property];
+                if (tresholds.static !== '' || tresholds.all !== '' || tresholds.min !== '') {
+                    styles += `@media screen and (min-width: ${value}) {\n`;
+                    if (tresholds.static !== '')
+                        styles += tresholds.static.replaceAll('[breakpoint]', name);
+                    if (tresholds.all !== '')
+                        styles += tresholds.all.replaceAll('[breakpoint]', name);
+                    if (tresholds.min !== '')
+                        styles += tresholds.min.replaceAll('[breakpoint]', name);
+                    styles += `}\n`;
+                }
+                if (tresholds.max !== '' || tresholds.all !== '') {
+                    styles += `@media screen and (max-width: ${value}) {\n`;
+                    if (tresholds.max !== '')
+                        styles += tresholds.max.replaceAll('[breakpoint]', name);
+                    if (tresholds.all !== '')
+                        styles += tresholds.all.replaceAll('[breakpoint]', name);
+                    styles += `}\n`;
+                }
+            }
+            else {
+                styles += tresholds._default.replaceAll('[breakpoint]', '.');
+            }
+        }
+    }
+    if (minified) {
+        styles = minify(styles);
+        sendConsole('success', 'css minified');
+    }
+    fsPromises.writeFile(path.resolve(__dirname, '../../styles.css'), styles);
+};
+const parser = (css) => {
+    const regex = /([^{]+)\{([^}]+)\}/g;
+    let match;
+    const matchesToRemove = [];
+    const extractedByType = {
+        allExtracted: [],
+        defaultExtracted: [],
+        minExtracted: [],
+        maxExtracted: [],
+        allModifierExtracted: []
+    };
+    while ((match = regex.exec(css)) !== null) {
+        const fullMatch = match[0];
+        const selectors = match[1].trim();
+        const body = match[2].trim();
+        const selectorsArray = selectors.split(',').map((sel) => sel.trim());
+        let matchedType = null;
+        if (selectorsArray.some((sel) => sel.includes('[breakpoint|min]'))) {
+            matchedType = 'minExtracted';
+        }
+        else if (selectorsArray.some((sel) => sel.includes('[breakpoint|max]'))) {
+            matchedType = 'maxExtracted';
+        }
+        else if (selectorsArray.some((sel) => sel.includes('[breakpoint|all]'))) {
+            matchedType = 'allModifierExtracted';
+        }
+        else if (selectorsArray.some((sel) => sel.includes('[breakpoint]'))) {
+            matchedType = 'defaultExtracted';
+        }
+        if (matchedType) {
+            const rule = `${selectors} {\n${body}\n}`;
+            extractedByType.allExtracted.push(rule);
+            extractedByType[matchedType].push(rule);
+            matchesToRemove.push(fullMatch);
+        }
+    }
+    let cleaned = css;
+    for (const rule of matchesToRemove) {
+        cleaned = cleaned.replace(rule, '').replace(/\n{2,}/g, '\n\n');
+    }
+    return {
+        allExtracted: extractedByType.allExtracted.join('\n\n').trim(),
+        defaultExtracted: extractedByType.defaultExtracted.join('\n\n').trim(),
+        minExtracted: extractedByType.minExtracted.join('\n\n').trim(),
+        maxExtracted: extractedByType.maxExtracted.join('\n\n').trim(),
+        allModifierExtracted: extractedByType.allModifierExtracted.join('\n\n').trim(),
+        cleaned: cleaned.trim()
+    };
+};

package/dist/server/modules/minify.d.ts

@@ -0,0 +1 @@
+export declare const minify: (css: string) => string;

package/dist/server/modules/minify.js

@@ -0,0 +1,10 @@
+export const minify = (css) => {
+    const minified = css
+        .replace(/\s+/g, ' ')
+        .replace(/\/\*.*?\*\//g, '')
+        .replace(/;\s*}/g, '}')
+        .replace(/:\s+/g, ':')
+        .replace(/\s*([{};:])\s*/g, '$1')
+        .trim();
+    return minified;
+};

package/dist/server/vite.d.ts

@@ -1,6 +1,6 @@
 import type { ViteDevServer } from 'vite';
 interface LapikitPlugin {
-    extends?: 'tailwindcss';
+    normalize?: boolean;
     minify?: boolean;
 }
 export declare function lapikit(options?: LapikitPlugin): Promise<{

package/dist/server/vite.js

@@ -1,15 +1,17 @@
 import { ansi } from './modules/ansi.js';
 import { importer } from './modules/importer.js';
+import { processCSS } from './modules/css.js';
 export async function lapikit(options = {}) {
     return {
         name: 'lapikit/vite.js',
         async configResolved() {
             console.log(ansi.bold.blue('Vite plugin loaded'), options);
             const config = await importer();
-            console.log('config', config);
+            await processCSS(options.minify, options.normalize);
+            // console.log('config', config);
         },
         async configureServer(server) {
-            console.log(ansi.inverse.red('Vite server configured'), server);
+            // console.log(ansi.inverse.red('Vite server configured'), server);
         }
     };
 }

package/dist/styles/normalize.css

@@ -0,0 +1,123 @@
+html {
+	-webkit-text-size-adjust: 100%;
+	tab-size: 4;
+	line-height: 1.5;
+	box-sizing: border-box;
+	font-family: var(--font-sans, var(--kit-font-family-sans));
+}
+
+pre,
+code {
+	font-family: var(--font-mono, var(--kit-font-family-mono));
+}
+
+body {
+	margin: 0;
+}
+
+main {
+	display: block;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font: inherit;
+}
+
+button {
+	overflow: visible;
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'],
+[role='button'] {
+	cursor: pointer;
+	color: inherit;
+}
+
+*:not(body) {
+	outline: none;
+}
+
+*,
+::after,
+::before,
+::backdrop {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	border: 0 solid;
+}
+
+*,
+::before,
+::after {
+	background-repeat: no-repeat;
+	box-sizing: inherit;
+}
+
+::before,
+::after {
+	text-decoration: inherit;
+	vertical-align: inherit;
+}
+
+[type='search'] {
+	-webkit-appearance: textfield;
+	appearance: textfield;
+	outline-offset: -2px;
+}
+
+ol,
+ul,
+menu {
+	list-style: initial;
+	margin-left: calc(var(--kit-spacing) * 5);
+}
+
+ol ul,
+ol ol,
+ul ul,
+ul ol {
+	padding-left: 1rem;
+}
+
+code {
+	border-radius: 0.25rem;
+	padding-block: 0.125rem;
+	padding-inline: 0.375rem;
+	position: relative;
+}
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sup {
+	top: -0.5em;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+img {
+	border-style: none;
+}
+
+button,
+input,
+select,
+textarea {
+	background-color: transparent;
+	border-style: none;
+}

package/dist/styles/variables.css

@@ -0,0 +1,7 @@
+:root {
+	--kit-font-family-sans:
+		system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+		sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+	--kit-font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+	--kit-spacing: 0.25rem;
+}

package/dist/styles.css

@@ -1,80 +0,0 @@
-html {
-	-webkit-text-size-adjust: 100%;
-	tab-size: 4;
-	line-height: 1.5;
-	box-sizing: border-box;
-}
-
-body {
-	margin: 0;
-}
-
-main {
-	display: block;
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
-	font: inherit;
-}
-
-button {
-	overflow: visible;
-}
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'],
-[role='button'] {
-	cursor: pointer;
-	color: inherit;
-}
-
-button,
-input,
-select,
-textarea {
-	background-color: transparent;
-	border-style: none;
-}
-
-*:not(body) {
-	outline: none;
-}
-
-*,
-::after,
-::before,
-::backdrop {
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-	border: 0 solid;
-}
-
-img {
-	border-style: none;
-}
-
-*,
-::before,
-::after {
-	background-repeat: no-repeat;
-	box-sizing: inherit;
-}
-
-::before,
-::after {
-	text-decoration: inherit;
-	vertical-align: inherit;
-}
-
-[type='search'] {
-	-webkit-appearance: textfield;
-	appearance: textfield;
-	outline-offset: -2px;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.0.0-insiders.83afa82",
+	"version": "0.0.0-insiders.a2a7a4d",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",