stylelint-display-multi-keyword

Summary

The display keyword has multi keyword values defined and good browser support. (Can I use...)

This function prohibits the use of conventional values (short values) and forces the use of multi-keyword values (full values).

/* 🆖 Short value are not available */
.any-selector {
  display: block;
}

/* 🆗 Full value are available */
.any-selector {
  display: block flow;
}

/* 🆗 Short value are available if a full value does not exist */
.any-selector {
  display: contents;
}

See summary table in CSS Display Module Level 3 for a list of all keywords.

Usage

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