Accessing the Stylus Javascript API

juanvisbal commented 9 years ago

I'm trying to create the columns variable in Javascript (Coffeescript really) and access them in Stylus but so far I'm getting error require not defined.

My coffee file is in the lib folder and my main.styl file in the client folder.

random = (num) ->
  Math.floor Math.random() * num + 1

@cols = random(num)
@rows = random(num)

stylus = require('stylus')

stylus(str)
  .set('filename', '../client/main.styl')
  .define 'cols', stylus.nodes.unit(@cols)
  .define 'rows', stylus.nodes.unit(@rows)
  .render (err, css) ->
    if (err)
      throw err
    console.log(css)
    return

I get this error

While building the application:
node_modules/stylus/node_modules/glob/node_modules/minimatch/node_modules/lru-cache/test/memory-leak.js:1:15: Unexpected token ILLEGAL
node_modules/stylus/node_modules/source-map/test/run-tests.js:1:15: Unexpected token ILLEGAL
node_modules\stylus\node_modules\sax\examples\test.html:1: Can't set DOCTYPE here.  (Meteor sets <!DOCTYPE html> for you)
node_modules\stylus\node_modules\sax\LICENSE-W3C.html:1: Can't set DOCTYPE here.  (Meteor sets <!DOCTYPE html> for you)

The pure Stylus grid works fine but i can't seem to be able to set the columns through Javascript. I need the column value outside of .styl and this is the only way i figure out how (don't know how to make it in .styl and access it in JS).

juliancwirko commented 9 years ago

Hey in Meteor there is a build plugin which will be used on build time. See: http://docs.meteor.com/#/full/Package-registerBuildPlugin

I don't know exactly what you want to achieve but you shouldn't use require on the client and on the server it should be stylus = Npm.require('stylus') (you can also read about npm package: https://meteorhacks.com/complete-npm-integration-for-meteor)

Anyway I don't think that Stylus will work with Meteor this way. You probably should try to build your own build plugin based on this one: https://github.com/juliancwirko/meteor-s-grid/blob/master/plugin/compile-stylus.js and create your own Stylus package like s-grid.

juanvisbal commented 9 years ago

I define my grid like this

.grid
    grid()
    .box
        cells(1, @cols)

Where @cols is a random number from a javascript variable. If I use a generic number or generate the random number with Stylus it works fine, but i need the JS variable (i use it for other things).

juliancwirko commented 9 years ago

In this case you should probably write your own build plugin. For now in Meteor all Stylus compilation is done through build plugin. You can't do this partially. Here is some more info: https://github.com/meteor/meteor/wiki/CompileStep-API-for-Build-Plugin-Source-Handlers

juliancwirko / meteor-s-grid

Accessing the Stylus Javascript API #4