Support postcss transformer

[mizdra]

• Implement the postcss transformer for users writing extended CSS in postcss.
• .postcssrc.js is loaded using postcss-load-config.
• We also implement the --postcss-config option so that we can pass a configuration file of any name.

[mizdra]

Implement here.

https://github.com/mizdra/checkable-css-modules/blob/96d3cdd161517b5fdb83ceee09b7bf1afa5c9bff/src/transformer/index.ts#L41

[mizdra]

I could not figure out how to apply postcssTransformer.

Perhaps there are two ways.

1. Use postcssTransformer only for files with .css extension

Warning Use cases that transpile with less and then transpile with postcss are not supported.

export const createDefaultTransformer: () => Transformer = () => async (source, options) => {
  const scssTransformer = createScssTransformer();
  const lessTransformer = createLessTransformer();
  const postcssTransformer = createPostcssTransformer();
  if (options.from.endsWith('.scss')) {
    return scssTransformer(source, options);
  } else if (options.from.endsWith('.less')) {
    return lessTransformer(source, options);
  } else if (options.from.endsWith('.css')) {
    return postcssTransformer(source, options);
  }
  return false;
};

2. Use postcssTransformer for all file extensions

Warning postcssTransformer must accept string (source) and TransformResult types. The implementation of this interface is somewhat complex.

export const createDefaultTransformer: () => Transformer = () => async (source, options) => {
  const scssTransformer = createScssTransformer();
  const lessTransformer = createLessTransformer();
  const postcssTransformer = createPostcssTransformer();
  if (options.from.endsWith('.scss')) {
    return postcssTransformer(scssTransformer(source, options), options);
  } else if (options.from.endsWith('.less')) {
    return postcssTransformer(lessTransformer(source, options), options);
  } else (options.from.endsWith('.css')) {
    return postcssTransformer(source, options);
  }
  return false;
};

---

I think the second method is the better one. However, I don't have much experience with postcss and am not sure. I would like input from users who have a lot of experience with postcss.