PostCSS Plugins on build.

[Aaron Stezycki]

Describe the bug

Hi there, enjoying using Slinkity. Vite + 11ty make a good match.
I've pushed this one bug aside until now, I think it's more of a problem with Vite but wanted to see if anyone in this community was experiencing the same issue. Using PostCSS plugin preset-env, the plugin simply allows modern CSS syntax to be used and then converts it to normal css the browser can understand.

The problem is it takes 2 builds (npm start and then to save a SCSS file) for the plugin to start processing the CSS and correctly transpile the modern CSS to normal CSS and then apply it.

On production builds the output is also the same, and therefore media queries fail to work, and or any CSS thats meant to processed by PostCSS Preset Env.

Example

@custom-media --from-bp2 (width > 36.375rem);

span {
  color: blue;
  @media (--from-bp2) {
    color: red;
  }
}

/** Expected **/
span { color: blue }
@media (min-width: 36.376rem) {
  span { color: red }
}

/** Actual on first build/development build **/
span {
  color: blue;
}
@media (--from-bp2) { /** Does not work. **/
  span {
    color: red;
  }
}

Just to iterate, I know this isn't necessarily a Slinkity problem but just wondered if anyone else had ran into this bug.

To Reproduce

Steps to reproduce the behaviour:

1. Setup Slinkity
2. npm install postcss-preset-env
3. Copy above postcss.config.js
4. Add some SCSS which contains modern css methods/properties
5. Run npm start

Expected behaviour

PostCSS Plugins should work and process the SCSS/CSS on the first try in development mode. In Production, I would expect all CSS files to processed and work with all that the PostCSS plugins should apply.

(please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version [e.g. 22]

Additional context
I've found that someone else has discovered this problem on the ViteJS discussion board.

[Aaron Stezycki]

Okay, I found out what the issue was, and I'm just gonna say it was silly one.

[Ben Holmes]

Ah, glad you figured it out @aaronstezycki. Let me know if it was something confusing in the Slinkity docs we could improve on!