Doesn't play nicely with postcss-import when using @media

[willhoag]

Getting a TypeError when importing a file with a lost-column style inside an @media query.

/*index.css*/
@import 'import.css';

/*import.css*/
.class {
    @media (min-width: 800px) {
        lost-column: 1/2;
    }
}

Here is my stacktrace:

Your current PostCSS version is 5.0.2, but lost uses 4.1.16. Perhaps this is the source of the error below.

events.js:85
      throw er; // Unhandled 'error' event
            ^
TypeError: Cannot read property 'split' of undefined
    at appendToSelectors (/Users/willhoag/Documents/dev/threeheadedbeast/node_modules/lost/lost.js:18:15)
    at newBlock (/Users/willhoag/Documents/dev/threeheadedbeast/node_modules/lost/lost.js:25:24)
    at /Users/willhoag/Documents/dev/threeheadedbeast/node_modules/lost/lost.js:663:11
    at /Users/willhoag/Documents/dev/threeheadedbeast/node_modules/postcss/lib/container.js:102:34
    at /Users/willhoag/Documents/dev/threeheadedbeast/node_modules/postcss/lib/container.js:73:26
    at AtRule.each (/Users/willhoag/Documents/dev/threeheadedbeast/node_modules/postcss/lib/container.js:59:22)
    at AtRule.walk (/Users/willhoag/Documents/dev/threeheadedbeast/node_modules/postcss/lib/container.js:72:21)
    at /Users/willhoag/Documents/dev/threeheadedbeast/node_modules/postcss/lib/container.js:76:32
    at Rule.each (/Users/willhoag/Documents/dev/threeheadedbeast/node_modules/postcss/lib/container.js:59:22)
    at Rule.walk (/Users/willhoag/Documents/dev/threeheadedbeast/node_modules/postcss/lib/container.js:72:21)

[corysimmons]

Did you try downgrading postcss to 4.1.16?

[willhoag]

Actually, I downgraded was getting the same error... but, turns out it was a source order issue. Just needed to use postcss-nested after postcss-import and before lost. Appreciate the library btw. Good stuff!

[corysimmons]

Thanks. Glad you like it.

Yeah it seems there are a lot of Issues lately about order of operations. At first glance it seems like compiling Lost before anything else would solve them. Thoughts?

[willhoag]

Well, it's really nice to order dependencies by declaring them directly in your css with require/import statements, so you don't have to think about order, just local dependencies. That means a single entry point and you can't process lost on a bunch of require/import statements. Fortunately Sass, Less and Stylus handle order for you, but with Postcss you have to handle it for yourself. A Postcss specific note in the README or installation wiki would help, but it's not necessarily part of the scope of Lost. It's more a Postcss domain I think, but it couldn't hurt :).