mistake - close this

Few months ago I created grunt-stylus plugin. It’s not very good idea to make two similar plugins but I had reasons to do it:

1. grunt-contrib was big and I didn’t want to include it in every project just to use single task.
2. stylus task was quite hard to use and configure.

First reason is eliminated now. So here is a differences of this two plugins (and this is because grunt-contrib-stylus is useless for me now):

1. Stylus’s url() function support. You can embed images as data:uri.
2. Handling of Grunt’s --debug option. grunt-stylus didn’t stop to work in debug mode if there’re syntax error in source files. It’s very useful if you use grunt watch. It’s also toggles Stylus’s compress option.
3. Probably nib support should be improved. I see few issues about nib. I didn’t test it myself yet but it looks like there is wrong (there was in my plugin) order of including nib and applying settings.

Maybe there is something else but there are main differences. Is it possible to include this functionality to grunt-contrib-stylus? (Of course I can implement it and send couple of pull requests but I decided to ask fist.) If grunt-stylus will be as simple to use and flexible as grunt-contrib-stylus I could deprecate grunt-stylus and there will be only one awesome plugin to work with Stylus.

Hi,

This is my stylus config:

stylus: {
      dev: {
        options: { compress: false, relative: true, urlfunc: 'url' },
        files: { 'public/stylesheets/app.css': 'src/stylesheets/app.styl' }
      },
      dist: {
        options: { compress: true, relative: true, urlfunc: 'url' },
        files: { 'dist/stylesheets/app.css': 'src/stylesheets/app.styl' }
      }
    }

When I use urlfunc to build embedded base64 image, in dev environment works fine, but in dist the style background-image generates: stylesheets/data:image instead data:image

This is the css:

.logo {
    background-image: url('../images/logo.png');
    width: 70px;
    height: 13px;
    margin-left: 3px;
    display: inline-block;
    vertical-align: text-top;
}

Both environment the folder images exists.

Does anybody can help me?

Thanks!

Stylus recently closed an issue & released in 0.44 regarding stylus.define.

https://github.com/LearnBoost/stylus/issues/1286

While I could write my own middleware & load it as a Stylus plugin with grunt-contrib-stylus use option, a declarative way to pass a raw object sharing structure with the grunt config would be great.

Hi,

I am getting this error when trying to use built-in functions like darken() or lighten() inside of files that were included dynamically using the @import statement.

It compiles without any problems when used in the main file that does the importing.

TypeError: src/client/app/style/detailsColumn.styl:8
>>     4| modalBlur = 3px
>>     5|
>>     6| .text
>>     7|     color darken(red,20)
>>  >  8|
>>     9| body.details
>>    10|     overflow-y hidden
>>    11|
>>
>> Cannot read property 'nodes' of undefined
>>     at ".text" (src/client/app/style/detailsColumn.styl:7)

The error occurs in any file that gets imported if it contains any BIFs.
Does anyone have any idea what could be the source of this error?

I am using Node.js version 0.10.22 and the latest version of this code base.

http://learnboost.github.io/stylus/docs/extend.html

is there an way to parse in stylus options
such as --include-css so it actually merge the css files?

This old bug was fixed in the latest version of Stylus (0.41.0).
But I still get the bug in grunt-contrib-stylus.

Feature request. My usecase is following: I'm using if-ie.styil mixin from here: https://github.com/kizu/if-ie.styl

It working the following way. You write code like this:

padding: 10px;
margin-left: 20px if not ie;
margin-left: 10px if ie; 

Then compiling, stylus checks if ie variable is set to true, or not. If it is set, then it creates css optimized for ie, else it creates css for other browsers.

So to use it most easily I'd like to be able to define ie variable from config. This way I can write one .styl file for both ie and not-ie version and just compile it twice with different settings.

Also it is usefull to change set of vendor prefixes in nib vendor mixin.

When CSS media queries are used in any '.styl' file and the default mode is compress:true then generated compressed file is wrong.
The @media option is not parsed correctly.

Please refer images in specified number order -

