Codesandbox-client: parcel + postcss

[gary149]

Is there any way to use parcel with a postcss.config.js file (https://parceljs.org/transforms.html) in codesandbox ?
It's seems the answer is no because the postcss config file is not recognized by codesandbox, am i missing something ?

[CompuIves]

Yep, that's right. We only use postcss for autoprefixer currently, but don't have something for custom plugins. This would be a good enhancement to add.

[cmnstmntmn]

@CompuIves so a configuration like

.postcssrc

{
  "modules": false,
  "plugins": {
    "postcss-css-variables": {},  
    "postcss-custom-media": {},
    "postcss-import": {},   
    "css-mqpacker":  true,  
    "perfectionist": true,      
    "autoprefixer": {
      "grid": false,
      "browsers": ["last 5 versions", "> 5%", "ie >= 11"]
    }
  }
}

won't work, right?

[adamwathan]

Noticed custom PostCSS plugin configuration works with the Nuxt preset:

https://codesandbox.io/s/w263lk042l

...but can't get it to work anywhere else. Trying to understand what's supported and what's not 🤔

[lbogdan]

Hey @adamwathan , I don't know if you're aware, but the nuxt template is actually a server / container sandbox template, which means it's like your local development environment, only running in a container in "the cloud". The majority of templates (the "Client Templates" from https://codesandbox.io/s/ ) are running directly in the browser, with the default configuration of their respective frameworks, which don't include PostCSS (+ plugins), as far as I know.

[adamwathan]

@lbogdan Ah that makes a lot of sense, thanks for clearing that up!

[pspeter3]

Is this still true?

[qfox]

Is this still true?

Feels like ;-(

[equinusocio]

Please vote the main comment because Parcel supports Postcss by default everywhere but not here. It looks like a bug, not an improvement.

[CompuIves]

@equinusocio Do you have a reproducable sandbox I can use while implementing this?

[equinusocio]

@CompuIves Yes, here the basic Vanilla Parcel sandbox with a postcss js config:
https://codesandbox.io/s/parcel-postcss-dmd9w?file=/src/styles.css

Additional info:

• As stated here, Parcel uses postcss and picks any valid postcss config found in the project's root (.postcssrc, postcss.config.js, etc...)
• Actually .postcssrc files get the correct icon, but postcss.config.js doesn't.
• PostCSS file common extensions are .css and .pcss, but the second one is preferred to help the editor recognizing the syntax language. Currently, Codesandbox doesn't recognize .pcss files and for .css files, it show warning about custom syntax (eg. using postcss-preset-env nesting). For vscode editor, there is the official postcss extension for the syntax highlighting.
• Parcel also picks any browserslist valid configuration file (used also by postcss preset-env) from package.json or config file.

[equinusocio]

@CompuIves Do you need more info? Is the sandbox sent ok?

[equinusocio]

@CompuIves Have you all the info?

[github-actions[bot]]

This issue has automatically been marked stale because there has been no activity in a while. Please leave a comment if the issue has not been resolved, or if it is not stale for any other reason. After 2 weeks, this issue will automatically be closed, unless a comment is made or the stale label is removed.

[equinusocio]

Hey, bot, mind your business.

[github-actions[bot]]

This issue has automatically been marked stale because there has been no activity in a while. Please leave a comment if the issue has not been resolved, or if it is not stale for any other reason. After 2 weeks, this issue will automatically be closed, unless a comment is made or the stale label is removed.

[equinusocio]

Hey, bot, mind your business.