Ability to process 1 CSS file with multiple components/blocks.

[bjankord]

In our app, we are currently compiling .less files into 1 .css file. We'd like to use postcss-bem-linter and define where a component begins and ends via comments in our .less and have postcss-bem-linter run on this one file.

postcss-bem-linter already has support for defining a component via /** @define MyComponent */
Is it possible to add the ability to comment that a component's CSS has ended, /** @end MyComponent */

We are thinking something like:

my-compiled-file.css

`/** @define foo */`
.foo {
  ...
}

.foo--bar {
  ...
}
/** @end foo */

`/** @define baz */`

.baz {
  ...
}

.baz--bar {
  ...
}
/** @end baz */

[davidtheclark]

Seems like a decent feature request to me.

But it does add some complexity.

And, you could still lint your stylesheets as they currently are, if you
just add a linting step before the concatenation. Right? (That's how I'm
doing it.)

On Wed, Aug 5, 2015 at 9:43 AM, Brett Jankord [email protected]
wrote:

In our app, we are currently compiling .less files into 1 .css file. We'd
like to use postcss-bem-linter and define where a component begins and ends
via comments in our .less and have postcss-bem-linter run on this one file.

postcss-bem-linter already has support for defining a component via /**
@define MyComponent /
Is it possible to add the ability to comment that a component's CSS has
ended, /* @EnD MyComponent */

We are thinking something like:

my-compiled-file.css

/** @define foo */
.foo {
...
}

.foo--bar {
...
}
/** @EnD foo */

/** @define baz */

.baz {
...
}

.baz--bar {
...
}
/** @EnD baz */

—
Reply to this email directly or view it on GitHub
#57.

[bjankord]

I can see how linting before concatenation would work. Our use of LESS might mean we need to compile our .less partials to individual CSS files. Lint those, then blow them away and then compile the LESS into 1 file.

[davidtheclark]

Oh I see ... I missed the Less part.

Once the version of PostCSS with custom parsers comes out maybe this will
be solvable easily. If I get some time, though, I'll look into implementing
something like the /* @end */ feature that would help this work for you.

On Wed, Aug 5, 2015 at 11:24 AM, Brett Jankord [email protected]
wrote:

I can see how linting before concatenation would work. Our use of LESS
might mean we need to compile our .less partials to individual CSS files.
Lint those, then blow them away and then compile the LESS into 1 file.

—
Reply to this email directly or view it on GitHub
#57 (comment)
.

[davidtheclark]

@bjankord See https://github.com/postcss/postcss-bem-linter#multiple-definitions, which applies to the just-released version 0.6.0

[davidtheclark]

And let me know if it doesn't work for you!

[bjankord]

Yep, this works for our needs! Thank's for the quick addition.