stencil-community / stencil-postcss

Autoprefixer plugin for Stencil
https://www.npmjs.com/package/@stencil-community/postcss
Other
30 stars 24 forks source link

Using postcss + autoprefixer alongside sass plugin #17

Open jcfranco opened 5 years ago

jcfranco commented 5 years ago

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 commented 5 years ago

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

jcfranco commented 5 years ago

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

Jefiozie commented 5 years ago

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 commented 5 years ago

These are our latest stencil deps: @stencil/core@1.1.3, @stencil/postcss@1.0.1, and @stencil/sass@1.0.1. 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/postcss@0.1.0, and @stencil/sass@0.2.3. Probably something wrong with my setup.

splitinfinities commented 3 years ago

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 commented 2 years ago

@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.