Skip to content
A stylelint plugin that force it to have app name as prefix
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.eslintignore
.eslintrc
.gitignore
CHANGELOG.md
LICENSE
README.md
index.js
package-lock.json
package.json

README.md

stylelint-force-app-name-prefix

A stylelint plugin that force it to have app name as prefix.

To avoid css naming conflicts between apps, suggest to separate css selectors by prefix. For each app, you can have a unique app name and this plugin will force you to prefix for each selector.

Installation

npm install stylelint-force-app-name-prefix

Be warned: this is only compatible with stylelint v3+.

Usage

Add it to your stylelint config plugins array, then add "plugin/stylelint-force-app-name-prefix" to your rules, specifying your app name as appName in the primary option.

Like so:

// .stylelintrc
{
  "plugins": [
    "stylelint-force-app-name-prefix"
  ],
  "rules": {
    // ...
    "plugin/stylelint-force-app-name-prefix": {
      appName: 'your-app-name'
    },
    // ...
  }
}

Rule

Disallow missing prefix or namespace for selectors, keyframes name and custom font-family name.

    .some-selector { ... }
/** ↑
 * Selector "some-selector" is out of control, please wrap within .your-app-name         plugin/stylelint-force-app-name-prefix */

    @keyframes spin {
/** ↑
 * Keyframes name "spin" is out of control, please prefix with your-app-name       plugin/stylelint-force-app-name-prefix */
        0% { ... }
        100% { ... }
    }

    @font-face {
        font-family: "my-font";
/**                   ↑
 * Custom font-family "my-font" is out of control, please prefix with your-app-name         plugin/stylelint-force-app-name-prefix */
        ...
    }

Option

appName is the name of your app. Should be a string of a-zA-Z or - or _.

You can’t perform that action at this time.