Support to integrate PostCSS along with Prettier

[akhilpulikkal]

Environments:

• Prettier Version: 2.5.1
• Running Prettier via: API
• Runtime: Node.js v14, Chrome v83, etc
• Operating System: Windows
• Prettier plugins (if any): e.g. postcss

Steps to reproduce:

See I am using prettier to parse a code from an editor its working for me when using JSX syntax on babel parsing but i am not able to do the same in case of CSS along with PostCss

Please find my below peace of code. conditions are working fine. nothing on it. only the parser is not working fine. correct me if i need to add or change the code.

const formatted = prettier.format(
activeCode.code,
sandpack.activeFile.endsWith(".css")
? { parser: "css", plugins: [postcss] }
: {
parser: "babel",
plugins: [parserBabel],
bracketSpacing: false,
bracketSameLine: true,
}
);

Expected behavior:
It should be Formatted

Actual behavior:
Not formatting css.

[akhilpulikkal]

Anyone please help me?? kindly share some code to implement this or some reference link or even just correct the given code also would help me.

[akhilpulikkal]

Hey I fixed this issue. its working for me now. thanks All

[kachkaev]

👍 Feel free to share your solution here to help others. You might even find yourself searching for the same problem after a while – that happened to me a couple o times! 😄

[akhilpulikkal]

sure, @kachkaev ,

below is my code. hope this will help others.

import parserPostcss from "prettier/parser-postcss";

        const formatted = prettier.format(
          activeCode.code,
          sandpack.activeFile.endsWith(".css")
            ? { parser: "css", plugins: [parserPostcss] }
            : {
                parser: "babel",
                plugins: [parserBabel],
                bracketSpacing: false,
                bracketSameLine: true,
              }
        );
        setPrettierCode(formatted);