PostCSS and node_modules

[csaunier]

Hello everybody 👋

I'm currently struggling to configure a repository with postCSS 🤯

I'm using the postcss-custom-media plugin, and it perfectly worked with styles inside my project.
But i have styles coming from node_modules repositories, and i can't manage to make postCSS process those styles.

I have create a minimal reproducible repository that you can find here : https://github.com/csaunier/postcss-nodemodules

---

What i have done :
Inside src/components/App/styles.css, i have those lines :

@custom-media --medium-viewport (min-width: 48rem);

.app {
  background: yellow;
}

@media (--medium-viewport) {
  .app {
    background: palevioletred;
  }
}

It behaved correctly 👍 , media query worked as expected : row change color at 48rem (768px)

---

To test what is not working, i add normalize.css dependency, and import it in the src/components/App/styles.css.
In normalize.css, inside the node_modules directory, i replace all file content by those lines :

body {
  background: lightblue;
}

@media (--medium-viewport) {
  .body {
    background: darkblue;
  }
}

The result is background having always the lightblue color, not changing with media queries.

---

---

I can't understand how to make PostCSS process also files insides node_modules.

I make this demo with postcss-custom-media, but i tried also with postcss-preset-env, and can't make any "features" worked with css inside node_modules.

I'm up to date with all dependencies.

So, here i am, asking for any kind of helps 🙂 🙏

[csaunier]

🤦‍♂️

Sorry, the only mistake on my previous post is that i targeted .body instead of body

---

Nevertheless, my issue what more complex than what i exposed. It imply a npm monorepos with two workspaces : ui-kit and website.
Inside website, I have a webpack configuration, with postCss loader, and a postCss.config.js file.
And postCss was not processing files from ui-kit workspace.

I change my loader configuration to specify the configuration i want to use, and this solve my issue :
from :

...
{
  loader: "postcss-loader",
}
...

to :

// const postCssConfig = require("../postcss.config")
...
{
  loader: "postcss-loader",
  options: {
    postcssOptions: postCssConfig,
  },
}
...