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

Commit

Permalink
Inject CSS dynamically
Browse files Browse the repository at this point in the history
Fixes #69
  • Loading branch information
znck committed Mar 10, 2017
1 parent 43a6f48 commit c75b7bf
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 31 deletions.
7 changes: 3 additions & 4 deletions src/style/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const compilers = {
less: compileLESS
}

export async function compile(style, options) {
export async function compile (style, options) {
let output

if (style.lang === 'css') {
Expand All @@ -22,7 +22,7 @@ export async function compile(style, options) {
return output
}

function ensureDirectory(directory) {
function ensureDirectory (directory) {
if (!exists(directory)) {
ensureDirectory(dirname(directory))

Expand All @@ -31,7 +31,7 @@ function ensureDirectory(directory) {
}

export default function (files, options) {
if (options.css === false) {
if (typeof (options.css) === 'boolean') {
return
}

Expand Down Expand Up @@ -66,7 +66,6 @@ export default function (files, options) {
}

dest = isAbsolute(dest) ? dest : resolvePath(process.cwd(), dest)
console.log('OUTPUT:', dest)
// Emit styles to file
ensureDirectory(dirname(dest))
writeFile(dest, css, (err) => {
Expand Down
20 changes: 20 additions & 0 deletions src/vueTransform.js
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,26 @@ export default async function vueTransform (code, id, options) {
const style = css.map((s, i) => 'import ' + JSON.stringify(`${id}.${i}.vue.component.${s.lang}`) + ';').join(' ')

return { css, code: style + js.code, map: js.map }
} else if (options.css === true) {
const style = css.map(s => '$compiled' in s ? s.$compiled.code : s.code).join('\n').replace(/(\r?\n|[\s])+/g, ' ')
const styleCode = `
(function(){
if(document){
var head=document.head||document.getElementsByTagName('head')[0],
style=document.create('style'),
css=${JSON.stringify(style)};
style.type='text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
}
})();
`.replace(/(\r?\n|[\s])+/g, ' ').trim()

return { css, code: styleCode + js.code, map: js.map }
}

return { css, code: js.code, map: js.map }
Expand Down
8 changes: 8 additions & 0 deletions test/expects/no-css-extract.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
(function(){ if(document){ var head=document.head||document.getElementsByTagName('head')[0], style=document.create('style'), css=" .bar { color: blue } .foo { color: red; } "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();




var noCssExtract = { template: "<div class=\"foo bar\">test</div>",};

export default noCssExtract;
21 changes: 21 additions & 0 deletions test/fixtures/no-css-extract.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<template lang="html">
<div class="foo bar">test</div>
</template>

<script lang="babel">
export default {}
</script>


<style lang="scss">
$red: red;
.foo {
color: $red
}
</style>

<style lang="css">
.bar {
color: blue
}
</style>
56 changes: 29 additions & 27 deletions test/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,21 +29,23 @@ function test(name) {
return rollup.rollup({
entry: entry,
plugins: [vuePlugin({
css: cssHandler,
css: ['no-css-extract'].includes(name) ? true : cssHandler,
modules: {
generateScopedName: '[name]__[local]'
},
compileTemplate: ['compileTemplate', 'slot', 'table', 'table-n-slot'].indexOf(name) > -1
})]
}).then(function (bundle) {
var result = bundle.generate({format: 'es'})
var result = bundle.generate({ format: 'es' })
var code = result.code
assert.equal(code.trim(), expected.trim(), 'should compile code correctly')

// Check css output
if (['style', 'css-modules', 'css-modules-static', 'scss', 'pug', 'less'].indexOf(name) > -1) {
if (['style', 'css-modules', 'css-modules-static', 'scss', 'pug', 'less'].includes(name)) {
var css = read('expects/' + name + '.css')
assert.equal(css.trim(), actualCss.trim(), 'should output style tag content')
} else if (['no-css-extract'].includes(name)) {
assert.equal(undefined, actualCss, 'should ignore css()')
} else {
assert.equal('', actualCss.trim(), 'should always call css()')
}
Expand All @@ -61,30 +63,30 @@ describe('rollup-plugin-vue', function () {
})

describe('styleToImports', function () {
it('should convert style to import', function () {
var entry = './fixtures/style.vue'
var expectedCss = read('expects/style.css')
var actualCss
it('should convert style to import', function () {
var entry = './fixtures/style.vue'
var expectedCss = read('expects/style.css')
var actualCss

return rollup.rollup({
format: 'cjs',
entry: entry,
plugins: [
vuePlugin({
styleToImports: true,
}),
cssPlugin({
output: function (css) {
actualCss = css
},
}),
],
}).then(function (bundle) {
bundle.generate({ format: 'es' })
return rollup.rollup({
format: 'cjs',
entry: entry,
plugins: [
vuePlugin({
styleToImports: true,
}),
cssPlugin({
output: function (css) {
actualCss = css
},
}),
],
}).then(function (bundle) {
bundle.generate({ format: 'es' })

assert.equal(expectedCss.trim(), actualCss.trim(), 'should import style')
}).catch(function (error) {
throw error
})
})
assert.equal(expectedCss.trim(), actualCss.trim(), 'should import style')
}).catch(function (error) {
throw error
})
})
})

0 comments on commit c75b7bf

Please sign in to comment.