사용자 지정 PostCSS 플러그인

사용자 지정 plugin을 작성하는 이유

Plugin 구조

// my-plugin.js
const plugin = () => {
  return {
    postcssPlugin: 'my-plugin',
    Declaration(decl) {
      // Called for every declaration node
    },
    Rule(rule) {
      // Called for every rule node
    }
  };
};
plugin.postcss = true;
module.exports = plugin;

선언 순회

const plugin = () => ({
  postcssPlugin: 'rem-converter',
  Declaration(decl) {
    if (decl.prop === 'font-size' && decl.value.endsWith('px')) {
      const px = parseFloat(decl.value);
      decl.value = `${px / 16}rem`;
    }
  }
});

새 규칙 추가

Rule(rule) {
  if (rule.selector.includes('.btn')) {
    const focusRule = rule.cloneAfter();
    focusRule.selector = rule.selector + ':focus';
  }
}

선언 제거

Declaration(decl) {
  if (decl.prop === 'color' && decl.value === 'red') {
    decl.remove();
  }
}

PostCSS 도우미

비동기 Plugin

async Declaration(decl, helpers) {
  if (decl.prop === 'icon') {
    const svg = await readFile(`icons/${decl.value}.svg`);
    decl.replaceWith(helpers.decl({ prop: 'background', value: `url(${svg})` }));
  }
}

PostCSS Plugin 테스트

const postcss = require('postcss');
const plugin = require('./my-plugin');

test('converts px to rem', () => {
  const input = 'p { font-size: 16px; }';
  const result = postcss([plugin()]).process(input, { from: undefined });
  expect(result.css).toBe('p { font-size: 1rem; }');
});

Plugin 옵션

const plugin = (opts = {}) => ({
  postcssPlugin: 'configurable',
  Declaration(decl) {
    if (decl.prop === opts.property) {
      decl.value = opts.replacement;
    }
  }
});

PostCSS Plugin 게시

빠른 확인

복습