Skip to content

Commit

Permalink
feat: support cssPreprocessOptions (#335)
Browse files Browse the repository at this point in the history
close #332
  • Loading branch information
daychongyang authored Jun 4, 2020
1 parent 35c3a27 commit 13d4fc2
Show file tree
Hide file tree
Showing 11 changed files with 149 additions and 32 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
"resolve": "^1.17.0",
"rollup": "^2.11.2",
"rollup-plugin-terser": "^5.3.0",
"rollup-plugin-vue": "^6.0.0-beta.4",
"rollup-plugin-vue": "^6.0.0-beta.5",
"selfsigned": "^1.10.7",
"slash": "^3.0.0",
"vue": "^3.0.0-beta.14",
Expand All @@ -113,6 +113,7 @@
"cross-env": "^7.0.2",
"jest": "^25.4.0",
"js-yaml": "^3.14.0",
"less": "^3.11.2",
"lint-staged": "^10.1.6",
"lodash-es": "^4.17.15",
"moment": "^2.26.0",
Expand Down
9 changes: 9 additions & 0 deletions playground/TestPreprocessors.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ h2 Pre-Processors
p.pug
| This is rendered from <template lang="pug">
| and styled with <style lang="sass">. It should be megenta.
p.pug-less
| This is rendered from <template lang="pug">
| and styled with <style lang="less">. It should be green.
</template>

<style lang="scss">
Expand All @@ -12,3 +15,9 @@ $color: magenta;
color: $color;
}
</style>

<style lang="less">
.pug-less {
color: @preprocess-custom-color;
}
</style>
5 changes: 5 additions & 0 deletions playground/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@ const config: UserConfig = {
optimizeDeps: {
exclude: ['bootstrap'],
link: ['optimize-linked']
},
cssPreprocessOptions: {
modifyVars: {
'preprocess-custom-color': 'green'
}
}
}

Expand Down
4 changes: 4 additions & 0 deletions playground/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@
version "0.0.0"
uid ""

"linked-dep@link:./optimize-linked/linked-dep":
version "0.0.0"
uid ""

"lodash-es@link:../node_modules/lodash-es":
version "0.0.0"
uid ""
Expand Down
36 changes: 27 additions & 9 deletions src/node/build/buildPluginCss.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,36 @@ import {
cssPreprocessLangRE,
rewriteCssUrls
} from '../utils/cssUtils'
import { SFCStyleCompileResults } from '@vue/compiler-sfc'
import {
SFCStyleCompileResults,
SFCAsyncStyleCompileOptions
} from '@vue/compiler-sfc'
import chalk from 'chalk'

const debug = require('debug')('vite:build:css')

const cssInjectionMarker = `__VITE_CSS__`
const cssInjectionRE = /__VITE_CSS__\(\)/g

