Jit - Just In Time mode don't alto import custom-media

[Johann Gonçalves Pereira]

I love the just in time mode it's superfast and useful. But I want to use the custom-media feature.
But look like I can't use it with jit.

.test {
   @media (--md-n-above) {
        background-color: red;
   }
}

It doesn't work.

I try to workaround, forcing the import

.test {
   --placeholder: var(--md-n-above)
   @media (--md-n-above) {
      background-color: red;
   }
}

Doesn't work as well.

My package.json:

{
  "name": "grid-news",
  "private": true,
  "version": "0.0.4",
  "scripts": {
    "dev": "elm-spa gen && vite",
    "build": "NODE_ENV=production elm-spa gen && tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "cssnano": "^5.1.11",
    "cssnano-preset-advanced": "^5.3.7",
    "doiuse": "^4.4.1",
    "elm": "^0.19.1-5",
    "elm-tooling": "^1.8.0",
    "netlify-cli": "^10.5.0",
    "open-props": "^1.3.16",
    "postcss": "^8.4.14",
    "postcss-custom-media": "^8.0.2",
    "postcss-custom-selectors": "^6.0.3",
    "postcss-inline-svg": "^5.0.0",
    "postcss-jit-props": "^1.0.7",
    "postcss-plugin": "^1.0.0",
    "postcss-preset-env": "^7.7.1",
    "postcss-pseudo-class-enter": "^5.0.0",
    "postcss-utilities": "^0.8.4",
    "rucksack-css": "^1.0.2",
    "sass": "^1.52.3",
    "tailwindcss": "^3.1.0",
    "typescript": "^4.7.3",
    "vite": "^2.9.10",
    "vite-plugin-elm": "^2.6.1"
  }
}

My postcss.config.js:

module.exports = {
  plugins: {
    doiuse: {},
    cssnano: {
      preset: [
        "advanced",
        process.env.NODE_ENV === "production"
          ? { cssDeclarationSorter: false }
          : {
              cssDeclarationSorter: false,
              convertValues: false,
              reduceIdents: false,
            },
      ],
    },
    "postcss-custom-media": {},
    "postcss-custom-selectors": {},
    "postcss-inline-svg": {},
    "postcss-jit-props": require("open-props"),
    "postcss-plugin": {},
    "postcss-pseudo-class-enter": {},
    "postcss-utilities": {},
    tailwindcss: {},
    "rucksack-css": {},
  },
};

[Adam Argyle]

it's not really jit-props fault, but I can certainly offer some advice/help!

there's 2 ways to get the custom media props into memory so they can be transformed:

1. @import "open-props/media" or @import "open-props/media.min.css"
   this bring them in via CSS and then the postcss plugin has the resource it needs to resolve the media queries you use like @media (--md-n-above)

2. postcssCustomMedia has ways to get the media query props imported inside your postcss.config.js
   you can drop them in there in the way that matches your project architecture.

[Johann Gonçalves Pereira]

@argyleink thanks It worked