https://github.com/lasalefamine/stylelint-design-tokens-plugin

Stylelint plugin for checking Design Tokens use inside your CSS.
https://github.com/lasalefamine/stylelint-design-tokens-plugin

design design-system design-tokens hacktoberfest

Last synced: 2 months ago
JSON representation

Stylelint plugin for checking Design Tokens use inside your CSS.

• Host: GitHub
• URL: https://github.com/lasalefamine/stylelint-design-tokens-plugin
• Owner: LasaleFamine
• License: mit
• Created: 2020-02-14T14:26:59.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-05T07:38:07.000Z (over 1 year ago)
• Last Synced: 2024-10-14T13:04:30.543Z (4 months ago)
• Topics: design, design-system, design-tokens, hacktoberfest
• Language: JavaScript
• Homepage:
• Size: 503 KB
• Stars: 11
• Watchers: 4
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# stylelint-design-tokens-plugin

[![Build Status](https://travis-ci.com/LasaleFamine/stylelint-design-tokens-plugin.svg?branch=master)](https://travis-ci.com/LasaleFamine/stylelint-design-tokens-plugin)

> Stylelint plugin for checking Design Tokens use inside your CSS

## Install

```

$ yarn add --dev stylelint-design-tokens-plugin

```

## Usage

Add the plugin within the `.stylelintrc` and activate the rule:

```json

{

	"plugins": ["stylelint-design-tokens-plugin"],

	"rules": {

		"designtokens/check": [true, "./path-to-your-design-tokens.json"]

	}

}

```

## How it works

When launched Stylelint, the plugin:

- will try to load your JSON Tokens from the path you defined on the rule

- will check for `env()` defined variables (eg. `env(--space-8)`)

- will try to map the variable to the Tokens keys

- alert with an error if the no keys are mapped

### The Tokens JSON

Example of a Token JSON file:

```json

{

	"space-8": "8px",

	"space-16": "16px",

	...

}

```

> NOTE: be sure that your Token JSON file is a flat JSON so the plugin can recover the keys for the mapping.

## License

MIT © [Alessio Occhipinti](https://godev.space)