style.styl:

@font-face {
  src: url("some-font.eot?#iefix&v=1");
}

Suppose some-font.eot is found at given path

$ stylus --resolve-url < style.styl

style.css:

@font-face {
  src: url("some-font.eot");
}

I would expect stylus to preserve ?#iefix&v=1 in resulting url.

Hi, I can't find in the guide how to add a watch task for a single styl file and make it compile when an imported styl file has changed.

For example:

    watch: {
        stylesheets: {
            files: 'source/main.styl',
            tasks: [ 'stylesheets' ]
        },
}

If main.styl has an @import "dependency1" and I change dependency1.styl the main.styl won't be compiled like the regular stylus command-line watcher would do which would watch every changes in imported files..

Can anyone advise on this? Thanks in advance!

The line

      srcFiles = grunt.file.expandFiles(file.src);

throws an error now:

Warning: Object # has no method 'expandFiles' Used --force, continuing.

For some reason I can't get this plugin to work at all..

I keep getting this error: Warning: Object #<Object> has no method 'indexOf'

stylus: {
  compile: {
    files: {
      'dist/css/style.css': 'src/assets/css/style.styl'
    }
  }
}

Any ideas?

I need someone to help update this plugin to work with grunt 0.4.0rc5.

I had to revert the whole file src-dest mappings implicit iteration abstraction per gruntjs/grunt#606, and once again, multi tasks have to iterate over this.files manually. In addition, there's a new this.filesSrc array that contains a reduced, uniqued set of all matched src files in case the task is read-only and only cares about source files.

See:

• this comment for a description of the changes made.
• grunt-contrib-jshint for an example using the this.filesSrc array.
• grunt-contrib-concat for an example using the this.files array.

Notes:

• A user may specify a new option nonull in addition to src to tell grunt to keep patterns or filepaths that don't actually match files. Because of this, the task shouldn't explode if a nonexistent src filepath is encountered. I handle this in the grunt-contrib-concat by warning if not grunt.file.exists but not failing the task.

Guidelines for updating / publishing this plugin:

• Change this project's version number to one ending in "rc5" so that it's clearer that it works with grunt 0.4.0rc5. If the existing version number doesn't end in an "a" or "rc" increment the patch version. Eg, jshint went from 0.1.0 -> 0.1.1rc5
• Ensure grunt 0.4.0rc5-compatible plugins are specified in package.json devDependencies like this (grunt-contrib-internal can be "*")
• Update the CHANGELOG like this
• Regenerate the README.md file via grunt.
• Delete node_modules, run npm cache clean and re-run npm install to test.
• Publish to npm using --tag=master (not latest)

sorry, i'm a bit of a noob to this.

I am trying to use nib with grunt-contrib-stylus. I have used a cut down example of your compile config:

