lapikit 0.0.0-insiders.da3209a → 0.0.0-insiders.dd024f5

package/dist/internal/core/formatter/component.js

@@ -5,52 +5,59 @@ import path from 'path';
 import { parserCSSBreakpoints } from '../../helpers/parser.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
-export function componentFormatter({ breakpoints }) {
-    // load css component files (includes on components folders)
-    function loadCSSFiles(directory) {
+export async function componentFormatter({ breakpoints }) {
+    // load svelte component files (includes on components folders)
+    function loadSvelteFiles(directory) {
         fs.readdirSync(directory).forEach((File) => {
             const absolutePath = path.join(directory, File);
             if (fs.statSync(absolutePath).isDirectory())
-                return loadCSSFiles(absolutePath);
-            else if (absolutePath.endsWith('.css') && !absolutePath.includes('/_')) {
+                return loadSvelteFiles(absolutePath);
+            else if (absolutePath.endsWith('.svelte') && !absolutePath.includes('/_')) {
                 console.log(absolutePath);
-                let css = '';
-                const content = parserCSSBreakpoints(fs.readFileSync(absolutePath, 'utf8'));
-                for (const property in breakpoints) {
-                    if (property !== 'base') {
-                        const name = `.${/^\d/.test(property) ? `\\3${property}` : property}\\:`;
-                        const value = typeof breakpoints[property] === 'number'
-                            ? `${breakpoints[property]}px`
-                            : breakpoints[property];
-                        if (content.base !== '' || content.minmax !== '' || content.min !== '') {
-                            css += `@media screen and (min-width: ${value}) {\n`;
-                            if (content.base !== '')
-                                css += content.base.replaceAll('[breakpoint]', name);
-                            if (content.minmax !== '')
-                                css += content.minmax.replaceAll('[breakpoint]', name);
-                            if (content.min !== '')
-                                css += content.min.replaceAll('[breakpoint]', name);
-                            css += `}\n`;
+                const fileContent = fs.readFileSync(absolutePath, 'utf8');
+                const styleRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+                const styleMatch = styleRegex.exec(fileContent);
+                if (styleMatch) {
+                    const originalStyleContent = styleMatch[1];
+                    const content = parserCSSBreakpoints(originalStyleContent);
+                    let css = '';
+                    for (const property in breakpoints) {
+                        if (property !== 'base') {
+                            const name = `.${/^\d/.test(property) ? `\\3${property}` : property}\\:`;
+                            const value = typeof breakpoints[property] === 'number'
+                                ? `${breakpoints[property]}px`
+                                : breakpoints[property];
+                            if (content.base !== '' || content.minmax !== '' || content.min !== '') {
+                                css += `@media screen and (min-width: ${value}) {\n`;
+                                if (content.base !== '')
+                                    css += content.base.replaceAll('[breakpoint]', name);
+                                if (content.minmax !== '')
+                                    css += content.minmax.replaceAll('[breakpoint]', name);
+                                if (content.min !== '')
+                                    css += content.min.replaceAll('[breakpoint]', name);
+                                css += `}\n`;
+                            }
+                            if (content.max !== '' || content.all !== '') {
+                                css += `@media screen and (max-width: ${value}) {\n`;
+                                if (content.max !== '')
+                                    css += content.max.replaceAll('[breakpoint]', name);
+                                if (content.all !== '')
+                                    css += content.all.replaceAll('[breakpoint]', name);
+                                css += `}\n`;
+                            }
                         }
-                        if (content.max !== '' || content.all !== '') {
-                            css += `@media screen and (max-width: ${value}) {\n`;
-                            if (content.max !== '')
-                                css += content.max.replaceAll('[breakpoint]', name);
-                            if (content.all !== '')
-                                css += content.all.replaceAll('[breakpoint]', name);
-                            css += `}\n`;
+                        else {
+                            css += content.all.replaceAll('[breakpoint]', '.');
                         }
                     }
-                    else {
-                        css += content.all.replaceAll('[breakpoint]', '.');
-                    }
+                    let formattedCSS = css;
+                    formattedCSS = formattedCSS.trim().replace(/\n{3,}/g, '\n\n');
+                    console.log(formattedCSS);
+                    const updatedFileContent = fileContent.replace(styleRegex, `<style>${formattedCSS}</style>`);
+                    fs.writeFileSync(absolutePath, updatedFileContent, 'utf8');
                 }
-                let formattedCSS = css;
-                formattedCSS = formattedCSS.trim().replace(/\n{3,}/g, '\n\n');
-                console.log(formattedCSS);
-                fs.writeFileSync(absolutePath, formattedCSS, 'utf8');
             }
         });
     }
-    loadCSSFiles(path.resolve(__dirname, '../../../components'));
+    loadSvelteFiles(path.resolve(__dirname, '../../../components'));
 }

package/dist/internal/core/formatter/index.d.ts

@@ -2,4 +2,5 @@ import type { DevConfiguration } from '../../types/index.js';
 export declare function css(config: DevConfiguration): Promise<{
     themes: string;
     typography: string;
+    styles: string;
 }>;

package/dist/internal/core/formatter/index.js

@@ -1,6 +1,7 @@
 import { preset } from '../../config/presets.js';
 import { deepMerge } from '../../deepMerge.js';
 import { componentFormatter } from './component.js';
+import { stylesFormatter } from './styles.js';
 import { themesFormatter } from './theme.js';
 import { typographyFormatter } from './typography.js';
 export async function css(config) {
@@ -8,20 +9,22 @@ export async function css(config) {
     const defaultTheme = config?.theme?.defaultTheme || preset.theme.defaultTheme;
     const defaultTypography = config?.typography?.defaultTypography || preset.typography.defaultTypography;
     // formatter
-    const themes = themesFormatter({
+    const themes = await themesFormatter({
         themes: deepMerge(preset.theme.themes, config?.theme?.themes || {}),
         defaultTheme
     });
-    const typography = typographyFormatter({
+    const typography = await typographyFormatter({
         typography: deepMerge(preset.typography.fonts, config?.typography?.fonts || {}),
         defaultTypography
     });
+    const styles = await stylesFormatter({ styles: deepMerge(preset.styles, config?.styles || {}) });
     // components
-    componentFormatter({
+    await componentFormatter({
         breakpoints: deepMerge(preset.breakpoints.thresholds, config?.breakpoints?.thresholds || {})
     });
     return {
         themes: themes,
-        typography: typography
+        typography: typography,
+        styles: styles
     };
 }

package/dist/internal/core/formatter/styles.d.ts

@@ -1,4 +1,4 @@
 import type { FragStyles } from '../../types/configuration.js';
 export declare function stylesFormatter({ styles }: {
     styles: FragStyles;
-}): string;
+}): Promise<string>;

package/dist/internal/core/formatter/styles.js

@@ -1,14 +1,15 @@
 import { parserValues } from '../../helpers/parser.js';
-export function stylesFormatter({ styles }) {
+export async function stylesFormatter({ styles }) {
     let css = `:root {\n`;
     for (const [name, values] of Object.entries(styles)) {
         if (values && typeof values === 'object') {
             for (const [styleName, styleValue] of Object.entries(values || {})) {
-                css += `  --prism-${name}-${styleName}: ${parserValues(styleValue)};\n`;
+                console.log('stylesFormatter', styleName, styleValue);
+                css += `  --l-theme-${name}-${styleName}: ${parserValues(styleValue)};\n`;
             }
         }
         else {
-            css += `  --prism-${name}: ${parserValues(values)};\n`;
+            css += `  --l-theme-${name}: ${parserValues(values)};\n`;
         }
     }
     return (css += '}\n');

package/dist/internal/core/formatter/theme.d.ts

@@ -2,4 +2,4 @@ import type { FragThemes } from '../../types/index.js';
 export declare function themesFormatter({ themes, defaultTheme }: {
     themes: FragThemes;
     defaultTheme: string;
-}): string;
+}): Promise<string>;

package/dist/internal/core/formatter/theme.js

@@ -1,6 +1,6 @@
 import { preset } from '../../config/presets.js';
 import { deepMerge } from '../../deepMerge.js';
-export function themesFormatter({ themes, defaultTheme = 'light' }) {
+export async function themesFormatter({ themes, defaultTheme = 'light' }) {
     let css = '';
     for (const [name, values] of Object.entries(themes)) {
         const ref = values?.dark ? preset.theme.themes.dark : preset.theme.themes.light;

package/dist/internal/core/formatter/typography.d.ts

@@ -2,4 +2,4 @@ import type { FragTypography } from '../../types/configuration.js';
 export declare function typographyFormatter({ typography, defaultTypography }: {
     typography: FragTypography;
     defaultTypography: string;
-}): string;
+}): Promise<string>;

package/dist/internal/core/formatter/typography.js

@@ -1,5 +1,5 @@
 import { parserValues } from '../../helpers/parser.js';
-export function typographyFormatter({ typography, defaultTypography = 'default' }) {
+export async function typographyFormatter({ typography, defaultTypography = 'default' }) {
     let css = '';
     for (const [name, values] of Object.entries(typography)) {
         let cssTypo = defaultTypography === name ? `:root {\n` : `.${name} {\n`;

package/dist/internal/helpers/parser.js

@@ -39,7 +39,7 @@ export const parserCSSBreakpoints = (css) => {
         }
         if (matchedType) {
             const rule = `${selectors} {\n${body}\n}`;
-            extractedByType.allExtracted.push(rule);
+            extractedByType.all.push(rule);
             extractedByType[matchedType].push(rule);
             matchesToRemove.push(fullMatch);
         }
@@ -49,25 +49,24 @@ export const parserCSSBreakpoints = (css) => {
         cleaned = cleaned.replace(rule, '').replace(/\n{2,}/g, '\n\n');
     }
     return {
-        all: extractedByType.allExtracted
-            .join('\n\n')
-            .replaceAll('[breakpoint|min]', '[breakpoint]')
-            .replaceAll('[breakpoint|max]', '[breakpoint]')
-            .replaceAll('[breakpoint|all]', '[breakpoint]')
-            .trim(),
-        base: extractedByType.defaultExtracted.join('\n\n').trim(),
-        min: extractedByType.minExtracted
-            .join('\n\n')
-            .replaceAll('[breakpoint|min]', '[breakpoint]')
-            .trim(),
-        max: extractedByType.maxExtracted
-            .join('\n\n')
-            .replaceAll('[breakpoint|max]', '[breakpoint]')
-            .trim(),
-        minmax: extractedByType.allModifierExtracted
-            .join('\n\n')
-            .replaceAll('[breakpoint|all]', '[breakpoint]')
-            .trim(),
+        all: extractedByType.all
+            ? extractedByType.all
+                .join('\n\n')
+                .replaceAll('[breakpoint|min]', '[breakpoint]')
+                .replaceAll('[breakpoint|max]', '[breakpoint]')
+                .replaceAll('[breakpoint|all]', '[breakpoint]')
+                .trim()
+            : '',
+        base: extractedByType.base ? extractedByType.base.join('\n\n').trim() : '',
+        min: extractedByType.min
+            ? extractedByType.min.join('\n\n').replaceAll('[breakpoint|min]', '[breakpoint]').trim()
+            : '',
+        max: extractedByType.max
+            ? extractedByType.max.join('\n\n').replaceAll('[breakpoint|max]', '[breakpoint]').trim()
+            : '',
+        minmax: extractedByType.minmax
+            ? extractedByType.minmax.join('\n\n').replaceAll('[breakpoint|all]', '[breakpoint]').trim()
+            : '',
         cleaned: cleaned.trim()
     };
 };

package/dist/internal/plugins/vite.d.ts

@@ -1,8 +1,8 @@
 type Lapikit = {
     config?: string;
 };
-export declare function lapikitEvol({ config }?: Lapikit): Promise<{
+export declare function lapikit({ config }?: Lapikit): Promise<{
     name: string;
-    configResolved(): Promise<void>;
+    config(): Promise<void>;
 }>;
 export {};

package/dist/internal/plugins/vite.js

@@ -1,23 +1,23 @@
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
 import { terminal } from '../terminal.js';
-import { css } from '../../plugin/css.js';
+import { css } from '../core/formatter/index.js';
 import { parserConfigLapikit } from '../helpers/parser.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 import fsPromises from 'fs/promises';
 import path from 'path';
 const app = process.cwd();
-export async function lapikitEvol({ config } = {}) {
+export async function lapikit({ config } = {}) {
     return {
         name: 'lapikit/vite',
-        async configResolved() {
+        async config() {
             if (config) {
                 const configuration = await parserConfigLapikit(app, config);
                 // generate styles
                 const styles = await css(configuration);
-                fsPromises.writeFile(path.resolve(__dirname, '../labs.css'), styles?.themes);
-                console.log('styles', styles);
+                fsPromises.writeFile(path.resolve(__dirname, '../../labs.css'), styles?.themes + '\n\n' + styles?.typography + '\n\n' + styles?.styles || '');
+                console.log('styles', styles, __dirname);
             }
             terminal('info', 'lapikit is up!');
         }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.0.0-insiders.da3209a",
+	"version": "0.0.0-insiders.dd024f5",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"