@cichol/stylelint-config 5.3.0

package/README.md

@@ -0,0 +1,54 @@
+# `@cichol/stylelint-config`
+
+A Stylelint configuration for personal projects.
+
+[![Build Status][github actions badge]][github actions][![Coverage Status][coverage badge]][coverage][![License][license badge]](LICENSE)[![Package Version][npm package version badge]][npm package]
+
+## Table of Contents
+
+- [`@cichol/stylelint-config`](#cicholstylelint-config)
+  - [Table of Contents](#table-of-contents)
+  - [Requisites](#requisites)
+  - [Installation](#installation)
+  - [Usage](#usage)
+  - [Contained presets and plugins](#contained-presets-and-plugins)
+  - [License](#license)
+
+## Requisites
+
+- Stylelint `^16.24.0`
+
+## Installation
+
+```sh
+$ npm install --save-dev @cichol/stylelint-config
+```
+
+## Usage
+
+```javascript
+export default {
+  extends: '@cichol/stylelint-config'
+}
+```
+
+## Contained presets and plugins
+
+- Presets
+  - [stylelint-config-sass-guidelines][stylelint-config-sass-guidelines]
+- Plugins
+  - [stylelint-order][stylelint-order]
+
+## License
+
+[MIT Licensed](../../LICENSE).
+
+[github actions badge]: https://img.shields.io/github/actions/workflow/status/morrighan/packages/default.yml?branch=develop&style=flat-square
+[github actions]: https://github.com/morrighan/packages/actions
+[coverage badge]: https://img.shields.io/codecov/c/github/morrighan/packages?style=flat-square
+[coverage]: https://app.codecov.io/gh/morrighan/packages/tree/develop/packages%2Fstylelint-config
+[license badge]: https://img.shields.io/github/license/morrighan/packages.svg?style=flat-square
+[npm package version badge]: https://img.shields.io/npm/v/@cichol/stylelint-config.svg?style=flat-square
+[npm package]: https://www.npmjs.com/package/@cichol/stylelint-config
+[stylelint-config-sass-guidelines]: https://www.npmjs.com/package/stylelint-config-sass-guidelines
+[stylelint-order]: https://www.npmjs.com/package/stylelint-order

package/helpers/fragments.js

@@ -0,0 +1,18 @@
+// Local helpers.
+import _ from './generator.js'
+
+// Base fragments.
+export const ITSELF = null
+export const TOP_RIGHT_BOTTOM_LEFT = _([ 'top', 'right', 'bottom', 'left' ])
+
+// Complex fragments.
+export const RANGE_BOUNDABLE = _([ 'min', ITSELF, 'max' ])
+export const AXIAL = _([ 'block', 'inline', 'x', 'y' ])
+export const LOGICAL = _([ 'block', 'inline' ], [ ITSELF, 'start', 'end' ])
+export const DIRECTIONAL = _([ LOGICAL, TOP_RIGHT_BOTTOM_LEFT ])
+
+export const DIAGONAL = _([
+	_('top', [ 'left', 'right' ]),
+	_('bottom', [ 'right', 'left' ]),
+	_([ 'start', 'end' ], [ 'start', 'end' ]),
+])

package/helpers/generator.js

@@ -0,0 +1,30 @@
+/**
+ * @param {(string | (string | (string | null)[] | null)[])[]} fragments
+ * @returns {string[]}
+ */
+export default function _(...fragments) {
+	if (fragments.length === 1 && typeof fragments[0] === 'string') return fragments[0]
+
+	/** @type {(string | null)[][]} */
+	const initial = [ [] ]
+
+	return fragments
+		.map(fragment => (
+			Array.isArray(fragment) ? fragment.flat(Number.POSITIVE_INFINITY) : [ fragment ]
+		))
+		.reduce((current, next) => {
+			/** @type {(string | null)[][]} */
+			const result = []
+
+			for (const existing of current) {
+				for (const item of next) {
+					result.push([ ...existing, item ])
+				}
+			}
+
+			return result
+		}, initial)
+		.map(combination => (
+			combination.filter(part => !!part).join('-')
+		))
+}

package/index.d.ts

@@ -0,0 +1,5 @@
+import * as Stylelint from 'stylelint'
+
+export const PROPERTIES_ORDER: readonly string[]
+
+export default {} as Stylelint.Config

package/index.js

@@ -0,0 +1,18 @@
+// Pre-sorted CSS properties list.
+import PROPERTIES_LIST from './properties/index.js'
+
+/** @type {import('stylelint').Config} */
+export default {
+	extends: 'stylelint-config-sass-guidelines',
+	plugins: [ 'stylelint-order', 'stylelint-scss' ],
+
+	rules: {
+		'@stylistic/indentation': 'tab',
+		'max-nesting-depth': 7,
+		'order/properties-order': PROPERTIES_LIST,
+		'order/properties-alphabetical-order': null,
+		'selector-max-compound-selectors': 4,
+		'selector-max-id': 1,
+		'scss/at-function-pattern': /^[-_]?\w+(?:-\w+)*$/,
+	},
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+    "name": "@cichol/stylelint-config",
+    "version": "5.3.0",
+    "description": "An universal Stylelint configuration for personal projects.",
+    "homepage": "https://github.com/morrighan/packages",
+    "bugs": {
+        "url": "https://github.com/morrighan/packages/issues"
+    },
+    "license": "MIT",
+    "author": {
+        "name": "Yongbin Min",
+        "email": "contact@cichol.com",
+        "url": "https://www.cichol.com/"
+    },
+    "type": "module",
+    "main": "index.js",
+    "types": "index.d.ts",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/morrighan/packages.git",
+        "directory": "packages/stylelint-config"
+    },
+    "dependencies": {
+        "stylelint-config-sass-guidelines": "^12.1.0",
+        "stylelint-order": "^7.0.0"
+    },
+    "peerDependencies": {
+        "stylelint": "^16.24.0"
+    },
+    "engines": {
+        "node": "^20.19.5 || ^22.20.0",
+        "npm": "^11.6.1"
+    },
+    "publishConfig": {
+        "registry": "https://registry.npmjs.org/",
+        "access": "public"
+    }
+}

package/properties/01-interaction.js

@@ -0,0 +1,25 @@
+// Local helpers.
+import _ from '../helpers/generator.js'
+import { ITSELF, DIRECTIONAL } from '../helpers/fragments.js'
+
+export default _([
+	_('pointer-events'),
+	_('touch-action'),
+	_('will-change'),
+	_('cursor'),
+	_('caption-side'),
+	_('content'),
+	_('quotes'),
+	_('counter', [ 'set', 'increment', 'reset' ]),
+	_('resize'),
+	_('user-select'),
+	_('overflow-anchor'),
+	_('nav', [ 'index', 'up', 'right', 'down', 'left' ]),
+	_('scroll-behavior'),
+	_('scrollbar', [ 'color', 'width', 'gutter' ]),
+	_('scroll', [ 'margin', 'padding' ], [ ITSELF, DIRECTIONAL ]),
+	_('scroll-snap', [ 'type', 'align', 'stop' ]),
+	_('content-visibility'),
+	_('contain-intrinsic', [ 'size', 'width', 'height', 'inline-size', 'block-size' ]),
+	_('speak', [ ITSELF, 'as' ]),
+])

package/properties/02-positioning.js

@@ -0,0 +1,17 @@
+// Local helpers.
+import _ from '../helpers/generator.js'
+import { ITSELF, LOGICAL, TOP_RIGHT_BOTTOM_LEFT } from '../helpers/fragments.js'
+
+export default _([
+	_('isolation'),
+	_('position'),
+	_('z-index'),
+	_('inset', [ ITSELF, LOGICAL ]),
+	_(TOP_RIGHT_BOTTOM_LEFT),
+	_('zoom'),
+	_('transform', [ 'origin', 'box', 'style', ITSELF ]),
+	_('translate'),
+	_('rotate'),
+	_('scale'),
+	_('offset', [ 'path', 'distance', 'rotate' ]),
+])

package/properties/03-layout.js

@@ -0,0 +1,40 @@
+// Local helpers.
+import _ from '../helpers/generator.js'
+import { ITSELF, AXIAL } from '../helpers/fragments.js'
+
+export default _([
+	_('container', [ ITSELF, 'name', 'type' ]),
+	_('size'),
+	_('direction'),
+	_('unicode-bidi'),
+	_([ 'clear', 'float' ]),
+	_('contain'),
+	_('overflow', [ ITSELF, AXIAL, 'clip-margin' ]),
+	_('overscroll-behavior', [ ITSELF, AXIAL ]),
+	_('display'),
+	_('table-layout'),
+	_('border', [ 'spacing', 'collapse' ]),
+	_('empty-cells'),
+	_('columns'),
+	_('column', [ 'count', 'width', 'fill', _('rule', [ 'width', 'style', 'color' ]), 'span' ]),
+	_([ 'widows', 'orphans' ]),
+
+	_('grid', [
+		ITSELF,
+		_('area'),
+		_('auto', [ 'rows', 'columns', 'flow' ]),
+		_('column', [ ITSELF, 'start', 'gap', 'end' ]),
+		_('gap'),
+		_('row', [ ITSELF, 'start', 'gap', 'end' ]),
+		_('template', [ ITSELF, 'areas', 'rows', 'columns' ]),
+	]),
+
+	_('flex', [ ITSELF, 'flow', 'basis', 'direction', 'grow', 'shrink', 'wrap' ]),
+	_('box-orient'),
+	_('line-clamp'),
+	_([ ITSELF, 'row', 'column' ], 'gap'),
+	_([ 'place', 'align', 'justify' ], [ 'content', 'items', 'self' ]),
+	_('order'),
+	_('break', [ 'inside', 'before', 'after' ]),
+	_('shape', [ 'outside', 'image-threshold', 'margin' ]),
+])

package/properties/04-box-model.js

@@ -0,0 +1,19 @@
+// Local helpers.
+import _ from '../helpers/generator.js'
+import { ITSELF, RANGE_BOUNDABLE, DIRECTIONAL, DIAGONAL } from '../helpers/fragments.js'
+
+export default _([
+	_('box-sizing'),
+	_('aspect-ratio'),
+	_(RANGE_BOUNDABLE, 'block-size'),
+	_(RANGE_BOUNDABLE, 'inline-size'),
+	_(RANGE_BOUNDABLE, 'width'),
+	_(RANGE_BOUNDABLE, 'height'),
+	_([ 'margin', 'padding' ], [ ITSELF, DIRECTIONAL ]),
+
+	_('border', [
+		_([ ITSELF, DIRECTIONAL ], [ ITSELF, 'width', 'style', 'color' ]),
+		_([ ITSELF, DIAGONAL ], 'radius'),
+		_('image', [ ITSELF, 'source', 'slice', 'width', 'outset', 'repeat' ]),
+	]),
+])

package/properties/05-typography.js

@@ -0,0 +1,64 @@
+// Local helpers.
+import _ from '../helpers/generator.js'
+import { ITSELF } from '../helpers/fragments.js'
+
+export default _([
+	_('writing-mode'),
+
+	_('font', [
+		ITSELF,
+		_('display'),
+		_('style'),
+		_('variant', [ ITSELF, 'ligatures', 'caps', 'alternates', 'numeric', 'east-asian', 'position' ]),
+		_('weight'),
+		_('size'),
+		_('family'),
+		_([ 'feature', 'variation' ], 'settings'),
+		_('optical-sizing'),
+		_('kerning'),
+		_('size-adjust'),
+		_('stretch'),
+		_('effect'),
+		_('emphasize', [ ITSELF, 'position', 'style' ]),
+		_('smooth'),
+	]),
+
+	_([ ITSELF, '-webkit', '-moz-osx' ], 'font-smoothing'),
+	_('ruby-position'),
+	_('line-height'),
+	_('hyphens'),
+	_('color'),
+
+	_('text', [
+		_('align', [ ITSELF, 'last' ]),
+		_('emphasis', [ ITSELF, 'color', 'style', 'position' ]),
+		_('decoration', [ ITSELF, 'color', 'line', 'style', 'thickness', 'skip-ink' ]),
+		_('underline', [ 'position', 'offset' ]),
+		_('indent'),
+		_('justify'),
+		_('outline'),
+		_('overflow', [ ITSELF, 'ellipsis', 'mode' ]),
+		_('shadow'),
+		_('transform'),
+		_('wrap'),
+		_('size-adjust'),
+		_('combine-upright'),
+		_('orientation'),
+		_('rendering'),
+	]),
+
+	_('-webkit-text', [ 'fill', 'stroke' ], 'color'),
+	_('letter-spacing'),
+	_('word', [ 'break', 'spacing', 'wrap' ]),
+	_('line-break'),
+	_('overflow-wrap'),
+	_('tab-size'),
+	_('white-space'),
+	_('vertical-align'),
+	_('paint-order'),
+	_('hanging-punctuation'),
+	_('list-style', [ ITSELF, 'position', 'type', 'image' ]),
+	_('src'),
+	_('unicode-range'),
+	_([ 'ascent', 'descent', 'line-gap' ], 'override'),
+])

package/properties/06-appearance.js

@@ -0,0 +1,37 @@
+// Local helpers.
+import _ from '../helpers/generator.js'
+import { ITSELF, AXIAL } from '../helpers/fragments.js'
+
+export default _([
+	_('appearance'),
+	_('visibility'),
+	_('color-scheme'),
+	_('forced-color-adjust'),
+	_('accent-color'),
+	_('perspective', [ 'origin', ITSELF ]),
+	_('backface-visibility'),
+	_('opacity'),
+	_('object', [ 'fit', 'position' ]),
+	_('image-orientation'),
+
+	_('background', [
+		ITSELF,
+		_('color'),
+		_('image'),
+		_('repeat', [ ITSELF, AXIAL ]),
+		_('attachment'),
+		_('position', [ ITSELF, AXIAL ]),
+		_('clip'),
+		_('origin'),
+		_('size'),
+		_('blend-mode'),
+	]),
+
+	_('clip', [ ITSELF, 'path' ]),
+	_([ ITSELF, 'backdrop' ], 'filter'),
+	_([ '-webkit', ITSELF ], 'box-decoration-break'),
+	_('outline', [ ITSELF, 'width', 'style', 'color', 'offset' ]),
+	_('box-shadow'),
+	_('mix-blend-mode'),
+	_('caret-color'),
+])

package/properties/07-svg-relevant.js

@@ -0,0 +1,22 @@
+// Local helpers.
+import _ from '../helpers/generator.js'
+import { ITSELF } from '../helpers/fragments.js'
+
+export default _([
+	_('alignment-baseline'),
+	_('baseline-shift'),
+	_('dominant-baseline'),
+	_('text-anchor'),
+	_([ 'cx', 'cy', 'd', 'r', 'rx', 'ry' ]),
+	_('fill', [ ITSELF, 'opacity', 'rule' ]),
+	_([ 'flood', 'stop' ], [ 'color', 'opacity' ]),
+	_('stroke', [ ITSELF, 'dasharray', 'dashoffset', 'linecap', 'linejoin', 'miterlimit', 'opacity', 'width' ]),
+	_('vector-effect'),
+	_('color', [ _('interpolation', [ ITSELF, 'filters' ]), 'profile', 'rendering' ]),
+	_('image-rendering'),
+	_('lighting-color'),
+	_('marker', [ 'start', 'mid', 'end' ]),
+	_('mask', [ ITSELF, 'type' ]),
+	_('shape-rendering'),
+	_('clip-rule'),
+])

package/properties/08-transition.js

@@ -0,0 +1,12 @@
+// Local helpers.
+import _ from '../helpers/generator.js'
+import { ITSELF } from '../helpers/fragments.js'
+
+export default _([
+	_('transition', [ ITSELF, 'delay', 'timing-function', 'duration', 'property' ]),
+	_('animation', [ ITSELF, 'name', 'duration', 'play-state', 'timing-function', 'fill-mode', 'delay', 'iteration-count', 'direction', 'timeline' ]),
+	_('timeline-scope'),
+	_('scroll-timeline', [ ITSELF, 'name', 'axis' ]),
+	_('view-timeline', [ ITSELF, 'name', 'axis', 'inset' ]),
+	_('view-transition-name'),
+])

package/properties/index.js

@@ -0,0 +1,18 @@
+export default await Promise.all([
+	'composes',
+	'all',
+	import('./01-interaction.js'),
+	import('./02-positioning.js'),
+	import('./03-layout.js'),
+	import('./04-box-model.js'),
+	import('./05-typography.js'),
+	import('./06-appearance.js'),
+	import('./07-svg-relevant.js'),
+	import('./08-transition.js'),
+].map(fragments => (
+	typeof fragments === 'string'
+		? Promise.resolve(fragments)
+		: fragments.then(({ default: properties }) => properties)
+))).then(properties => (
+	properties.flat()
+))