Can't resolve #{} in webpack postcss plugin

[Arman19941113]

Throw error

My css code

@for $i from 1 through 5 by 2 {
    .width-#{$i} {
        width: #{$i}0em;
    }
}

The postcss.config.js

module.exports = {
    plugins: {
        'postcss-import': {},
        'postcss-preset-env': {
            stage: 0
        },
        'postcss-advanced-variables': {},
    }
}
```js

[maubut]

Did you find a way?

[ej52]

any updates on this? having the same issue

[gael-boyenval]

is this project still alive ?

[jonathantneal]

I remember the exact moment I stepped away from this project (it is a the main dependency of PreCSS), and thanks to Twitter advanced search, I can tell you that it was July 10, 2015, which is roughly the same day it was released. My original intention was to progressively re-implement Sass with PostCSS. After allowing myself to stray from that direction, I tried to "walk away" and find other maintainers.

I have offered to let others take over the direction of this project through contributions. Ultimately, no one did take me up on the offer, and the project continued to gain users because (apparently) people like it and shared it. If there is a suitable competitor with stronger support, I will deprecate this package and redirect users to that project.

I find myself at a constant impasse. I continue to update the project when I see that my work is hurting users, but sometimes I fail to notice those calls in the noise of GitHub notifications — and for that I am genuinely sorry.

As it relates to this issue, would someone be willing to spin up a repo that demonstrates the break? This is described in CONTRIBUTING.md, but if you ask I would be happy to try to guide anyone through that process more individually.

[gael-boyenval]

@jonathantneal : I could try to make a few PRs to solve some issues, if you provide me some guidance and the learning curve is not too steep. Cannot say that I will take over, but give you some help with the maintenance.

What about making a PR with failing tests as a starting point ?

[gael-boyenval]

@Arman19941113 :

If you have a unknown word error (which I presume you do), your problem is more likely related to postcss syntax itself, and the way it parse CSS.

for me, using the postcss-scss syntax solve the problem and allow me to use the through keyword.

Alternatively, it seems that using to instead of through in your for loop, may also solve the issue, without the need for you to use the postcss-scss syntax.

Looking at the code, it seems that no matter the keyword you use here, it will work fine, because the plugins split the params of your loop based on their position, and not the keywords themself.

so :

@for $i from 6 tutatattoto 1 by 2 {
	.for-$(i)-from-6-to-1-by-2 {
		content: "$i";
	}
}

should work as well 😅

[chrisvidal]

facing the same issue, not resolving

[ayou33]

try this if you want to append a unit

.width-#{$i} {
    width: calc(#{$i}0em);
}

or

.width-#{$i} {
    width: $(i)0em;
}