Unable to get postcss plugins working

[janniks]

I'm trying to get postcss working, but it seems the examples and docs aren't working for me.

Project to reproduce here: hirosystems/connect#346

yarn
npx lerna run build --scope @stacks/connect-ui

This builds the stencil component in the monorepo. Inspecting the file at packages/connect-ui/dist/cjs/connect-modal.cjs.entry.js shows the modalCss is NOT renamed. Anything I'm missing?

Also, removing tailwindHMR removes CSS completely -- not sure if that is intended 🤔

Thanks for the project, thanks for the help 🙏

[janniks]

I've tried different postcss strategies (as config file or config object) -- No change
I've tried with and without HMR -- CSS only works with HMR (but doesn't rename)

[Poimen]

Hi @janniks

It's a bit of deep PR you've linked there and difficult to know what the end result you're expecting here.

I'll try pull your branch this evening and give it a try. Could you detail exactly what you are expecting to happen? (like "I have class someclass, I expect this to be renamed to moz-someclass")

Off the top of my head, what you could try is move the configuration out of the default options and use the tailwind({}) to set the postcss options.

[Poimen]

Hi @janniks

I couldn't get your repo to run properly, some sort of missing deps. But I did manage to get lerna to build the component.

From what I can tell, it is working as expected.

The simplest way of testing this is to set the configuration to remove autoprefixer from the configuration:

setPluginConfigurationDefaults({
  ...PluginOpts.DEFAULT,
  enableDebug: true,
  stripComments: true,
  useAutoPrefixer: false,  // <-- important, disable the internal autoprefixer
  tailwindConf,
  postcss: {
    plugins: [
      tailwindcss(),
      // autoprefixer(),   // <-- no autoprefixer here
    ]
  }
});

Add the following class to the component and the css:

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

Then build the site - stash the result.

Add autoprefixer back into the mix:

setPluginConfigurationDefaults({
  ...PluginOpts.DEFAULT,
  enableDebug: true,
  stripComments: true,
  useAutoPrefixer: false,  // <--- important, still make the internal autoprefixer disabled
  tailwindConf,
  postcss: {
    plugins: [
      tailwindcss(),
      autoprefixer(),
    ]
  }
});

Build the site again, and compare the outputs.

The .example should show differences with the prefixing.

In my setup, without autoprefixer:

.example {
    background: linear-gradient(180deg, #fff, #000);
    display: grid;
    transition: all .5s;
    user-select: none
}

(as expected, no prefixing) - with autoprefixer:

.example {
    background: linear-gradient(180deg, #fff, #000);
    display: grid;
    transition: all .5s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

(as epected, prefixed user-select).

I would conclude that the postcss configuration is working as expected.

If you could give more details on what you are expecting to happen.

If you are expecting that modalCss is going to be renamed, then this would not happen because of the way StencilJS composes the data - modalCss is the object for creating the web component.

As example:

const modalCss = " ... some log css string ...";

const Modal = class {} // Actual component class for the web component

Modal.style = modalCss;  // <-- this style is used to component style block as memory serves

Hence, the modalCss cannot be a shorter name, as this is part of the framework. Is this what you were expecting?

[janniks]

Thanks so much for investigating. 🙏🏻

I was mainly looking at the content of the modalCss string.

I'll try again. I'll set up a codesandbox to reproduce, if possible.