Skip to content

Commit

Permalink
Upgrade to Stylelint v16, stylelint-config-standard v36, and `style…
Browse files Browse the repository at this point in the history
…lint-config-standard-scss` v13
  • Loading branch information
adamkudrna committed Apr 27, 2024
1 parent 23cbba7 commit ad1ef80
Show file tree
Hide file tree
Showing 14 changed files with 2,299 additions and 5,243 deletions.
44 changes: 33 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,11 @@
[![Stylelint version](https://img.shields.io/npm/dependency-version/@visionappscz/stylelint-config/peer/stylelint?logo=stylelint)][Stylelint]
[![Build status](https://github.com/visionappscz/stylelint-config/workflows/Build%20and%20test/badge.svg)](https://github.com/visionappscz/stylelint-config/actions)
[![Downloads per month](https://img.shields.io/npm/dm/@visionappscz/stylelint-config.svg?style=flat)](https://npmcharts.com/compare/@visionappscz/stylelint-config)
[![HitCount](http://hits.dwyl.com/@visionappscz/stylelint-config.svg?style=flat)](http://hits.dwyl.com/@visionappscz/stylelint-config)

VisionApps' shareable collection of configs for [Stylelint]:
VisionApps' collection of shareable configs for [Stylelint]:

- extends [stylelint-config-standard],
- adds rules to **encourage low specificity** and **avoid nesting**,
- gives preference to indentation of **4 spaces** instead of 2,
- includes additional configs for **SCSS** and **CSS Modules**.
- extends [stylelint-config-standard] with rules to **encourage low specificity** and **avoid nesting**,
- includes additional configs for checking **order**, **SCSS** and **CSS Modules**.

## Installation

Expand Down Expand Up @@ -132,6 +129,24 @@ To see the rules that this config uses, please read the
ℹ️ There is a popular [stylelint-config-css-modules] config that recognizes all
features of CSS Modules.

## Stylistic Rules

Stylistic rules (like indentation etc.) [were dropped][stylelint-v16-stylistic-rules]
in Stylelint v16. If you need to enforce them, you can use
[`@stylistic/stylelint-config`][stylistic-config]:

```json
{
"extends": [
"@visionappscz/stylelint-config",
"@stylistic/stylelint-config"
]
}
```

Or, if you feel brave enough and don't need any configuration of the stylistic rules,
you can use [Prettier].

## Full Example

Example of all configs combined:
Expand All @@ -142,7 +157,8 @@ Example of all configs combined:
"@visionappscz/stylelint-config",
"@visionappscz/stylelint-config/order",
"@visionappscz/stylelint-config/scss",
"@visionappscz/stylelint-config/cssModules"
"@visionappscz/stylelint-config/cssModules",
"@stylistic/stylelint-config"
]
}
```
Expand All @@ -151,16 +167,19 @@ Example of all configs combined:

<details>
<summary>
I want indentation of 2 spaces. How do I change it?
How do I change the indentation?
</summary>

Just override the `indentation` rule in your Stylelint config:
Just override the `@stylistic/indentation` rule in your Stylelint config:

```json
{
"extends": "@visionappscz/stylelint-config",
"extends": [
"@visionappscz/stylelint-config",
"@stylistic/stylelint-config"
],
"rules": {
"indentation": 2
"@stylistic/indentation": 2
}
}
```
Expand All @@ -171,3 +190,6 @@ Just override the `indentation` rule in your Stylelint config:
[stylelint-config-standard-scss]: https://github.com/stylelint-scss/stylelint-config-standard-scss
[CSS Modules]: https://github.com/css-modules/css-modules
[stylelint-config-css-modules]: https://github.com/pascalduez/stylelint-config-css-modules
[stylelint-v16-stylistic-rules]: https://stylelint.io/migration-guide/to-16/#removed-deprecated-stylistic-rules
[stylistic-config]: https://github.com/stylelint-stylistic/stylelint-config
[Prettier]: https://prettier.io
20 changes: 18 additions & 2 deletions __tests__/css-invalid.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
.element {
color: #000 !important;
/* Based on https://github.com/stylelint/stylelint-config-standard/blob/36.0.0/__tests__/valid.css */

@custom-media --FOO;

:root {
--FOO: 1px;
}

@keyframes FOO {
/* ... */
}

.FOO {
/* ... */
}

#FOO {
/* ... */
}
89 changes: 33 additions & 56 deletions __tests__/css-valid.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
@import url("x.css");
@import url("y.css");
/*
Based on https://github.com/stylelint/stylelint-config-standard/blob/36.0.0/__tests__/valid.css
with modifications:
- order properties according to `order.js`,
- flag ID selectors.
*/

@import url('foo.css');
@import url('bar.css');

@custom-media --foo (min-width: 30em);

/**
* Multi-line comment
Expand All @@ -9,71 +19,38 @@
--brand-red: hsl(5deg 10% 40%);
}

.selector-1,
.selector-2,
.selector-3[type="text"] {
display: block;
box-sizing: border-box;
color: var(--brand-red);
background: linear-gradient(#fff, rgb(0 0 0 / 80%));
}
/* Single-line comment */

.selector-a,
.selector-b:not(:first-child) {
top: calc(100% - 2rem + 0px);
padding: 10px;
.class-foo:not(a, div) {
top: calc(100% - 2rem);
margin: 0;
}

.selector-x { width: 10%; }
.selector-y { width: 20%; }
.selector-z { width: 30%; }

/* Single-line comment */

/* Flush single line comment */
@media (width >= 60em) {
.selector {
.class-foo {
/* Flush to parent comment */
transform: translate(1, 1) scale(3);
}
}
--offset: 0px;

@media (orientation: portrait), projection and (color) {
.selector-i + .selector-ii {
font-family: Helvetica, "Arial Black", sans-serif;
background: hsl(20deg 25% 33%);
}
}

/* Flush single line comment */
@media
screen and (min-resolution: 192dpi),
screen and (min-resolution: 2dppx) {
.selector {
height: 10rem;
margin: 10px;
margin-bottom: 5px;
background-image:
repeating-linear-gradient(
-45deg,
transparent,
#fff 25px,
rgb(255 255 255 / 100%) 50px
);
box-shadow:
0 1px 1px #000,
0 1px 0 #fff,
2px 2px 1px 1px #ccc inset;
animation: 3s none fade-in;
left: calc(var(--offset) + 50%);
font-family: Helvetica, 'Arial Black', sans-serif;
color: #fff;
}

/* Flush nested single line comment */
.selector::after {
content: "→";
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
a::after {
content: '→';
display: block;
background-image: url('x.svg');
}
}

@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}

to {
opacity: 1;
}
}
51 changes: 51 additions & 0 deletions __tests__/cssModules.test.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
// Based on https://github.com/stylelint/stylelint-config-standard/blob/36.0.0/__tests__/index.test.mjs

import {
beforeEach, describe, it,
} from 'node:test';
import assert from 'node:assert/strict';
import fs from 'node:fs';

import stylelint from 'stylelint';

// eslint-disable-next-line import/extensions -- Specify the extension because Node is unable to detect module format.
import config from '../cssModules.js';

describe('CSS Modules', () => {
describe('flags no warnings with valid CSS', () => {
const validCss = fs.readFileSync('./__tests__/css-modules-valid.css', 'utf-8');
let result;

beforeEach(async () => {
result = await stylelint.lint({
code: validCss,
config,
});
});

it('did not error', () => {
assert.equal(result.errored, false);
});

it('flags no warnings', () => {
assert.equal(result.results[0].warnings.length, 0);
});
});

describe('deprecated rules are excluded', () => {
const ruleNames = Object.keys(config.rules);

it('is not empty', () => {
assert.ok(ruleNames.length > 0);
});

// eslint-disable-next-line no-restricted-syntax -- Keep the test copied from `stylelint-config-standard` as is.
for (const ruleName of ruleNames) {
it(`${ruleName}`, async () => {
const rule = await stylelint.rules[ruleName];

assert.ok(!rule.meta.deprecated);
});
}
});
});
Loading

0 comments on commit ad1ef80

Please sign in to comment.