search

postcss / autoprefixer

Parse CSS and add vendor prefixes to rules by Can I Use
https://twitter.com/autoprefixer
MIT License
21.68k stars 1.26k forks source link

Ignore unknown words #1524

Closed melaniejaane closed 1 hour ago

melaniejaane commented 3 hours ago

I’m just using the browser version, is there a way to force it to ignore CssSyntaxError: Unknown Words and just add vendor prefixes where it knows it can?

ai commented 2 hours ago

Can you show the full error message?

Unknown word means syntax error, like missed ; or }.

melaniejaane commented 1 hour ago

It’s having issues with double slash comments formatting:


CssSyntaxError: <css input>:146:46: Unknown word

  144 | 
  145 | 
> 146 |  //max-height: calc(100% - 100px)!important; //Adjust 40px to your desired maximum margin 
      |                                              ^
  147 | }
  148 |
ai commented 1 hour ago

In CSS you can use only /**/ for comments. // is not supported.

If it is SCSS, you can use postcss-scss parser to parse it. Just replace parser in PostCSS config.

melaniejaane commented 1 hour ago

Is there an online version of postcss-scss that doesn’t require download? Similar to Autoprefixer CSS online. Thanks

ai commented 1 hour ago

Sorry, no. I recommend convert comments to CSS format /**/ since they are safe.

melaniejaane commented 1 hour ago

If I want to try postcss-scss how can I install and set it up on a Mac?

The steps just say “install npm --save install postcss postcss-scss“ but it doesn’t specify where or how to do that.

Sorry I’m pretty new to GitHub and haven’t set something like this up before.

ai commented 49 minutes ago

You need to install postcss-cli and create postcss.config.js like:

module.exports = {
  parser: 'postcss-scss',
  plugins: {
    'autoprefixer': {}
  }
}
melaniejaane commented 38 minutes ago

I’m so sorry, clearly dense, but how do you actually do this, or where? None of these things have download links so I assume I need to past the code somewhere to install? What sort of applications do I need to use for this? Sorry and thank you again!

ai commented 32 minutes ago

I’m so sorry, clearly dense, but how do you actually do this, or where?

I use Autoprefixer and PostCSS built-in in bundler like Vite which I use to devel websites (it is CLI tool which I install by npm and run by running npm build in terminal).

It is the best way to use Autoprefixer since everything will work auto-magically (you change CSS file and browsers automatically hot-reload it). But it needs time to get used to.