rework-suit-conformance

rework-suit-conformance

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

Installation

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.

Use

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');
  rework(css).use(conformance);
});

Development

Install the dependencies.

npm install

Run the tests.

npm test

Watch and automatically re-run the tests.

npm run watch