Global Styles

[marcosmoura]

Yeah. I know. We shouldn't use this approach.

But...

I was thinking of using styled-vue along with a UI Framework that I'm developing. The main idea is to have dynamic styles that can be changed when using the UI Framework. As an example, let's think in a theme solution:

Vue.use(UiFramework, {
  colors: {
    primary: '#313131'
    // and so on...
  }
})

Then, inside a particular UI Component, I can use those "dynamic" data and generate the CSS. This already works, but I would like to generate the classes without the scoped attribute. This is only to make easier to override the CSS later (in userland).
For example, .ui-title[data-v-3bf6d6bb] have higher specificity than .ui-title.

With that in mind, it would be awesome to have an option to toggle the scoped option when passing to vue-template-compiler.

Maybe another expression called globalCss or even a config inside vue.config.js (it is also possible to configure it through webpack, poi and nuxt)

What do you think? I can easily submit a PR if makes sense for you.

Thanks :)

[egoist]

Maybe use globalStyle for this:

import { css } from 'styled-vue'

export default {
  globalStyle: css`
    .foo {
      color: ${vm => vm.color}
    }
  `
}

PR welcome.

[marcosmoura]

Sounds good!

[egoist]

It's here: https://github.com/egoist/styled-vue#global-styles Enjoy 😄