Bug with PostCSS #241
Description
I made a long post yesterday here. It was partially correct. I did find one issue on my end, I was compiling with global Rollup which was a different version in my package. So some of what I posted changed once I updated, however the core issue was the same. Making a specific issue there, and will make a pull request later.
I'm still not 100% sure I am not doing something wrong. But it looks like this is a bug if I was using an old version of Rollup and it didn't fixed it, and same issue on the latest version. I was thinking this would be moot after I updated to 0.66.6, but this is still an issue. Anyone else get this?
Expanding on my comment here:
#207 (comment)
Original code from index.ts
resolveId(id, importer) {
if (!isVuePartRequest(id)) return
id = path.resolve(path.dirname(importer), id)
const ref = parseVuePartRequest(id)
if (ref) {
const element = resolveVuePart(descriptors, ref)
const src = (element as SFCBlock).src
if (ref.meta.type !== 'styles' && typeof src === 'string') {
if (src.startsWith('.')) {
return path.resolve(path.dirname(ref.filename), src as string)
} else {
return require.resolve(src, { paths: [path.dirname(ref.filename)] })
}
}
return id
}
}
My changed code, notice the else if.
resolveId(id, importer) {
if (!isVuePartRequest(id)) return
id = path.resolve(path.dirname(importer), id)
const ref = parseVuePartRequest(id)
if (ref) {
const element = resolveVuePart(descriptors, ref)
const src = (element as SFCBlock).src
if (ref.meta.type !== 'styles' && typeof src === 'string') {
if (src.startsWith('.')) {
return path.resolve(path.dirname(ref.filename), src as string)
} else {
return require.resolve(src, { paths: [path.dirname(ref.filename)] })
}
}
else if(ref.meta.type === 'styles') {
// Replace the .vue extension with a .vue.css so it can pass through
// PostCSS.
return id.replace('.vue', '.vue.css');
}
return id
}
}
SampleComponent.vue
<template>
<div>
<span class="message" v-html="message"/>
</div>
</template>
<script>
export default {
name: 'sample-component',
props: {
message: {
type: String,
required: true
}
}
};
</script>
<style lang="scss">
.sample-component {
background: rgb(200, 200, 200);
.message {
font-size: 1rem;
}
.test {
background: yellow;
}
.a {
background: red;
}
.b {
background: blue;
}
.c {
background: white;
}
}
</style>
rollup.config.js
const plugins = [
vue({
css: false
}),
postcss({
extract: true,
plugins: [
cssnano()
]
}),
eslint({
exclude: '**/*.css'
}),
babel({
exclude: NODE_MODULES
})
]
// 1. If I use css() (css-only) then, I get no output. It only works if I remove it and just use PostCSS. Not sure if this expected behavior, but if so, docs could be more explicit.
// 2. Without "exclude: '**/*.css'" eslint tries to lint the CSS. Not sure if this is expected behavior or can be avoided in rollup-plugin-vue. Without vue, postcss doesn't pick up the files so it seems related.
// 3. Worth noting, without "extract: true", or a string for a filename, there is no file output at all.
plugins used in rollup.config.js
Expected behavior
My sample-component.css should be
.sample-component{background:#c8c8c8}.sample-component .message{font-size:1rem}.sample-component .test{background:#ff0}.sample-component .a{background:red}.sample-component .b{background:#00f}.sample-component .c{background:#fff}
Actual behavior
Without the line of code changed above, I get the following error:
src/SampleComponent.vue?rollup-plugin-vue=styles.0.css[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/SampleComponent.vue?rollup-plugin-vue=styles.0.css (2:0)
1:
2: .sample-component {
^
3: background: #c8c8c8;
4: }