Trouble with order of styles in output file #59

JerryCauser · 2018-02-16T16:47:57Z

I'm not sure should that trouble be here or in nextjs rep, but lets start from here and if will be need ed - move this.

Let's start:
In simple way we have file like that:

import React, {Component} from 'react'
import '/styles/base.scss'
import css from './Wrapper.scss'
import Head from 'next/head'

export function withWrapper(Child) {
  class Wrapper extends Component {
    static async getInitialProps(...args){
      if (typeof Child.getInitialProps !== 'function') {
        return {}
      }
      let initialProps = Child.getInitialProps(...args)
      if (initialProps instanceof Promise) {
        initialProps = await initialProps
      }
      return initialProps
    }
    
    render() {
      return <div className={css.main}>
        <Head>
          <link rel="stylesheet" href="/_next/static/style.css"/>
        </Head>
        <Header/>
        <div className={css.container}>
          <Child {...this.props}/>
        </div>
      </div>
    }
  }
  return Wrapper
}

export default withWrapper

I expect styles in file styles/base.css will be at the top of style.css. Bcs it's my vendor.
But now styles of Wrapper.scss are at the top of the file style.css. Even more, all the styles that are in the Child component will get to the top of the file.

Looks like calling of components starts from the deepest one and all of styles adds with a push, so in the end we got: styles of deepest child will be at top of styles.css and style, what we expect to see at the top (vendor, normalize, etc...) appears at the bottom of file....

For myself I hacked it with spliting code in two files: vendor and app, but I think it is not the good way to solve that trouble.

The text was updated successfully, but these errors were encountered:

timneutkens · 2018-02-16T21:27:18Z

Looks related: webpack-contrib/extract-text-webpack-plugin#200

JerryCauser · 2018-02-17T14:19:58Z

Yeah, it is.

JerryCauser closed this as completed Feb 17, 2018

VeeeneX mentioned this issue Sep 8, 2018

Bootstrap 4, CSS Selector order vercel/next.js#5121

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Trouble with order of styles in output file #59

Trouble with order of styles in output file #59

JerryCauser commented Feb 16, 2018 •

edited

Loading

timneutkens commented Feb 16, 2018

JerryCauser commented Feb 17, 2018

Trouble with order of styles in output file #59

Trouble with order of styles in output file #59

Comments

JerryCauser commented Feb 16, 2018 • edited Loading

timneutkens commented Feb 16, 2018

JerryCauser commented Feb 17, 2018

JerryCauser commented Feb 16, 2018 •

edited

Loading