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

   1 /* eslint-env es6 */
   2
   3 // suggestedClassName is optional
   4 const deprecatedClassNames = [
   5     {
   6         deprecatedClassName: 'mauto',
   7         suggestedClassName: 'm-auto',
   8     },
   9     {
  10         deprecatedClassName: 'center',
  11         suggestedClassName: 'mx-auto',
  12     },
  13     {
  14         deprecatedClassName: 'mxauto',
  15         suggestedClassName: 'mx-auto',
  16     },
  17     {
  18         deprecatedClassName: 'myauto',
  19         suggestedClassName: 'my-auto',
  20     },
  21     {
  22         deprecatedClassName: 'mtauto',
  23         suggestedClassName: 'mt-auto',
  24     },
  25     {
  26         deprecatedClassName: 'mrauto',
  27         suggestedClassName: 'mr-auto',
  28     },
  29     {
  30         deprecatedClassName: 'mbauto',
  31         suggestedClassName: 'mb-auto',
  32     },
  33     {
  34         deprecatedClassName: 'mlauto',
  35         suggestedClassName: 'ml-auto',
  36     },
  37     {
  38         deprecatedClassName: 'wauto',
  39         suggestedClassName: 'w-auto',
  40     },
  41     {
  42         deprecatedClassName: 'hauto',
  43         suggestedClassName: 'h-auto',
  44     },
  45     {
  46         deprecatedClassName: 'h0',
  47         suggestedClassName: 'h-0',
  48     },
  49     {
  50         deprecatedClassName: 'h100',
  51         suggestedClassName: 'h-full',
  52     },
  53     {
  54         deprecatedClassName: 'opacity-on-hover',
  55         suggestedClassName: 'group-hover:opacity-100',
  56     },
  57     {
  58         deprecatedClassName: 'opacity-on-hover-container',
  59         suggestedClassName: 'group-hover-opacity-container',
  60     },
  61     {
  62         deprecatedClassName: 'text-underline-on-hover',
  63         suggestedClassName: 'hover:text-underline',
  64     },
  65     {
  66         deprecatedClassName: 'opacity-on-focus',
  67         suggestedClassName: 'opacity-0 focus:opacity-100',
  68     },
  69     {
  70         deprecatedClassName: 'hide-on-hover',
  71         suggestedClassName: 'group-hover:hidden',
  72     },
  73     {
  74         deprecatedClassName: 'hide-on-hover-container',
  75         suggestedClassName: 'group-hover-hide-container',
  76     },
  77     {
  78         deprecatedClassName: 'on-hover-opacity-100',
  79         suggestedClassName: '',
  80     },
  81     {
  82         deprecatedClassName: 'flex-justify-start',
  83         suggestedClassName: 'justify-start',
  84     },
  85     {
  86         deprecatedClassName: 'flex-justify-center',
  87         suggestedClassName: 'justify-center',
  88     },
  89     {
  90         deprecatedClassName: 'flex-justify-end',
  91         suggestedClassName: 'justify-end',
  92     },
  93     {
  94         deprecatedClassName: 'flex-justify-space-between',
  95         suggestedClassName: 'justify-space-between',
  96     },
  97     {
  98         deprecatedClassName: 'flex-justify-space-around',
  99         suggestedClassName: 'justify-space-around',
 100     },
 101     {
 102         deprecatedClassName: 'flex-justify-space-evenly',
 103         suggestedClassName: 'justify-space-evenly',
 104     },
 105     {
 106         deprecatedClassName: 'flex-align-items-start',
 107         suggestedClassName: 'items-start',
 108     },
 109     {
 110         deprecatedClassName: 'flex-align-items-center',
 111         suggestedClassName: 'items-center',
 112     },
 113     {
 114         deprecatedClassName: 'flex-align-items-end',
 115         suggestedClassName: 'items-end',
 116     },
 117     {
 118         deprecatedClassName: 'flex-align-items-baseline',
 119         suggestedClassName: 'items-baseline',
 120     },
 121     {
 122         deprecatedClassName: 'flex-align-items-stretch',
 123         suggestedClassName: 'items-stretch',
 124     },
 125     {
 126         deprecatedClassName: 'flex-align-items-inherit',
 127         suggestedClassName: 'items-inherit',
 128     },
 129     {
 130         deprecatedClassName: 'flex-align-self-start',
 131         suggestedClassName: 'self-start',
 132     },
 133     {
 134         deprecatedClassName: 'flex-align-self-center',
 135         suggestedClassName: 'self-center',
 136     },
 137     {
 138         deprecatedClassName: 'flex-align-self-end',
 139         suggestedClassName: 'self-end',
 140     },
 141     {
 142         deprecatedClassName: 'flex-align-self-baseline',
 143         suggestedClassName: 'self-baseline',
 144     },
 145     {
 146         deprecatedClassName: 'flex-align-self-stretch',
 147         suggestedClassName: 'self-stretch',
 148     },
 149     {
 150         deprecatedClassName: 'flex-align-self-inherit',
 151         suggestedClassName: 'self-inherit',
 152     },
 153     {
 154         deprecatedClassName: 'flex-item-fluid-auto',
 155         suggestedClassName: 'flex-auto',
 156     },
 157     {
 158         deprecatedClassName: 'flex-item-fluid',
 159         suggestedClassName: 'flex-1',
 160     },
 161     {
 162         deprecatedClassName: 'flex-item-noflex',
 163         suggestedClassName: 'flex-none',
 164     },
 165     {
 166         deprecatedClassName: 'flex-item-grow',
 167         suggestedClassName: 'grow',
 168     },
 169     {
 170         deprecatedClassName: 'flex-item-grow-2',
 171         suggestedClassName: 'grow-2',
 172     },
 173     {
 174         deprecatedClassName: 'flex-item-nogrow',
 175         suggestedClassName: 'grow-0',
 176     },
 177     {
 178         deprecatedClassName: 'flex-item-grow-custom',
 179         suggestedClassName: 'grow-custom',
 180     },
 181     {
 182         deprecatedClassName: 'flex-item-shrink',
 183         suggestedClassName: 'shrink',
 184     },
 185     {
 186         deprecatedClassName: 'flex-item-noshrink',
 187         suggestedClassName: 'shrink-0',
 188     },
 189     {
 190         deprecatedClassName: 'flex-flex-children',
 191         suggestedClassName: 'flex and *:flex',
 192     },
 193     {
 194         deprecatedClassName: 'flex-items-center',
 195         suggestedClassName: '*:items-center',
 196     },
 197     {
 198         deprecatedClassName: 'inline-flex-vcenter',
 199         suggestedClassName: 'inline-flex and *:self-center',
 200     },
 201     {
 202         deprecatedClassName: 'flex-item-centered-vert',
 203         suggestedClassName: 'self-center and my-auto',
 204     },
 205     {
 206         deprecatedClassName: 'flex-no-min-children',
 207         suggestedClassName: 'flex and *:min-size-auto',
 208     },
 209     {
 210         deprecatedClassName: 'hidden-empty',
 211         suggestedClassName: 'empty:hidden',
 212     },
 213     {
 214         deprecatedClassName: 'scroll-if-needed',
 215         suggestedClassName: 'overflow-auto',
 216     },
 217     {
 218         deprecatedClassName: 'scroll-horizontal-if-needed',
 219         suggestedClassName: 'overflow-x-auto',
 220     },
 221     {
 222         deprecatedClassName: 'no-scroll',
 223         suggestedClassName: 'overflow-hidden',
 224     },
 225     {
 226         deprecatedClassName: 'ratio-container-square',
 227         suggestedClassName: 'ratio-square',
 228     },
 229     {
 230         deprecatedClassName: 'ratio-container-16-9',
 231         suggestedClassName: 'ratio-16/9',
 232     },
 233     {
 234         deprecatedClassName: 'ratio-container-5-1',
 235         suggestedClassName: 'ratio-5/1',
 236     },
 237     {
 238         deprecatedClassName: 'no-pointer-events',
 239         suggestedClassName: 'pointer-events-none',
 240     },
 241     {
 242         deprecatedClassName: 'increase-click-surface',
 243         suggestedClassName: 'expand-click-area',
 244     },
 245 ];
 246
 247 module.exports = {
 248     meta: {
 249         type: 'suggestion',
 250         docs: {
 251             description: '',
 252             url: 'https://design-system.protontech.ch',
 253         },
 254     },
 255     create: (context) => {
 256         return {
 257             Literal(node) {
 258                 const { value } = node;
 259                 if (!value || !value.split) {
 260                     return;
 261                 }
 262
 263                 const classes = new Set(value.split(' '));
 264
 265                 deprecatedClassNames.forEach(({ deprecatedClassName, suggestedClassName }) => {
 266                     if (!classes.has(deprecatedClassName)) {
 267                         return;
 268                     }
 269
 270                     const messageDeprecated = `"${deprecatedClassName}" has been deprecated.`;
 271                     const messageSuggested = suggestedClassName && `Please use "${suggestedClassName}" instead.`;
 272                     const message = `${messageDeprecated} ${messageSuggested}`;
 273
 274                     context.report({
 275                         node,
 276                         message,
 277                     });
 278                 });
 279             },
 280         };
 281     },
 282 };