An order of required styles is wrong.

[mtnt]

Hi guys. I have some problem and I really can`f find a way...

I trying to make separate style files for different mobile devices form-factors.

Files structure:

A UIKit layer:

// ./base/kit/mobile.kit.styl
@import '../variables/variables.styl';

.mobile {
    color: $red;
}

// ./base/kit/tablet.kit.styl
.tablet {
    color: $blue;
}

Base layer:

// ./base/base/mobile.base.styl
@import '../kit/mobile.kit.styl';

body.mobile {
    height: 100%;
    color: #fff;
}

// ./base/base/tablet.base.styl
@import './mobile.base.styl'; //with mobile.kit included
@import '../kit/tablet.kit.styl'; // overriding some mobile.kit classes

body.tablet {
    height: 90%;
    color: #fff;
}

Entry points:

// ./base/entry/mobile.entry.js
require('../base/mobile.base.styl');
require('../base/base.js');

// ./base/entry/tablet.entry.js
require('../base/tablet.base.styl');
require('../base/base.js');

Base.js:

// some code without includes

Webpack config:

var ExtractTextPlugin = require('extract-text-webpack-plugin');

//var autoprefixer = require('autoprefixer');
//var precss       = require('precss');

module.exports = {
    context: __dirname + '/static',
    entry:   {
        mobile: './base/entry/mobile.entry.js',
        tablet: './base/entry/tablet.entry.js'
    },
    output:  {
        path:       __dirname + '/assets/js',
        filename:   '[name].base.js'
    },
    module:  {
        loaders: [
            {
                test:   /\.styl$/,
                loader: ExtractTextPlugin.extract('css!stylus')
            }
        ]
    }
    ,

    plugins: [
        new ExtractTextPlugin('../css/[name].base.css')
    ]

Result of packing:

// mobile.base.css
.mobile {
  color: #f00;
}
body.mobile {
  height: 100%;
  color: #fff;
}

// tablet.base.css
.mobile {
  color: #f00;
}
body.mobile {
  height: 100%;
  color: #fff;
}
.tablet {
  color: #00f;
}
body.tablet {
  height: 90%;
  color: #fff;
}

All is good: tablet styles are after mobile - what I need... Was.. Unless I added require into the base.js

// ./base/base/base.js
// < some code

require('../../layout/page.index/page.index.js');

// ./layout/page.index/page.index.js
require('./page.index.styl');

Result:

// mobile.base.css
.mobile {
  color: #f00;
}
body.mobile {
  height: 100%;
  color: #fff;
}
.page {
  font-size: 3px;
}

// tablet.base.css
.page { //<< WHY IS IT HERE?
  font-size: 3px;
}
.mobile {
  color: #f00;
}
body.mobile {
  height: 100%;
  color: #fff;
}
.tablet {
  color: #00f;
}
body.tablet {
  height: 90%;
  color: #fff;
}
// << WHY NOT HERE?

[mtnt]

I have made an experiment and used another one layer - desktop.
At that case right position was on desktop only. I guess it is because of the desktop was handled first (alphabetically), same as the "mobile" was before "tablet".

[jhnns]

Is this a duplicate of #200?

[bebraw]

Yup. Let's close in favor of #200. Better continue there.