@mlut/core 2.2.0 → 2.3.0

package/dist/jit/JitEngine.d.ts

@@ -1,3 +1,4 @@
+export declare const fileURLToPath: typeof import("url").fileURLToPath;
 export declare class JitEngine {
     private utils;
     private breakpoints;

package/dist/jit/JitEngine.js

@@ -1,12 +1,23 @@
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { path } from '../utils/path.js';
 import { logger } from '../utils/index.js';
+const isNode = globalThis.process?.env != undefined;
+const isTestEnv = globalThis.process?.env?.NODE_ENV === 'test';
 const sass = await import('sass-embedded')
     .catch(() => import('sass'))
+    .catch(() => import('https://jspm.dev/sass'))
     .catch(() => {
     throw new Error('The Sass package is not installed. You can do this with `npm i -D sass-embedded`');
 });
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const sassImporters = !isTestEnv && isNode ? [] :
+    await import('./importerFromMemory.js')
+        .then((r) => [r.importer])
+        .catch(() => []);
+export const fileURLToPath = isNode ?
+    await import('node:url').then((r) => r.fileURLToPath) :
+    ((str) => str.toString());
+const __dirname = isNode ?
+    path.dirname(fileURLToPath(import.meta.url)) :
+    globalThis.location?.origin ?? 'http://localhost';
 export class JitEngine {
     utils = new Set();
     breakpoints = [];
@@ -37,7 +48,9 @@ export class JitEngine {
         }
         let sassConfig = this.defaultSassConfig;
         if (inputPath && inputContent) {
-            this.inputFileDir = path.dirname(path.resolve(process.cwd(), inputPath));
+            if (isNode) {
+                this.inputFileDir = path.dirname(path.resolve(process.cwd(), inputPath));
+            }
             this.inputFileCache = inputContent;
             sassConfig = this.extractUserSassConfig(inputContent);
         }
@@ -77,7 +90,11 @@ export class JitEngine {
         const sortedAtRuleUtils = atRuleUtils.flat().sort(this.compareUtilsWithAtRule);
         const allUniqueUtils = [...new Set(mainUtils.flat().concat(sortedAtRuleUtils))];
         const applyStr = `\n@include ${this.sassModuleName}.apply(${JSON.stringify(allUniqueUtils)},(),true);`;
-        return sass.compileStringAsync(this.inputFileCache + applyStr, { loadPaths: [this.inputFileDir, 'node_modules'] }).then(({ css }) => css, (e) => (logger.error('Sass compilation error.', e), ''));
+        return sass.compileStringAsync(this.inputFileCache + applyStr, {
+            loadPaths: [this.inputFileDir, 'node_modules'],
+            importers: sassImporters,
+            silenceDeprecations: ['if-function',]
+        }).then(({ css }) => css, (e) => (logger.error('Sass compilation error.', e), ''));
     }
     extractUtils(content) {
         let fixedContent = content.replace(this.utilsRegexps.escapedQuotes, '');
@@ -168,6 +185,8 @@ export class JitEngine {
         const { css } = (await sass.compileStringAsync(userConfig + placeholderRules, {
             style: 'compressed',
             loadPaths: [__dirname, 'node_modules'],
+            importers: sassImporters,
+            silenceDeprecations: ['if-function',]
         }));
         const [, rawUtils, rawBreakpoints] = css.split('all:');
         const rawUtilsStrEnd = rawUtils.lastIndexOf('"') - rawUtils.length + 1;

package/dist/jit/SassSourcesLoader.d.ts

@@ -0,0 +1,17 @@
+declare global {
+    var mlut: {
+        githubToken?: string;
+    };
+}
+export declare class SassSourcesLoader {
+    private readonly kit;
+    private readonly owner;
+    private readonly repo;
+    private readonly unusedPath;
+    private readonly dirs;
+    readonly initPath = "packages/core/src/sass";
+    loadDir(dirPath: string): Promise<string[]>;
+    isDir(dirPath: string): boolean;
+    loadFile(filePath: string): Promise<string>;
+}
+export declare const sassSourcesLoader: SassSourcesLoader;

package/dist/jit/SassSourcesLoader.js

@@ -0,0 +1,58 @@
+const retryPromise = import('https://esm.sh/@octokit/plugin-retry')
+    .catch(() => import('@octokit/plugin-retry'))
+    .then((r) => r.retry);
+const octokit = await import('https://esm.sh/@octokit/rest')
+    .catch(() => import('@octokit/rest'))
+    .then(async (r) => {
+    const retry = await retryPromise;
+    const ctr = r.Octokit.plugin(retry);
+    return new ctr({
+        auth: globalThis.mlut?.githubToken ?? process.env.GITHUB_TOKEN,
+    });
+});
+export class SassSourcesLoader {
+    kit = octokit;
+    owner = 'mlutcss';
+    repo = 'mlut';
+    unusedPath = 'packages/core/src/sass/css/utils';
+    dirs = new Set();
+    initPath = 'packages/core/src/sass';
+    async loadDir(dirPath) {
+        if (dirPath.includes(this.unusedPath)) {
+            return [];
+        }
+        return this.kit.repos.getContent({
+            owner: this.owner,
+            repo: this.repo,
+            path: dirPath,
+        }).then((r) => {
+            if (!Array.isArray(r.data)) {
+                return [];
+            }
+            const result = [];
+            for (const item of r.data) {
+                if (item.type === 'dir') {
+                    this.dirs.add(item.path);
+                }
+                result.push(item.name);
+            }
+            return result;
+        });
+    }
+    isDir(dirPath) {
+        return this.dirs.has(dirPath);
+    }
+    async loadFile(filePath) {
+        return this.kit.repos.getContent({
+            owner: this.owner,
+            repo: this.repo,
+            path: filePath,
+        }).then((r) => {
+            if (Array.isArray(r.data) || r.data.type !== 'file') {
+                return '';
+            }
+            return globalThis.atob(r.data.content);
+        });
+    }
+}
+export const sassSourcesLoader = new SassSourcesLoader();

package/dist/jit/importerFromMemory.d.ts

@@ -0,0 +1,8 @@
+import type { Importer, ImporterResult } from 'sass';
+export declare class ModuleImporter implements Importer<'async'> {
+    private modules;
+    private aliases;
+    canonicalize: (initUrl: string) => URL | null;
+    load: (canonicalUrl: URL) => ImporterResult;
+}
+export declare const importer: ModuleImporter;

package/dist/jit/importerFromMemory.js

@@ -0,0 +1,66 @@
+import { path } from '../utils/path.js';
+import { sassSourcesLoader } from './SassSourcesLoader.js';
+const locationOrigin = globalThis.location?.origin ?? 'http://localhost';
+const sassIndexFileName = '_index.scss';
+async function loadSourcesRecursive(loader) {
+    const result = new Map();
+    const pathPrefix = locationOrigin + '/';
+    const doLoadRecursive = async (entry, map) => {
+        const files = await loader.loadDir(entry);
+        await Promise.all(files.map(async (item) => {
+            const itemPath = path.join(entry, item);
+            const isDir = loader.isDir(itemPath);
+            if (isDir) {
+                await doLoadRecursive(itemPath, map);
+            }
+            else {
+                const pathObj = path.parse(itemPath);
+                if (pathObj.base !== sassIndexFileName && pathObj.base.startsWith('_')) {
+                    pathObj.base = pathObj.base.slice(1);
+                }
+                const finalPath = pathPrefix + path.format(pathObj);
+                map.set(finalPath, (await loader.loadFile(itemPath)));
+            }
+        }));
+        return map;
+    };
+    return doLoadRecursive(sassSourcesLoader.initPath, result);
+}
+const modulesMap = await loadSourcesRecursive(sassSourcesLoader);
+export class ModuleImporter {
+    modules = modulesMap;
+    aliases = {
+        '@mlut/core': '../sass/index',
+        '@mlut/core/tools': '../sass/tools',
+    };
+    canonicalize = (initUrl) => {
+        let url = initUrl;
+        if (!url.includes('/sass/')) {
+            if (url in this.aliases) {
+                url = this.aliases[url];
+            }
+            else if (!url.startsWith('@mlut/core')) {
+                return null;
+            }
+        }
+        const isEntryUrl = !url.startsWith('http');
+        let newUrl = url + '.scss';
+        if (isEntryUrl) {
+            newUrl = new URL(path.join(locationOrigin, sassSourcesLoader.initPath, url.split('sass')[1]) + '.scss').href;
+        }
+        if (!this.modules.has(newUrl)) {
+            newUrl = path.join(newUrl.replace('.scss', ''), sassIndexFileName);
+        }
+        return new URL(newUrl);
+    };
+    load = (canonicalUrl) => {
+        if (!this.modules.has(canonicalUrl.href)) {
+            throw new Error('Unknown module');
+        }
+        return {
+            contents: this.modules.get(canonicalUrl.href),
+            syntax: 'scss'
+        };
+    };
+}
+export const importer = new ModuleImporter();

package/dist/sass/tools/settings/common/_utils.scss

@@ -747,6 +747,7 @@ $utils-db: (
 			),
 			'Bgr': (
 				'properties': background-repeat,
+				'multi-list-separator': ml.$tULs1,
 				'keywords': (
 					'': no-repeat,
 					'nr': no-repeat,
@@ -759,10 +760,12 @@ $utils-db: (
 			),
 			'Bgp': (
 				'properties': background-position,
+				'multi-list-separator': ml.$tULs1,
 				'keywords': 'position'
 			),
 			'Bgs': (
 				'properties': background-size,
+				'multi-list-separator': ml.$tULs1,
 				'keywords': (
 					'ct': contain,
 					'cv': cover,
@@ -770,6 +773,7 @@ $utils-db: (
 			),
 			'Bga': (
 				'properties': background-attachment,
+				'multi-list-separator': ml.$tULs1,
 				'keywords': (
 					'f': fixed,
 					'l': local,
@@ -783,13 +787,16 @@ $utils-db: (
 			),
 			'Bgcl': (
 				'properties': background-clip,
+				'multi-list-separator': ml.$tULs1,
 				'keywords': 'box-ext',
 			),
 			'Bgo': (
 				'properties': background-origin,
+				'multi-list-separator': ml.$tULs1,
 				'keywords': 'box-ext',
 			),
 			'Bgi': (
+				'multi-list-separator': ml.$tULs1,
 				'properties': background-image,
 			),
 			'-Gdl': (

package/dist/utils/path.d.ts

@@ -0,0 +1,2 @@
+import type { PlatformPath } from 'node:path';
+export declare const path: PlatformPath;

package/dist/utils/path.js

@@ -0,0 +1,3 @@
+export const path = await import('https://esm.sh/path-browserify-esm')
+    .catch(() => import('node:path'))
+    .then((r) => r.default);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mlut/core",
-	"version": "2.2.0",
+	"version": "2.3.0",
 	"description": "Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity",
 	"author": "mr150",
 	"type": "module",
@@ -40,9 +40,12 @@
 		"dist"
 	],
 	"devDependencies": {
+		"@octokit/plugin-retry": "^8.0.1",
+		"@octokit/rest": "^22.0.0",
 		"@types/node": "^20.10.5",
+		"path-browserify-esm": "^1.0.6",
 		"sass": "^1.93.0",
 		"sass-embedded": "^1.93.0",
-		"typescript": "^4.8.0"
+		"typescript": "^5.8.0"
 	}
 }