chore(cli): split compilers

packages/vant-cli/src/commands/dev.ts

@@ -5,6 +5,7 @@ import { clean } from '../commands/clean';
 import { buildESModuleOutputs } from './build';
 import { siteDevConfig } from '../config/webpack.site.dev';
 import { genPackageEntry } from '../compiler/gen-package-entry';
+import { genPacakgeStyle } from '../compiler/gen-package-style';
 import { genMobileEntry } from '../compiler/gen-mobile-entry';
 import { genDesktopEntry } from '../compiler/gen-desktop-entry';
 import { genDepsMap } from '../compiler/gen-style-deps-map';
@@ -39,6 +40,7 @@ export async function dev() {
   await buildESModuleOutputs();
   genDepsMap();
   genPackageEntry();
+  genPacakgeStyle();
   genMobileEntry();
   genDesktopEntry();
   runWebpack();

packages/vant-cli/src/common/constant.ts

@@ -27,3 +27,5 @@ export const JEST_STYLE_MOCK_FILE = join(CONFIG_DIR, 'jest.style-mock.js');
 
 // eslint-disable-next-line
 export const CONFIG = require(CONFIG_FILE);
+// eslint-disable-next-line
+export const PACKAGE_JSON = require(PACKAGE_JSON_FILE);

packages/vant-cli/src/compiler/compile-css.ts

@@ -0,0 +1,12 @@
+import postcss from 'postcss';
+import postcssrc from 'postcss-load-config';
+import { POSTCSS_CONFIG_FILE } from '../common/constant';
+
+export async function compileCss(source: string | Buffer) {
+  const config = await postcssrc({}, POSTCSS_CONFIG_FILE);
+  const output = await postcss(config.plugins as any).process(source, {
+    from: undefined
+  });
+
+  return output;
+}

packages/vant-cli/src/compiler/compile-less.ts

@@ -0,0 +1,11 @@
+import { readFileSync } from 'fs-extra';
+import { render as renderLess } from 'less';
+
+export async function compileLess(filePath: string) {
+  const source = readFileSync(filePath, 'utf-8');
+  const { css } = await renderLess(source, {
+    filename: filePath
+  });
+
+  return css;
+}

packages/vant-cli/src/compiler/compile-sass.ts

@@ -0,0 +1,6 @@
+import { renderSync as renderSass } from 'sass';
+
+export async function compileSass(filePath: string) {
+  const { css } = renderSass({ file: filePath });
+  return css;
+}

packages/vant-cli/src/compiler/compile-sfc.ts

@@ -84,7 +84,7 @@ export async function compileSfc(filePath: string) {
     }
 
     writeFileSync(jsFilePath, script);
-    await compileJs(jsFilePath);
+    compileJs(jsFilePath);
   }
 
   // compile style part

packages/vant-cli/src/compiler/compile-style.ts

@@ -1,46 +1,29 @@
-import postcss from 'postcss';
-import postcssrc from 'postcss-load-config';
 import { parse } from 'path';
-import { render as renderLess } from 'less';
-import { renderSync as renderSass } from 'sass';
 import { readFileSync, writeFileSync } from 'fs';
 import { replaceExt } from '../common';
-import { POSTCSS_CONFIG_FILE } from '../common/constant';
+import { compileCss } from './compile-css';
+import { compileLess } from './compile-less';
+import { compileSass } from './compile-sass';
 
