Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inject specific styles into head tag after vite build #245

Open
5 of 6 tasks
Ovsdrak opened this issue Aug 29, 2023 · 0 comments
Open
5 of 6 tasks

Inject specific styles into head tag after vite build #245

Ovsdrak opened this issue Aug 29, 2023 · 0 comments
Labels
enhancement New feature or request feat: ssr

Comments

@Ovsdrak
Copy link

Ovsdrak commented Aug 29, 2023

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.

image

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)).

Screenshot 2023-08-28 at 22 15 18

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request feat: ssr
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@edison1105 @Ovsdrak