Add Stylelint config package

.changeset/calm-bobcats-laugh.md

@@ -0,0 +1,8 @@
+---
+'@zazen/stylelint-config': major
+---
+
+Update minimum required versions
+
+-   `node@18`
+-   `stylelint@16`

jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "module": "esnext",
+    "target": "esnext",
+  },
+  "include": ["**/*.js", "**/*.mjs"],
+  "exclude": ["node_modules"],
+}

package.json

@@ -22,6 +22,7 @@
   "prettier": "@zazen/prettier-config",
   "devDependencies": {
     "@changesets/cli": "2.27.1",
+    "@types/node": "20.14.2",
     "@zazen/eslint-config": "workspace:*",
     "@zazen/prettier-config": "workspace:*",
     "eslint": "8.56.0",

packages/stylelint-config/CHANGELOG.md

@@ -0,0 +1,47 @@
+# Change Log
+
+## 3.0.0 — 2022-05-07
+
+#### 💣 Breaking
+
+- Upgrade `recommended` config to latest [`f637c27`](https://github.com/stormwarning/zazen-stylelint-config/commit/f637c27343f5664298d4223d5435f77d94d74e10)
+- Upgrade `recess-order` config to latest [#175](https://github.com/stormwarning/zazen-stylelint-config/pull/175)
+
+  The minimum supported version of Stylelint is now >=14; the peerDependencies of this config have been updated to match.
+
+## 2.0.0 — 2021-03-02
+
+#### ♻️ Changed
+
+- Bumps extended configs to their latest version [#146](https://github.com/stormwarning/zazen-stylelint-config/pull/146)
+
+  `stylelint-config-recommended` 2.1.0 → 3.0.0  
+  `stylelint-order` 2.0.0 → 4.1.0
+
+  Also updates the CI and release workflow and config
+
+## 1.0.0 — 2018-12-19
+
+#### 💣 Breaking
+
+- Adds some new rules — including new optional rules for Sass — and removes a few. Partials are renamed to match [Stylelint's categories](https://stylelint.io/VISION/) and `stylelint-config-recommended` is used as a baseline.
+
+#### 🎁 Added
+
+- Update linting rules ([#3](https://github.com/stormwarning/zazen-stylelint-config/issues/3))
+
+## 0.2.0 — 2018-09-07
+
+#### 🎁 Added
+
+- `except` and `ignore` options for `comment-empty-line-before` rule \([#2](https://github.com/stormwarning/zazen-stylelint-config/pull/2))
+
+### 0.1.1 — 2018-04-11
+
+#### 🐛 Fixed
+
+- Include `stylelint-config-recess-order` module in dependencies \[[`5c32443`](https://github.com/stormwarning/zazen-stylelint-config/commit/5c3244318e0e5d9a05197784c6eb642d02f13066)]
+
+## 0.1.0 — 2018-04-11
+
+### 🎉 Initial release

packages/stylelint-config/LICENSE.txt

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright Jeff Nelson
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

packages/stylelint-config/README.md

@@ -0,0 +1,38 @@
+# zazen-stylelint-config
+
+[![npm version][npm-img]][npm-url]
+[![npm downloads][npm-dls]][npm-url]
+
+[Stylelint][] configuration for [zazen][]-generated projects.
+
+## Usage
+
+Install the conventions by running:
+
+```sh
+npm install --save-dev stylelint @zazen/stylelint-config
+```
+
+Then add the extends to your `stylelint.config.js`:
+
+```js
+/** @type {import('stylelint').Config} */
+export default {
+	extends: ['@zazen/stylelint-config'],
+	rules: { /* … */ }
+}
+```
+
+[npm-url]: https://www.npmjs.com/package/@zazen/stylelint-config
+
+[npm-img]: https://img.shields.io/npm/v/@zazen/stylelint-config.svg?style=flat-square
+
+[npm-dls]: https://img.shields.io/npm/dt/@zazen/stylelint-config.svg?style=flat-square
+
+[issues-url]: https://github.com/stormwarning/zazen-stylelint-config/issues
+
+[issues-img]: https://img.shields.io/github/issues/stormwarning/zazen-stylelint-config.svg?style=flat-square
+
+[stylelint]: https://stylelint.io
+
+[zazen]: https://github.com/stormwarning/zazen

packages/stylelint-config/__tests__/config.test.mjs

@@ -0,0 +1,79 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { describe, it } from 'node:test'
+
+import stylelint from 'stylelint'
+
+import stylistic from '../conf/stylistic.js'
+import config from '../index.js'
+
+const VALID_CSS = readFileSync('./__tests__/valid.css', 'utf8')
+const INVALID_CSS = readFileSync('./__tests__/invalid.css', 'utf8')
+const RULE_WARNINGS = [
+	'color-function-notation',
+	'alpha-value-notation',
+	'number-max-precision',
+	'no-descending-specificity',
+	'rule-empty-line-before',
+	'color-named',
+	'plugin/use-logical-properties-and-values',
+	'order/properties-order',
+	'length-zero-no-unit',
+	'order/order',
+	'selector-type-no-unknown',
+	'declaration-property-value-no-unknown',
+]
+
+describe('valid css', async () => {
+	let result = await stylelint.lint({
+		code: VALID_CSS,
+		config,
+	})
+
+	it('has no errors', () => {
+		assert.equal(result.errored, false)
+	})
+
+	it('flags no warnings', () => {
+		assert.equal(result.results[0].warnings.length, 0)
+	})
+})
+
+describe('invalid css', async () => {
+	let result = await stylelint.lint({
+		code: INVALID_CSS,
+		config,
+	})
+	let rules = new Set(
+		result.results[0].warnings.map((warning) => warning.rule),
+	)
+
+	it('includes errors', () => {
+		assert.equal(result.errored, true)
+	})
+
+	it('flags correct warnings', () => {
+		for (let rule of RULE_WARNINGS) {
+			assert.ok(rules.has(rule))
+		}
+	})
+})
+
+describe('deprecated rules are excluded', () => {
+	let ruleNames = [
+		...Object.keys(config.rules),
+		...Object.keys(stylistic.rules),
+	]
+
+	it('is not empty', () => {
+		assert.ok(ruleNames.length > 0)
+	})
+
+	for (let ruleName of ruleNames) {
+		it(`${ruleName}`, async () => {
+			let rule = await stylelint.rules[ruleName]
+
+			if (rule?.meta) assert.ok(!rule.meta.deprecated)
+		})
+	}
+})

packages/stylelint-config/__tests__/invalid.css

@@ -0,0 +1,20 @@
+@import URL('//example.com/x.css');
+
+.selector-1 {
+	& .selector-2 {
+		& .selector-3 {
+			& .selector-4 {
+				color: rgba(0, 0, 0, 0.08215);
+			}
+		}
+	}
+}
+.selector-2 {
+	color: red;
+	margin-top: 0px;
+	--custom-property: 0;
+}
+
+madeup {
+	margin: #fff;
+}

packages/stylelint-config/__tests__/valid.css

@@ -0,0 +1,10 @@
+@import url('x.css');
+
+.selector-1,
+.selector-2,
+.selector-3[type='text'] {
+	box-sizing: border-box;
+	display: block;
+	color: #333;
+	background: linear-gradient(#fff, rgb(0 0 0 / 80%));
+}