export const createBuildCssPlugin = (
root: string,
publicBase: string,
assetsDir: string,
minify: BuildConfig['minify'] = false,
interface BuildCssOption {
root: string
publicBase: string
assetsDir: string
minify?: BuildConfig['minify']
inlineLimit?: number
cssCodeSplit?: boolean
preprocessOptions?: SFCAsyncStyleCompileOptions['preprocessOptions']
}

export const createBuildCssPlugin = ({
root,
publicBase,
assetsDir,
minify = false,
inlineLimit = 0,
cssCodeSplit = true
): Plugin => {
cssCodeSplit = true,
preprocessOptions = {}
}: BuildCssOption): Plugin => {
const styles: Map<string, string> = new Map()
const assets = new Map<string, Buffer>()

Expand All @@ -38,7 +52,11 @@ export const createBuildCssPlugin = (
filename: id,
scoped: false,
modules: id.endsWith('.module.css'),
preprocessLang: id.replace(cssPreprocessLangRE, '$2') as any
preprocessLang: id.replace(
cssPreprocessLangRE,
'$2'
) as SFCAsyncStyleCompileOptions['preprocessLang'],
preprocessOptions
})

let modules: SFCStyleCompileResults['modules']
Expand Down
21 changes: 14 additions & 7 deletions src/node/build/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@ export async function createBaseRollupPlugins(
const {
rollupInputOptions = {},
transforms = [],
vueCustomBlockTransforms = {}
vueCustomBlockTransforms = {},
cssPreprocessOptions
} = options
const { nodeResolve } = require('@rollup/plugin-node-resolve')

Expand All @@ -97,6 +98,10 @@ export async function createBaseRollupPlugins(
includeAbsolute: true
},
preprocessStyles: true,
preprocessOptions: {
includePaths: ['node_modules'],
...cssPreprocessOptions
},
preprocessCustomRequire: (id: string) => require(resolveFrom(root, id)),
compilerOptions: options.vueCompilerOptions,
cssModulesOptions: {
Expand Down Expand Up @@ -161,7 +166,8 @@ export async function build(options: BuildConfig): Promise<BuildResult> {
sourcemap = false,
shouldPreload = null,
env = {},
mode = 'production'
mode = 'production',
cssPreprocessOptions = {}
} = options

const isTest = process.env.NODE_ENV === 'test'
Expand Down Expand Up @@ -241,14 +247,15 @@ export async function build(options: BuildConfig): Promise<BuildResult> {
sourcemap
),
// vite:css
createBuildCssPlugin(
createBuildCssPlugin({
root,
publicBasePath,
publicBase: publicBasePath,
assetsDir,
minify,
assetsInlineLimit,
cssCodeSplit
),
inlineLimit: assetsInlineLimit,
cssCodeSplit,
preprocessOptions: cssPreprocessOptions
}),
// vite:asset
createBuildAssetPlugin(
root,
Expand Down
6 changes: 5 additions & 1 deletion src/node/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import fs from 'fs-extra'
import chalk from 'chalk'
import dotenv, { DotenvParseOutput } from 'dotenv'
import { Options as RollupPluginVueOptions } from 'rollup-plugin-vue'
import { CompilerOptions } from '@vue/compiler-sfc'
import { CompilerOptions, SFCStyleCompileOptions } from '@vue/compiler-sfc'
import Rollup, {
InputOptions as RollupInputOptions,
OutputOptions as RollupOutputOptions,
Expand Down Expand Up @@ -112,6 +112,10 @@ export interface SharedConfig {
* Environment mode
*/
mode?: string
/**
* CSS preprocess options
*/
cssPreprocessOptions?: SFCStyleCompileOptions['preprocessOptions']
}

export interface ServerConfig extends SharedConfig {
Expand Down
3 changes: 2 additions & 1 deletion src/node/server/serverPluginCss.ts
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,8 @@ export const cssPlugin: ServerPlugin = ({ root, app, watcher, resolver }) => {
filename: resolver.requestToFile(ctx.path),
scoped: false,
modules: ctx.path.includes('.module'),
preprocessLang: ctx.path.replace(cssPreprocessLangRE, '$2') as any
preprocessLang: ctx.path.replace(cssPreprocessLangRE, '$2') as any,
preprocessOptions: ctx.config.cssPreprocessOptions
})

if (typeof result === 'string') {
Expand Down
12 changes: 8 additions & 4 deletions src/node/server/serverPluginVue.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import {
SFCTemplateBlock,
SFCStyleBlock,
SFCStyleCompileResults,
CompilerOptions
CompilerOptions,
SFCStyleCompileOptions
} from '@vue/compiler-sfc'
import { resolveCompiler, resolveVue } from '../utils/resolveVue'
import hash_sum from 'hash-sum'
Expand Down Expand Up @@ -133,7 +134,8 @@ export const vuePlugin: ServerPlugin = ({
styleBlock,
index,
filePath,
publicPath
publicPath,
config.cssPreprocessOptions
)
ctx.type = 'js'
ctx.body = codegenCss(`${id}-${index}`, result.code, result.modules)
Expand Down Expand Up @@ -550,7 +552,8 @@ async function compileSFCStyle(
style: SFCStyleBlock,
index: number,
filePath: string,
publicPath: string
publicPath: string,
preprocessOptions: SFCStyleCompileOptions['preprocessOptions']
): Promise<SFCStyleCompileResults> {
let cached = vueCache.get(filePath)
const cachedEntry = cached && cached.styles && cached.styles[index]
Expand All @@ -568,7 +571,8 @@ async function compileSFCStyle(
id: ``, // will be computed in compileCss
scoped: style.scoped != null,
modules: style.module != null,
preprocessLang: style.lang as any
preprocessLang: style.lang as SFCStyleCompileOptions['preprocessLang'],
preprocessOptions
})) as SFCStyleCompileResults

if (result.errors.length) {
Expand Down
6 changes: 4 additions & 2 deletions src/node/utils/cssUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@ export async function compileCss(
filename,
scoped,
modules,
preprocessLang
preprocessLang,
preprocessOptions = {}
}: SFCAsyncStyleCompileOptions
): Promise<SFCStyleCompileResults | string> {
const id = hash_sum(publicPath)
Expand Down Expand Up @@ -84,7 +85,8 @@ export async function compileCss(
preprocessLang: preprocessLang,
preprocessCustomRequire: (id: string) => require(resolveFrom(root, id)),
preprocessOptions: {
includePaths: ['node_modules']
includePaths: ['node_modules'],
...preprocessOptions
},

postcssOptions,
Expand Down
Loading

0 comments on commit 13d4fc2

Please sign in to comment.