Parcel: @parcel/transformer-postcss doesn't do the transpilation?

28 Views Asked by At

In a .css file I import, I have

  1. some custom media queries and
  2. a weird css property syntax, where the property is preceded with a star, like this: *zoom: 1 (I can't avoid using this syntax because it's in turretcss dist file)

My Parcel version: 2.11.0.

My .postcssrc is this:

{
  "plugins": {
    "postcss-preset-env": {
      "stage": 2,
      "features": {
        "custom-media-queries": true
      }
    },
    "postcss-remove-declaration": {
      "remove": {
        ".clearfix": "*zoom"
      }
    }
  }
}
  1. postcss-preset-env's custom-media-queries feature should remove the custom media queries from 1
  2. postcss-remove-declaration should remove the property with the weird syntax from 2

My .parcelrc is this:

{
    "extends": "@parcel/config-default",
    "transformers": {
        "*.{css,pcss}": ["@parcel/transformer-postcss", "@parcel/transformer-css"],
    }
}

which really duplicates what's in @parcel/config-default anyway.

I suppose, this setup should mean that @parcel/transformer-postcss is run before @parcel/transformer-css, transforming the .css by removing 1 and 2 from above and then passing the transformed css to @parcel/transformer-css.

However, what I get in practice is these warnings from @parcel/transformer-css:

parcel warnings

and this error from it:

parcel error

Which must mean that none of the PostCSS stuff has been executed.

I know that in Parcel the way you remove custom media queries is by configuring @parcel/transformer-css in package.json. But I use PostCSS here just to demonstrate the behavior.

Am I getting something wrong in my description of how the transformers should work? How do I get this to work properly?

Thanks in advance!

0

There are 0 best solutions below