Use existing CSS

[ghost]

Could you add that it uses existing CSS and we don't need to add extra the csss?

[karolsw3]

Agreed.

[jofftiquez]

Hello @PortStone can you give more information? What do you mean by existing css? Thanks.

[jofftiquez]

I'm guessing this means you can pass styles instead of css links right? That would be neat. Will add that to enhancement.

[jantenuccigsbla]

@jofftiquez For example i use a CSS loader with webpack and i dont even know the route of the css in my .vue files are in order to pass it to this plugin

[ghost]

Hello @PortStone can you give more information? What do you mean by existing css? Thanks.

I mean with it that it detects automatically the used CSS and applies it. That means we don't need to add it manually which is a convenient feature.

You can see an example package for Angular here: https://github.com/selemxmn/ngx-print#readme

[robbaker292]

@jofftiquez For example i use a CSS loader with webpack and i dont even know the route of the css in my .vue files are in order to pass it to this plugin

Am in exactly the same situation

[enjloezz]

Found a temporary (maybe permanent) fix 🥳, basically its grabbing stylesheets from window.document and it checks if its inline css or not. If it is inline css converts it to data schema. In both in development and production mode, it works!

styles: [
    ...new Set(
      [...window.document.styleSheets]
        .map(style => {
          return style.href !== null
            ? style.href
            : `data:text/css;base64,${btoa(
                unescape(
                  encodeURIComponent(
                    [...style.cssRules].map(rule => rule.cssText).join("")
                  )
                )
              )}`;
        })
        .filter(s => s !== null && s !== "data:text/css;base64,")
    )
]

[von-maurus]

Found a temporary (maybe permanent) fix 🥳, basically its grabbing stylesheets from window.document and it checks if its inline css or not. If it is inline css converts it to data schema. In both in development and production mode, it works!

styles: [
    ...new Set(
      [...window.document.styleSheets]
        .map(style => {
          return style.href !== null
            ? style.href
            : `data:text/css;base64,${btoa(
                unescape(
                  encodeURIComponent(
                    [...style.cssRules].map(rule => rule.cssText).join("")
                  )
                )
              )}`;
        })
        .filter(s => s !== null && s !== "data:text/css;base64,")
    )
]

Wow thats a great solution. I have a question, can you do this but with SCSS?

[NaturalDevCR]

Found a temporary (maybe permanent) fix 🥳, basically its grabbing stylesheets from window.document and it checks if its inline css or not. If it is inline css converts it to data schema. In both in development and production mode, it works!

styles: [
    ...new Set(
      [...window.document.styleSheets]
        .map(style => {
          return style.href !== null
            ? style.href
            : `data:text/css;base64,${btoa(
                unescape(
                  encodeURIComponent(
                    [...style.cssRules].map(rule => rule.cssText).join("")
                  )
                )
              )}`;
        })
        .filter(s => s !== null && s !== "data:text/css;base64,")
    )
]

Pure gold, not all css styles are catched in quasar, but this is a real start point.

[kyamasam]

Works!