Skip to content

Commit

Permalink
feat($default-theme): new file-level API: style.styl.
Browse files Browse the repository at this point in the history
1. Fixed overriding css doesn't work at 0.11.0 (close: #639)

2. Split override.styl into two APIs: override.styl and style.styl, the former will focus on ONLY the style constants override, while the latter will focus on styles override or custom styles. See also: https://vuepress.vuejs.org/default-theme-config/#simple-css-override.
  • Loading branch information
ulivz committed Jul 12, 2018
1 parent 16e917d commit 2f53f2f
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 2 deletions.
Empty file added docs/.vuepress/override.styl
Empty file.
33 changes: 33 additions & 0 deletions docs/default-theme-config/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -419,6 +419,39 @@ $borderColor = #eaecef
$codeBgColor = #282c34
```

### Existing issues <Badge text="< 0.12.0" type='error'/>

In order to override the default variables mentioned above, `override.styl` will be imported at the end of the `config.styl` in default theme, and this file will be used by multiple files, so once you wrote styles here, your style will be duplicated by multiple times. See [#637](https://github.com/vuejs/vuepress/issues/637).

In fact, `style constants override` and `styles override` are two things, the former should be executed before any CSS is compiled, while the latter should be generated at the end of the CSS bundle, which has the highest priority.

### Migrate your styles to `style.styl` <Badge text="0.12.0+"/>

Start from `0.12.0`, we split `override.styl` into two APIs: `override.styl` and `style.styl`:

If you wrote styles at `override.styl` in the past, e.g.

``` stylus
// override.styl
$textColor = red // style constants override
#my-style {} // styles override or custom styles.
```

You'll need to separate the style part to `style.styl`:

``` stylus
// override.styl
// SHOULD ONLY focus on style constants override.
$textColor = red
```

``` stylus
// style.styl
// SHOULD focus on styles override or your custom styles.
#my-style {}
```

## Custom Page Class

Sometimes, you may need to add a unique class for a specific page so that you can target content on that page only in custom CSS. You can add a class to the theme container div with `pageClass` in `YAML front matter`:
Expand Down
2 changes: 1 addition & 1 deletion lib/app/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import enhanceApp from '@temp/enhanceApp'
import themeEnhanceApp from '@temp/themeEnhanceApp'

// generated from user config
import('@temp/override.styl')
import('@temp/style.styl')

// built-in components
import Content from './components/Content'
Expand Down
2 changes: 2 additions & 0 deletions lib/default-theme/styles/config.styl
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,5 @@ $MQMobileNarrow = 419px

// code
$lineNumbersWrapperWidth = 3.5rem

@import '~@temp/override.styl'
16 changes: 15 additions & 1 deletion lib/prepare/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ const fs = require('fs-extra')
const resolveOptions = require('./resolveOptions')
const { genRoutesFile, genComponentRegistrationFile } = require('./codegen')
const { writeTemp, writeEnhanceTemp } = require('./util')
const logger = require('../util/logger')
const chalk = require('chalk')

module.exports = async function prepare (sourceDir) {
// 1. load options
Expand All @@ -24,7 +26,19 @@ module.exports = async function prepare (sourceDir) {
// 4. handle user override
const overridePath = path.resolve(sourceDir, '.vuepress/override.styl')
const hasUserOverride = fs.existsSync(overridePath)
await writeTemp(`override.styl`, hasUserOverride ? `@import(${JSON.stringify(overridePath)})` : ``)
await writeTemp('override.styl', hasUserOverride ? `@import(${JSON.stringify(overridePath)})` : ``)

const stylePath = path.resolve(sourceDir, '.vuepress/style.styl')
const hasUserStyle = fs.existsSync(stylePath)
await writeTemp('style.styl', hasUserStyle ? `@import(${JSON.stringify(stylePath)})` : ``)

// Temporary tip, will be removed at next release.
if (hasUserOverride && !hasUserStyle) {
logger.tip(
`${chalk.magenta('override.styl')} has been split into 2 APIs, we recommend you upgrade to continue.\n` +
` See: ${chalk.magenta('https://vuepress.vuejs.org/default-theme-config/#simple-css-override')}`
)
}

// 5. handle enhanceApp.js
const enhanceAppPath = path.resolve(sourceDir, '.vuepress/enhanceApp.js')
Expand Down

0 comments on commit 2f53f2f

Please sign in to comment.