fix(nuxt): make it possible to overwrite default values for css option (#4214)

[cybearz]

Description

Vuestic's option "css" accepts an array of css modules as an input.
The default value of that option is ['smart-helpers', 'typography'].
The problem is that nuxt won't override the default array with an array passed by user (it's a known issue). Instaed two arrays will be concatenated.

For example, I want to use only a typography css module, so I set the css option to ['typography'].

In that case I expect the css option to be ['typography'] according to documentations.
Instead i have this:

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any feature but make things better)

[m0ksem]

I agree this is counterintuitive, but I'm wondering if we should obey the rules defined by nuxt team. (see https://nuxt.com/docs/guide/directory-structure/app-config#merging-strategy)

Someone might expect arrays to be merged (I don't really believe in this, though). In case you want to completely override this option, you can use a function, as describe in link above.

[m0ksem]

I haven't found any modules that make something like this. (https://nuxt.com/modules/).

What I can propose is to move to object format:

css: {
  typography: false,
  reset: false,
}

[m0ksem]

Another option is making typography a separate option.

typography: {
   font: 'Inter',
   helpers: false, // disable typography helpers like .va-h1, etc.
}

I think we can totally remove grid, smart-helpers and reset, because we aim for tailwind to take responsibility for that.

[m0ksem]

Okay. Looks like merging function don't work.

Both adds 'smart-heleprs' anyway:

  vuestic: () => ({
    config: {
      // Config here
    },
    css: ['typography']
  }),

  vuestic: {
    config: {
      // Config here
    },
    css: () => ['typography']
  },

[m0ksem]

Thanks!

[cybearz]

Thanks!

Or maybe it would be better to set "css: true" which will register all CSS by default? In that case if the user passes an array with the css modules he needs, there will be no errors with merging (since the default value is not an array or an object).

[m0ksem]

I think the current solution you proposed is more than enough. We'll need to refine how CSS features work. We have two builds for typography: global and just css classes. As for now, there is no way to control build in nuxt.