coffeescriptstylusdocpadautoprefixer

How to set up autoprefixer.browsers value using docpad.coffee config?


(What a mess to find all the below setup infos already :-/ )

I could get autoprefixer to run with docpad, but I (guess I) did not succeed in setting the browsers value...

my environment:

What I tried so far (docpad install with plugins: jade, less, livereload, marked):

simple install worked (default browsers setup):

  1. docpad install autoprefix

I got some style.css.less file with some imports and especially some background: radial-gradient(...) ; background: linear-gradient(...) rules.

  1. I renamed my style.css.less to style.css.autoprefix.css.less (style.css.autoprefix.less did not work)

Till here it worked only with warning(s) about that the less->css or css->autoprefix conversions did not do anything which should be ok.

autoprefixer added some -webkit... versions of my ...gradient... rules above.

not possible to set browsers without docpad stylus plugin?

... it seemed to me ... so I continued like this:

  1. docpad install stylus
  2. added the autoprefixer stylus setup to my docpad.coffee setup file:

    docpadConfig = {
    
      #...
    
      plugins:
        stylus:
          stylusLibraries:
            'autoprefixer-stylus': true
          options:
            use: [
              #() -> require('autoprefixer-stylus')('ie 6')
              () -> require('autoprefixer-stylus')('ff > 3')
              #() -> require('autoprefixer-stylus')('last 2 versions')
            ]
    }
    
    # Export our DocPad Configuration
    module.exports = docpadConfig
    

The effect is, that now my style.css is obviously autoprefixed again, but switching between the options above does not have an effect.

How to make browsers settings work from here?

All the setup info to here I collected from different sources so I likely missed something. Maybe it is already possible to configure the browsers settings without the stylus plugin?

Here the sources that helped me more or less to get to this point:

My main test case

Adding the additional -moz-radial-gradient.../-moz-linear-gradient... rules in my css manually shows me the proper gradients. Removing them doesn't show any gradient (not even from the standard syntax and independent of using the autoprefixer ... this may be an unrelated/left problem, because I would expect the much more complex style.css to change on the above browsers options changes at least gradually.)


Solution

  • It works - the problem layed somewhere else!

    Thus the question already contains the answer how to set it up ...

    The following gradient-related issue made me check for my gradient-syntax:

    https://github.com/artpolikarpov/fotorama/issues/91

    And following the specs: http://www.w3schools.com/css/css3_gradients.asp

    more thoroughly and since changing

    background: linear-gradient( top,         red,  yellow);
    background: radial-gradient( top right,   red,  yellow);
    

    to

    background: linear-gradient( to bottom left,                        red,  yellow )
    background: radial-gradient( ellipse farthest-corner at top right,  red,  yellow )
    

    it works like a charm :-)