How to access postcss filter in JSX component?

[shishkin]

Suppose I have a JSX (or preact JSX) component:

export const css = `
p.test {
  color: red;
}
`;

export default ({}, {postcss}) => (<p className="test">Hello</p>);

How can I call postcss filter on the CSS? I understand that postcss is only available on the default export, not the css export.

[oscarotero]

Do you mean Lume components? (components stored in the _components folder). If so, the postcss plugin already process the css code because Lume create a css file with the CSS code generates by the used components (by default /components.css), and this file is processed as any other CSS file.

[shishkin]

Yes, that's perfect. And does the same apply for esbuild and js export of a lume component?

[oscarotero]

Yes. Lume first creates the files with the css and javascript code exported by the components and then run the processors (postcss, esbuild, lightningcss, etc).