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.

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

fix: style pollution on custom theme #190

Merged
merged 1 commit into from
Dec 26, 2020
Merged

fix: style pollution on custom theme #190

merged 1 commit into from
Dec 26, 2020

Conversation

antfu
Copy link
Member

@antfu antfu commented Dec 23, 2020

When using a custom theme, the style from the default theme will be injected and polluting the custom theme (overrides) due to the styles import side effect from re-exporting the defaultTheme here:

export { default as defaultTheme } from '/@default-theme/index'

Repro: https://codesandbox.io/s/vitepress-style-pollution-p5kvq?file=/index.md

This PR removed the redirecting as it does not seem to be used and users should always import the theme from vitepress/dist/client/theme-default explicitly.

@vercel
Copy link

vercel bot commented Dec 23, 2020

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/vuejs/vitepress/o7flw7gvc
✅ Preview: https://vitepress-git-fix-style-pollution.vuejs1.vercel.app

@antfu antfu changed the title fix: remove defaultTheme re-export to avoid style pollution fix: style pollution on custom theme Dec 23, 2020
@antfu
Copy link
Member Author

antfu commented Dec 23, 2020

@knightly-bot build this

@knightly-bot
Copy link

Nightly Build

🌒 Knightly build enabled, release every night at 00:00 UTC (skip if no change)

📦 npm package

@patak-dev
Copy link
Member

patak-dev commented Dec 23, 2020

I think this export was added after this discussion: #157 (comment)
The idea was that users that only need to extend the theme to register a few global components, wouldn't need to also take care of importing the styles and knowing the deep path to reach the theme:

// .vitepress/theme/index.js
import { defaultTheme } from 'vitepress'
import MyGlobalComp from './Comp.vue'

defaultTheme.enhanceApp = ({ app }) => {
  app.component('MyGlobalComp', MyGlobalComp)
}

But I see your point that it is impossible to use the theme without any styles. Maybe there is a way to opt out with an option in the theme.enhanceApp() function?

@antfu
Copy link
Member Author

antfu commented Dec 23, 2020

@matias-capeletto The current implementation make importing vitepress non-side-effect-free.

import 'vitepress' // will import the css side effects as well

I don't think they can be solved without some hacks. I am thinking user should import the default theme explicitly like:

import defaultTheme from 'vitepress/dist/client/default-theme`

Which is also recommended by the Customization Guide


Maybe we can add exports alias in package.json to achieve something like

import defaultTheme from 'vitepress/default-theme`

And I think the enhanceApp hook is a good idea, and we can use it regardless the default or custom theme

import { enhanceApp } from 'vitepress'

enhanceApp(({ app }) =>  {

})

@patak-dev
Copy link
Member

Which is also recommended by the Customization Guide

Yes, the change was not documented and I think it was still WIP. Totally agree that importing vitepress should not include the CSS.
I like your proposal 👍🏼

import defaultTheme from 'vitepress/default-theme`

@antfu antfu mentioned this pull request Dec 26, 2020
@antfu antfu merged commit 46e99ba into master Dec 26, 2020
@antfu antfu deleted the fix/style-pollution branch December 26, 2020 17:50
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 21, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants