Vuepress: Default theme override structure

Created on 11 Jun 2018 · 4Comments · Source: vuejs/vuepress

Feature request

What problem does this feature solve?

Currently, the override.styl is unable to override style declarations properly, only variable overrides work as they should. This is due to config.styl being required at the _top_ of most .styl files. This prevents override.styl declarations from working, since they are outputted _before_ the default theme styles. This structure also has a side effect of repeating the style declarations (because they are required multiple times)

Here is an example:
override.styl

Output for .content code element
.content code element

How should this be implemented in your opinion?

I would suggest implementing 2 override files (styleOverride and variableOverride ? ). Keep variableOverride import at the bottom of config.styl and add styleOverride import at the bottom of theme.styl file. This would allow to override both variable and style declarations. To prevent breaking changes, variableOverride could be kept named override.styl

While webpack does a good job of stripping the repeated styles in production build, I don't see a reason to @require './config.styl' in all the files. Requiring it once at the top of theme.styl should be sufficient, right?

EDIT: After inspecting this a bit more, the repeated style declarations apparently come from theme components, as most of them @require the config.styl

Are you willing to work on this yourself?**

Yes, after getting a permission.

Source

FistMeNaruto

Most helpful comment

Ofcourse I can, both !important and ejecting would work, I am just offering to fix the underlying structure of the default theme so the !important (which should be avoided) and ejecting (which disables future theme updates) would not be necessary :)

FistMeNaruto on 18 Jun 2018

👍4