Using postcss + autoprefixer alongside sass plugin

[jcfranco]

Maybe I'm missing something, but I don't notice any difference in output in a project that has both @stencil/sass and @stencil/postcss plugins.

Here's my config:

// stencil.config.ts

import { Config } from "@stencil/core";
import { postcss } from "@stencil/postcss";
import { sass } from "@stencil/sass";
import autoprefixer from "autoprefixer";

export const config: Config = {
  namespace: "repro",
  bundles: [
    {
      components: [
        // ...
      ]
    }
  ],
  outputTargets: [
    { type: "dist" },
    {
      type: "www",
      serviceWorker: null // disable service workers
    }
  ],
  globalStyle: "src/assets/styles/global.scss",
  plugins: [
    sass({
      injectGlobalPaths: ["src/assets/styles/global.scss"]
    }),

    (postcss as any)({
      plugins: [autoprefixer()]
    })
  ]
};

and my .browserslistrc looks like so:

# Browsers that we support
last 2 chrome versions
last 2 edge versions
last 2 ff versions
last 2 safari versions
last 2 ios versions
ie 11

I am not seeing any difference in the CSS that's inlined in the built components with and without PostCSS + Autoprefixer.

test class

  :host .test {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
  }

same output with and without PostCSS + Autoprefixer (formatted for readability)

  :host .test {
    display: grid;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
    background: linear-gradient(180deg, #fff, #000)
  }

If you use the test class in the Autoprefixer playground, and set the filter to last 2 chrome versions, last 2 edge versions, last 2 ff versions, last 2 safari versions, last 2 ios versions, ie 11, you get the following:

expected

  :host .test {
    display: -ms-grid;
    display: grid;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: linear-gradient(to bottom, white, black);
  }

[Jefiozie]

Maybe I'm missing some context here but did you expect to see different? 😄

[jcfranco]

Yes, I've updated the description with info on the expected result.

[Jefiozie]

Could you share the versions of @stencil for me? I'm trying to reproduce the issue but I don't have the problems you are facing. thanks 🙏🏻

[jcfranco]

These are our latest stencil deps: @stencil/[email protected], @stencil/[email protected], and @stencil/[email protected]. Now, there's only a minor difference in the generated CSS:

:host .test {
  /* missing -> display: -ms-grid; */
  display: grid;
  transition: all 0.5s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: linear-gradient(to bottom, white, black);
}

FWIW, I wasn't able to reproduce the original issue using our previous deps: @stencil/core@one, @stencil/[email protected], and @stencil/[email protected]. Probably something wrong with my setup.

[splitinfinities]

Hey there, thank you for the patience getting back to you. The new team is getting started and we're working through the backlog now. Can you help my out by creating a reproduction repo with the latest versions of @stencil/core, @stencil/postcss, and @stencil/sass?

[rschaufler]

@stencil/postcss seems to only transpile files that have the file extensions .css, .pcss, or .postcss as stated in the documentation.

So based on that, i guess you should only use @stencil/postcss OR @stencil/sass but not both. I however think it would be very beneficial to be able to use both in combination, since using postcss after a sass compilation is common practice.