Duplicated generated override style

[ulivz]

Bug report

Version

• v0.10.2

Steps to reproduce

1. Create a override.styl, type:

#override {
  font-size: 100px;
}

2. Disable optimize-css-assets-webpack-plugin.

3. Check out the extracted CSS output:

override.styl will be duplicated at the front of each component's style chunk

What is expected?

override.styl SHOULD be generated only once and SHOULD be mounted at the end of the style bundle.

What is actually happening?

override.styl was generated many times

[ulivz]

Workaround 1

Move:

vuepress/lib/default-theme/styles/config.styl

Line 21 in 76d12e7

@import '~@temp/override.styl' // generated from user config

To the end of default-theme/styles/theme.styl.

Before	After
1544 lines	1508 lines

This chunk was duplicated 12 times!

Though this can fix the duplicated chunk. but it's still not the ideal solution, see the following snapshot:

There are still some css generated behind override.styl.

[ulivz]

Workaround 2

Move:

vuepress/lib/default-theme/styles/config.styl

Line 21 in 76d12e7

@import '~@temp/override.styl' // generated from user config

To lib/app/app.js.

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

• Output

• Conclusion

If some special components (e.g. OutboundLiks, Badge) are only used in markdown content instead of imported to theme component tree, the time to import override.styl will be earlier than the time when these special components are parsed.

So it's still the ideal output.

[ulivz]

Workaround 3

Same to #2 but using asynchronous import:

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

• Output:

Wonderful, That's what we want!

• Refs:

• mini-css-extract-plugin > Fix CSS ordering for config with multiple entry points

cc @yyx990803

[ulivz]

Appendix

Check out the generated files at each workaround: #637.zip

├── #1.css
├── #2.css
├── #3.css
└── #before.css