stylelint-no-default-viewport

Summary

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).

/* 🆖 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.

Usage

/** @type {import('stylelint').Config} */
export default {
  plugins: ['stylelint-no-default-viewport'],
  rules: {
    'plugin/no-default-viewport': [
      true,
      {
        severity: 'warning',
      },
    ],
  },
};