antyakushev / postcss-for

PostCSS plugin that enables for-loop syntax in your CSS

PostCSS For Plugin

PostCSS plugin that enables @for loop syntax in your CSS.

Try it out!

You can try postcss-for directly from codepen. Just choose PostCSS as a preprocessor and pick desired plugin from the list.

Usage

postcss([ require('postcss-for') ])

Note, that unlike the Sass @for, postcss-for in the example below iterates from 1 to 3 inclusively.

@for $i from 1 to 3 {
    .b-$i { width: $(i)px; }
}

.b-1 {
    width: 1px
}
.b-2 {
    width: 2px
}
.b-3 {
    width: 3px
}

This plugin must be set before postcss-nested and postcss-simple-vars. Therefore dollar variable cannot be used as a loop range parameter. If you do want to use predefined range parameters though, consider using postcss-custom-properties with postcss-at-rules-variables, or look into this postcss-for fork.

More features

By keyword is available:

@for $i from 1 to 5 by 2 {
    .b-$i { width: $(i)px; }
}

.b-1 {
    width: 1px
}
.b-3 {
    width: 3px
}
.b-5 {
    width: 5px
}

Locality of variables in nested loops is supported:

@for $x from 1 to 2 { 
    @for $y from 1 to $x { 
        @for $z from $y to $x { 
            .c-$(x)-$(z)-$(y) { padding: $(x)em $(z)em $(y)em; } 
        }
    }
}

.c-1-1-1 {
    padding: 1em 1em 1em
}
.c-2-1-1 {
    padding: 2em 1em 1em
}
.c-2-2-1 {
    padding: 2em 2em 1em
}
.c-2-2-2 {
    padding: 2em 2em 2em
}

See PostCSS docs for examples for your environment.

postcss-for's Issues

By keyword

@for $i from 1 to 10 by 3 { }

to iterates through 1, 4, 7, 10.

support for nested loops?

with the following input:

@for $width from 1 to 8 {
  @for $height from 1 to 8 {
    .GridCell--$(width)x$(height) {
      width: calc($width * 12.5)%;
    }
    .GridCell--$(width)x$(height) {
      padding-top : calc($height / $width * 100)%;
    }
  }
}

I get the following output:

@for $height from 1 to 8 {

  .GridCell--1x$(height) {
    width: calc(1 * 12.5)%;
  }

  .GridCell--1x$(height) {
    padding-top: calc($height / 1 * 100)%;
  }
}

@for $height from 1 to 8 {

  .GridCell--2x$(height) {
    width: calc(2 * 12.5)%;
  }

  .GridCell--2x$(height) {
    padding-top: calc($height / 2 * 100)%;
  }
}

@for $height from 1 to 8 {

  .GridCell--3x$(height) {
    width: calc(3 * 12.5)%;
  }

  .GridCell--3x$(height) {
    padding-top: calc($height / 3 * 100)%;
  }
}
...

I don't think this is the intended behaviour?

Regression in 2.1.0

Hello,

After updating to 2.1.0 I notice postcss-for fails to process this particular piece of custom css:

:root {
  @for $weight from 100 to 900 by 100 {
    --foo-$(weight): $weight;
  }
}

It fails for simpler case as well:

:root {
  @for $weight from 1 to 2 {
    --foo: $weight;
  }
}

I have postcss-for before postcss-custom-properties in my plugin list.

Stack trace

failed with "Cannot read property 'length' of undefined"
Object.split (/source/list.es6:21:30)
Object.space (/source/list.es6:68:21)
manageIterStack (.../node_modules/postcss-for/index.js:28:38)
.../node_modules/postcss-for/index.js:104:21
/source/container.es6:268:28
/source/container.es6:126:26
Rule.each (/source/container.es6:94:22)
Rule.walk (/source/container.es6:125:21)
/source/container.es6:128:32
Root.each (/source/container.es6:94:22)
Root.walk (/source/container.es6:125:21)
Root.walkAtRules (/source/container.es6:266:25)
processOriginalLoops (.../node_modules/postcss-for/index.js:101:13)
.../node_modules/postcss-for/index.js:112:9
LazyResult.run (/source/lazy-result.es6:331:20)
/source/lazy-result.es6:258:32
LazyResult.asyncTick (/source/lazy-result.es6:256:13)
/source/lazy-result.es6:270:22
LazyResult.asyncTick (/source/lazy-result.es6:256:13)
/source/lazy-result.es6:270:22
LazyResult.asyncTick (/source/lazy-result.es6:256:13)
processing.Promise.then._this2.processed (/source/lazy-result.es6:296:18)
LazyResult.async (/source/lazy-result.es6:293:27)
LazyResult.then (/source/lazy-result.es6:201:21)
_combinedTickCallback (internal/process/next_tick.js:67:7)
process._tickCallback (internal/process/next_tick.js:98:9)

Compatibility with PostCSS 8

Thanks for your PostCSS plugin!

As you probably know, PostCSS 8 was released a few days ago. It would be great if you could make this plugin compatible with the latest version. The creators of the project have even released this migration guide.

Compiling Same styles classes together

Feature Request :
If I want to generate x number of classes with same property it compiles as individual classes and property but instead it should compile classes with a single property.

For e.g.

@for $i from 1 to 4{
  .col-sm-$i { 
    padding: 10px;
  }
}

