Rollup-plugin-vue: Problem with tree shaking for style tag

[ale-grosselle]

Expected behavior

my library exports two or more compenents. Each component implements its style.

Now I am testing tree shaking including this library in an another project and importing only one component.
After that i bundle my test Project and minify It.
All unused js are correctly removed, but other components css are not removed.

So actually all CSS are always included.

I suggest this: if css parameter values true, instead of inject a function that include CSS, we could insert CSS in a variable and then only once on "beforeRender" state (vue hook) inject CSS.

[znck]

By default style is inlined in component code now. And with {css: false}, it is converted to import statement so rollup can handle tree shaking.

Related PR #184

[ale-grosselle]

@znck I am trying to verify your fix in my project: I update plugin to version "4.0.2" and rollup to version "0.58.2".

Now i am receiving this error from rollup:

[znck]

Could you share the error message? And possibly the component you are trying to compile.

[ale-grosselle]

@znck Here a simple example with error:
https://github.com/ale-grosselle/example-vue-rollup

Error: Could not load .../example-vue-rollup/src/vueWrapper/genericComponents/Button/Button.vue.js?rollup_plugin_vue=%7B%22type%22%3A%22script%22%2C%22lang%22%3A%22js%22%7D (imported by /.../example-vue-rollup/src/vueWrapper/genericComponents/Button/Button.vue): ENOENT: no such file or directory, open '.../example-vue-rollup/src/vueWrapper/genericComponents/Button/Button.vue.js'

[Hokid]

@ale-grosselle,
try this:

includePaths({
    paths: ['src']
}),
vue({css: true}), // allow vue resolve url and load content before
json({
    exclude: 'node_modules'
}),
sprites(spritesConfig),
eslint(), //see eslinrc.js
postcss({
    inject: false,
    plugins: [postcssAssets({
        basePath: BASE_PATH,
        baseUrl: BASE_URL,
        loadPaths: [BASE_PATH]
    })]
}), //postcss with plugins
babel({ include: "src/**" }), // see .babelrc
resolve(), // so Rollup can find node_modules
commonjs(), // so Rollup can convert `ms` to an ES module
BUILD_FOR_PRODUCTION && uglify({output: {comments: 'all'}}),
BUILD_FOR_PRODUCTION && filesize() // show bundle size in console output

instead of:

includePaths({
    paths: ['src']
}),
json({
    exclude: 'node_modules'
}),
sprites(spritesConfig),
eslint(), //see eslinrc.js
postcss({
    inject: false,
    plugins: [postcssAssets({
        basePath: BASE_PATH,
        baseUrl: BASE_URL,
        loadPaths: [BASE_PATH]
    })]
}), //postcss with plugins
vue({css: true}), 
babel({ include: "src/**" }), // see .babelrc
resolve(), // so Rollup can find node_modules
commonjs(), // so Rollup can convert `ms` to an ES module
BUILD_FOR_PRODUCTION && uglify({output: {comments: 'all'}}),
BUILD_FOR_PRODUCTION && filesize() // show bundle size in console output

[ale-grosselle]

Hi @Hokid thanks for the suggestion.
Yes, moving vue plugin before postcss solves this problem!
With version 3.0.0 of the plugin, however, it was not necessary to do it.

No I try to apply the fix to my real project instead of demo project and check if the tree shaking is done correctly

Thanks again for the suggestion

[ale-grosselle]

@Hokid, @znck I have tested treeshakiing creating a demo project:
https://github.com/ale-grosselle/tree-shaking

"rollLib" folder contains the rollup library using new vue loader (4.0.0). It exposes two component "modal" and "button".

webpackApp folder, contains a simple app created using webpack.
it imports only button component from rollup library.
The result is bundled and minified.
The webpackApp code minified, contains modal component, even if is not imported.
With vue plugin 3.0.0, the modal component in the webpack app minified version, was never included (tree shaking works properly).
Or rather, the only thing not removed is the modal component css section.

So:
in version 3.0.0 only css wasn't removes.
in 4.0.0 all Modal parts remain

Errors details:
Side effects in initialization of unused variable ModalComponent [thron-models-min.js:428,4]

[znck]

Closing this. Recreate issue if tree shaking issue persists.