Default theme CSS order inconsistent between dev and build

[hoopyfroody]

Bug report

In local dev, theme.styl content is inlined after theme component css (f.e. from Navbar.vue) in the head, whereas in the built version the theme.styl content is placed before any component css in the 0.styles.xxxxxxx.css file

This results in the Navbar becoming position: relative instead of position: fixed in the built version and scrolling with the page. There are probably more issues stemming from this, but the Navbar is what tipped me off.

Version

0.11.0

Steps to reproduce

yarn docs:dev
yarn docs:build
deploy the build somewhere

What is expected?

The navbar is position: fixed in both dev and build

What is actually happening?

The navbar is position: relative in the built version

Other relevant information

• Your OS: MacOS 10.13.3
• Node.js version: 8.11.3
• Browser version: Chrome 67
• Local install
• Yarn

[ulivz]

Could you provide a reproduction repo link for me to investigate? Thanks.

[hoopyfroody]

I'm having trouble reproducing it in a minimal repro, will dig some more.

[hoopyfroody]

Couldn't construct a repro. Did find that commenting out this fixes the problem:

config.optimization.splitChunks({
      cacheGroups: {
        styles: {
          name: 'styles',
          // necessary to ensure async chunks are also extracted
          test: m => /css-extract/.test(m.type),
          chunks: 'all',
          enforce: true
        }
      }
    })

in lib/webpack/createBaseConfig.js

That produces a range of separate css chunk files, and in the chunk containing the vuepress css, the order is now correct.

I can't show our codebase unfortunately, but the setup we have is vuepress locally installed within projectdir, building docs located in projectdir/docs. From the .md files we load components located in projectdir/src/components. I'm thinking there may be a conflict happening between node_modules from the main project and vuepress?

[ulivz]

I don't know why you cannot construct a repro for an issue that you confirmed. So you just let me to accept a fix for an unreproducible issue?

[hoopyfroody]

I don't have a fix, just a workaround which disables some intended vuepress functionality so I wouldn't recommend it (though disabling it through configureWebpack in config.js suffices for our specific use case, I'm not happy about it as it feels brittle).

I cannot reproduce it outside our own codebase, which is not public. I spent several hours today trying to reproduce this in a fresh vue-cli install and couldn't. This is what I meant by not being able to reproduce it. Trust me, I'm not happy either.

My last hunch was that it may have to do with the fact that the project uses vue-loader v12 and vuepress uses v15, but I had to call it and switch to other work. Might be able to do some more digging tomorrow.

[ulivz]

OK, thanks, not sure if this change could give you more ideas: f998802

[taylorotwell]

Can confirm this bug.

[ulivz]

@taylorotwell Could you create reproduction repo for that? Thanks.

[ricnic]

Here is a bare-bones repo that illustrates this: vuepress-issue-643

Hopefully the difference between the sidebar links in dev vs build are obvious.

With yarn dev:

With yarn build:

I've added a commented-out section in the config.js that seems to resolve the issue (in this instance at least).

Let me know if that helps or if you need anything else.

[davidhemphill]

Can confirm this is still an issue with my VuePress project. The CSS ordering is different between dev and production builds.

[ulivz]

Using 0.14.5 or v1.0.0-alpha.22. See: #977.

[andrewMETALAB]

FYI - the issue does not occur in 0.14.5 but it does occur in 1.0.0-alpha.22 AND in 1.0.0-alpha.39 (most recent version)