This repository has been archived by the owner. It is now read-only.
Rework plugin for SUIT CSS to check component style isolation (DEPRECATED)
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

rework-suit-conformance (DEPRECATED)

Use postcss-bem-linter instead

Build Status

A Rework plugin to check the conformance of a component's CSS to the SUIT CSS methodology.


npm install rework-suit-conformance

Conformance tests

Default mode:

  • Only allow selectors that begin with a class matching the defined ComponentName.
  • Only allow custom-property names that begin with the defined ComponentName.
  • The :root selector can only contain custom-properties.
  • The :root cannot be combined with other selectors.

Strict mode:

  • All the tests in "default mode".
  • Disallow selectors that contain any classes that do not match the SUIT CSS conventions.
  • Disallow selectors that contain classes of other components.


Defining a component

The plugin will only run against files that explicitly define themselves as a named component, using a /** @define ComponentName */ or /** @define ComponentName; use strict */ comment on the first line of the file.

/** @define MyComponent */

:root {
  --MyComponent-property: value;

.MyComponent {}

.MyComponent .other {}

Strict mode:

/** @define MyComponent; use strict */

:root {
  --MyComponent-property: value;

.MyComponent {}

.MyComponent-other {}

Testing CSS files

Pass your individual CSS files through the plugin. It will throw errors for conformance failures, which you can log when caught by your build tools.

var rework = require('rework');
var conformance = require('rework-suit-conformance');

files.forEach(function (file) {
  var css = fs.readFileSync(file, 'utf-8');


Install the dependencies.

npm install

Run the tests.

npm test

Watch and automatically re-run the tests.

npm run watch