# stylelint-config-pragmatic

> Opinionated stylelint config providing pragmatic code style

Latest version **1.5.0** (published 2020-09-11) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install stylelint-config-pragmatic
pnpm add stylelint-config-pragmatic
yarn add stylelint-config-pragmatic
bun add stylelint-config-pragmatic
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2020-09-11 |
| First published | 2020-09-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 20.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | pvds |
| Maintainers | pvds |
| Keywords | stylelint, stylelint-config, stylelint-plugin, css lint, pragmatic code, code style |

## Links

- npm: https://www.npmjs.com/package/stylelint-config-pragmatic
- Repository: https://github.com/pvds/stylelint-config-pragmatic-order
- Homepage: https://www.npmjs.com/package/stylelint-config-pragmatic
- Issues: https://github.com/pvds/stylelint-config-pragmatic-order/issues
- npm.io page: https://npm.io/package/stylelint-config-pragmatic

## Dependencies (5)

- [stylelint-order](https://npm.io/package/stylelint-order.md) ^4.1.0
- [stylelint-prettier](https://npm.io/package/stylelint-prettier.md) ^1.1.2
- [stylelint-config-prettier](https://npm.io/package/stylelint-config-prettier.md) ^8.0.2
- [stylelint-config-standard](https://npm.io/package/stylelint-config-standard.md) ^20.0.0
- [stylelint-config-pragmatic-order](https://npm.io/package/stylelint-config-pragmatic-order.md) ^1.4.0

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 1.5.0 (latest) — 2020-09-11
- 1.4.0 — 2020-09-10
- 1.3.0 — 2020-09-10
- 1.2.4 — 2020-09-10
- 1.2.3 — 2020-09-10
- 1.2.2 — 2020-09-10
- 1.2.1 — 2020-09-10
- 1.2.0 — 2020-09-10
- 1.1.5 — 2020-09-10
- 1.1.4 — 2020-09-10
- 1.1.3 — 2020-09-09
- 1.1.2 — 2020-09-09
- 1.1.1 — 2020-09-09
- 1.1.0 — 2020-09-09
- 1.0.0 — 2020-09-08
- … 1 more at https://npm.io/package/stylelint-config-pragmatic/versions

## README

# Stylelint Config Pragmatic

[![NPM version][version-shield]][version-url]
[![Maintenance][maintenance-shield]][maintenance-url]
[![Package size][package-size-shield]][package-size-url] \
[![Release Status][release-status-shield]][release-status-url]
[![Dependencies][dependencies-shield]][dependencies-url]
[![Issues open][issues-shield]][issues-url]
[![Code coverage][coverage-shield]][coverage-url]
[![Quality Gate Status][quality-shield]][quality-url]

Pragmatic stylelint config enforcing an understandable and consistent code style.

## Summary

- [Getting Started](#getting-started)
- [Testing](#testing)
- [Vision](#vision)
- [Built With](#built-with)
- [Contributing](#contributing)
- [Versioning](#versioning)
- [Authors](#authors)
- [License](#license)
- [Acknowledgments](#acknowledgments)

## Getting started

### Installation

Install `prettier`, `stylelint` and this config as part of your `devDependencies`.

**NPM**

```sh
npm i prettier stylelint stylelint-config-pragmatic -D
```

**Yarn**

```sh
yarn add prettier stylelint stylelint-config-pragmatic -D
```

### Usage

#### Stylelint config

Add `stylelint-config-pragmatic` to your [Stylelint configuration file](https://stylelint.io/user-guide/configure):

JSON (`.stylelintrc`):

```json
{
  "extends": ["stylelint-config-pragmatic"]
}
```

YAML (`.stylelintrc.yml`)

```yaml
extends:
  - stylelint-config-pragmatic
```

#### Extend with Prettier config

In order to [play nicely with Prettier](https://prettier.io/docs/en/integrating-with-linters.html) we use [stylelint-prettier](https://github.com/prettier/stylelint-prettier) to run Prettier as a Stylelint rule.
We disable all formatting related Stylelint rules with [stylelint-config-prettier](https://github.com/prettier/stylelint-config-prettier).

Add a [prettier configuration file](https://prettier.io/docs/en/configuration.html) with your formatting preferences, for example:

```yaml
# .prettier.yml
singleQuote: true
trailingComma: es5
arrowParens: always
tabWidth: 2
printWidth: 100
endOfLine: auto
```

#### Automation

We recommend configuring your editor to automatically format your code by on save.

You can use Prettier and Stylelint with a pre-commit tool. This can re-format your files that are marked as “staged” via git add before you commit.

_Make sure Prettier and Stylelint are installed and in your devDependencies before you proceed_

```
npx mrm lint-staged
```

This will install [husky](https://github.com/typicode/husky) and [lint-staged](https://github.com/okonet/lint-staged), then add a configuration to the project’s package.json that will automatically format supported files in a pre-commit
hook.

#### Customization

Being opinionated it's best to limit the amount of rules you use yourself.

**The following rule extensions are already part of this module:**

```yaml
extends:
  - stylelint-config-standard
  - stylelint-config-pragmatic-order
  - stylelint-prettier/recommended
```

A number of rules are defined to make Stylelint play nicely with Scss and Prettier.
We recommend you **add rules which do not manipulate the order or code format** to get maximum benefit of this config.

> Use [stylelint-config-pragmatic-order](https://www.npmjs.com/package/stylelint-config-pragmatic-order) if you only want the ordering rules.

Learn more about [Stylelint](https://stylelint.io/).

## Testing

We use [Jest](https://jestjs.io/) for testing, run `npm test` to run all tests.

### System test

By running this stylelint config in `test/system.test.js` on an unformatted `fixture.scss` we test whether it matches our `expected.scss` file.
We are planning to:

- [use Jest snapshots for system tests like Stylelint does](https://github.com/stylelint/stylelint/tree/master/system-tests)
- add more common use cases.

## Vision

Inspired by [pragmatism](https://en.wikipedia.org/wiki/Pragmatism) and [pracmatics](https://en.wikipedia.org/wiki/Pragmatics), the aim of this stylelint config is:

- to format `css`/`scss` to be understandable, scannable and consistent
- to let developers focus on writing code, instead of adhering to a styleguide
- to simplify [stylelint configuration](https://stylelint.io/user-guide/configure)
- to avoid changing [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)

## Built With

- [Webstorm](https://www.jetbrains.com/webstorm/) - for development
- [Github](https://github.com) - for versioning and deployment
- [Jest](https://jestjs.io/) - for testing
- [Contributor Covenant](https://www.contributor-covenant.org/) - for the Code of Conduct
- [Creative Commons](https://creativecommons.org/) - to choose the license

## Contributing

Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our the process for submitting issues and pull requests to us.
This repository has a [code of conduct](CODE_OF_CONDUCT.md), we will remove things that do not respect it.

## Versioning

We use [SemVer](http://semver.org/) for versioning.
For the available versions, see the [tags on this repository](https://github.com/PurpleBooth/a-good-readme-template/tags).

## Authors

See the list of [contributors](https://github.com/pvds/stylelint-config-pragmatic/contributors)
who participated in this project.

## License

This project is licensed under the [ISC License](LICENSE.md).

## Acknowledgements

The name was inspired by [pragmatism](https://en.wikipedia.org/wiki/Pragmatism) and [pracmatics](https://en.wikipedia.org/wiki/Pragmatics).

The following guidelines, methodologies and architectures have been used as inspiration for this config:

- [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/)
- [Idiomatic CSS](https://github.com/necolas/idiomatic-css)
- [CSS guidelines](https://cssguidelin.es/)
- [Code Guide by @mdo](https://codeguide.co/#css)
- [Airbnb CSS / Sass Styleguide](https://github.com/airbnb/css#css)
- [Google HTML/CSS Style guide](https://google.github.io/styleguide/htmlcssguide.html#CSS_Formatting_Rules)
- [CSS-Tricks - CSS Style Guides](https://css-tricks.com/css-style-guides/)

[version-shield]: https://img.shields.io/npm/v/stylelint-config-pragmatic.svg
[version-url]: https://www.npmjs.com/package/stylelint-config-pragmatic
[maintenance-shield]: https://img.shields.io/maintenance/yes/2020.svg?color=blue
[maintenance-url]: https://github.com/pvds/stylelint-config-pragmatic/graphs/commit-activity
[package-size-shield]: https://img.shields.io/bundlephobia/min/stylelint-config-pragmatic.svg?label=size
[package-size-url]: https://bundlephobia.com/result?p=stylelint-config-pragmatic
[release-status-shield]: https://img.shields.io/github/workflow/status/pvds/stylelint-config-pragmatic/release.svg
[release-status-url]: https://github.com/pvds/stylelint-config-pragmatic/actions?query=workflow%3Arelease
[dependencies-shield]: https://img.shields.io/david/pvds/stylelint-config-pragmatic.svg
[dependencies-url]: https://github.com/pvds/stylelint-config-pragmatic
[issues-shield]: https://img.shields.io/github/issues/pvds/stylelint-config-pragmatic.svg
[issues-url]: https://github.com/pvds/stylelint-config-pragmatic/issues
[coverage-shield]: https://img.shields.io/codecov/c/github/pvds/stylelint-config-pragmatic.svg
[coverage-url]: https://codecov.io/gh/pvds/stylelint-config-pragmatic
[quality-shield]: https://img.shields.io/sonar/quality_gate/pvds_stylelint-config-pragmatic.svg?server=https%3A%2F%2Fsonarcloud.io
[quality-url]: https://sonarcloud.io/dashboard?id=pvds_stylelint-config-pragmatic

---
_Source: https://npm.io/package/stylelint-config-pragmatic · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._