Disallow default viewport-percentage units
npm install stylelint-no-default-viewport
Disallow default viewport-percentage units (vw, vh, vi, vb, vmin, vmax) and use small viewport-percentage units (e.g. svi), large viewport-percentage units (e.g. lvi) or dynamic viewport-percentage units (e.g. dvi).
``css
/ 🆖 default viewport-percentage units /
.any-selector {
inline-size: 10vi;
block-size: 20vb;
}
/ 🆗 large viewport-percentage units /
.any-selector {
inline-size: 10lvi;
block-size: 20lvb;
}
`
See Viewport-percentage Lengths in CSS Values and Units Module Level 4 for all units.
`javascript``
/* @type {import('stylelint').Config} /
export default {
plugins: ['stylelint-no-default-viewport'],
rules: {
'plugin/no-default-viewport': [
true,
{
severity: 'warning',
},
],
},
};