Stylus, right order of subdirectory import - css

Question

everybody.
I have a problem with stylus import.
In my project I'am using such methode of import:
#import "project/**/*.styl"
And also i have this bem folder structure:
Project/
|- Project.styl
|- Block1/
| |- Block1.styl
| |- _Element1/
| | |- _Element1.styl
| | |- __Modificator1/
| | | |- __Modificator1.styl
|- Block2/
|- Block3/
In general, the problem is that when bundle.css is ready, styles in it goes in wrong way. First in it goes modificators, then elements and only then blocks, so modificator always overwrites by elements, and finnaly they don't work ... that how looks my code:
HTML:
<div class="block1_element1 block1_element1__modificator1"></div>
CSS:
.block1_element1__modificator1{font-size: 14px}
.block1_element1{font-size: 16px}
In result will be 16px font size ...
If someone know how to change order from end of branch to the start, please give me advice how to make it.s

Answer 1

The Problem
Wrong order of Stylus imported files.
The Reason
When using File Globing in Stylus i.e. **/* Stylus engine orders files by names so the order of imported files becomes __Modificator(n).styl then _Element(n).styl then Block(n).styl and that of course what is causing wrong CSS styles.
Possible Solution
Use index.styl file in each directory/subdirectory, inside each index.styl file import all the files in the current directory then all index.styl files of all subdirectories.
Example
The project structure should be like below:
Project/
|- Project.styl
|- Block1/
| |- index.styl
| |- Block1.styl
| |- _Element1/
| | |- index.styl
| | |- _Element1.styl
| | |- __Modificator1/
| | | |- index.styl
| | | |- __Modificator1.styl
|- Block2/
|- Block3/
And here what should be inside the index.styl files
inside Project.styl
#import "Block1"
#import "Block2"
...
inside any Block directory index.styl file
#import "_Element1"
#import "_Element2"
#import "Block1.styl" // current parent block
...
inside any Element directory index.styl file
#import "__Modificator1"
#import "__Modificator2"
#import "_Element1.styl" // current parent Element
...