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

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