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 */
Strict mode:
/** @define MyComponent; use strict */
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 = ;var conformance = ; files;
Development
Install the dependencies.
npm install
Run the tests.
npm test
Watch and automatically re-run the tests.
npm run watch