Description
Related plugins
Description
Hello! I'm looking forward to gather all <style> tags with a specific data-id="inline" attribute from all Vue SFCs,
<style lang="scss" scoped data-id="inline">
/* css styles and @imports */
</style>and inject their content in a single <style> (with the same attribute/value) inside <head> tag in the compiled html file.
<html>
<head>
<style type="text/css" data-id="inline">
/* css styles @imports and */
</style>
</head>
</html>So I can reference that style tag with the data-id attribute during execution with vanilla.js.
Suggested solution
I was wondering if it's possible to provide some configuration to @vitejs/plugin-vue like the following
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
vue({
style: {
inlineCSS: ['data-id="dialog"', 'data-id="drawer"']
}
})
]
}) The above configuration would result in the following dom after running vite build
<html>
<head>
<style type="text/css" data-id="dialog">/* Compiled styles from all Vue SFCs matching data-id="dialog" attribute */</style>
<style type="text/css" data-id="drawer">/* Compiled styles from all Vue SFCs matching `data-id="dialog" attribute` */</style>
</head>
<body>
<!-- rest of code -->
</body>
</html>Alternative
Replicate dev css build configuration for production build (vite build)
I tried to figure out how to replicate the build configuration of dev build to production build, but would lead to optimization issues since I just need to get some styles (with attribute mentioned above) to move to parent app. But even though, I didn't have success with the replication of dev build.
Custom elements
I realized that custom elements can encapsulate styles in the component root DOM shadow. Tried that, but since the component can have Vuetify components, they disappear in the resulting html. (empty comments appear instead <!-- -->)
Custom rollup plugin
I tried to start this, but it seems a very complex task since I need to avoid conflicts of scoped style ids with existing css compilation, compiling pre-processors syntax, chunking. I need help for this about how can I start (existing plugins to use, considerations to avoid conflicts with vue plugin, etc.).
Additional context
Use case
The reason I need this, is because I'm working with an iframe-based microfrontend project where I have a parent Vue app and a child Vue app. And I need to open a v-dialog with custom styled forms from the child app, but it needs to cover all the browser screen.
Progress
I managed to teleport the v-dialog to the parent app by relaxing Same Origin Policy, and also moved the styles to parent app with a Vite dev server since all <style> tags are injected into the <head> tag with data-vite-dev-id attribute=Component.vue, which helped me to reference the specific style elements that i need to move to parent app (window.top.document.head.appendChild(styleNode)).
Tech Stack (relevant libraries)
"vue": "^3.2.13",
"vuetify": "^3.3.2",
"@vitejs/plugin-vue": "^4.2.3",
"typescript": "^4.0.0",
"vite": "^4.3.9",
"sass": "^1.55.0",
"vite-plugin-vuetify": "^1.0.0-alpha.12",
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.