Wie man BEM-Stil mit Stillint und Stillint-Selektor-Bem-Muster fusselt?

Question

Ich versuche, BEM-Stil mit stylelint und stylelint-selector-bem-pattern plugin fusseln, aber es funktioniert nicht.

My Config ist der folgende:

• node: 5.11.0
• gulp-stylelint:^2.0.2
• stylelint-Selektor-BEM-Muster:^0.2.3

.stylelintrc

{ 
    "plugins": [ 
     "stylelint-selector-bem-pattern" 
    ], 
    "rules": { 
     "selector-bem-pattern": { 
      preset: "suit" 
     }, 
    }, 
    "extends": "@alienlebarge/stylelint-config", 
} 

und eine CSS-Dateien für Tests

.12ad2-asd--sad { 
    color: rgba(255, 0, 0, .5); 
} 






#yeah { 
    height: 10px; 
} 

erhalte ich die Fehlermeldung aus @alienlebarge/stylelint-config aber nicht von stylelint-selector-bem-pattern plugin

src/assets/foehn/styles/foehn.css 
4:1 ✖ Unexpected empty line max-empty-lines 
5:1 ✖ Unexpected empty line max-empty-lines 
6:1 ✖ Unexpected empty line max-empty-lines 
7:1 ✖ Unexpected empty line max-empty-lines 
8:1 ✖ Unexpected empty line max-empty-lines 
9:1 ✖ Unexpected empty line max-empty-lines 
9:1 ✖ Unexpected id selector selector-no-id 

Answer 1

Aus dem Code hier ist es wahrscheinlich wie das Problem aussieht, ist, dass Sie Ihre Komponente nicht definiert haben am Anfang der CSS-Datei: https://github.com/postcss/postcss-bem-linter#defining-a-component

Answer 2

Das Stylinint Plugin wird nur über definierte Komponenten laufen, was im Beispiel nicht der Fall ist.

Wie am project documentation definiert:

Das Plugin wird nur die CSS-Fussel, wenn es um den Kontext des CSS weiß: es ist ein Dienstprogramm oder ein Komponente. Um den Kontext zu definieren, verwenden Sie die Konfigurationsoptionen, um ihn basierend auf dem Dateinamen (css/components/*.css) zu definieren oder verwenden Sie einen speziellen Kommentar, um den Kontext für das CSS danach zu definieren. Beim Definieren einer Komponente wird der Komponentenname benötigt.

Sie können entweder definieren implizit im stylelintrc.json:

..., 
implicitComponents: 'components/**/*.css', 
... 

Oder, bei der Komponente mit einem Kommentar in MyComponent.css:

/** @define ComponentName */ 

.MyComponent {...}