This plugin has the purpose to be sugar syntax for width media queries.
/** This is the sugar syntax */
@small-screen {
div {
width: 400px;
}
}
/** This is what it would look like after parsing */
@media (max-width: 980px) {
div {
width: 400px;
}
}To install it, you can paste the following text to your terminal.
npm install postcss postcss-screen
This plugin has 8 standard screen sizes for the HTML to react with CSS, where each one will replace a custom at rule with a supported media query.
| Size | Width |
|---|---|
| jumbo | 2200px |
| wide | 2000px |
| large | 1700px |
| moderate | 1450px |
| medium | 1200px |
| small | 980px |
| mini | 670px |
| nano | 450px |
The plugin can be customized to have custom response sizes or custom parameters for the query.
// To pass your options it can be done in the following way
postcss: {
plugins: [
...,
require('postcss-screen')({
query: 'max-width',
sizes: { small: 1000 },
}),
]
}
// Other frameworks may use a map object
postcss: {
plugins: {
...,
"postcss-screen": {
sizes: { small: 1000 },
query: 'max-width',
params: 'only screen and',
}
}
}There will be some cases when a custom size is desired. For such cases, this can be passed to the options in the sizes object as a key pair value (Check the example above).
/** This is the sugar syntax */
@small-screen {
div {
width: 400px;
}
}
/** This is what it would look with a custom small size of 1000 */
@media (min-width: 1000px) {
div {
width: 400px;
}
}In some cases the desired behavior is to apply with the min-width instead of the max-width query. If that is the case, this value can be passed in the query property from the options.
/** This is the sugar syntax */
@small-screen {
div {
width: 400px;
}
}
/** This is what it would look with the custom query */
@media (min-width: 980px) {
div {
width: 400px;
}
}In case is wanted to attach specific media at rule paramateres, this can be done with the params property from the options.
/** This is the sugar syntax */
@small-screen {
div {
width: 400px;
}
}
/**
* This is what it would look with custom parameters
* like `only screen and` for legacy browsers
* @see https://www.geeksforgeeks.org/what-is-the-difference-between-screen-and-only-screen-in-media-queries/
*/
@media only screen and (min-width: 980px) {
div {
width: 400px;
}
}For Requests
If you wish to contribute to this plugin you can visit me in the public repository on github at https://github.com/Nona9614/postcss-screen and discuss about it.
I will be happy to improve this project to its best!