Skip to content
This repository was archived by the owner on Jan 18, 2022. It is now read-only.

Commit 145fdfe

Browse files
znckznck
authored
Refactoring & Documentation (#58)
* 📝 TODO: Add usage guidelines * Fix image position * 💩 Add less support * Refactoring * Choose minimal defaults * Add missing dependency Fixes #59
1 parent c748b09 commit 145fdfe

17 files changed

+231
-198
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="text-center" style="align: center; margin: 20px">
1+
<div class="text-xs-center" align="center" style="margin: 20px">
22
<img src="http://rollup-plugin-vue.znck.me/assets/images/logo.png">
33
</div>
44

‎docs/introduction.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="text-center" style="align: center; margin: 20px">
1+
<div class="text-xs-center" align="center" style="margin: 20px">
22
<img src="http://rollup-plugin-vue.znck.me/assets/images/logo.png">
33
</div>
44

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,11 @@
3737
},
3838
"homepage": "https://github.com/znck/rollup-plugin-vue#readme",
3939
"dependencies": {
40+
"babel-runtime": "^6.22.0",
4041
"de-indent": "^1.0.2",
4142
"debug": "^2.6.0",
4243
"html-minifier": "^3.2.3",
44+
"less": "^2.7.2",
4345
"magic-string": "^0.19.0",
4446
"node-sass": "^4.5.0",
4547
"parse5": "^3.0.1",
@@ -69,11 +71,11 @@
6971
"gulp": "^3.9.1",
7072
"istanbul": "^0.4.5",
7173
"laravel-elixir": "^6.0.0-15",
74+
"merge-options": "0.0.64",
7275
"mocha": "^3.2.0",
7376
"mocha-lcov-reporter": "^1.2.0",
7477
"rollup": "^0.41.4",
7578
"rollup-plugin-babel": "^2.7.1",
76-
"rollup-plugin-buble": "^0.15.0",
7779
"rollup-plugin-css-only": "^0.2.0",
7880
"rollup-plugin-replace": "^1.1.1",
7981
"uglify-js": "^2.7.5",

‎src/index.js

+16-30
Original file line numberDiff line numberDiff line change
@@ -4,49 +4,33 @@ import vueTransform from './vueTransform'
44
import DEFAULT_OPTIONS from './options'
55
import compileStyle from './style/index'
66
import debug from './debug'
7+
import mergeOptions from 'merge-options'
78

8-
function mergeOptions (options, defaults) {
9-
Object.keys(defaults).forEach((key) => {
10-
const val = defaults[key]
11-
12-
if (key in options) {
13-
if (typeof options[key] === 'object') {
14-
mergeOptions(options[key], val)
15-
}
16-
} else {
17-
options[key] = val
18-
}
19-
})
20-
21-
return options
22-
}
23-
24-
export default function vue (options = {}) {
9+
export default function vue (opts = {}) {
2510
debug('Yo! rolling vue!')
26-
const filter = createFilter(options.include, options.exclude)
11+
const filter = createFilter(opts.include, opts.exclude)
2712

28-
delete options.include
29-
delete options.exclude
13+
delete opts.include
14+
delete opts.exclude
3015

3116
/* eslint-disable */
3217
try {
3318
const vueVersion = require('vue').version;
3419
if (parseInt(vueVersion.split('.')[0], 10) >= 2) {
35-
if (!('compileTemplate' in options)) {
20+
if (!('compileTemplate' in config)) {
3621
debug('Vue 2.0 detected. Compiling template.');
37-
options.compileTemplate = true;
22+
opts.compileTemplate = true;
3823
}
3924
} else {
40-
if (options.compileTemplate === true) {
25+
if (opts.compileTemplate === true) {
4126
console.warn('Vue version < 2.0.0 does not support compiled template.');
4227
}
43-
options.compileTemplate = false;
28+
opts.compileTemplate = false;
4429
}
4530
} catch (e) {}
4631
/* eslint-enable */
4732

48-
options = mergeOptions(options, DEFAULT_OPTIONS)
49-
33+
const config = mergeOptions(DEFAULT_OPTIONS, opts)
5034
const styles = {}
5135

5236
return {
@@ -74,17 +58,19 @@ export default function vue (options = {}) {
7458
return null
7559
}
7660

77-
const { code, css, map } = await vueTransform(source, id, options)
61+
debug(`Compile: ${id}`)
62+
63+
const { code, css, map } = await vueTransform(source, id, config)
7864

7965
styles[id] = css
8066

8167
return { code, map }
8268
},
8369

8470
ongenerate () {
85-
if (options.styleToImports !== true) {
86-
if (options.css === undefined || options.css === null) options.css = DEFAULT_OPTIONS.css
87-
compileStyle(styles, options)
71+
if (config.styleToImports !== true) {
72+
if (config.css === undefined || config.css === null) config.css = DEFAULT_OPTIONS.css
73+
compileStyle(styles, config)
8874
}
8975
}
9076
}

‎src/options.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ export default {
3737
styleToImports: false,
3838
autoStyles: true,
3939
disableCssModuleStaticReplacement: false,
40-
modules: {
41-
generateScopedName: '[name]__[local]___[hash:base64:5]'
40+
cssModules: {
41+
generateScopedName: '[name]__[local]'
4242
},
4343
scss: {},
4444
pug: {}

‎src/style/css.js

+36-7
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,67 @@
11
import postcss from 'postcss'
22
import modules from 'postcss-modules'
3+
import camelcase from 'camelcase'
4+
// import MagicString from 'magic-string'
5+
import debug from '../debug'
36

47
function compileModule (code, map, source, options) {
58
let style
9+
debug(`CSS Modules: ${source.id}`)
610

711
return postcss([
812
modules({
913
getJSON (filename, json) {
1014
style = json
1115
},
12-
...options.modules
16+
...options.cssModules
1317
})
1418
]).process(code, { map: { inline: false, prev: map }, from: source.id, to: source.id })
15-
.then(
16-
result => ({ code: result.css, map: result.map, module: style }),
17-
error => {
18-
throw error
19-
})
19+
.then(
20+
result => ({ code: result.css, map: result.map, module: style }),
21+
error => {
22+
throw error
23+
}
24+
)
2025
}
2126

2227
export default async function (promise, options) {
2328
const style = await promise
29+
debug(`CSS: ${style.id}`)
2430
const { code, map } = ('$compiled' in style) ? style.$compiled : style
2531

2632
if (style.module === true) {
2733
return compileModule(code, map, style, options).then(compiled => {
2834
if (style.$compiled) {
2935
compiled.$prev = style.$compiled
36+
37+
const classes = Object.keys(compiled.module)
38+
const cssModule = {}
39+
40+
if (classes.length) {
41+
// Apply CSS modules to actual source.
42+
// TODO: Update source map.
43+
// const original = style.code
44+
45+
style.code = classes.reduce(
46+
(result, name) => {
47+
cssModule[camelcase(name)] = compiled.module[name]
48+
49+
return result.replace(`.${name}`, `.${compiled.module[name]}`)
50+
},
51+
style.code
52+
)
53+
// style.map = (new MagicString(original))
54+
55+
compiled.module = (
56+
typeof (style.module) === 'string' && style.attrs.module.length
57+
) ? { [style.module]: cssModule } : cssModule
58+
}
3059
}
3160

3261
style.$compiled = compiled
3362

3463
return style
35-
})
64+
}).catch(error => debug(error))
3665
}
3766

3867
const output = { code, map, lang: 'css' }

‎src/style/index.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { writeFile } from 'fs'
22
import compileCSS from './css'
33
import compileSCSS from './scss'
4+
import compileLESS from './less'
45

56
const compilers = {
67
scss: compileSCSS,
7-
sass: compileSCSS
8+
sass: compileSCSS,
9+
less: compileLESS
810
}
911

1012
export async function compile (style, options) {
@@ -30,7 +32,8 @@ export default function (files, options) {
3032

3133
Object.keys(files).forEach((file) => {
3234
files[file].forEach((style) => {
33-
css += style.code + '\n'
35+
css += ('$compiled' in style) ? `${style.$compiled.code}\n` : `${style.code}\n`
36+
3437
allStyles.push(style)
3538
})
3639
})

‎src/style/less.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import less from 'less'
2+
3+
export default async function (style, options) {
4+
const { css, map } = await less.render(style.code, {
5+
sourceMap: {
6+
sourceMapFullFilename: style.id,
7+
sourceMapFileInline: false
8+
},
9+
...options.less
10+
})
11+
12+
style.$compiled = {
13+
code: css.toString(),
14+
map: map.toString()
15+
}
16+
17+
return style
18+
}

‎src/style/scss.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import sass from 'node-sass'
2+
import debug from '../debug'
23

34
export default function (style, options) {
5+
debug(`SASS: ${style.id}`)
46
const { css, map } = sass.renderSync({
57
file: style.id,
68
data: style.code,

‎src/vueTransform.js

+11-9
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ function injectTemplate (script, template, lang, options, modules) {
109109
throw new Error('[rollup-plugin-vue] could not find place to inject template in script.')
110110
}
111111

112-
var validateTemplate = function (code, content, id) {
112+
function validateTemplate (code, content, id) {
113113
const warnings = templateValidator(code, content)
114114
if (warnings) {
115115
const relativePath = relative(process.cwd(), id)
@@ -124,6 +124,8 @@ var validateTemplate = function (code, content, id) {
124124
async function processTemplate (source, id, content, options, nodes, modules) {
125125
if (source === undefined) return undefined
126126

127+
debug(`Process template: ${id}`)
128+
127129
const extras = { modules, id, lang: source.attrs.lang }
128130
const { code } = source
129131
const template = deIndent(
@@ -142,6 +144,8 @@ async function processTemplate (source, id, content, options, nodes, modules) {
142144
async function processScript (source, id, content, options, nodes, modules) {
143145
const template = await processTemplate(nodes.template[0], id, content, options, nodes, modules)
144146

147+
debug(`Process script: ${id}`)
148+
145149
const lang = source.attrs.lang || 'js'
146150

147151
const script = deIndent(padContent(content.slice(0, content.indexOf(source.code))) + source.code)
@@ -159,9 +163,10 @@ async function processScript (source, id, content, options, nodes, modules) {
159163
}
160164
}
161165

166+
// eslint-disable-next-line complexity
162167
async function processStyle (styles, id, content, options) {
168+
debug(`Process styles: ${id}`)
163169
const outputs = []
164-
165170
for (let i = 0; i < styles.length; i += 1) {
166171
const style = styles[i]
167172

@@ -176,21 +181,18 @@ async function processStyle (styles, id, content, options) {
176181
code: code,
177182
map: map,
178183
lang: style.attrs.lang || 'css',
179-
module: 'module' in style.attrs,
180-
scoped: 'scoped' in style.attrs
184+
module: 'module' in style.attrs ? style.attrs.module || true : false,
185+
scoped: 'scoped' in style.attrs ? style.attrs.scoped || true : false
181186
}
182187

183-
if (options.autoStyles) {
184-
outputs.push(await compile(output, options))
185-
} else {
186-
outputs.push(output)
187-
}
188+
outputs.push(options.autoStyles ? await compile(output, options) : output)
188189
}
189190

190191
return outputs
191192
}
192193

193194
function parseTemplate (code) {
195+
debug('Parsing template....')
194196
const fragment = parse5.parseFragment(code, { locationInfo: true })
195197

196198
const nodes = {

‎test/expects/css-modules-static.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
.test {
1+
.css-modules-static__test {
22
color: red;
33
}

‎test/expects/css-modules.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
.test {
1+
.css-modules__test {
22
color: red;
33
}

‎test/expects/less.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.less__test {
2+
color: red;
3+
}

‎test/expects/less.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
var less = { template: "<div class=\"less__test\"></div>",cssModules: {"test":"less__test"},};
2+
3+
export default less;

‎test/fixtures/less.vue

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<div class="test"></div>
3+
</template>
4+
5+
<script lang="babel">
6+
export default {}
7+
</script>
8+
9+
10+
<style lang="less" module>
11+
@var: red;
12+
13+
.test {
14+
color: @var;
15+
}
16+
</style>

‎test/test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function test(name) {
4141
assert.equal(code.trim(), expected.trim(), 'should compile code correctly')
4242

4343
// Check css output
44-
if (['style', 'css-modules', 'css-modules-static', 'scss', 'pug'].indexOf(name) > -1) {
44+
if (['style', 'css-modules', 'css-modules-static', 'scss', 'pug', 'less'].indexOf(name) > -1) {
4545
var css = read('expects/' + name + '.css')
4646
assert.equal(css.trim(), actualCss.trim(), 'should output style tag content')
4747
} else {

0 commit comments

Comments
 (0)