stylus: {
  dist: {
    options: {
      compress: true,
      paths: [ 'ui/styles' ]
    },
    files: {
      'ui/dist/styles.css': 'ui/styles/index.styl'
    }
  }

And in the index.styl i have imported nib

@import 'nib'

But when I run grunt I get the following output and errors:

>> ReferenceError: gruntpath is not defined

Running "lint:files" (lint) task
Lint free.

Running "stylus:dist" (stylus) task
>> Error: ui/styles/index.styl:1
>>  > 1| @import 'nib'
>>    2| 
>>    3| @import 'variables'
>>    4| 
>> 
>> failed to locate @import file nib.styl

Thanks for your help

Does stylus support sourcemaps at all? Does that even make sense here?

How can I mix css and stylus files without an extra concat task?
I'd like to do something like that:

 stylus: {
      compile: {
        options: {
          compress: true
        },
        files: {
          'dist/main.css': ["patht/to/styles/*.styl", "path/to/css/*.css"]
        }
      }
    }

Is there a way to not have the generated output be on one line? Is there a stylus or grunt option to be used during development work? The css is all on main.css:1.

compile: {
files: {
'<%= yeoman.app %>/css/main.css': '<%= yeoman.app %>/styl/*/.styl'
}
}

i cannot get this to install on Ubuntu. (solved)

Note the error claims version 0.32.0 of stylus is installed, but really the version of stylus is the version it claims it requires (0.29.0) according to the version of the stylus package (shown below). My group is using this in production and they seem to have no problems installing on Mac or Windows. I am the only one using Linux to my knowledge. Let me know if more information is required. I appreciate any suggestions or advice. I hope we can get this installed. Thanks!

I am running the following commands:

sudo npm -g uninstall stylus
sudo npm -g install stylus@'~0.29.0'
sudo npm install

sudo npm -g uninstall grunt
sudo npm -g install grunt
sudo npm install

I get the following:

npm WARN unmet dependency /home/zxcv/work/src/drc-ots/drcETesting/node_modules/grunt-contrib-stylus requires stylus@'~0.29.0' but will load
npm WARN unmet dependency /home/zxcv/work/src/drc-ots/drcETesting/node_modules/stylus,
npm WARN unmet dependency which is version 0.32.0

system info:

grep \"version\" /usr/local/lib/node_modules/stylus/package.json

shows...

  "version": "0.29.0",

and

cat /proc/version

shows...

Linux version 3.5.0-17-generic (buildd@allspice) (gcc version 4.7.2 (Ubuntu/Linaro 4.7.2-2ubuntu1) ) #28-Ubuntu SMP Tue Oct 9 19:31:23 UTC 2012

and

uname -a

shows...

3.5.0-17-generic #28-Ubuntu SMP Tue Oct 9 19:31:23 UTC 2012 x86_64 x86_64 x86_64 GNU/Linux

The current version is 0.32.0; this pegs the version to 0.30

Caching of imports landed in stylus#0.440 and does not seem to be working in grunt-contrib-stylus. Any way to have caching enabled here?

Looks like the stylus object is re-created at each compilation.

Apologies if this is a support request instead of a bug report, but I can't seem to get this working and couldn't find any additional information from searching around. I have this config block in Grunt.js:

stylus: {
  production: {
    files: { 'public/css/mox.css': CSS_INPUTS },
    options: { compress: true }
  },
  debug: {
    files: { 'public/css/mox.debug.css': CSS_INPUTS },
    options: { compress: false }
  },
  options: {
    paths: [ 'views/css' ],
    url: 'embedurl',
    'import': [ 'nib' ]
  }
},

I've tried various incantations of embedurl('path/to/image.png') in my .styl file and can't seem to get it to turn into a data uri. It just prints out the literal string "embedurl('path/to/image.png')" in the output CSS. I'm also not sure of how to handle paths here; is the path relative to the location of my .styl file, the working directory of Grunt, or somewhere else?

I'me defining global variables through define:

define: {
  test: '1px',
  $color: 'red'
}

And from this input.styl

.test {
    font-size: test;
    color: $color;
    }

I get wrong, quoted properties:

.test {
  font-size: '1px';
  color: 'red';
}

Here's an expected output:

.test {
  font-size: 1px;
  color: red;
}

Same result with lighter Stylus syntax without braces and semicolons.

Just a suggestion, so that @import 'nib' works out of the box. Otherwise you have to specify a path to the grunt-contrib-stylus node_modules dir in your grunt file, which is not very intuitive.

I would like the option to compile all .styl files into .css files at the same location as the .styl file, just like stylus --watch /my/styles does.

Something like this:

stylus: {
  compile: {
    files: {
      '*.css' : '*.styl'
    }
  }
}

currently the above creates a file named *.css

I use

border-radius 4px

in my .styl but it compiles out to

border-radius: 4px;

which clearly isn't using nib. How can I troubleshoot/resolve this?

stylus:
  compile:
    options:
      compress: false
    files:
      "template/css/common.css": ["template/styl/common.styl"]

# grunt stylus:compile

• grunt-cli v0.1.11
• grunt v0.4.2
• grunt-stylus-contrib 1.3.8

Currently I cannot find a way to compile an entire directory of files only individual ones like so:

stylus:
    compile:
        files:
            '<%= yeoman.temp %>/styles/main.css': '<%= yeoman.app %>/styles/main.styl'

for other grunt projects I use (apologies, still learning grunt) it is possible to achieve this through the cwd/src/dest syntax like so:

autoprefixer:
    dist:
        files: [
            expand: true
            cwd: '<%= yeoman.temp %>/styles/'
            src: '**/*.css'
            dest: '<%= yeoman.temp %>/styles/'
        ]

Is there an easy way to compile a directory (and nested directories) full of .styl files into individual .css files?

I think there is some sort of problem interacting with grunt-newer and grunt-express because if I npm uninstall both, then stylus installs fine.
I'm on osx 10.6.8

Macintosh:testproject jacknewt$ npm install grunt-contrib-stylus --save-dev
npm WARN package.json [email protected] No description
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No README data
npm http GET https://registry.npmjs.org/grunt-contrib-stylus
npm http 304 https://registry.npmjs.org/grunt-contrib-stylus
npm http GET https://registry.npmjs.org/stylus
npm http GET https://registry.npmjs.org/nib
npm http 304 https://registry.npmjs.org/nib
npm http 304 https://registry.npmjs.org/stylus
npm http GET https://registry.npmjs.org/cssom
npm http GET https://registry.npmjs.org/mkdirp
npm http GET https://registry.npmjs.org/sax
npm http GET https://registry.npmjs.org/debug
npm http 304 https://registry.npmjs.org/cssom
npm http 304 https://registry.npmjs.org/mkdirp
npm http 304 https://registry.npmjs.org/sax
npm http 304 https://registry.npmjs.org/debug
npm ERR! peerinvalid The package grunt-contrib-stylus does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants grunt-contrib-stylus@~0.8.0

npm ERR! System Darwin 10.8.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "grunt-contrib-stylus" "--save-dev"
npm ERR! cwd /Users/jacknewt/Dropbox/MyWebsites/testproject
npm ERR! node -v v0.10.18
npm ERR! npm -v 1.3.8
npm ERR! code EPEERINVALID
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /Users/jacknewt/Dropbox/MyWebsites/testproject/npm-debug.log
npm ERR! not ok code 0

It looks that --resolve-url is newly introduced less than a month ago,
I asked and tested that a while ago: https://github.com/LearnBoost/stylus/issues/1092
Since I didn't find docs or commits on that, I want to ask if it is supported yet?

Is there a way to tell Grunt to compile all the Stylus files present in some folder, without specifying each file name and without concatenating them into a single file?

I have this need, because I want to keep the various Stylus files separate during development, compressing and concatenating them only later on when I deploy, using "usemin" (https://github.com/yeoman/grunt-usemin).

Unfortunately from the readme on "grunt-contrib-stylus" I couldn't figure out how to do it.

Imagine you have a folder named css/stylus containing the files a.styl, b.styl, and c.styl. If you want Grunt to compile all these files, keep them separate and put them in the css/ folder as a.css, b.css, and c.css, how can you do it without specifying each file name?

If you type

stylus: {
  compile: {
    options: {
      paths: ['path/to/import', 'another/to/import'],
    },
    files: {
      'css/main.css': 'css/stylus/*.styl'
    }
  }
}

Grunt would concatenate them all into one file (main.css).

Instead

stylus: {
  compile: {
    options: {
      paths: ['path/to/import', 'another/to/import'],
    },
    files: {
      'css/a.css': 'css/stylus/a.styl',
      'css/b.css': 'css/stylus/b.styl',
      'css/c.css': 'css/stylus/c.styl',
    }
  }
}

would need require you to individually specify each filename (which is not convenient in the first place, and even more when you need to update your gruntfile each time you create a new Stylus file).

Any ideas? Thanks!!

HI
Very useful plugin
Thank you
Please add banner to compile options for add comment at beginning of compiled files.

compile: {
  options:{
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
    compress: true
  },
  files: {
    'test.css': 'test.styl'
  }
}

I think it can very useful in compress mode.

documentation states paths option accepts String or Array. however, entering path as a String…

stylus:
    css:
        options:
            paths:'src/styl/inc' #<====PATH AS STRING
        src:'src/styl/app.styl'
        dest:'src/css/tmp_app.css'

produces an error…

>> Object src/styl/inc has no method 'push'
Warning: Stylus failed to compile. Use --force to continue.

Aborted due to warnings.

however entering path as an Array…

stylus:
    css:
        options:
            paths:['src/styl/inc'] #<====PATH AS ARRAY
        src:'src/styl/app.styl'
        dest:'src/css/tmp_app.css'

works fine…

Running "stylus:css" (stylus) task
File src/css/tmp_app.css created.

Done, without errors.

stylus:
    css:
        options:
            define:
                COLOR_1:#1B2023
                COLOR_2:#272E31
                COLOR_3:#9EA4A8
        src:'src/styl/app.styl'
        dest:'src/css/app.css'

unable to define hex colors because they're not in quotes

Jade supports methods in the options: data section and they are very useful to update definitions at a watch event (for example). Maybe same would be useful with the stylus plugin too?

https://github.com/gruntjs/grunt-contrib-jade#data

Let me first say, I love stylus, you can mix and match whatever code style you want. That's fine, if you work alone. When working with multiple persons on css for large projects, this means "all bets are off" (regarding code style). Currently I'm working on a project with jade and coffeescript, both "pythonic" languages, as stylus states on its github page. So, Sass was the obvious choice at first (that, and webstorm didn't support the stylus syntax yet a while back).

Wouldn't it be nice to force a syntax, much like SASS / SCSS? I'm a nut about code cleanliness, so when seeing this (utterly valid .styl)

.some-class{
background-color: red
color blue;
}
.someOtherClass
  background-color green
  color: grey

Argh! Sad / angry face a-plenty.

What I was thinking of are some parameters in the task config which could determine what code style should be used, pythonic, or bracket bonanza..

Something along the lines of

syntax: "indentation"

or

syntax: "css" / "brackets"

Defaulting to both allowed of course.

Or something along those lines...

Maybe to complete this:

semiColon: "yes" / "no"
colon: "yes" / "no"

Defaulting to.. drum roll! Both allowed, in both cases.

Maybe even go further, and force camelCasing or hyphen-based definitions...

Or maybe you're thinking, shut up and build your own linter... Well, I guess that would be valid. I'm just wondering if there are more people like me on this subject.. That, and if the author would find it valid, and an addition to the task to make it configurable. If so, I'd love to create a pull request for this (although my knowledge on the subject is rather limited at this tine).

Any feedback would be greatly appreciated.

While using grunt-contrib-stylus to automate the build process, it happens that when a variable or mixins are not found, the value is outputted directly. I'll expect stylus to fail.

I am trying to create a grunt template that can be used in different projects and I would like to define a stylus definition for files that are optional to exist or without content. It would be cool if stylus would continue executing if it has nothing to do. Right now it stops with following error:

>> Destination not written because compiled files were empty.

To me it is okay if this there needs to be a flag like "ignoreEmpty".

Warning: Object # has no method 'expandFiles' Use --force to continue.

I have created an index.json file. This sits in the same directory as index.swig. When trying to load a property defined in index.json in index.swig, nothing happens. I have created a simple property called heading in my index.json file and am trying to load it by using:

{{ heading }}

in my swig file. Below is my swig config in Gruntfile.js and the index.json file i am loading.

swig config:

swig: {
            development: {
                init: {
                    root: "struct/swig/",
                    allowErrors: true,
                    autoescape: true
                },
                dest: "www/",
                cwd: "struct/swig/",
                src: ['**/*.swig'],
                generateSitemap: false,
                generateRobotstxt: true,   
                siteUrl: 'http://mydomain.net/',
                production: false,
                fb_appid: '1349v',
                ga_account_id: 'UA-xxxxxxxx-1',
                robots_directive: 'Disallow /',
                sitemap_priorities: {
                    '_DEFAULT_': '0.5',
                    'index': '0.8',
                    'subpage': '0.7'
                }
            }
        }

index.json

{
    "heading": "The Home Page"
}

The page renders as expected. The only thing it is missing is the JSON variable. I am not sure if I am missing a step or if there is a bug. I am fairly new to grunt and swig. Thanks for any help/direction/assistance/slap-upside-the-head that can be given.

Saw this https://github.com/LearnBoost/stylus/issues/888 but don't know how to make it works with grunt-contrib-stylus...

Any advice ?

Thanks! ;-)

I just updated grunt-contrib-stylus to v0.10.0 and stylesheets that compiled before with 0.9.0 just don't now.

Here is the code involved:

button[disabled]
html input[disabled]
    cursor: default

If I change this code as little as

button[disabled],
html input[disabled]
    cursor: default

it compiles fine.

Any insights on this?

Thanks!

So we can have block support.

Can this support wildcards for compilation?

as in:

{
stylus: {
    options: {
        import: ['src/*-mixin']
    }
}

For some weird reason grunt-contrib-stylus seems to need "sub-tasks" to work properly.

Let me write down a code example, to show what I mean.

stylus: {
  options : {
    paths: ['<%= yeoman.dev %>/styles/sections'],
    import: ['constants.styl'],
    linenos: true
  },
  files: {
    '<%= yeoman.dev %>/styles/main.css': '<%= yeoman.dev %>/styles/sections/*.styl'
  }
}

Does not work. But this instead works perfectly:

stylus: {
  options : {
    paths: ['<%= yeoman.dev %>/styles/sections'],
    import: ['constants.styl'],
    linenos: true
  },
  compile: {
    files: {
      '<%= yeoman.dev %>/styles/main.css': '<%= yeoman.dev %>/styles/sections/*.styl'
    }
  }
}

Can you please take a look at it and fix it? Thanks!!

Hi,

I recently updated to the latest grunt-contrib-stylus (0.12), and now I get two weird errors:

1. a failed to locate @import file,
2. another error that I can't quite understand (Error: app/styles/sections/constants.styl:2).

Here's what my Grunt output looks like:

Running "stylus:compile" (stylus) task
    >> Error: app/styles/sections/constants.styl:2
    >>    1| $black = #222;
    >>  > 2| $black-light = #333;
    >> 
    >> failed to locate @import file constants.styl

My constants.styl file though hasn't moved, and it's in the directory defined in paths.
Here's a copy of my Grunt configuration:

    stylus: {
      compile: {
        options: {
          paths: ['<%= yeoman.app %>/styles/sections'],
          import: ['constants.styl'],
          linenos: true
        },
        files: {
          '.tmp/styles/main.css': '<%= yeoman.app %>/styles/sections/*.styl'
        }
      }
    },

Any idea about what might be causing this bug and how to fix it? Thanks :)

Hello

I am having the same issue as #2

Running "stylus:compile" (stylus) task
Error: src/assets/styles/reset.styl:1
1| @import 'nib'
failed to locate @import file nib.styl

I am using version 0.13.0 and my gruntfile.js code for stylus is

stylus: {compile: {files: {css_files_bin: css_files_src} } },

    watch: {
        stylus:{
          files: 'src/assets/styles/*.styl',
          tasks: 'stylus'
        },
        livereload: {
            options: { livereload: true },
            files: [bin_styles + '*.css', bin_scripts + '*.js', 'static/*.html', '*.php', 'templates/*.php', bin_images + '**/*.*']
        }
    },

Am I missing something or didn't configure it properly?

I need to compile some styles in runtime in node app.
Could I call stylus compilation in node application at runtime?

stylus:
      options:
        paths: [
          'src/public/css/import'
        ]
      compile:
        files: [
          expend: true
          cwd: 'src'
          src: 'public/css/**/*.styl'
          dest: 'dest'  #no support
          ext: '.css'
        ]

Can this support?