-async function compilePostcss(filePath: string, source: string | Buffer) {
-  const config = await postcssrc({}, POSTCSS_CONFIG_FILE);
-  const output = await postcss(config.plugins as any).process(source, {
-    from: undefined
-  });
-
-  writeFileSync(filePath, output);
-}
-
-async function compileLess(filePath: string) {
-  const source = readFileSync(filePath, 'utf-8');
-  const { css } = await renderLess(source, {
-    filename: filePath
-  });
-
-  return css;
-}
-
-async function compileSass(filePath: string) {
-  const { css } = renderSass({ file: filePath });
-  return css;
-}
-
-export async function compileStyle(filePath: string) {
+async function compileFile(filePath: string) {
   const parsedPath = parse(filePath);
 
   if (parsedPath.ext === '.less') {
     const source = await compileLess(filePath);
-    await compilePostcss(replaceExt(filePath, '.css'), source);
-  } else if (parsedPath.ext === '.scss') {
-    const source = await compileSass(filePath);
-    await compilePostcss(replaceExt(filePath, '.css'), source);
-  } else {
-    const source = readFileSync(filePath, 'utf-8');
-    await compilePostcss(filePath, source);
+    return compileCss(source);
   }
+
+  if (parsedPath.ext === '.scss') {
+    const source = await compileSass(filePath);
+    return compileCss(source);
+  }
+
+  const source = readFileSync(filePath, 'utf-8');
+  return compileCss(source);
+}
+
+export async function compileStyle(filePath: string) {
+  const content = await compileFile(filePath);
+
+  writeFileSync(replaceExt(filePath, '.css'), content);
 }

packages/vant-cli/src/compiler/gen-package-entry.ts

@@ -1,21 +1,13 @@
-import { get } from 'lodash';
 import { join } from 'path';
 import { writeFileSync } from 'fs-extra';
-import { pascalize, getComponents, replaceExt } from '../common';
+import { pascalize, getComponents } from '../common';
 import {
-  CONFIG,
   SRC_DIR,
-  PACKAGE_JSON_FILE,
-  PACKAGE_ENTRY_FILE,
-  PACKAGE_STYLE_FILE,
-  STYPE_DEPS_JSON_FILE
+  PACKAGE_JSON,
+  PACKAGE_ENTRY_FILE
 } from '../common/constant';
 
-// eslint-disable-next-line
-const packageJson = require(PACKAGE_JSON_FILE);
-// eslint-disable-next-line
-const styleDepsJson = require(STYPE_DEPS_JSON_FILE);
-const version = process.env.PACKAGE_VERSION || packageJson.version;
+const version = process.env.PACKAGE_VERSION || PACKAGE_JSON.version;
 
 function genImports(components: string[]): string {
   return components
@@ -27,26 +19,7 @@ function genExports(names: string[]): string {
   return names.map(name => `${name}`).join(',\n  ');
 }
 
-function getStyleExt(): string {
-  const preprocessor = get(CONFIG, 'build.css.preprocessor', 'less');
-
-  if (preprocessor === 'sass') {
-    return '.scss';
-  }
-
-  return `.${preprocessor}`;
-}
-
-function genStyleEntry() {
-  const ext = getStyleExt();
-  const content = styleDepsJson.sequence
-    .map((name: string) => `@import "${join(SRC_DIR, `${name}/index${ext}`)}";`)
-    .join('\n');
-
-  writeFileSync(replaceExt(PACKAGE_STYLE_FILE, ext), content);
-}
-
-function genScriptEntry() {
+export function genPackageEntry() {
   const components = getComponents();
   const names = components.map(item => pascalize(item));
 
@@ -85,8 +58,3 @@ export default {
 
   writeFileSync(PACKAGE_ENTRY_FILE, content);
 }
-
-export function genPackageEntry() {
-  genStyleEntry();
-  genScriptEntry();
-}

packages/vant-cli/src/compiler/gen-package-style.ts

@@ -0,0 +1,32 @@
+import { get } from 'lodash';
+import { join } from 'path';
+import { writeFileSync } from 'fs-extra';
+import { replaceExt } from '../common';
+import {
+  CONFIG,
+  SRC_DIR,
+  PACKAGE_STYLE_FILE,
+  STYPE_DEPS_JSON_FILE
+} from '../common/constant';
+
+// eslint-disable-next-line
+const styleDepsJson = require(STYPE_DEPS_JSON_FILE);
+
+function getStyleExt(): string {
+  const preprocessor = get(CONFIG, 'build.css.preprocessor', 'less');
+
+  if (preprocessor === 'sass') {
+    return '.scss';
+  }
+
+  return `.${preprocessor}`;
+}
+
+export function genPacakgeStyle() {
+  const ext = getStyleExt();
+  const content = styleDepsJson.sequence
+    .map((name: string) => `@import "${join(SRC_DIR, `${name}/index${ext}`)}";`)
+    .join('\n');
+
+  writeFileSync(replaceExt(PACKAGE_STYLE_FILE, ext), content);
+}