フロントエンド定例 2022/6/3

// eslint-disable-next-line @typescript-eslint/no-var-requires
const stylelint = require('stylelint');
// eslint-disable-next-line @typescript-eslint/no-var-requires
/**
 * sassで管理しているカラーコードをJSON管理したファイル
 * @var {
 *   '#fff': 'colorWhite',
 *   ...
 * } colorsJSON
 */
const colorsJSON = require('@lancers/design_guideline/scripts/colors.json');

const ruleName = '@lancers/design-guideline';
const messages = stylelint.utils.ruleMessages(ruleName, {
  expected: 'Expected...',
});

module.exports = stylelint.createPlugin(ruleName, function () {
  return function (root, result) {
    const validOptions = stylelint.utils.validateOptions(result, ruleName, {});

    root.walkDecls((decl) => {
      const matched = decl.value.match(/#.*/);
      if (!matched) {
        return;
      }

      const definedColor = colorsJSON[decl.value.toLowerCase()];

      if (definedColor) {
        stylelint.utils.report({
          ruleName,
          result,
          message: `${messages.expected} ${decl.value} -> ${definedColor} [see colors.scss]`,
          node: decl,
        });
      }
    });

    if (!validOptions) {
      return;
    }
  };
});

module.exports.ruleName = ruleName;
module.exports.messages = messages;

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { ruleName } = require('.');

// eslint-disable-next-line no-undef
testRule({
  plugins: ['./index.js'],
  ruleName,
  config: true,
  fix: false,

  accept: [
    {
      code: `.class {
        margin: 0;
        color: $hoge;
      }`,
    },
  ],

  reject: [
    {
      code: `.class {
        margin: 0;
        color: #fff;
      }`,
      message:
        'Expected... (@lancers/design-guideline) #fff -> colorWhite [see colors.scss]',
    },
    {
      code: `.class {
        margin: 0;
        color: #FFF;
      }`,
      message:
        'Expected... (@lancers/design-guideline) #FFF -> colorWhite [see colors.scss]',
    },
  ],
});