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

Duplicated generated override style #637

Closed
ulivz opened this Issue Jul 8, 2018 · 4 comments

Comments

Projects
None yet
1 participant
@ulivz
Member

ulivz commented Jul 8, 2018

Bug report

Version

  • v0.10.2

Steps to reproduce

  1. Create a override.styl, type:
#override {
  font-size: 100px;
}
  1. Disable optimize-css-assets-webpack-plugin.

  2. Check out the extracted CSS output:

image

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

This comment has been minimized.

Member

ulivz commented Jul 8, 2018

Workaround 1

Move:

@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:

image

There are still some css generated behind override.styl.

@ulivz

This comment has been minimized.

Member

ulivz commented Jul 8, 2018

Workaround 2

Move:

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

To lib/app/app.js.

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

image

  • 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

This comment has been minimized.

Member

ulivz commented Jul 8, 2018

Workaround 3

Same to #2 but using asynchronous import:

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

Wonderful, That's what we want!

image

cc @yyx990803

@ulivz

This comment has been minimized.

Member

ulivz commented Jul 8, 2018

Appendix

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

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

@ulivz ulivz changed the title from Duplicated generated override CSS to Duplicated generated override style Jul 8, 2018

@ulivz ulivz closed this in f998802 Jul 8, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment