Postcss Config isn't loaded

[briziel]

What is the location of your example repository?

https://github.com/briziel/hydrogen-postcss-bug

i installed the following dependencies:

"autoprefixer": "^10.4.16",
"postcss-custom-media": "^10.0.1",
"postcss-nested": "^6.0.1",

Created a app/styles/mediaqueries.css

...
@custom-media --S_to_XL (min-width: 360px) and (max-width: 1439px);
...

Created a postcss.config.cjs

module.exports = {
  plugins: {
    'postcss-custom-media': {
      importFrom: './app/styles/mediaqueries.css',
    },
    'postcss-nested': {},
    autoprefixer: {},
  },
};

and edited the headers css in app/styles/app.css:130 to:

.header {
  align-items: center;
  background: #fff;
  display: flex;
  height: var(--header-height);
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 1;

+ @media (--S_to_XL) {
+   display: flex;
+   background: linear-gradient(#e98a00, #f5aa2f); 
  }
}

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2023.7.8

What version of Remix are you using?

1.19.1

Steps to Reproduce

npm run install
npm run dev

1. go into the browser
2. inspect header header
3. go to compiled app-WHATEVERTHE.css:250
4. See the untouched raw CSS

Expected Behavior

I would like PostCSS to support the use of variables within media queries. Subsequently, nesting should be resolved, and autoprefixing should be functional. Yes its a lot, but i tried different combinations of plugins as well.

it should look like this:

.header {
  align-items: center;
  background: #fff;
  display: flex;
  height: var(--header-height);
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 1;
}

@media (min-width: 360px) and (max-width: 1439px) {
  .header {
    display: flex;
    background: linear-gradient(#e98a00, #f5aa2f);
  }
}

Actual Behavior

but It looks like this:

.header {
  align-items: center;
  background: #fff;
  display: flex;
  height: var(--header-height);
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 1;
  @media (--S_to_XL) {
    display: flex;
    background: linear-gradient(#e98a00, #f5aa2f);
  }
}

[frandiox]

Hi 👋
I believe in Remix v1 you still need to add postcss: true to your remix.config.js: https://remix.run/docs/en/1.19.3/file-conventions/remix-config#postcss

[blittle]

Closing for lack of response. Please re-open if still a problem.