property name

[TrySound]

Does argument work for property name?

@define-mixin item $prop {
    &-12 {
        $prop: 100%;
    }
    &-11 {
        $prop: 91.66666667%;
    }
    &-10 {
        $prop: 83.33333333%;
    }
    &-9 {
        $prop: 75%;
    }
    &-8 {
        $prop: 66.66666667%;
    }
    &-7 {
        $prop: 58.33333333%;
    }
    &-6 {
        $prop: 50%;
    }
    &-5 {
        $prop: 41.66666667%;
    }
    &-4 {
        $prop: 33.33333333%;
    }
    &-3 {
        $prop: 25%;
    }
    &-2 {
        $prop: 16.66666667%;
    }
    &-1 {
        $prop: 8.33333333%;
    }
}

[ai]

Not now. There is limitation in PostCSS parser. But I plan to fix it in next parser release: postcss/postcss#185

Right now you can create JS mixin:

var postcss = require('postcss');

item: function (mixin, prop) {
    for ( var i = 0; i < 12; i++ ) {
        var rule = postcss.rule({ selector: '&-' + i });
        var rule.append({ prop: prop, value: (i * 8.33333333) + '%' });
        mixin.insertBefore(rule);
    }
};

[TrySound]

Cool, thanks!
But is there any way to get postcss instance inside of item method?
For example with gulp:

var gulp = require('gulp'). postcss = require('gulp-postcss');
gulp.src('src.css')
  .pipe(postcss([
    require('postcss-mixin')({
      mixins: {
        item: function () {
          //
        }
      }
    })
  ]))

[ai]

Nope :(.

Why you need PostCSS instance there?

[TrySound]

To make mixin I need require and gulp-postcss and postcss. I think this is excess.

[ai]

Just add postcss to your package.json.

[TrySound]

Okey. I just like to optimize anything like in browser.

[TrySound]

Maybe you will pass instance in this?

[ai]

require() is a better way :)

[TrySound]

Maybe in the next release? It would be more elegant for gulp.

[ai]

Why one line of var postcss = require('postcss') is not elegant?

Problem is very simple:

1. Mixin function can receive different number of argument. So we need to store all system arguments in first places.
2. But most of mixin users doesn’t need to create nodes with postcss.rule() shortcut. Tere is a many other way to change CSS AST.

So if I add postcss to functions argument I move parameters from mixin as third and next arguments.

[TrySound]

mixin.insertBefore doesn't work

TypeError: Cannot read property 'type' of undefined

    .pipe(gulp_postcss([
        require('postcss-mixins')({
            mixins: {
                item: function (mixin, prop) {
                    var rule, i, val;
                    for(i = 1; i <= 12; i++ ) {
                        rule = postcss.rule({
                            selector: '&-' + i
                        });
                        val = i / 12 * 100;
                        rule.append({
                            prop: prop,
                            value: val.toFixed(val % 1 === 0 ? 0 : 4) + '%'
                        });
                        mixin.insertBefore(rule);
                    }
                }
            }
        }),
        require('postcss-custom-properties')(),
        require('postcss-nested'),
        require('postcss-calc')()
    ]))

[ai]

Please, post a full stack trace. I can’t help by this small message :).

[ai]

BTW, you can clean Gruntfile if you will use mixinsDir options:

.pipe(gulp_postcss([
        require('postcss-mixins')({
            mixinsDir: __dirname + '/postcss/mixins/';
        }),
        require('postcss-custom-properties')(),
        require('postcss-nested'),
        require('postcss-calc')()
    ]))

and put JS-mixin to postcss/mixins/item.js:

var postcss = require('postcss');

module.exports = function (mixin, prop) {
    var rule, i, val;
    for(i = 1; i <= 12; i++ ) {
        rule = postcss.rule({ selector: '&-' + i });
        val = i / 12 * 100;
        rule.append({
            prop: prop,
            value: val.toFixed(val % 1 === 0 ? 0 : 4) + '%'
        });
        mixin.insertBefore(rule);
    }
}

[ai]

I found a problem. Use mixin.parent.insertBefore(mixin, rule); instead of mixin.insertBefore(rule);.

[TrySound]

Thank you very much, Andrey!
For now problem in postcss-import (breaks indentation), and I use gulp-cssimport

My result

P.S. Don't forget to update documentation. Mixins is a good thing.

[ai]

@TrySound what docs update you ask?

[ai]

Like this? 5e9fe94

[TrySound]

No, like this mixin.parent.insertBefore(mixin, rule); :)

[ai]

@TrySound here is all docs https://github.com/postcss/postcss/blob/master/API.md

What are you ask?

[TrySound]

In this repo:

Function Mixin

require('postcss-mixins')({
    mixins: {
        icons: function (mixin, dir) {
            fs.readdirSync('/images/' + dir).forEach(function (file) {
                var icon = file.replace(/\.svg$/, '');
                var rule = postcss.rule('.icon.icon-' + icon);
                rule.append({
                    prop:  'background',
                    value: 'url(' + dir + '/' + file ')'
                });
                mixin.insertBefore(rule);
            });
        }
    }
});

[ai]

Я тебя совсем не понимаю. Объясни с самого начала, что ты хочешь.

[TrySound]

В документации к миксинам в разделе Function Mixin исправить добавление правила.

[ai]

А, я исправил вот так 8cccd2a

[TrySound]

Thanks)

[ai]

Close this issue, because we have same in PostCSS about variables