[DevEx][Perf] Leverage PostCSS to implement shorthand media queries and ensure they are merged
Nobody has claimed this yet.
- Dominant language
- PHP
- Stars
- 306
- Forks
- 88
- Avg merge
- 2d 16h
- Merged PRs (30d)
- 12
Description
Description:
We can leverage postcss-custom-media and postcss-combine-media-query to improve the development experience with SCSS.
Right now, we're using a _media-queries.scss file with mixins to gather all media queries. This would help us inline everything in SCSS and also ensure that if there are any inlined media queries, these are merged for efficiency purposes.
Also, postcss-custom-media will ensure standardization and enable shorthands to make things easier and enable developers to not think if the media-query should be min-width or max-width every time.
For example
@media (min-width: #{$tablet})
// Will become
@media (--tablet)
I've implemented this in Raft, and it seems to work quite well.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with assets/scss/components/main/_media-queries.scss and compare the proposed setup with Raft's grunt/postcss.js example. Implement the custom-media shorthand and media-query combining in Neve's build flow; done means SCSS can use shorthand queries and generated output merges equivalent media queries.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, sass
- Domain
- build-system, developer-experience, performance
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100