@varlet/cli 3.2.5 → 3.2.6-alpha.1713972861390

package/README.md

@@ -47,6 +47,7 @@ Also refer to `@varlet/ui` [varlet.config.mjs](https://github.com/varletjs/varle
 | `port` | Development server port | _number_ | `8080` |
 | `title` | The title of the component library in the document | _string_ | `VARLET` |
 | `logo` | The logo of the component library in the document | _string_ | `-` |
+| `alias` | Path alias (root is src folder when use relative path) | _Record<string, string>_ | `-` |
 | `defaultLanguage` | Document default language | _string_ | `zh-CN` |
 | `defaultLightTheme` | The default light theme | _string_ | `md3LightTheme` |
 | `defaultDarkTheme` | The default dark theme | _string_ | `md3DarkTheme` |

package/README.zh-CN.md

@@ -46,7 +46,8 @@ varlet-cli gen
 | `host` | 开发服务器主机 | _number_ | `localhost` |
 | `port` | 开发服务器端口 | _number_ | `8080` |
 | `title` | 文档中组件库的标题 | _string_ | `VARLET` |
-| `logo` | 文档中组件库的logo | _string_ | `-` |
+| `logo` | 文档中组件库的 logo | _string_ | `-` |
+| `alias` | 路径别名 (使用相对路径时，根路径为 src 文件夹) | _Record<string, string>_ | `-` |
 | `defaultLanguage` | 文档默认语言 | _string_ | `zh-CN` |
 | `defaultLightTheme` | 默认的亮色主题 | _string_ | `md3LightTheme` |
 | `defaultDarkTheme` | 默认的暗色主题 | _string_ | `md3DarkTheme` |

package/lib/node/compiler/compileModule.js

@@ -2,10 +2,10 @@ import fse from 'fs-extra';
 import { build } from 'vite';
 import { resolve } from 'path';
 import { EXAMPLE_DIR_NAME, TESTS_DIR_NAME, DOCS_DIR_NAME, SRC_DIR, ES_DIR, STYLE_DIR_NAME, LIB_DIR, UMD_DIR, } from '../shared/constant.js';
-import { getPublicDirs, isDir, isDTS, isLess, isScript, isSFC } from '../shared/fsUtils.js';
+import { getPublicDirs, isDir, isDTS, isLess, isScript, isScss, isSFC } from '../shared/fsUtils.js';
 import { compileSFC } from './compileSFC.js';
 import { compileESEntry, compileScriptFile, getScriptExtname } from './compileScript.js';
-import { clearLessFiles, compileLess } from './compileStyle.js';
+import { clearLessFiles, clearScssFiles, compileLess, compileScss } from './compileStyle.js';
 import { getBundleConfig } from '../config/vite.config.js';
 import { getVarletConfig } from '../config/varlet.config.js';
 import { generateReference } from './compileTypes.js';
@@ -56,6 +56,7 @@ export async function compileFile(file) {
     isSFC(file) && (await compileSFC(file));
     isScript(file) && (await compileScriptFile(file));
     isLess(file) && (await compileLess(file));
+    isScss(file) && compileScss(file);
     isDir(file) && (await compileDir(file));
 }
 export async function compileModule() {
@@ -70,5 +71,6 @@ export async function compileModule() {
     const publicDirs = await getPublicDirs();
     await compileESEntry(dest, publicDirs);
     clearLessFiles(dest);
+    clearScssFiles(dest);
     generateReference(dest);
 }

package/lib/node/compiler/compileSFC.js

@@ -6,7 +6,7 @@ import { replaceExt, smartAppendFileSync } from '../shared/fsUtils.js';
 import { SRC_DIR, ES_DIR } from '../shared/constant.js';
 import { compileScript, getScriptExtname } from './compileScript.js';
 import ts from 'typescript';
-import { clearEmptyLine, compileLess, extractStyleDependencies, normalizeStyleDependency, STYLE_IMPORT_RE, } from './compileStyle.js';
+import { compressCss, compileLess, compileScss, extractStyleDependencies, normalizeStyleDependency, STYLE_IMPORT_RE, } from './compileStyle.js';
 const { readFile, existsSync, readFileSync, writeFileSync } = fse;
 registerTS(() => ts);
 const EXPORT = 'export default';
@@ -98,10 +98,13 @@ export async function compileSFC(sfc) {
             scoped: style.scoped,
         });
         code = extractStyleDependencies(file, code, STYLE_IMPORT_RE);
-        writeFileSync(file, clearEmptyLine(code), 'utf-8');
+        writeFileSync(file, compressCss(code), 'utf-8');
         smartAppendFileSync(cssFile, `import '${dependencyPath}.css'\n`);
         if (style.lang === 'less') {
             await compileLess(file);
         }
+        if (style.lang === 'scss') {
+            compileScss(file);
+        }
     }
 }

