percent function not being processed in grid.styl

[michael-lawrence]

I think the percent function is not being processed due to the stylus-type-utils not being imported. I'm having to manually import it into my main app.styl file to get the grid to work.

@import "node_modules/foundation/node_modules/stylus-type-utils";

[blai]

It is done here: https://github.com/blai/foundation/blob/stylus/stylus/foundation.js#L6 and here: https://github.com/blai/foundation/blob/stylus/stylus/foundation.js#L18. But I see what you mean, that only works if you also import Foundation the same way. Can you share how your project is setup (and how stylus is being compiled)?

[michael-lawrence]

I see, that's so weird as I still have to import it myself. I'm using Derby.js and installed foundation via npm install foundation which I believe you maintain as well, but I couldn't find the repo for that version. Derby automatically compiles your .styl files for you and I was just trying to do a simple import, but anywhere the stylus-type-utils functions were being called it would just ignore them and output the raw command.

If you just create a derby app and install foundation via npm then try to import it, then try to add a grid to your main view you will see what I mean. :)

[blai]

@michael-lawrence can you please try the latest version of stylus port of foundation and see if it resolve the problem, thx.

[michael-lawrence]

I get failed to locate @import file type-utils.styl when trying to load the latest version. Are you referencing a globally installed stylus stylesheet?

[blai]

I followed the example from stylus-type-utils's github page and it works for me. Did you configure your stylus compiler to import stylus-type-utils?

[michael-lawrence]

I called npm install stylus-type-utils --save and also npm install stylus-type-utils -g and I still get the same error. What steps did you take to configure the stylus compiler aside from just installing the package?

[blai]

I didn't use derby.js, but I just took a look at their source code. Looks like Derby.js is hard coding the integration of stylus: https://github.com/codeparty/derby/blob/a3129c450eeb7fb44ec20f1dc38710a6e0094106/lib/files.js#L71 the compiler function here should also allow custom import of other libraries besides of nib. If say it allows you to put one more line .use(require('foundation')) then the error would be gone (as it shows on Stylus official documentation: http://learnboost.github.io/stylus/docs/js.html see bottom of the page).

I am open for suggestions here, should we enhance Derby.js to allow such flexibility, or should we fix the stylus port of foundation? It seems the first options is better, as not everyone is using foundation with Derby.js

[michael-lawrence]

I agree, Derby should be updated. I'll take a crack at it tomorrow and see if I can get it to work. If I can then maybe I can do a pull request to allow for it. :) Thanks!

[michael-lawrence]

Just an update, I tried hard-coding the .use(require('foundation')) part to the files.js file and still no luck. I have no idea why it can't find type-utils. So strange. How hard would it be to update the stylus port?

[blai]

@michael-lawrence It is not hard to update stylus port of foundation, I actually did put what you want in by doing @import "stylus-type-utils"; but someone reported an issue with that. According to stylus-type-utils's documentation on github, we should be doing @import "type-utils"; and that's why I didn't understand why your case did not work well.

[michael-lawrence]

Yeah, I'm not really sure either. I'll have to shelve this for a another day as I've gotten super busy at work and probably won't be able to play around and test this out much in the next week or two unfortunately. :(