Unexpected character '@'

[tvvignesh]

Hi. I just tried this plugin to use postcss with lit but encountered this error where @ charset symbols are not supported (or am I doing anything wrong?)

Error:

The relevant css

@charset "UTF-8";
.mdc-touch-target-wrapper {
  display: inline;
}

CC: @umbopepato

[umbopepato]

Hi @tvvignesh, thanks for reporting this! What version of rollup-plugin-postcss-lit are you using? Also, can you show your rollup.config.js and a code extract to show how you're importing styles in components?

[tvvignesh]

@umbopepato Hi. Thanks for your reply.

I am using v1.0.0 which is the latest as I see from the repo.

My rollup.config.js is huge. So, adding all of that here won't be helpful. This is the part where I am importing postCSS and postCSSLit (No configs. I just import it and add it to the build)

This is how I import styles. A normal CSS module style import

You can get the CSS if you install this package: https://www.npmjs.com/package/material-components-web or I have also added it here for your quick review: https://pastebin.com/gmGC6Rz8

Hope this clarifies.

[umbopepato]

Ok looks like the postcss plugin is not being picked up by Rollup correctly, how are you importing the plugins in the config file?

I can confirm that the combination rollup@2.28.1 + rollup-plugin-postcss@3.1.8 + rollup-plugin-postcss-lit@1.0.0 + autoprefixer@9.8.6 works correctly on my side with that particular stylesheet.

[tvvignesh]

@umbopepato OOPS! Very sorry. It was a mistake from my end. I did

import postcss from 'postcss'; in a hurry instead of

import postcss from 'rollup-plugin-postcss';

Changed it now and it works great. Had to downgrade autoprefixer to 9.8.6 as you mentioned to support it though.

Thanks again and sorry for the trouble. Closing this.

[umbopepato]

No worries, glad I could help 😊 P.S. If you don't need the styles to also be applied globally consider setting inject: false in postcss's options