package/lib/node/compiler/compileScript.d.ts

@@ -1,3 +1,4 @@
+import { VarletConfig } from '../config/varlet.config.js';
 export declare const IMPORT_FROM_DEPENDENCE_RE: RegExp;
 export declare const EXPORT_FROM_DEPENDENCE_RE: RegExp;
 export declare const IMPORT_DEPENDENCE_RE: RegExp;
@@ -6,7 +7,8 @@ export declare const styleExtNames: string[];
 export declare const scriptIndexes: string[];
 export declare const styleIndexes: string[];
 export declare const tryMatchExtname: (file: string, extname: string[]) => string | undefined;
-export declare const resolveDependence: (file: string, script: string) => string;
+export declare const resolveAlias: (dependence: string, file: string, alias?: VarletConfig['alias']) => string;
+export declare const resolveDependence: (file: string, script: string, alias?: VarletConfig['alias']) => string;
 export declare function compileScriptByBabel(script: string, file: string): Promise<string>;
 export declare function compileScriptByEsbuild(script: string): Promise<string>;
 export declare function compileScript(script: string, file: string): Promise<void>;

package/lib/node/compiler/compileScript.js

@@ -1,12 +1,13 @@
-import fse from 'fs-extra';
-import esbuild from 'esbuild';
+import { ES_DIR } from '../shared/constant.js';
 import { transformAsync } from '@babel/core';
 import { bigCamelize } from '@varlet/shared';
 import { getVersion, isDir, isJsx, isTsx, replaceExt } from '../shared/fsUtils.js';
-import { extractStyleDependencies, IMPORT_CSS_RE, IMPORT_LESS_RE } from './compileStyle.js';
-import { resolve, extname, dirname } from 'path';
+import { extractStyleDependencies, IMPORT_CSS_RE, IMPORT_LESS_RE, IMPORT_SCSS_RE } from './compileStyle.js';
+import { resolve, relative, extname, dirname } from 'path';
 import { getVarletConfig } from '../config/varlet.config.js';
 import { get } from 'lodash-es';
+import fse from 'fs-extra';
+import esbuild from 'esbuild';
 const { writeFileSync, readdirSync, readFileSync, removeSync, writeFile, pathExistsSync } = fse;
 // https://regexr.com/765a4
 export const IMPORT_FROM_DEPENDENCE_RE = /import\s+?[\w\s{},$*]+\s+from\s+?(".*?"|'.*?')/g;
