Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/palantir/stylelint-config-palantir
Palantir's stylelint config
https://github.com/palantir/stylelint-config-palantir
configuration css less linting octo-correct-managed sass stylelint
Last synced: 5 days ago
JSON representation
Palantir's stylelint config
- Host: GitHub
- URL: https://github.com/palantir/stylelint-config-palantir
- Owner: palantir
- License: apache-2.0
- Created: 2016-05-17T20:28:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T20:17:30.000Z (20 days ago)
- Last Synced: 2024-10-29T22:48:31.621Z (20 days ago)
- Topics: configuration, css, less, linting, octo-correct-managed, sass, stylelint
- Language: JavaScript
- Homepage:
- Size: 4.75 MB
- Stars: 24
- Watchers: 252
- Forks: 12
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# stylelint-config-palantir
[](https://circleci.com/gh/palantir/stylelint-config-palantir)
[](https://badge.fury.io/js/stylelint-config-palantir)
[](https://opensource.org/licenses/Apache-2.0)
This repository contains Palantir's standard configuration for [Stylelint](https://github.com/stylelint/stylelint), our preferred stylesheet linter. These rules enforce 4-space indentation, comfortable whitespace, and property ordering that mimics the CSS box model. Properly formatted CSS looks like this (blank lines optional):
```css
.sidebar {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 1;
box-shadow: inset -1px 0 0 #000000;
box-sizing: border-box;
background-color: #ffffff;
width: 250px;
padding: 20px;
}
```
## Usage
1. Install a compatible version of `stylelint` (we express it as a `peerDependency` so you can choose a version that works for you).
```
npm install --save-dev stylelint stylelint-config-palantir
```
2. Configure your stylelint configuration file to extend this package:
```js
{
"extends": "stylelint-config-palantir",
"rules": {
// Add overrides and additional rules here
}
}
```
### Linting Sass
Stylelint works with preprocessor syntaxes such as Sass and Less [out of the box](http://stylelint.io/user-guide/css-processors/) but an additional library and config file are suggested for true linter superpowers.
1. Install a compatible version of `stylelint-scss` which provides a collection of linter rules for Sass syntax.
```
npm install --save-dev stylelint-scss
```
2. Configure your stylelint configuration file to _also_ extend `sass.js` in this package.
This file configures the stylelint-scss rules and updates some existing rules to support Sass syntax.
```js
{
"extends": [
"stylelint-config-palantir",
"stylelint-config-palantir/sass.js",
],
"rules": {
// Add overrides and additional rules here
}
}
```
### Customization
We use a `lowercase-single-dashed-names-only` naming pattern for all rules that support a pattern. The regular expression for this pattern is exported as `namingPattern` in the main `stylelint.config.js` file. You can use it in your own rules like so:
```js
const { namingPattern } = require("stylelint-config-palantir");
```
### FAQ
__How do I order my CSS properties in a declaration block?__
We use alphabetical ordering enforced by [stylelint-order](https://github.com/hudochenkov/stylelint-order/blob/master/rules/properties-alphabetical-order/README.md).