[BEM] CSS animations - Invalid component selector about postcss-bem-linter

[davidtheclark]

Huh, I'm surprised this hasn't come up before.

Yeah, a temporary solution to this is to move the keyframes statement outside the defined area. But it would not be difficult to make the linter ignore keyframes. Just a matter of checking whether declaration nodes are a child of a keyframes at-rule.

PRs welcome, or I'll try to get around to it sometime soonish.

[davidtheclark]

I apologize for forgetting about this issue. I will fix it very soon.

[davidtheclark]

@KingScooty:

Also how do i make nested rules acceptable using the BEM preset? (see below)

Use weak mode: https://github.com/postcss/postcss-bem-linter#conformance-tests

The BEM linter preset doesn't seem to like css animation statements

As of 2.3.1 I've verified that @keyframes selectors are ignored by this plugin.

Let me know if something still doesn't work as expected.

[fauna5]

Hi, Am also seeing this problem. Have tried 2.3.1 and 2.6.0 but no joy.

Config:

/* postcss-bem-linter: define expandable-tree */

Selector

@keyframes expandable-tree__circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}

File

spinner.css

Using via webpack

postcss-config.js

var bemLinter = require('postcss-bem-linter')
var autoprefixer = require('autoprefixer')

module.exports = {
	plugins: [
		autoprefixer,
		bemLinter('bem')
	]
}

webpack config

...
		module: {
			loaders: [{
				test: /\.css$/,
				loaders: [
					'style-loader',
					'css-loader',
					'postcss-loader'
				],
			},
...

package.json

...
    "postcss-bem-linter": "^2.6.0",
    "postcss-loader": "^1.3.0",
...
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
...

output:

WARNING in ./~/css-loader!./~/postcss-loader!./src/spinner.css
postcss-bem-linter: /Users/richardc/dev/react-organisation-nav/src/spinner.css:137:3: Invalid component selector "40%"
 @ ./src/spinner.css 4:14-120
 @ ./src/nav.jsx
 @ ./index.jsx
 @ multi (webpack)-dev-server/client?http://localhost:8080 ../index.jsx