New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Recursive mixins #71

Closed
mendrik opened this Issue May 29, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@mendrik

mendrik commented May 29, 2017

Hi I'm fairly new to postcss so the issue might be between keyboard and chair, but I was trying to get a recursive rule generation working like so:

@define-mixin dept $i {
    @if ($i > 0) {
        > li {
           @mixin dept resolve($i - 1);
        }
    }
}

ul {
    @mixin dept 5;
}

But this results in

Module build failed: RangeError: Maximum call stack size exceeded
    at RegExp.[Symbol.replace] (native)
    at RegExp.[Symbol.replace] (native)
    at String.replace (native)
    at simpleSyntax ([...]node_modules\postcss-simple-vars\index.js:34:16)
    at bothSyntaxes ([...]node_modules\postcss-simple-vars\index.js:46:11)
    at [...]node_modules\postcss-simple-vars\index.js:81:16
    at repeat ([...]node_modules\postcss-simple-vars\index.js:56:20)
    at atruleParams ([...]node_modules\postcss-simple-vars\index.js:80:19)
    at [...]node_modules\postcss-simple-vars\index.js:136:21
    at [...]node_modules\postcss\lib\container.es6:110:26
    at Root.each ([...]node_modules\postcss\lib\container.es6:78:22)
    at Root.walk ([...]node_modules\postcss\lib\container.es6:109:21)
    at [...]node_modules\postcss-simple-vars\index.js:117:13
    at insertMixin ([...]node_modules\postcss-mixins\index.js:62:35)
    at [...]node_modules\postcss-mixins\index.js:140:25
    at [...]node_modules\postcss\lib\container.es6:252:28
@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai May 29, 2017

Member

Thanks for report. I look into it, when I will return to good Internet at 9 June.

Member

ai commented May 29, 2017

Thanks for report. I look into it, when I will return to good Internet at 9 June.

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jun 11, 2017

Member

The problem is in PostCSS limits. In PostCSS plugins are applying one-by one. In your case, first postcss-mixins are applying, then postcss-if and then postcss-resolve. In result, you have infinity loop, because @if will be applied only when postcss-mixins will be finished (so never).

There are two solution right now:

  1. Wait for Plugin Event API postcss/postcss#296 — it will fix this limit. But we didn’t plan to resole it at least in this summer (full refactoring with really small amount of users, who need it).
  2. Write “Function Mixin” on JS, soif will be inside mixin. Here are a docs https://github.com/postcss/postcss-mixins#function-mixin
Member

ai commented Jun 11, 2017

The problem is in PostCSS limits. In PostCSS plugins are applying one-by one. In your case, first postcss-mixins are applying, then postcss-if and then postcss-resolve. In result, you have infinity loop, because @if will be applied only when postcss-mixins will be finished (so never).

There are two solution right now:

  1. Wait for Plugin Event API postcss/postcss#296 — it will fix this limit. But we didn’t plan to resole it at least in this summer (full refactoring with really small amount of users, who need it).
  2. Write “Function Mixin” on JS, soif will be inside mixin. Here are a docs https://github.com/postcss/postcss-mixins#function-mixin

@ai ai closed this Jun 11, 2017

@mendrik

This comment has been minimized.

Show comment
Hide comment
@mendrik

mendrik Jun 14, 2017

alrighty, thanks for looking into this!

mendrik commented Jun 14, 2017

alrighty, thanks for looking into this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment