Horrid formatting when using PostCSS imports with Prettier

[deadcoder0904]

I have some custom styles so I separated them by files.

My index.css looks like:

@import url('./base.css') @import url('./grid.css') /* Start purging... */ @tailwind components;
/* Stop purging. */

/* Write your own custom component styles here */
.btn-blue {
	@apply px-4 py-2 font-bold text-white bg-blue-500 rounded;
}

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

/* Your own custom utilities */

Note the horrid formatting above. I have installed related extensions but it always gives horrid formatting. Is there anyway to get it nicely formatted on Save? I'm using VSCode :)

[simonswiss]

Hello!

You can install a PostCSS language extension to vscode and set your index.css file to use the PostCSS language (in the bottom right, or via command palette). This should bring back some sanity to your formatting 👍

[deadcoder0904]

Welp, I already have both set.

PostCSS Language Support Extension installed:

PostCSS Language set for .css files:

[deadcoder0904]

This is my OUTPUT tab after using Prettier. Even my config is pretty simple:

["INFO" - 10:36:06 AM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 10:36:06 AM] Using config file at '~/akshaykadam.com/prettier.config.js'
["INFO" - 10:36:06 AM] Prettier Options:
{
  "filepath": "~/akshaykadam.com/src/styles/index.css",
  "parser": "css",
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": true,
  "trailingComma": "es5",
  "bracketSpacing": true
}

[deadcoder0904]

Solved it 🤦‍♂️

I forgot to use ; in CSS as I don't use them in JS 😂

Horrible, lost so much time on this 🤣

[simonswiss]

Argh - makes sense now that you say this and I re-look at your code 😅

Glad you got it sorted and sorry I didn't pick up on that!