Interpolate variables in comments

[VinSpee]

Hi!

I'm writing a library that generates many classes. I'd like to use mdcss to document it, and i'd like to generate the docs in the CSS. I'm using postcss-each & postcss-for to generate class names and values, and I'd like to also generate values in comments, which they rely on postcss-simple-vars for. Here's what I mean:

input

@each $name, $size in (small, med, large), (.5rem, 1rem, 3rem) {
    /*---
        title: Font Size
        section: Typography
        ---

        ```html
        <span class=".font-$(name)">.font-$(name)</span>

*/
.font-$(name),
.font-$(name) {
    font-size: $(size);
}

}

### output:

/*--- title: Font Size section: Typography

```html
<span class=".font-small">.font-small</span>
```

*/ .font-small, .font-small { font-size: .5rem; }

/*--- title: Font Size section: Typography

```html
<span class=".font-med">.font-med</span>
```

*/ .font-med, .font-med { font-size: 1rem; }

/*--- title: Font Size section: Typography

```html
<span class=".font-large">.font-large</span>
```

*/ .font-large, .font-large { font-size: 3rem; }

It seems like we would just need to process the comment nodes in addition to other rules. Any interest in adding this feature? PR to follow.

Thanks!

[ai]

Released in 2.0

[ai]

Do you use PostCSS soltuion in TED?

[VinSpee]

@ai we do use some now (autoprefixer on all projects) and more in the near future (this library I'm authoring).

[camslice]

Would be great to support the comment syntax below. Currently the plugin only supports comments on their own line.

$green: #80b832;

*.green /* color: <<$(green)>> */
{
    color: $green !important;
}