@@ -15,9 +16,9 @@ export const EXPORT_FROM_DEPENDENCE_RE = /export\s+?[\w\s{},$*]+\s+from\s+?(".*?
 // https://regexr.com/764ve
 export const IMPORT_DEPENDENCE_RE = /import\s+(".*?"|'.*?')/g;
 export const scriptExtNames = ['.vue', '.ts', '.tsx', '.mjs', '.js', '.jsx'];
-export const styleExtNames = ['.less', '.css'];
+export const styleExtNames = ['.less', '.scss', '.css'];
 export const scriptIndexes = ['index.mjs', 'index.vue', 'index.ts', 'index.tsx', 'index.js', 'index.jsx'];
-export const styleIndexes = ['index.less', 'index.css'];
+export const styleIndexes = ['index.less', 'index.scss', 'index.css'];
 export const tryMatchExtname = (file, extname) => {
     // eslint-disable-next-line no-restricted-syntax
     for (const ext of extname) {
@@ -27,18 +28,34 @@ export const tryMatchExtname = (file, extname) => {
         }
     }
 };
-export const resolveDependence = (file, script) => {
+export const resolveAlias = (dependence, file, alias = {}) => {
+    let matchedAliasKey = Object.keys(alias).find((key) => dependence === key);
+    if (!matchedAliasKey) {
+        // @/ -> yes
+        // @varlet/ui -> no
+        matchedAliasKey = Object.keys(alias).find((key) => dependence.startsWith(`${key}/`));
+    }
+    if (!matchedAliasKey) {
+        return dependence;
+    }
+    const matchedAliasValue = alias[matchedAliasKey];
+    const isRelative = matchedAliasValue.startsWith('.');
+    const replacedValue = isRelative ? relative(dirname(file), resolve(ES_DIR, matchedAliasValue)) : matchedAliasValue;
+    return dependence.replace(matchedAliasKey, replacedValue);
+};
+export const resolveDependence = (file, script, alias = {}) => {
     const replacer = (source, dependence) => {
+        // remove quotes
         dependence = dependence.slice(1, dependence.length - 1);
-        const ext = extname(dependence);
-        const targetDependenceFile = resolve(dirname(file), dependence);
-        const scriptExtname = getScriptExtname();
-        const inNodeModules = !dependence.startsWith('.');
         const done = (targetDependence) => source.replace(dependence, targetDependence);
-        if (inNodeModules) {
+        const resolvedDependence = resolveAlias(dependence, file, alias);
+        const isNodeModule = !resolvedDependence.startsWith('.');
+        if (isNodeModule) {
             // e.g. @varlet/shared
-            return source;
+            return done(resolvedDependence);
         }
+        const ext = extname(resolvedDependence);
+        const scriptExtname = getScriptExtname();
         if (ext) {
             if (scriptExtNames.includes(ext)) {
                 // e.g. './a.vue' -> './a.mjs'
@@ -49,15 +66,16 @@ export const resolveDependence = (file, script) => {
                 return source;
             }
         }
+        const targetDependenceFile = resolve(dirname(file), resolvedDependence);
         if (!ext) {
             // e.g. ../button/props -> ../button/props.mjs
             const matchedScript = tryMatchExtname(targetDependenceFile, scriptExtNames);
             if (matchedScript) {
-                return done(`${dependence}${scriptExtname}`);
+                return done(`${resolvedDependence}${scriptExtname}`);
             }
             const matchedStyle = tryMatchExtname(targetDependenceFile, styleExtNames);
             if (matchedStyle) {
-                return done(`${dependence}${matchedStyle}`);
+                return done(`${resolvedDependence}${matchedStyle}`);
             }
         }
         if (!ext && isDir(targetDependenceFile)) {
@@ -66,12 +84,12 @@ export const resolveDependence = (file, script) => {
             const hasScriptIndex = files.some((file) => scriptIndexes.some((name) => file.endsWith(name)));
             if (hasScriptIndex) {
                 // e.g. -> ../button/index.mjs
-                return done(`${dependence}/index${scriptExtname}`);
+                return done(`${resolvedDependence}/index${scriptExtname}`);
             }
             const hasStyleIndex = files.some((file) => styleIndexes.some((name) => file.endsWith(name)));
             if (hasStyleIndex) {
                 // e.g. -> ../button/index.css
-                return done(`${dependence}/index.css`);
+                return done(`${resolvedDependence}/index.css`);
             }
         }
         return '';
@@ -109,10 +127,12 @@ export async function compileScriptByEsbuild(script) {
 export async function compileScript(script, file) {
     let code = isJsx(file) || isTsx(file) ? await compileScriptByBabel(script, file) : script;
     code = await compileScriptByEsbuild(code);
+    const { alias } = await getVarletConfig();
     if (code) {
-        code = resolveDependence(file, code);
+        code = resolveDependence(file, code, alias);
         code = extractStyleDependencies(file, code, IMPORT_CSS_RE);
         code = extractStyleDependencies(file, code, IMPORT_LESS_RE);
+        code = extractStyleDependencies(file, code, IMPORT_SCSS_RE);
     }
     removeSync(file);
     writeFileSync(replaceExt(file, getScriptExtname()), code, 'utf8');

package/lib/node/compiler/compileStyle.d.ts

@@ -2,9 +2,13 @@ export declare const EMPTY_SPACE_RE: RegExp;
 export declare const EMPTY_LINE_RE: RegExp;
 export declare const IMPORT_CSS_RE: RegExp;
 export declare const IMPORT_LESS_RE: RegExp;
+export declare const IMPORT_SCSS_RE: RegExp;
+export declare const STYLE_EXTNAME_RE: RegExp;
 export declare const STYLE_IMPORT_RE: RegExp;
-export declare const clearEmptyLine: (s: string) => string;
+export declare const compressCss: (s: string) => string;
 export declare function normalizeStyleDependency(styleImport: string, reg: RegExp): string;
 export declare function extractStyleDependencies(file: string, code: string, styleReg: RegExp): string;
 export declare function compileLess(file: string): Promise<void>;
+export declare function compileScss(file: string): void;
 export declare function clearLessFiles(dir: string): void;
+export declare function clearScssFiles(dir: string): void;

package/lib/node/compiler/compileStyle.js

@@ -1,21 +1,27 @@
 import fse from 'fs-extra';
 import less from 'less';
+import sass from 'node-sass';
 import glob from 'glob';
 import { replaceExt, smartAppendFileSync } from '../shared/fsUtils.js';
 import { parse, resolve } from 'path';
 import { getScriptExtname } from './compileScript.js';
 import { CWD } from '../shared/constant.js';
-const { render } = less;
+import { createRequire } from 'module';
+const { render: renderLess } = less;
+const { renderSync: renderScss } = sass;
 const { readFileSync, writeFileSync, unlinkSync } = fse;
+const require = createRequire(import.meta.url);
 export const EMPTY_SPACE_RE = /[\s]+/g;
 export const EMPTY_LINE_RE = /[\n\r]*/g;
 export const IMPORT_CSS_RE = /(?<!['"`])import\s+['"](\.{1,2}\/.+\.css)['"]\s*;?(?!\s*['"`])/g;
 export const IMPORT_LESS_RE = /(?<!['"`])import\s+['"](\.{1,2}\/.+\.less)['"]\s*;?(?!\s*['"`])/g;
+export const IMPORT_SCSS_RE = /(?<!['"`])import\s+['"](\.{1,2}\/.+\.scss)['"]\s*;?(?!\s*['"`])/g;
+export const STYLE_EXTNAME_RE = /(\.less)|(\.scss)|(\.css)/;
 export const STYLE_IMPORT_RE = /@import\s+['"](.+)['"]\s*;/g;
-export const clearEmptyLine = (s) => s.replace(EMPTY_LINE_RE, '').replace(EMPTY_SPACE_RE, ' ');
+export const compressCss = (s) => s.replace(EMPTY_LINE_RE, '').replace(EMPTY_SPACE_RE, ' ');
 export function normalizeStyleDependency(styleImport, reg) {
     let relativePath = styleImport.replace(reg, '$1');
-    relativePath = relativePath.replace(/(\.less)|(\.css)/, '');
+    relativePath = relativePath.replace(STYLE_EXTNAME_RE, '');
     if (relativePath.startsWith('./')) {
         return '.' + relativePath;
     }
@@ -32,13 +38,34 @@ export function extractStyleDependencies(file, code, styleReg) {
 }
 export async function compileLess(file) {
     const source = readFileSync(file, 'utf-8');
-    const { css } = await render(source, {
+    const { css } = await renderLess(source, {
         filename: file,
         paths: [resolve(CWD, 'node_modules')],
     });
-    writeFileSync(replaceExt(file, '.css'), clearEmptyLine(css), 'utf-8');
+    writeFileSync(replaceExt(file, '.css'), compressCss(css), 'utf-8');
+}
+export function compileScss(file) {
+    const source = readFileSync(file, 'utf-8');
+    const { css } = renderScss({
+        data: source,
+        file,
+        importer(path) {
+            if (!path.endsWith('.scss') || !path.endsWith('.css')) {
+                path += '.scss';
+            }
+            if (path.startsWith('~')) {
+                path = path.replace('~', '');
+                path = require.resolve(path);
+            }
+            return { file: path };
+        },
+    });
+    console.log(css.toString('utf8'));
+    writeFileSync(replaceExt(file, '.css'), compressCss(css.toString('utf8')), 'utf-8');
 }
 export function clearLessFiles(dir) {
-    const files = glob.sync(`${dir}/**/*.less`);
-    files.forEach(unlinkSync);
+    glob.sync(`${dir}/**/*.less`).forEach(unlinkSync);
+}
+export function clearScssFiles(dir) {
+    glob.sync(`${dir}/**/*.scss`).forEach(unlinkSync);
 }

package/lib/node/config/varlet.config.d.ts

@@ -35,6 +35,7 @@ export interface VarletConfig {
     logo?: string;
     themeKey?: string;
     defaultLanguage?: 'zh-CN' | 'en-US';
+    alias?: Record<string, string>;
     /**
      * @default `false`
      * Show mobile component on the right.

package/lib/node/config/vite.config.js

@@ -1,17 +1,24 @@
-import vue from '@vitejs/plugin-vue';
-import jsx from '@vitejs/plugin-vue-jsx';
+import { SRC_DIR, ES_DIR, SITE_CONFIG, SITE_DIR, SITE_MOBILE_ROUTES, SITE_OUTPUT_PATH, SITE_PC_ROUTES, SITE_PUBLIC_PATH, VITE_RESOLVE_EXTENSIONS, EXTENSION_ENTRY, } from '../shared/constant.js';
 import { markdown, html, inlineCss, copy } from '@varlet/vite-plugins';
-import { ES_DIR, SITE_CONFIG, SITE_DIR, SITE_MOBILE_ROUTES, SITE_OUTPUT_PATH, SITE_PC_ROUTES, SITE_PUBLIC_PATH, VITE_RESOLVE_EXTENSIONS, EXTENSION_ENTRY, } from '../shared/constant.js';
 import { get } from 'lodash-es';
 import { resolve } from 'path';
+import vue from '@vitejs/plugin-vue';
+import jsx from '@vitejs/plugin-vue-jsx';
 export function getDevConfig(varletConfig) {
     const defaultLanguage = get(varletConfig, 'defaultLanguage');
+    const alias = get(varletConfig, 'alias', {});
     const host = get(varletConfig, 'host');
+    const resolveAlias = Object.entries(alias).reduce((resolveAlias, [key, value]) => {
+        const isRelative = value.startsWith('.');
+        resolveAlias[key] = isRelative ? resolve(SRC_DIR, value) : value;
+        return resolveAlias;
+    }, {});
     return {
         root: SITE_DIR,
         resolve: {
             extensions: VITE_RESOLVE_EXTENSIONS,
             alias: {
+                ...resolveAlias,
                 '@config': SITE_CONFIG,
                 '@pc-routes': SITE_PC_ROUTES,
                 '@mobile-routes': SITE_MOBILE_ROUTES,

package/lib/node/shared/constant.js

@@ -13,7 +13,7 @@ export const TYPES_DIR = resolve(CWD, 'types');
 export const ROOT_DOCS_DIR = resolve(CWD, 'docs');
 export const ROOT_PAGES_DIR = resolve(CWD, 'pages');
 export const ESLINT_EXTENSIONS = ['.vue', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.cjs'];
-export const VITE_RESOLVE_EXTENSIONS = ['.vue', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.cjs', '.less', '.css'];
+export const VITE_RESOLVE_EXTENSIONS = ['.vue', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.cjs', '.less', '.scss', '.css'];
 export const SCRIPTS_EXTENSIONS = ['.tsx', '.ts', '.jsx', '.js', '.mjs', '.cjs'];
 export const PUBLIC_DIR_INDEXES = ['index.vue', 'index.tsx', 'index.ts', 'index.jsx', 'index.js'];
 export const STYLE_DIR_NAME = 'style';

package/lib/node/shared/fsUtils.d.ts

@@ -7,6 +7,7 @@ export declare const isJsx: (file: string) => boolean;
 export declare const isTsx: (file: string) => boolean;
 export declare const isScript: (file: string) => boolean;
 export declare const isLess: (file: string) => boolean;
+export declare const isScss: (file: string) => boolean;
 export declare const isPublicDir: (dir: string) => boolean;
 export declare const replaceExt: (file: string, ext: string) => string;
 export declare function smartAppendFileSync(file: string, code: string): void;

package/lib/node/shared/fsUtils.js

@@ -16,6 +16,7 @@ export const isJsx = (file) => pathExistsSync(file) && file.endsWith('.jsx');
 export const isTsx = (file) => pathExistsSync(file) && file.endsWith('.tsx');
 export const isScript = (file) => pathExistsSync(file) && SCRIPTS_EXTENSIONS.includes(extname(file));
 export const isLess = (file) => pathExistsSync(file) && extname(file) === '.less';
+export const isScss = (file) => pathExistsSync(file) && extname(file) === '.scss';
 export const isPublicDir = (dir) => PUBLIC_DIR_INDEXES.some((index) => pathExistsSync(resolve(dir, index)));
 export const replaceExt = (file, ext) => file.replace(extname(file), ext);
 export function smartAppendFileSync(file, code) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "3.2.5",
+  "version": "3.2.6-alpha.1713972861390",
   "type": "module",
   "description": "cli of varlet",
   "bin": {
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@varlet/release": "^0.2.5",
-    "@varlet/icon-builder": "0.0.3",
+    "@varlet/icon-builder": "0.0.4",
     "@babel/core": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@vitejs/plugin-vue": "5.0.4",
@@ -56,6 +56,7 @@
     "hash-sum": "^2.0.0",
     "inquirer": "^9.1.4",
     "less": "^3.12.2",
+    "node-sass": "9.0.0",
     "lodash-es": "^4.17.21",
     "markdown-it": "^12.2.3",
     "nanospinner": "^1.1.0",
@@ -64,8 +65,8 @@
     "sharp": "0.31.1",
     "slash": "^3.0.0",
     "typescript": "^5.1.5",
-    "@varlet/shared": "3.2.5",
-    "@varlet/vite-plugins": "3.2.5"
+    "@varlet/shared": "3.2.6-alpha.1713972861390",
+    "@varlet/vite-plugins": "3.2.6-alpha.1713972861390"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.1",
@@ -80,9 +81,9 @@
     "@types/semver": "^7.3.9",
     "@types/sharp": "0.31.1",
     "rimraf": "^5.0.1",
-    "@varlet/ui": "3.2.5",
-    "@varlet/icons": "3.2.5",
-    "@varlet/touch-emulator": "3.2.5"
+    "@varlet/icons": "3.2.6-alpha.1713972861390",
+    "@varlet/ui": "3.2.6-alpha.1713972861390",
+    "@varlet/touch-emulator": "3.2.6-alpha.1713972861390"
   },
   "peerDependencies": {
     "@vue/runtime-core": "3.4.21",
@@ -95,9 +96,9 @@
     "lodash-es": "^4.17.21",
     "vue": "3.4.21",
     "vue-router": "4.2.0",
-    "@varlet/touch-emulator": "3.2.5",
-    "@varlet/ui": "3.2.5",
-    "@varlet/icons": "3.2.5"
+    "@varlet/ui": "3.2.6-alpha.1713972861390",
+    "@varlet/icons": "3.2.6-alpha.1713972861390",
+    "@varlet/touch-emulator": "3.2.6-alpha.1713972861390"
   },
   "scripts": {
     "dev": "tsc --watch",