Feature request: Migrate from `Sass` to `PostCSS`

[akphi]

Similar requests

• I have searched and found no existing similar requests

How are you using Studio?

No response

What problems are you trying to solve?

We should consider using PostCSS instead of Sass as that's generally is the direction we would want to follow with instead of getting more and more reliant on Sass, we should converge to CSS official specs. This allows us to embrace tools like tailwindcss for faster prototyping and development.

Just a quick note about Tailwind. It might be a good move because we want to write less and less CSS, as we want to internalize some of the stylings to CSS in JSS as mentioned in #264 as well as to allow more fine-grained control

Describe the solution you would like to see implemented

• Test if CSS imports work the way we meant for it to work, or else, we need to flatten the CSS file tree
• Convert all SASS -> CSS:
  • Rename all files style/**/_*.scss to style/**/*.scss
  • Re-export all of them to CSS using Sass
  • Copy back the CSS into the source folder
  • Rename all of them to pcss so VSCode picks up PostCSS
• Fix stylelint - https://stylelint.io/user-guide/usage/postcss-plugin, not sure how styleint vscode work with postcss
• Try to remove sass and sass-loader from webpack
• Have index.css file to import everything else in css
• Rework build:sass and dev:sass scripts to only use postcss
• Update Webpack config loader for css, remove Sass, so (s)?css -> (p)?css
• Remove dependency on sass
  • Use PostCSS https://www.npmjs.com/package/postcss
  • Setup PostCSS cli https://github.com/postcss/postcss-cli - Check this out for setting up in monorepo - Monorepo with yarn workspaces. Output relative to file and not cwd postcss/postcss-cli#390

Describe alternatives you have considered

No response

Documentation, Design, Adoption, Migration Strategy

No response

Contribution

• I would like to work on this feature