feat($core): support 'palette' API, deprecate override.styl

Author: ulivz

Diff for: packages/@vuepress/core/lib/app/style/config.styl

@@ -1,5 +1,5 @@
 // colors
-$accentColor = #3eaf73
+$accentColor = #3eaf7c
 $textColor = #2c3e50
 $borderColor = #eaecef
 $codeBgColor = #282c34
@@ -19,4 +19,4 @@ $MQMobileNarrow = 419px
 $lineNumbersWrapperWidth = 3.5rem
 $codeLang = js ts html md vue css sass scss less stylus go java c sh yaml py
 
-@import '~@temp/override.styl'
+@import '~@temp/palette.styl'

Diff for: packages/@vuepress/core/lib/internal-plugins/overrideCSS.js

@@ -1,16 +1,36 @@
 const path = require('path')
-const { fs, logger, chalk } = require('@vuepress/shared-utils')
+const {
+  fs, logger, chalk,
+  datatypes: {
+    isPlainObject,
+    assertTypes,
+    isString
+  }
+} = require('@vuepress/shared-utils')
 
 module.exports = (options, context) => ({
   name: '@vuepress/internal-override-css',
 
   async ready () {
     const { sourceDir, writeTemp } = context
 
-    const overridePath = path.resolve(sourceDir, '.vuepress/override.styl').replace(/[\\]+/g, '/')
+    const overridePath = path.resolve(sourceDir, '.vuepress/override.styl')
     const hasUserOverride = fs.existsSync(overridePath)
-    await writeTemp('override.styl', hasUserOverride ? `@import(${JSON.stringify(overridePath)})` : ``)
 
+    if (hasUserOverride) {
+      logger.tip(`${chalk.magenta('override.styl')} has been deprecated from v1.0.0, using ${chalk.cyan('config.palette')} instead.\n`)
+    }
+
+    // palette API.
+    const themePalette = context.themePalette
+    const { palette: userPalette } = context.siteConfig
+    const themePaletteContent = resolvePaletteContent(themePalette)
+    const userPaletteContent = resolvePaletteContent(userPalette)
+    // user's palette can override theme's palette.
+    const paletteContent = themePaletteContent + userPaletteContent
+    await writeTemp('palette.styl', paletteContent)
+
+    // style.styl API.
     const stylePath = path.resolve(sourceDir, '.vuepress/style.styl').replace(/[\\]+/g, '/')
     const hasUserStyle = fs.existsSync(stylePath)
     await writeTemp('style.styl', hasUserStyle ? `@import(${JSON.stringify(stylePath)})` : ``)
@@ -24,3 +44,26 @@ module.exports = (options, context) => ({
     }
   }
 })
+
+function resolvePaletteContent (palette) {
+  const { valid, warnMsg } = assertTypes(palette, [String, Object])
+  if (!valid) {
+    if (palette !== undefined) {
+      logger.warn(
+        `[vuepress] Invalid value for "palette": ${warnMsg}`
+      )
+    }
+    return ''
+  }
+
+  if (isString(palette)) {
+    if (fs.existsSync(palette)) {
+      return `@import(${JSON.stringify(palette)})\n`
+    }
+    return ''
+  } else if (isPlainObject(palette)) {
+    return Object.keys(palette).map(variableName => {
+      return `${variableName} = ${palette[variableName]}`
+    }).join('\n') + '\n'
+  }
+}

Diff for: packages/@vuepress/core/lib/prepare/loadTheme.js

@@ -1,29 +1,50 @@
+'use strict'
+
+/**
+ * Module dependencies.
+ */
+
 const path = require('path')
 const fs = require('fs')
 const {
-  logger, chalk,
+  shortcutPackageResolver: { resolveTheme },
   datatypes: { isString },
-  shortcutPackageResolver: { resolveTheme }
+  logger, chalk
 } = require('@vuepress/shared-utils')
 
+/**
+ * Resolve theme.
+ *
+ *   Resolving Priority:
+ *
+ *   1. If the theme was a absolute path and that path exists, respect it
+ *      as the theme directory.
+ *   2. If 'theme' directory located at vuepressDir exists, respect it as
+ *      the theme directory.
+ *   3. If 'theme' was a shortcut string, resolve it from deps.
+ *
+ * @param {string} theme
+ * @param {string} sourceDir
+ * @param {string} vuepressDir
+ * @returns {Promise}
+ */
+
 module.exports = async function loadTheme (theme, sourceDir, vuepressDir) {
-  // resolve theme
   const localThemePath = path.resolve(vuepressDir, 'theme')
   const useLocalTheme =
-    fs.existsSync(localThemePath) && (fs.readdirSync(localThemePath)).length > 0
+    !fs.existsSync(theme) &&
+    fs.existsSync(localThemePath) &&
+    (fs.readdirSync(localThemePath)).length > 0
 
   let themePath = null         // Mandatory
   let themeIndexFile = null    // Optional
-  let themePlugins = []        // Optional
   let themeName
   let themeShortcut
 
   if (useLocalTheme) {
-    // use local custom theme
     themePath = localThemePath
-    logger.tip(`\nApply theme located at ${themePath}...`)
+    logger.tip(`\nApply theme located at ${chalk.gray(themePath)}...`)
   } else if (isString(theme)) {
-    // use external theme
     const { module: modulePath, name, shortcut } = resolveTheme(theme, sourceDir)
     if (modulePath.endsWith('.js') || modulePath.endsWith('.vue')) {
       themePath = path.parse(modulePath).dir
@@ -44,8 +65,13 @@ module.exports = async function loadTheme (theme, sourceDir, vuepressDir) {
   }
 
   // handle theme api
-  const { plugins, layoutDir = useLocalTheme ? '.' : 'layouts' } = themeIndexFile
-  themePlugins = plugins
+  const {
+    plugins: themePlugins,
+    palette: themePalette,
+    layoutDir = useLocalTheme
+      ? '.'
+      : 'layouts'
+  } = themeIndexFile
 
   const layoutDirPath = path.resolve(themePath, layoutDir)
 
@@ -93,6 +119,7 @@ module.exports = async function loadTheme (theme, sourceDir, vuepressDir) {
     layoutComponentMap,
     themeIndexFile,
     themePlugins,
+    themePalette,
     themeName,
     themeShortcut
   }