https://github.com/yunusga/postcss-sort-media-queries
PostCSS plugin for sorting and combining CSS media queries with mobile-first / desktop-first methodologies.
https://github.com/yunusga/postcss-sort-media-queries
combine-media-query css css-mqpacker css-optimizations desktop-first media-queries mediaquery mobile-first mq node-css-mqpacker postcss postcss-plugin responsive-css sort sort-media-query
Last synced: 17 days ago
JSON representation
PostCSS plugin for sorting and combining CSS media queries with mobile-first / desktop-first methodologies.
- Host: GitHub
- URL: https://github.com/yunusga/postcss-sort-media-queries
- Owner: yunusga
- License: mit
- Created: 2019-11-23T10:43:17.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-07-18T20:14:46.000Z (almost 3 years ago)
- Last Synced: 2024-10-30T04:49:04.640Z (over 1 year ago)
- Topics: combine-media-query, css, css-mqpacker, css-optimizations, desktop-first, media-queries, mediaquery, mobile-first, mq, node-css-mqpacker, postcss, postcss-plugin, responsive-css, sort, sort-media-query
- Language: JavaScript
- Homepage: https://postcss-sort-media-queries.github.io
- Size: 1.02 MB
- Stars: 147
- Watchers: 3
- Forks: 7
- Open Issues: 5
-
Metadata Files:
- Readme: README-UZ.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Media So'rovlarini Tartiblash
[](https://www.npmjs.com/package/postcss-sort-media-queries)
[](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml)
[](https://www.npmjs.com/package/postcss-sort-media-queries)
đ [**English**](README.md) âĢ **O'zbek** âĢ [**įŽäŊä¸æ**](README-ZH.md)
[PostCSS](https://github.com/postcss/postcss) plagini CSS **media
so'rovlarini tartiblash va birlashtirish** uchun mo'ljallangan.
Plagin **mobile-first** va **desktop-first** metodologiyalarini
qo'llab-quvvatlaydi va CSS faylingizdagi media so'rovlarini optimal
tartibga keltirishga yordam beradi.
> v6.0.0 versiyasidan boshlab plagin **nested (ichma-ich) media
> so'rovlarini** va **ESM modul formatini** qo'llab-quvvatlaydi.
---
## Mundarija
- [Onlayn demo](#onlayn-demo)
- [Misollar](#misollar)
- [Mobile first tartiblash](#mobile-first-tartiblash)
- [Desktop first tartiblash](#desktop-first-tartiblash)
- [Ichma-ich media so'rovlarini
tartiblash](#ichma-ich-media-sorovlarini-tartiblash)
- [O'rnatish](#ornatish)
- [Foydalanish](#foydalanish)
- [Opsiyalar](#opsiyalar)
- [sort](#sort)
- [Maxsus tartiblash funksiyasi](#maxsus-tartiblash-funksiyasi)
- [Tartiblash konfiguratsiyasi](#tartiblash-konfiguratsiyasi)
- [O'zgarishlar jurnali](#ozgarishlar-jurnali)
- [Litsenziya](#litsenziya)
- [Boshqa PostCSS plaginlari](#boshqa-postcss-plaginlari)
- [Rahmat](#rahmat)
---
## Onlayn demo
Plaginning ishlashini brauzerda sinab ko'rishingiz mumkin:
đ [Online Demo](https://yunusga.uz/postcss-sort-media-queries/)
---
## Misollar
### Mobile first tartiblash
**Oldin**
```css
@media (min-width: 1400px) {
}
@media (min-width: 1200px) {
}
@layer reset {
@media (min-width: 1200px) {
@media (min-width: 992px) {
}
@media (min-width: 768px) {
}
}
@media (min-width: 768px) {
@media (min-width: 640px) {
}
@media (min-width: 320px) {
}
}
}
```
**Keyin**
```css
@layer reset {
@media (min-width: 768px) {
@media (min-width: 320px) {
}
@media (min-width: 640px) {
}
}
@media (min-width: 1200px) {
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
}
}
@media (min-width: 1200px) {
}
@media (min-width: 1400px) {
}
```
---
### Desktop first tartiblash
**Oldin**
```css
@media screen and (width < 640px) {
.header {
color: #cdcdcd;
}
}
@media screen and (min-width: 760px) {
.desktop-first {
color: #cdcdcd;
}
}
@media screen and (width < 640px) {
.main {
color: #cdcdcd;
}
}
@media screen and (min-width: 1280px) {
.desktop-first {
color: #cdcdcd;
}
}
@media screen and (max-width: 760px) {
.footer {
color: #cdcdcd;
}
}
@media screen and (max-width: 640px) {
.footer {
color: #cdcdcd;
}
}
```
**Keyin**
```css
@media screen and (max-width: 760px) {
.footer {
color: #cdcdcd;
}
}
@media screen and (width < 640px) {
/* combined */
.header {
color: #cdcdcd;
}
.main {
color: #cdcdcd;
}
.footer {
color: #cdcdcd;
}
}
@media screen and (min-width: 760px) {
.desktop-first {
color: #cdcdcd;
}
}
@media screen and (min-width: 1280px) {
.desktop-first {
color: #cdcdcd;
}
}
```
---
## O'rnatish
Avvalo modulni o'rnating:
npm install postcss postcss-sort-media-queries --save-dev
---
## Foydalanish
Loyihangizda mavjud **PostCSS konfiguratsiyasini** tekshiring:
- `postcss.config.js`
- `package.json` ichidagi `"postcss"` bo'limi
- yoki bundler konfiguratsiyasi
### Import qilish
```js
// CJS
let sortCssMq = require("postcss-sort-media-queries");
// ESM
import sortCssMq from "postcss-sort-media-queries";
```
Agar siz allaqachon PostCSS ishlatayotgan bo'lsangiz, plaginni `plugins`
ro'yxatiga qo'shing:
```diff
module.exports = {
plugins: [
+ require('postcss-sort-media-queries')({
+ sort: 'mobile-first'
+ }),
require('autoprefixer')
]
}
```
Yoki **maxsus tartiblash funksiyasi** bilan:
```diff
module.exports = {
plugins: [
+ require('postcss-sort-media-queries')({
+ sort: function(a, b) {
+ // custom sorting function
+ }
+ }),
require('autoprefixer')
]
}
```
Agar siz PostCSS ishlatmasangiz, uni [official
docs](https://github.com/postcss/postcss#usage) bo'yicha o'rnatib, ushbu
plaginni konfiguratsiyaga qo'shing.
---
## Opsiyalar
> Tartiblash
> [OlehDutchenko/sort-css-media-queries](https://github.com/OlehDutchenko/sort-css-media-queries)
> funksiyasiga asoslangan.
### sort
Ushbu parametr **string** yoki **function** qiymatlarini qabul qiladi.
- `{string}` `'mobile-first'` --- (standart) mobile-first tartiblash
- `{string}` `'desktop-first'` --- desktop-first tartiblash
- `{function}` --- o'zingiz yozgan tartiblash funksiyasi
#### mobile-first
```js
postcss([
sortMediaQueries({
sort: "mobile-first",
}),
]).process(css);
```
#### desktop-first
```js
postcss([
sortMediaQueries({
sort: "desktop-first",
}),
]).process(css);
```
---
### Maxsus tartiblash funksiyasi
```js
postcss([
sortMediaQueries({
function(a, b) {
return a.localeCompare(b);
},
}),
]).process(css);
```
Bu misolda barcha media so'rovlari **A dan Z gacha** tartibda
saralanadi.
Funksiya to'g'ridan-to'g'ri `Array.sort()` metodiga uzatiladi.
---
### Tartiblash konfiguratsiyasi
Ushbu konfiguratsiya orqali tartiblash xatti-harakatini boshqarishingiz
mumkin.
```js
postcss([
sortMediaQueries({
configuration: {
unitlessMqAlwaysFirst: true,
},
}),
]).process(css);
```
Yoki loyiha ildizida `sort-css-mq.config.json` faylini yaratishingiz
mumkin.
Shuningdek `package.json` ichida ham sozlash mumkin:
```json
{
"sortCssMQ": {}
}
```
---
## O'zgarishlar jurnali
Qarang: [Releases
history](https://github.com/yunusga/postcss-sort-media-queries/blob/master/CHANGELOG.md)
---
## Litsenziya
[MIT](https://github.com/yunusga/postcss-sort-media-queries/blob/master/LICENSE)
---
## Boshqa PostCSS plaginlari
- [`postcss-momentum-scrolling`](https://github.com/solversgroup/postcss-momentum-scrolling)
--- iOS qurilmalarida overflow (`scroll`, `auto`) elementlari uchun
**momentum scrolling** qo'shadi.
---
## Rahmat
Quyidagi insonlar loyiha rivojiga hissa qo'shgan:
- Andrey Sitnik [@ai](https://github.com/ai)
- Oleh Dutchenko [@OlehDutchenko](https://github.com/OlehDutchenko)
- Jakub Caban [@Lustmored](https://github.com/Lustmored)
- Dmytro Symonov [@Kassaila](https://github.com/Kassaila)
- Kai Falkowski [@SassNinja](https://github.com/SassNinja)
- Khayot Razzakov [@Khayotbek1](https://github.com/Khayotbek1)
- ReindDooyeweerd [@ReindDooyeweerd](https://github.com/ReindDooyeweerd)
- msev [@msev](https://github.com/msev)
- ajiho [@ajiho](https://github.com/ajiho)