All files / packages/sds-subsystems/scripts/plugins postcss-deprecated-selector.js

100% Statements 25/25
100% Branches 11/11
100% Functions 5/5
100% Lines 25/25

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70    1x 1x                                   6x 6x 46x 2x     4x     7x   6x     6x     7x 1x   6x     1x   5x 5x 7x 6x 6x 6x 6x 6x   1x               1x 1x          
const processed = Symbol('processed');
 
let plugin = (opts = {}) => {
  const regex = /(?<!_)_(?!_)/g;
 
  // Below exceptions are wrongly generated class exception, we will identify those and replace with correct ones
  const exceptions = {
    // only the first underscore should be replaced
    '.slds-checkbox--faux--container': '.slds-checkbox--faux_container',
    '.slds-table--edit--container': '.slds-table--edit_container',
    '.slds-table--edit--container-message': '.slds-table--edit_container-message',
    '.slds-table--header-fixed--container': '.slds-table--header-fixed_container',
    // only the second underscore should be replaced
    '.slds-icon--container--circle': '.slds-icon_container--circle',
    '.slds-truncate--container--25': '.slds-truncate_container--25',
    '.slds-truncate--container--50': '.slds-truncate_container--50',
    '.slds-truncate--container--75': '.slds-truncate_container--75',
    '.slds-truncate--container--33': '.slds-truncate_container--33',
    '.slds-truncate--container--66': '.slds-truncate_container--66',
  };
 
  const replaceExceptionClassInSelector = (selector) => {
    for (let exceptionClass in exceptions) {
      if (selector.includes(exceptionClass)) {
        return selector.replace(exceptionClass, exceptions[exceptionClass]);
      }
    }
    return selector;
  };
 
  function skipRewrite(rule) {
    return rule[processed] || !rule.selector.includes('_');
  }
 
  return {
    postcssPlugin: 'postcss-deprecated-selector',
    prepare(result) {
      return {
        Rule(rule) {
          // Skip processing, this is a very lazy check
          if (skipRewrite(rule)) {
            return;
          }
          if (rule.selector.match(/:not\([^\)]+,[^\)]+\)/) !== null) {
            // breaks element:not(.class, .class) due to the comma
            // just do nothing for now for slds-text-link_reset
            rule[processed] = true;
          } else {
            const explode = rule.selector.split(',');
            explode.forEach((selector, index) => {
              if (selector.match(regex)) {
                const generatedSelector = selector.replace(regex, '--');
                const replacedExceptionSelector = replaceExceptionClassInSelector(generatedSelector);
                explode[index] = `${explode[index]},${replacedExceptionSelector}`;
                rule.selector = explode.join(',');
                return rule.selector;
              }
              rule[processed] = true;
            });
          }
        },
      };
    },
  };
};
 
plugin.postcss = true;
 
export default plugin;