Compiles to

.col-sm-1{padding: 10px;}
.col-sm-2{padding: 10px;}
.col-sm-3{padding: 10px;}
.col-sm-4{padding: 10px;}

But ideally it should generate

.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4{padding: 10px;}

nth-of-type(($i)n) and $(i+1) not work well

@for $i from 1 to 10 {
& > .t-menu-color-icon:nth-of-type($(i)n) .t-menu-title:hover,
& > .t-menu-color-all:nth-of-type($(i)n) .t-menu-title:hover {
cursor: pointer;
color: var(--multiColor-$(i+1));
}
}
like this, it can't work well

cacl() function invalid in for loop

calc() function invalid in for loop,but avaliable outside the for loop

`

   @for $i from 2 to 12 {
         &.is-circle$i {
              transform: rotate(calc(360deg / 12 * ($i - 1)));
              &::before {
                  animation-delay: calc(-1.2s + 1.2s / 12 * ($i - 1));
              }
          }
     }

`

Example doesn't work

If I try the example as-is:

@for $i from 1 to 3 {
  .b-$i { width: $i px; }
}

I end up with this:

The problem is the extra space. Works without the space:

So if I change the example to not have a space:

@for $i from 1 to 3 {
  .b-$i { width: $ipx; }
}

I end up with this:

Any way to get around this?

Compatibility with tailwind

I am struggling to get this plugin working with tailwind (V.3.1.8). I installed it and added it to the postcss.config.js (See below). Is this approach correct or am I missing something? Although there is no error in the console, it appears like the styles are ignored. Inspecting the network tab reveals that the code "@for ... " is loaded as is, so I assume that the preprocessor is not taking care of it as expected.

Thank you in advance!

The postcss.config.js

module.exports = {
	plugins: {
		"postcss-for": {},
		"tailwindcss/nesting": {},
		tailwindcss: {},
		autoprefixer: {},
	},
}

Usage of removeSelf causes deprecation warnings

At the moment the usage of rule.removeSelf() causes a deprecation warning:

"Node#removeSelf is deprecated. Use Node#remove."

Moving to rule.remove() should fix this issue.

Simplier intervals

@for $i from 1 to 3 {}

reproduces only 1 and 2, becaus you copy JS for statement logic? Like for ( i = 1; i < 3; i++ )?

I think we should not copy bad design from JS. @for $i from 1 to 3 should be more human and reproduses 1, 2 and 3.

It will also remove through keyword. And one keyword is always better.

/cc @antyakushev

support negative numbers

Hi!

I'm using your plugin to author my library and I have the need for the following syntax:

@for $i from -1 to 10 {
    .mg-$i {
        margin-bottom: var(--space-$i);
    }
}

I'd expect the output to be:

.mg--1 {
 margin-bottom: var(--space--1);
}
.mg-0 {
  margin-bottom: var(--space-0);
}

etc.

Currently, it just errors and says I must provide a number, as negative numbers aren't supported. Any reason not to?

Thanks!

Why variable to cannot be used as a range parameter?

ref #L13
There's no logic for that. Why is this limit?

Not calculating i+1

Why doesn't this work?

@for $i from 1 to 12 {
  .col-$(i) { --span: $i; }
  .col-start-$(i) { grid-column-start: $i; }
  .col-end-$(i+1) { grid-column-end: $(i+1); }
}

All of the .col-start-* output correctly, but the .col-end-* do not.
All instances render as .col-end-$(i+1) { grid-column-end: $(i+1); }

Feature Request: Support for...in loop

For example:

Input:

@for size in ['sm', 'md', 'lg'] {
  @for span from 1 to 4 {
    .col-$(size)-$(span) {
      width: calc(($(span) / 4) * 100)%;
    }
  }
}

Output:

.col-sm-1 {
  width: 25%;
}
.col-sm-2 {
  width: 50%;
}
.col-sm-3 {
  width: 75%;
}
.col-sm-4 {
  width: 100%;
}
.col-md-1 {
  width: 25%;
}
.col-md-2 {
  width: 50%;
}
.col-md-3 {
  width: 75%;
}
.col-md-4 {
  width: 100%;
}
.col-lg-1 {
  width: 25%;
}
.col-lg-2 {
  width: 50%;
}
.col-lg-3 {
  width: 75%;
}
.col-lg-4 {
  width: 100%;
}

Support for :root variables?

@define-mixin column-generator {
    @for $i from 1 to calc(var(--columns) - 1) {
         &.with-$(i)col {
           width: (var(--one-column) * 1)px;
        }
    }
}

@for $i from 1 to calc(var(--columns) - 1) doesn't work. Anyone who knows why?

Is there a possibility to use the CSS4 variable spec alongside of simple-vars? Would be nice to stay as close to the CSS4 specs as possible. And this might solve the problem to use them as iterators.

margin align css output

@for $i from 1 to 3 {
  .b-$i { width: $(i)px; }
}

  .b-$i { width: $(i)px; }
.b-$i { width: $(i)px; }
.b-$i { width: $(i)px; }

I don't know why there is the first blank line and 2nd line has a space.

loop-error occurs (Module build failed: Undefined variable $i)

@for $i from 1 to 13 {
.target:nth-child(#{$i}) { animation-delay: $i * 0.1s; }
}
For Loop increment of nth-of-child elements and their delay value..