packages/eslint-plugin-custom-rules/deprecate-responsive-utility-classes.js

   1 /* eslint-env es6 */
   2 const deprecatedClasses = [
   3     {
   4         pattern: /\b(on|no|auto)-(tiny-mobile|mobile|tablet|desktop)(-)?\b/,
   5         getMessage: (match) =>
   6             `"${match}" is deprecated. Please migrate to the new responsive utilities https://design-system.protontech.ch/?path=/docs/css-utilities-responsive--responsive`,
   7     },
   8 ];
   9
  10 module.exports = {
  11     meta: {
  12         type: 'suggestion',
  13         docs: {
  14             description:
  15                 'The old responsive system classes are deprecated, please use the new mobile-first responsive system.',
  16             url: 'https://design-system.protontech.ch/?path=/docs/css-utilities-responsive--responsive',
  17         },
  18     },
  19     create: (context) => {
  20         return {
  21             Literal(node) {
  22                 const { value } = node;
  23                 if (!value || !value.split) {
  24                     return;
  25                 }
  26
  27                 const classes = new Set(value.split(' '));
  28                 classes.forEach((className) => {
  29                     deprecatedClasses.forEach(({ pattern, getMessage }) => {
  30                         const match = pattern.exec(className);
  31
  32                         if (match) {
  33                             const message = getMessage(match[0]);
  34
  35                             context.report({
  36                                 node,
  37                                 message,
  38                             });
  39                         }
  40                     });
  41                 });
  42             },
  43         };
  44     },
  45 };