Use with rollup directly

[tex0l]

Hi all,

I'm not a ViteJS user, however I am a user of rollup, and more precisely of rollup-plugin-vue which is now archived and says to move to Vite.

Since I don't want to migrate my whole build process from Rollup to Vite, I asked the Rollup team if they would consider internalizing a fork of rollup-plugin-vue. They politely said no and told me to try using this Vite plugin in Rollup directly since the interfaces are very similar.

Basically, I am wondering if I could use this plugin as a Rollup plugin to replace [email protected] which is the latest version compatible with Vue 2. And if so, how?

I tried to replace it in my config:

      vue({
        template: {
          transformAssetUrls: false
        },
        style: {
          preprocessOptions: {
            scss: {
              sourceMap: options.sourceMaps,
              includePaths: [projectDir.path('./node_modules/')]
            }
          }
        }
      })

But if fails with the following error:

Error [RollupError]: Expected a pseudo-class or pseudo-element.
    at error (/Users/me/myproject/node_modules/rollup/dist/shared/rollup.js:206:30)
    at Object.error (/Users/me/myproject/node_modules/rollup/dist/shared/rollup.js:23499:20)
    at Object.error (/Users/me/myproject/node_modules/rollup/dist/shared/rollup.js:22765:42)
    at /Users/me/myproject/node_modules/@vitejs/plugin-vue2/dist/index.cjs:990:21
    at Array.forEach (<anonymous>)
    at transformStyle (/Users/me/myproject/node_modules/@vitejs/plugin-vue2/dist/index.cjs:982:19)
    at transform (/Users/me/myproject/node_modules/rollup/dist/shared/rollup.js:22743:16)
    at ModuleLoader.addModuleSource (/Users/me/myproject/node_modules/rollup/dist/shared/rollup.js:22949:30) {
  id: '/Users/me/myproject/app/windows/preferences/components/displayName.vue?vue&type=style&index=0&scoped=53dbc385&lang.scss',
  hook: 'transform',
  code: 'PLUGIN_ERROR',
  plugin: 'vite:vue2',
  watchFiles: [
    '/Users/me/myproject/app/windows/preferences/index.js',
    '/Users/me/myproject/app/windows/preferences/components/emailList.js',
    '/Users/me/myproject/app/lib/content/vue_components/tabs.js',
    '/Users/me/myproject/app/windows/preferences/components/displayName.vue',
    '/Users/me/myproject/app/windows/preferences/components/deviceList.js',
    '/Users/me/myproject/app/windows/preferences/components/settings.vue',
    '/Users/me/myproject/app/windows/preferences/components/logList.js',
    '/Users/me/myproject/app/windows/preferences/components/filetypesWhitelist.vue',
    '/Users/me/myproject/app/lib/content/vue_components/askQuestionModal.vue',
    '/Users/me/myproject/app/lib/content/vuex_base_stores/askQuestionStore.js',
    '/Users/me/myproject/app/extensions/extensionsList.vue',
    '/Users/me/myproject/app/lib/content/i18n-loader.js',
    '/Users/me/myproject/app/extensions/index.js',
    '/Users/me/myproject/app/lib/content/windowUtils.js',
    '/Users/me/myproject/app/lib/content/externalLinks.js',
    '\x00plugin-vue2:normalizer',
    '/Users/me/myproject/app/windows/preferences/components/displayName.vue?vue&type=style&index=0&scoped=53dbc385&lang.scss'
  ],
  consumed: true
}

Anyone knows if it's worth a harder try?

[so1ve]

Hi!
I have ported this plugin to unplugin, so it may work in rollup. Here it is: https://github.com/so1ve/unplugin-vue2. If you are interested in it, please try it out and feedback. Any bug report is welcome!

[sarahg]

We were able to swap out rollup-plugin-vue for @vitejs/plugin-vue2 on our project without making other changes, but we didn't have any extra config in ours.

Here's our current Rollup config: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/rollup.config.js

And here's the PR where we made the change: https://gitlab.com/gitlab-org/gitlab-docs/-/merge_requests/3842

However, after doing this, CSS in <style> blocks in our components no longer gets included in the JS bundle (same as this). They come out as separate files.

Sounds like that behavior can be changed by using a Build Option, but I haven't be able to get that sort of config option working when using it directly with Rollup. Suggestions welcome if anyone knows how to do this! For now we're just writing CSS elsewhere.

[derrickb]

Hi @sarahg were you ever able to solve the CSS issue? I recently tried a fresh project with Rollup+vite-plugin-vue2 and also found that my css files were saved as chunks like "output-9c1fc18a.css" but not included or injected into the JS bundle.

I'm not a power user but I wonder if the name of the css file gets passed to other plugins in the chain and if a custom hook could be made to take that css file and inject it.

[sarahg]

@derrickb I didn't dig into it further, no, we've just stopped writing CSS styles in our Vue files and bundle it elsewhere. Not ideal, but it works fine. We have limited resources on this project, so we're focused more on getting from Vue 2 to Vue 3 rather than solving this one.

[derrickb]

@sarahg I have some good news and was planning to reply here to let you know: the bundling/inject works if using the postcss plugin!

import vue from '@vitejs/plugin-vue2';
import postcss from 'rollup-plugin-postcss';

//in your plugins array:
plugins: [
  vue(),
  postcss({
    extract: false //or true
  })
]

What's really nice is the postcss plugin has an extract option which works properly with either true or false values, so you can selectively inject (false) or extract to a .css file (true) depending on your needs.