CSS Linting

Overview #

This CSS Linter is customized around the Prysm capabilities with custom rules to handle special cases.

It is based on Stylelint which uses PostCSS underneath.

Getting Started #

• Navigate to package/Samples/uiresources/library/CSSLint
• Open a CLI and run npm i
• Then run npx stylelint "**/*.css" --config-basedir ".\rules"

There will be many errors produced from the code in the test.css file with the [GFP] prefix for each message so they can be more easily identified if any other built-in rules are triggered.

Requirements #

• The minimum requirement for Stylelint to work is for the configuration to exist. In this case, it is the .stylelintrc.json file. In the JSON Object the "extends": "stylelint-config-standard" tells Stylelint to follow these additional rules.

Anything further on is Prysm-related except a few rules after the "indentation" rule which are there just to showcase the usage of some build-in rules.

• All custom rules are in the CSSLint/rules folder. Their usage is defined in the configuration file. The folder must be present in the same folder as the linter in order for it to work as it is.

Adding Rules Workflow #

This will be a short guide to represent the workflow for creating a custom rule without the additional (required) Stylelint code needed which can be seen in any custom rule.

• Create a JavaScript file in the rules folder.

  • In it define a rule name like so const ruleName = 'GFP/myRuleName';. The GFP/ prefix is not required.

• Open the configuration file (.stylelintrc.json)

  • In the plugins key, add the path to the custom rule’s JavaScript file.
  • In the rules below, enable the rule by adding it like so GFP/myRuleName: true.

A full guide for adding rules can be found on the official Writing plugins page.

Integration Hints #

There are a few ways the linter can be used in the workflow more effectively. This section is only going to mention some cases as this is a project workflow preference.

• Using the Stylelint IDE plugin available for some editors.
• If there is no written plugin support, IDE environment usage can still be achieved with a File Watcher plugin using the npx command.
• Using Node.js - https://stylelint.io/user-guide/usage/node-api
• Using a task runner like grunt or gulp and others.

Useful References #

• Prysm-supported CSS properties and limitations - https://coherent-labs.com/Documentation/cpp-gameface/df/d2c/css_props.html

• Some community-created plugins to further extend the linting - https://github.com/stylelint/awesome-stylelint#plugins.