@maz-ui/mcp 5.0.0-beta.0 → 5.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/mcp.mjs +1 -1
- package/docs/src/components/maz-badge.md +4 -4
- package/docs/src/components/maz-btn.md +2 -2
- package/docs/src/components/maz-icon.md +1 -1
- package/docs/src/components/maz-popover.md +1 -1
- package/docs/src/ecosystem/eslint-config.md +95 -8
- package/docs/src/ecosystem/stylelint-config.md +122 -10
- package/package.json +4 -4
package/dist/mcp.mjs
CHANGED
|
@@ -7,7 +7,7 @@ import { existsSync, readFileSync, readdirSync } from 'node:fs';
|
|
|
7
7
|
import { resolve, join, dirname } from 'node:path';
|
|
8
8
|
import { fileURLToPath } from 'node:url';
|
|
9
9
|
|
|
10
|
-
const version = "
|
|
10
|
+
const version = "5.0.0-beta.0";
|
|
11
11
|
|
|
12
12
|
class MetadataExtractor {
|
|
13
13
|
extract(name, type, content, manualTags = []) {
|
|
@@ -54,7 +54,7 @@ description: MazBadge is a standalone component to show short text in colored co
|
|
|
54
54
|
'destructive',
|
|
55
55
|
'contrast',
|
|
56
56
|
'accent',
|
|
57
|
-
'
|
|
57
|
+
'surface',
|
|
58
58
|
'transparent',
|
|
59
59
|
]
|
|
60
60
|
</script>
|
|
@@ -89,7 +89,7 @@ const colors = [
|
|
|
89
89
|
'destructive',
|
|
90
90
|
'contrast',
|
|
91
91
|
'accent',
|
|
92
|
-
'
|
|
92
|
+
'surface',
|
|
93
93
|
'transparent',
|
|
94
94
|
]
|
|
95
95
|
</script>
|
|
@@ -124,7 +124,7 @@ const colors = [
|
|
|
124
124
|
'destructive',
|
|
125
125
|
'contrast',
|
|
126
126
|
'accent',
|
|
127
|
-
'
|
|
127
|
+
'surface',
|
|
128
128
|
'transparent',
|
|
129
129
|
]
|
|
130
130
|
</script>
|
|
@@ -196,7 +196,7 @@ const roundedSize = ['none', 'sm', 'md', 'lg', 'xl', 'full']
|
|
|
196
196
|
'destructive',
|
|
197
197
|
'contrast',
|
|
198
198
|
'accent',
|
|
199
|
-
'
|
|
199
|
+
'surface',
|
|
200
200
|
'transparent',
|
|
201
201
|
]
|
|
202
202
|
|
|
@@ -141,7 +141,7 @@ const colors = [
|
|
|
141
141
|
'contrast',
|
|
142
142
|
'accent',
|
|
143
143
|
'transparent',
|
|
144
|
-
'
|
|
144
|
+
'surface',
|
|
145
145
|
]
|
|
146
146
|
</script>
|
|
147
147
|
|
|
@@ -597,7 +597,7 @@ When `to` attribute is provided, the component automatically becomes a `<RouterL
|
|
|
597
597
|
'warning',
|
|
598
598
|
'destructive',
|
|
599
599
|
'contrast',
|
|
600
|
-
'
|
|
600
|
+
'surface',
|
|
601
601
|
'transparent',
|
|
602
602
|
]
|
|
603
603
|
|
|
@@ -8,7 +8,7 @@ description: A flexible icon component that accepts Vue components, raw SVG stri
|
|
|
8
8
|
{{ $frontmatter.description }}
|
|
9
9
|
|
|
10
10
|
::: tip
|
|
11
|
-
Download the bundled icons pack
|
|
11
|
+
Download the bundled [icons pack](#all-bundled-icons) or use [`@maz-ui/icons`](../guide/icons.md) for the full set.
|
|
12
12
|
:::
|
|
13
13
|
|
|
14
14
|
## How it works
|
|
@@ -1356,7 +1356,7 @@ MazPopover follows WAI-ARIA guidelines:
|
|
|
1356
1356
|
<script setup>
|
|
1357
1357
|
import { ref, reactive } from 'vue'
|
|
1358
1358
|
import MazPopover from 'maz-ui/components/MazPopover'
|
|
1359
|
-
import { MazInformationCircle } from '@maz-ui/icons/
|
|
1359
|
+
import { MazInformationCircle } from '@maz-ui/icons/static/MazInformationCircle'
|
|
1360
1360
|
import { MazEllipsisVertical } from '@maz-ui/icons/raw/MazEllipsisVertical'
|
|
1361
1361
|
|
|
1362
1362
|
const isOpen = ref(false)
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: '@maz-ui/eslint-config'
|
|
3
|
-
description: ESLint flat-config preset for Vue/Nuxt/JS/TS projects, layered on @antfu/eslint-config with SonarJS, Tailwind and a11y add-ons.
|
|
3
|
+
description: ESLint flat-config preset for Vue/Nuxt/JS/TS projects, layered on @antfu/eslint-config with SonarJS, Tailwind v3+v4 and a11y add-ons.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# {{ $frontmatter.title }}
|
|
7
7
|
|
|
8
|
-
`@maz-ui/eslint-config` ships an opinionated ESLint **flat config** for the kind of stack maz-ui itself uses: TypeScript, Vue 3 / Nuxt 3, optional Tailwind CSS, and tests. It is built on top of [`@antfu/eslint-config`](https://github.com/antfu/eslint-config) so you get a battle-tested baseline, then layered with quality rules from [SonarJS](https://github.com/SonarSource/eslint-plugin-sonarjs) and accessibility rules from [`eslint-plugin-vuejs-accessibility`](https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility).
|
|
8
|
+
`@maz-ui/eslint-config` ships an opinionated ESLint **flat config** for the kind of stack maz-ui itself uses: TypeScript, Vue 3 / Nuxt 3, optional Tailwind CSS (v3 or v4), and tests. It is built on top of [`@antfu/eslint-config`](https://github.com/antfu/eslint-config) so you get a battle-tested baseline, then layered with quality rules from [SonarJS](https://github.com/SonarSource/eslint-plugin-sonarjs), Tailwind rules from [`eslint-plugin-better-tailwindcss`](https://github.com/schoero/eslint-plugin-better-tailwindcss), and accessibility rules from [`eslint-plugin-vuejs-accessibility`](https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility).
|
|
9
9
|
|
|
10
10
|
## Installation
|
|
11
11
|
|
|
@@ -13,6 +13,8 @@ description: ESLint flat-config preset for Vue/Nuxt/JS/TS projects, layered on @
|
|
|
13
13
|
pnpm add -D @maz-ui/eslint-config eslint
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
+
The Tailwind plugin and other peer/transitive dependencies are bundled as direct dependencies, so you don't need to install them yourself.
|
|
17
|
+
|
|
16
18
|
## Basic usage
|
|
17
19
|
|
|
18
20
|
Create `eslint.config.ts` (or `.mjs`/`.js`) at the root of your project:
|
|
@@ -35,7 +37,7 @@ export default defineConfig({
|
|
|
35
37
|
typescript: true, // default
|
|
36
38
|
vue: true, // auto-detected
|
|
37
39
|
sonarjs: true, // default
|
|
38
|
-
tailwindcss: false, //
|
|
40
|
+
tailwindcss: false, // see "Tailwind support" below
|
|
39
41
|
vueAccessibility: false, // optional
|
|
40
42
|
formatters: true, // CSS/HTML/JSON/YAML/Markdown formatting via dprint
|
|
41
43
|
|
|
@@ -50,9 +52,29 @@ export default defineConfig({
|
|
|
50
52
|
'no-console': 'error',
|
|
51
53
|
'vue/custom-event-name-casing': ['error', 'kebab-case'],
|
|
52
54
|
},
|
|
55
|
+
|
|
56
|
+
// Log verbosity — see "Logging" below.
|
|
57
|
+
logLevel: 'default',
|
|
53
58
|
})
|
|
54
59
|
```
|
|
55
60
|
|
|
61
|
+
## Logging
|
|
62
|
+
|
|
63
|
+
The preset prints a titled box summarizing what it resolved (typescript, vue, tailwindcss preset, sonarjs, …) when ESLint loads. Powered by [`@maz-ui/node`](https://www.npmjs.com/package/@maz-ui/node)'s consola-based logger.
|
|
64
|
+
|
|
65
|
+
| `logLevel` | What you see |
|
|
66
|
+
| --- | --- |
|
|
67
|
+
| `'silent'` | Nothing. |
|
|
68
|
+
| `'default'` *(TTY default)* | A titled box summarizing the resolved feature toggles, with `(auto-detected)` / `(default)` annotations next to each value. |
|
|
69
|
+
| `'debug'` | Adds one line per major block applied (Vue rules, SonarJS preset, vue-a11y, Tailwind plugin, test relaxations, user overrides). |
|
|
70
|
+
| `'verbose'` | Adds the final shape: total block count and ignore-glob count. |
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
defineConfig({ logLevel: 'debug' })
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
The default is **`'default'` in interactive terminals (TTY) and `'silent'` otherwise** — CI, lint-staged, pipes, and JSON / SARIF formatters all write to stdout, where the box would corrupt machine-readable output. `logLevel` always wins when set explicitly.
|
|
77
|
+
|
|
56
78
|
You can also append raw flat-config items as additional arguments — they merge after the built-in configs:
|
|
57
79
|
|
|
58
80
|
```ts
|
|
@@ -65,32 +87,96 @@ export default defineConfig(
|
|
|
65
87
|
)
|
|
66
88
|
```
|
|
67
89
|
|
|
90
|
+
## Tailwind support
|
|
91
|
+
|
|
92
|
+
Powered by [`eslint-plugin-better-tailwindcss`](https://github.com/schoero/eslint-plugin-better-tailwindcss) — supports both **Tailwind v3 and v4**, and ESLint 7→10.
|
|
93
|
+
|
|
94
|
+
The `tailwindcss` option accepts several shapes:
|
|
95
|
+
|
|
96
|
+
| Value | Behavior |
|
|
97
|
+
| --- | --- |
|
|
98
|
+
| `false` *(default)* | Disabled. |
|
|
99
|
+
| `true` | Same as `'recommended'` with default settings. |
|
|
100
|
+
| `'recommended'` | Stylistic + correctness rules. |
|
|
101
|
+
| `'stylistic'` | Formatting rules only — class order, line wrapping, no duplicate classes, etc. |
|
|
102
|
+
| `'correctness'` | Validation rules only — `no-unknown-classes`, `no-conflicting-classes`. |
|
|
103
|
+
| `MazTailwindcssOptions` | Pick a preset and pass plugin settings (Tailwind config path, prefix entry point, …). |
|
|
104
|
+
|
|
105
|
+
```ts
|
|
106
|
+
defineConfig({
|
|
107
|
+
tailwindcss: {
|
|
108
|
+
preset: 'recommended',
|
|
109
|
+
// Tailwind v4 — path to the CSS that does `@import "tailwindcss" prefix(maz)`.
|
|
110
|
+
entryPoint: 'src/main.css',
|
|
111
|
+
// Tailwind v3 instead — path to your config file.
|
|
112
|
+
// tailwindConfig: 'tailwind.config.ts',
|
|
113
|
+
// Tailwind v4: detect custom @layer components classes (cards, btns, …).
|
|
114
|
+
detectComponentClasses: true,
|
|
115
|
+
// Monorepo: directory used to resolve `tailwindcss` and the config file.
|
|
116
|
+
cwd: 'apps/web',
|
|
117
|
+
},
|
|
118
|
+
})
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
::: warning Plugin needs to know your Tailwind setup
|
|
122
|
+
The plugin's correctness rules (`no-unknown-classes`, `no-conflicting-classes`) auto-resolve your Tailwind installation. Without `entryPoint` (v4) or `tailwindConfig` (v3), the plugin falls back to the **default Tailwind config** and won't know about your prefix, custom utilities, or theme tokens — which produces a flood of false positives in non-vanilla setups.
|
|
123
|
+
|
|
124
|
+
If you customize Tailwind in any meaningful way (prefix, extend theme, custom utilities), set `entryPoint` or `tailwindConfig` explicitly. If you hit false positives anyway, downgrade to `'stylistic'` (formatting only) or disable individual rules:
|
|
125
|
+
|
|
126
|
+
```ts
|
|
127
|
+
defineConfig({
|
|
128
|
+
tailwindcss: 'recommended',
|
|
129
|
+
rules: {
|
|
130
|
+
'better-tailwindcss/no-unknown-classes': 'off',
|
|
131
|
+
},
|
|
132
|
+
})
|
|
133
|
+
```
|
|
134
|
+
:::
|
|
135
|
+
|
|
136
|
+
The plugin recognizes the most common class-name utilities out of the box (`clsx`, `cn`, `tw-merge`, `cva`, `tv`, …); see the [plugin docs](https://github.com/schoero/eslint-plugin-better-tailwindcss) for the full list and how to register your own.
|
|
137
|
+
|
|
68
138
|
## What it includes
|
|
69
139
|
|
|
70
140
|
- **Antfu base** — TypeScript-aware rules, Stylistic formatting, modern import order.
|
|
71
141
|
- **SonarJS** — code quality and complexity heuristics, with a relaxed set for `*.spec.ts` / `*.test.ts`.
|
|
72
142
|
- **Vue rules** (when Vue/Nuxt is detected) — block-tag order, naming conventions, template a11y.
|
|
73
|
-
- **Tailwind plugin** (opt-in) — class ordering,
|
|
143
|
+
- **Tailwind plugin** (opt-in) — class ordering, duplicate / deprecated / unknown / conflicting class detection — see [Tailwind support](#tailwind-support).
|
|
74
144
|
- **Markdown** — prose linting baseline.
|
|
145
|
+
- **vueAccessibility** (opt-in) — `eslint-plugin-vuejs-accessibility` rules with the AudioWorklet globals fix.
|
|
75
146
|
|
|
76
147
|
## Advanced
|
|
77
148
|
|
|
78
|
-
|
|
149
|
+
### Compose your own config
|
|
79
150
|
|
|
80
151
|
```ts
|
|
81
|
-
import {
|
|
152
|
+
import {
|
|
153
|
+
baseRules,
|
|
154
|
+
sonarjsRules,
|
|
155
|
+
tailwindcssConfigs,
|
|
156
|
+
vueRules,
|
|
157
|
+
} from '@maz-ui/eslint-config'
|
|
82
158
|
|
|
83
159
|
export default [
|
|
84
160
|
{
|
|
85
161
|
rules: {
|
|
86
|
-
...baseRules(true),
|
|
162
|
+
...baseRules(true), // production = true → no-console: 'error'
|
|
87
163
|
...sonarjsRules,
|
|
88
|
-
|
|
164
|
+
...vueRules,
|
|
89
165
|
},
|
|
90
166
|
},
|
|
167
|
+
// Drop in just the Tailwind block, with whatever preset and settings you want.
|
|
168
|
+
...tailwindcssConfigs('stylistic', { entryPoint: 'src/main.css' }),
|
|
91
169
|
]
|
|
92
170
|
```
|
|
93
171
|
|
|
172
|
+
### Auto-detection caveat (monorepos)
|
|
173
|
+
|
|
174
|
+
Auto-detection of Vue / Nuxt reads the `package.json` in `process.cwd()` only. In a monorepo where `vue` is hoisted to the root and missing from a sub-package's `package.json`, detection silently fails. Set `vue: true` explicitly in those cases:
|
|
175
|
+
|
|
176
|
+
```ts
|
|
177
|
+
defineConfig({ vue: true, tailwindcss: { preset: 'recommended', cwd: 'apps/web' } })
|
|
178
|
+
```
|
|
179
|
+
|
|
94
180
|
## Compatibility
|
|
95
181
|
|
|
96
182
|
| Tool | Required version |
|
|
@@ -98,3 +184,4 @@ export default [
|
|
|
98
184
|
| ESLint | `>=9.0.0 <11.0.0` |
|
|
99
185
|
| Node.js | `>=20.19.0` |
|
|
100
186
|
| TypeScript | `^5.0.0` |
|
|
187
|
+
| Tailwind CSS | `^3.3.0 \|\| ^4.0.0` *(when `tailwindcss` is on)* |
|
|
@@ -5,7 +5,7 @@ description: Stylelint preset for Vue/Nuxt/JS/TS projects, with first-class Tail
|
|
|
5
5
|
|
|
6
6
|
# {{ $frontmatter.title }}
|
|
7
7
|
|
|
8
|
-
`@maz-ui/stylelint-config` is the Stylelint counterpart to [`@maz-ui/eslint-config`](./eslint-config.md). It builds on Stylelint's official **standard** config and layers in the conventions used by maz-ui itself: BEM-friendly class patterns, Tailwind v4 at-rule whitelist, RTL-friendly logical properties, optional SCSS support,
|
|
8
|
+
`@maz-ui/stylelint-config` is the Stylelint counterpart to [`@maz-ui/eslint-config`](./eslint-config.md). It builds on Stylelint's official **standard** config and layers in the conventions used by maz-ui itself: BEM-friendly class patterns, Tailwind v4 support (at-rule whitelist + tunable plugin policy), RTL-friendly logical properties, optional SCSS support, Vue/HTML block parsing, and a single `extends` knob to compose extra shareable configs.
|
|
9
9
|
|
|
10
10
|
## Installation
|
|
11
11
|
|
|
@@ -13,7 +13,7 @@ description: Stylelint preset for Vue/Nuxt/JS/TS projects, with first-class Tail
|
|
|
13
13
|
pnpm add -D @maz-ui/stylelint-config stylelint
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
The peer dependencies the preset relies on (`stylelint-config-standard`, `stylelint-config-recommended-vue`, `stylelint-use-logical-spec`, …) are bundled as direct dependencies, so you don't need to install them yourself.
|
|
16
|
+
The peer dependencies the preset relies on (`stylelint-config-standard`, `stylelint-config-recommended-vue`, `stylelint-use-logical-spec`, `stylelint-plugin-tailwindcss`, `stylelint-order`, …) are bundled as direct dependencies, so you don't need to install them yourself.
|
|
17
17
|
|
|
18
18
|
## Basic usage
|
|
19
19
|
|
|
@@ -30,8 +30,16 @@ Vue, Tailwind and SCSS are auto-detected from your `package.json`:
|
|
|
30
30
|
| Detected when… | Enables… |
|
|
31
31
|
| --- | --- |
|
|
32
32
|
| `vue` or `nuxt` is in dependencies | Vue support (`stylelint-config-recommended-vue`, `<style>` block parsing) |
|
|
33
|
-
| `tailwindcss` is in dependencies |
|
|
34
|
-
| `sass`, `sass-embedded` or `node-sass` is in dependencies | SCSS support (`stylelint-config-
|
|
33
|
+
| `tailwindcss` or `@tailwindcss/vite` is in dependencies | At-rule whitelist + Tailwind plugin with the `'minimal'` policy (see [Tailwind](#tailwind-css-v4) below) |
|
|
34
|
+
| `sass`, `sass-embedded` or `node-sass` is in dependencies | SCSS support (`stylelint-config-standard-scss`, `postcss-scss`) |
|
|
35
|
+
|
|
36
|
+
::: warning Monorepo caveat
|
|
37
|
+
Detection only reads the `package.json` in the current working directory. In a monorepo where `tailwindcss`, `vue` or `sass` are hoisted to the root and **not declared** in a sub-package's `package.json`, detection silently fails when Stylelint runs from that sub-package. Set the relevant flags explicitly in those cases:
|
|
38
|
+
|
|
39
|
+
```js
|
|
40
|
+
defineConfig({ vue: true, tailwind: true, scss: false })
|
|
41
|
+
```
|
|
42
|
+
:::
|
|
35
43
|
|
|
36
44
|
## Configuration
|
|
37
45
|
|
|
@@ -42,6 +50,9 @@ export default defineConfig({
|
|
|
42
50
|
// Each one is also auto-detected — set explicitly to opt in/out.
|
|
43
51
|
vue: true,
|
|
44
52
|
html: false,
|
|
53
|
+
|
|
54
|
+
// `true` → 'minimal' plugin policy. Pass 'recommended' or 'strict' to enforce
|
|
55
|
+
// utility-first authoring conventions. `false` disables Tailwind support.
|
|
45
56
|
tailwind: true,
|
|
46
57
|
scss: false,
|
|
47
58
|
|
|
@@ -52,7 +63,7 @@ export default defineConfig({
|
|
|
52
63
|
|
|
53
64
|
// Property order strategy.
|
|
54
65
|
// 'recess' : Recess-based ordering via stylelint-config-recess-order (default)
|
|
55
|
-
// 'alphabetical' :
|
|
66
|
+
// 'alphabetical' : A→Z ordering via stylelint-order
|
|
56
67
|
// false : Disable ordering rules
|
|
57
68
|
order: 'recess',
|
|
58
69
|
|
|
@@ -72,9 +83,33 @@ export default defineConfig({
|
|
|
72
83
|
rules: { 'no-descending-specificity': null },
|
|
73
84
|
},
|
|
74
85
|
],
|
|
86
|
+
|
|
87
|
+
// Layer extra shareable configs. Appended after the built-ins so they
|
|
88
|
+
// win Stylelint's cascade.
|
|
89
|
+
extends: ['stylelint-config-clean-order'],
|
|
90
|
+
|
|
91
|
+
// Log verbosity — see "Logging" below.
|
|
92
|
+
logLevel: 'default',
|
|
75
93
|
})
|
|
76
94
|
```
|
|
77
95
|
|
|
96
|
+
## Logging
|
|
97
|
+
|
|
98
|
+
The preset can explain what it resolved and which plugins / extends it added — useful when you can't figure out why a rule is on or off. Logging is powered by [`@maz-ui/node`](https://www.npmjs.com/package/@maz-ui/node)'s consola-based logger.
|
|
99
|
+
|
|
100
|
+
| `logLevel` | What you see |
|
|
101
|
+
| --- | --- |
|
|
102
|
+
| `'silent'` | Nothing. |
|
|
103
|
+
| `'default'` *(default)* | A titled box summarizing the resolved support (vue, tailwind, scss, html, logical, order), with `(auto-detected)` / `(default)` annotations next to each value. |
|
|
104
|
+
| `'debug'` | Adds one line per plugin / extends / overrides addition (`Vue: extended stylelint-config-recommended-vue`, `Tailwind: loaded 2 plugin(s) for "minimal" policy`, `User: extended stylelint-config-clean-order`, …). |
|
|
105
|
+
| `'verbose'` | Adds the final shape: complete `extends` list, plugin / rule / override / ignore counts. |
|
|
106
|
+
|
|
107
|
+
```js
|
|
108
|
+
defineConfig({ logLevel: 'debug' })
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
The `logLevel` type comes from `@maz-ui/node` and accepts the full set of consola levels (`'silent'`, `'error'`, `'warning'`, `'normal'`, `'default'`, `'debug'`, `'trace'`, `'verbose'`). The four values above are the ones the preset actually produces output for.
|
|
112
|
+
|
|
78
113
|
## Logical properties (RTL-friendly)
|
|
79
114
|
|
|
80
115
|
When `logical: true` (default), the preset enables [`stylelint-use-logical-spec`](https://github.com/Jordan-Hall/stylelint-use-logical-spec) which warns whenever you use a physical CSS property that has a logical equivalent:
|
|
@@ -107,20 +142,91 @@ defineConfig({ logical: false })
|
|
|
107
142
|
|
|
108
143
|
## Tailwind CSS v4
|
|
109
144
|
|
|
110
|
-
When `tailwind
|
|
145
|
+
When `tailwind` is enabled (truthy or auto-detected), the preset:
|
|
111
146
|
|
|
112
147
|
- Whitelists every Tailwind v4 at-rule via `at-rule-no-unknown` (and `scss/at-rule-no-unknown` when SCSS is also on): `@apply`, `@theme`, `@layer`, `@variant`, `@custom-variant`, `@reference`, `@utility`, `@source`, `@screen`, `@starting-style`, `@tailwind`.
|
|
113
148
|
- Sets `at-rule-no-deprecated` to allow `@apply` (Tailwind v4 still ships it as the canonical authoring directive).
|
|
114
149
|
- Forces `import-notation: 'string'` — Tailwind v4 only parses the `prefix(...)` modifier on bare-string `@import` forms, never on `url()`-wrapped imports.
|
|
150
|
+
- Loads [`stylelint-plugin-tailwindcss`](https://github.com/sonofmagic/dev-configs/tree/main/packages/stylelint-plugin-tailwindcss) and applies a curated rule set based on the chosen policy level.
|
|
151
|
+
|
|
152
|
+
### Policy levels
|
|
153
|
+
|
|
154
|
+
The `tailwind` option accepts a strictness level. Pure `true` (or auto-detection) maps to `'minimal'`.
|
|
155
|
+
|
|
156
|
+
| Value | Plugin loaded | What runs |
|
|
157
|
+
| --- | --- | --- |
|
|
158
|
+
| `true` *(or auto-detected)* | ❌ | Same as `'minimal'`. |
|
|
159
|
+
| `'minimal'` | ❌ | At-rule whitelist + `import-notation: 'string'` + `at-rule-no-deprecated`. **No plugin rules.** |
|
|
160
|
+
| `'recommended'` | ✅ | `'minimal'` + `stylelint-plugin-tailwindcss`'s `recommended` preset (`no-invalid-apply`, `no-invalid-theme-function`, `no-atomic-class`, `no-apply`, `no-arbitrary-value`). |
|
|
161
|
+
| `'strict'` | ✅ | `'recommended'` + architecture-level rules (`no-theme-function`, `no-screen-directive`, `no-tailwind-directive`, `no-import-directive`, `no-css-layer`). |
|
|
162
|
+
| `false` | ❌ | Tailwind support disabled entirely (no at-rule whitelist, no plugin). |
|
|
163
|
+
|
|
164
|
+
```js
|
|
165
|
+
defineConfig({ tailwind: 'recommended' })
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
::: warning Plugin rules need to find your Tailwind runtime
|
|
169
|
+
Both `'recommended'` and `'strict'` enable rules from `stylelint-plugin-tailwindcss` that resolve your project's Tailwind installation from each linted file's path. Projects with a Tailwind v4 prefix (`maz:`, `tw:`, …), a non-standard entry CSS, or a monorepo layout where the plugin can't locate Tailwind will produce a flood of false positives (every `@apply maz:flex` flagged as invalid).
|
|
170
|
+
|
|
171
|
+
`'minimal'` is the safe default — it only enables the at-rule whitelist and a couple of CSS-level rules, no runtime Tailwind validation.
|
|
172
|
+
|
|
173
|
+
If you want validation but hit false positives, drop the offending rule:
|
|
174
|
+
|
|
175
|
+
```js
|
|
176
|
+
defineConfig({
|
|
177
|
+
tailwind: 'recommended',
|
|
178
|
+
rules: {
|
|
179
|
+
'tailwindcss/no-invalid-apply': null,
|
|
180
|
+
'tailwindcss/no-invalid-theme-function': null,
|
|
181
|
+
},
|
|
182
|
+
})
|
|
183
|
+
```
|
|
184
|
+
:::
|
|
185
|
+
|
|
186
|
+
The plugin supports both Tailwind v3 and v4.
|
|
187
|
+
|
|
188
|
+
## Property ordering
|
|
189
|
+
|
|
190
|
+
| Value | Behavior |
|
|
191
|
+
| --- | --- |
|
|
192
|
+
| `'recess'` *(default)* | Extends `stylelint-config-recess-order`. Pragmatic, widely adopted, groups related properties. |
|
|
193
|
+
| `'alphabetical'` | Loads `stylelint-order` and enables `order/properties-alphabetical-order`. Strict A→Z. |
|
|
194
|
+
| `false` | No ordering rules. |
|
|
195
|
+
|
|
196
|
+
To swap recess for another shareable order config (e.g. `stylelint-config-clean-order`), disable the built-in strategy and extend yours via the [`extends`](#layering-shareable-configs) option:
|
|
197
|
+
|
|
198
|
+
```js
|
|
199
|
+
defineConfig({
|
|
200
|
+
order: false,
|
|
201
|
+
extends: ['stylelint-config-clean-order'],
|
|
202
|
+
})
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
## Layering shareable configs
|
|
206
|
+
|
|
207
|
+
The `extends` option appends entries **after** the built-ins, so user configs win Stylelint's cascade:
|
|
208
|
+
|
|
209
|
+
```js
|
|
210
|
+
defineConfig({
|
|
211
|
+
extends: [
|
|
212
|
+
'stylelint-config-clean-order', // alternative property order
|
|
213
|
+
'@stylistic/stylelint-config', // restore stylistic rules retired from Stylelint core
|
|
214
|
+
],
|
|
215
|
+
})
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
Use this to layer additional shareable configs without rewriting the whole `defineConfig` output.
|
|
115
219
|
|
|
116
220
|
## What it includes
|
|
117
221
|
|
|
118
222
|
- **Stylelint Standard** — Idiomatic CSS rules from the official Stylelint config.
|
|
119
|
-
- **Property ordering** (`stylelint-config-recess-order`)
|
|
223
|
+
- **Property ordering** — Recess-based by default (`stylelint-config-recess-order`), alphabetical via `stylelint-order`, or off — see [Property ordering](#property-ordering).
|
|
224
|
+
- **Tailwind v4 support** (opt-in / auto-detected) — at-rule whitelist + `stylelint-plugin-tailwindcss` with three policy levels — see [Tailwind CSS v4](#tailwind-css-v4).
|
|
120
225
|
- **Vue / HTML support** (opt-in / auto-detected) — `<style>` and `<style scoped>` block parsing via `postcss-html`.
|
|
121
|
-
- **SCSS support** (opt-in / auto-detected) —
|
|
122
|
-
- **Logical properties** — RTL-friendly authoring
|
|
226
|
+
- **SCSS support** (opt-in / auto-detected) — `stylelint-config-standard-scss` + native SCSS at-rule whitelist.
|
|
227
|
+
- **Logical properties** — RTL-friendly authoring via `stylelint-use-logical-spec`.
|
|
123
228
|
- **BEM-friendly class patterns** — disables `selector-class-pattern` and `no-descending-specificity` so `m-btn__icon`, `m-btn--ghost` and `:deep(...)` selectors flow naturally.
|
|
229
|
+
- **Layering** — `extends` option to compose additional shareable configs on top of the resolved output.
|
|
124
230
|
|
|
125
231
|
## Advanced
|
|
126
232
|
|
|
@@ -134,6 +240,9 @@ import {
|
|
|
134
240
|
scssRules,
|
|
135
241
|
TAILWIND_AT_RULES,
|
|
136
242
|
tailwindAtRuleNoUnknown,
|
|
243
|
+
tailwindPluginMinimal,
|
|
244
|
+
tailwindPluginRecommended,
|
|
245
|
+
tailwindPluginStrict,
|
|
137
246
|
tailwindRules,
|
|
138
247
|
} from '@maz-ui/stylelint-config'
|
|
139
248
|
|
|
@@ -142,10 +251,13 @@ export default {
|
|
|
142
251
|
...baseRules,
|
|
143
252
|
...tailwindRules,
|
|
144
253
|
...tailwindAtRuleNoUnknown,
|
|
254
|
+
...tailwindPluginMinimal,
|
|
145
255
|
},
|
|
146
256
|
}
|
|
147
257
|
```
|
|
148
258
|
|
|
259
|
+
Each `tailwindPlugin*` constant is the rule object for the corresponding policy level — useful when you compose Stylelint configs by hand instead of going through `defineConfig`.
|
|
260
|
+
|
|
149
261
|
## Migrating from a hand-written `.stylelintrc`
|
|
150
262
|
|
|
151
263
|
If you used the historical maz-ui Stylelint setup, the migration boils down to:
|
|
@@ -177,7 +289,7 @@ If you used the historical maz-ui Stylelint setup, the migration boils down to:
|
|
|
177
289
|
+export default defineConfig({
|
|
178
290
|
+ vue: true,
|
|
179
291
|
+ scss: true,
|
|
180
|
-
+ tailwind: true,
|
|
292
|
+
+ tailwind: true, // 'minimal' | 'recommended' | 'strict' | false also accepted
|
|
181
293
|
+ logical: true,
|
|
182
294
|
+})
|
|
183
295
|
```
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maz-ui/mcp",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "5.0.0-beta.
|
|
4
|
+
"version": "5.0.0-beta.2",
|
|
5
5
|
"description": "Maz-UI ModelContextProtocol Client",
|
|
6
6
|
"author": "Louis Mazel <me@loicmazuel.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
],
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
45
|
-
"@maz-ui/
|
|
46
|
-
"@maz-ui/
|
|
45
|
+
"@maz-ui/node": "5.0.0-beta.2",
|
|
46
|
+
"@maz-ui/utils": "5.0.0-beta.2"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@modelcontextprotocol/inspector": "^0.21.2",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"ts-node-maintained": "^10.9.5",
|
|
53
53
|
"tsx": "^4.21.0",
|
|
54
54
|
"unbuild": "^3.6.1",
|
|
55
|
-
"@maz-ui/eslint-config": "5.0.0-beta.
|
|
55
|
+
"@maz-ui/eslint-config": "5.0.0-beta.2"
|
|
56
56
|
},
|
|
57
57
|
"lint-staged": {
|
|
58
58
|
"*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
|