{"id":13808670,"url":"https://github.com/yunusga/postcss-sort-media-queries","last_synced_at":"2026-05-14T03:05:16.672Z","repository":{"id":36336738,"uuid":"223572442","full_name":"yunusga/postcss-sort-media-queries","owner":"yunusga","description":"PostCSS plugin for sorting and combining CSS media queries with mobile-first / desktop-first methodologies.","archived":false,"fork":false,"pushed_at":"2023-07-18T20:14:46.000Z","size":1065,"stargazers_count":147,"open_issues_count":5,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-30T04:49:04.640Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://postcss-sort-media-queries.github.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yunusga.png","metadata":{"files":{"readme":"README-UZ.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-23T10:43:17.000Z","updated_at":"2024-09-28T09:36:42.000Z","dependencies_parsed_at":"2024-06-18T13:39:24.055Z","dependency_job_id":"3d6f15f9-2b18-4d60-8d92-8616fe345292","html_url":"https://github.com/yunusga/postcss-sort-media-queries","commit_stats":{"total_commits":185,"total_committers":6,"mean_commits":"30.833333333333332","dds":"0.11351351351351346","last_synced_commit":"a1319c8f8abcafa13148e7b64da2e47d6878c0de"},"previous_names":[],"tags_count":59,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunusga%2Fpostcss-sort-media-queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunusga%2Fpostcss-sort-media-queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunusga%2Fpostcss-sort-media-queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yunusga%2Fpostcss-sort-media-queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yunusga","download_url":"https://codeload.github.com/yunusga/postcss-sort-media-queries/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174407,"owners_count":20896076,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-08-04T01:01:48.712Z","updated_at":"2026-05-14T03:05:16.653Z","avatar_url":"https://github.com/yunusga.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# PostCSS Media So'rovlarini Tartiblash\n\n[![npm](https://img.shields.io/npm/v/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries)\n[![Node.js\nCI](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml/badge.svg?branch=main\u0026event=status)](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml)\n![license](https://img.shields.io/badge/License-MIT-orange.svg)\n[![npm](https://img.shields.io/npm/dt/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries)\n\n\u003cimg src=\"logo.svg?sanitize=true\" align=\"right\" title=\"PostCSS sort media queries logotype\" width=\"100\" height=\"100\"\u003e\n\n🌏 [**English**](README.md) ▫ **O'zbek** ▫ [**简体中文**](README-ZH.md)\n\n[PostCSS](https://github.com/postcss/postcss) plagini CSS **media\nso'rovlarini tartiblash va birlashtirish** uchun mo'ljallangan.\n\nPlagin **mobile-first** va **desktop-first** metodologiyalarini\nqo'llab-quvvatlaydi va CSS faylingizdagi media so'rovlarini optimal\ntartibga keltirishga yordam beradi.\n\n\u003e v6.0.0 versiyasidan boshlab plagin **nested (ichma-ich) media\n\u003e so'rovlarini** va **ESM modul formatini** qo'llab-quvvatlaydi.\n\n---\n\n## Mundarija\n\n- [Onlayn demo](#onlayn-demo)\n- [Misollar](#misollar)\n  - [Mobile first tartiblash](#mobile-first-tartiblash)\n  - [Desktop first tartiblash](#desktop-first-tartiblash)\n  - [Ichma-ich media so'rovlarini\n    tartiblash](#ichma-ich-media-sorovlarini-tartiblash)\n- [O'rnatish](#ornatish)\n- [Foydalanish](#foydalanish)\n- [Opsiyalar](#opsiyalar)\n  - [sort](#sort)\n  - [Maxsus tartiblash funksiyasi](#maxsus-tartiblash-funksiyasi)\n  - [Tartiblash konfiguratsiyasi](#tartiblash-konfiguratsiyasi)\n- [O'zgarishlar jurnali](#ozgarishlar-jurnali)\n- [Litsenziya](#litsenziya)\n- [Boshqa PostCSS plaginlari](#boshqa-postcss-plaginlari)\n- [Rahmat](#rahmat)\n\n---\n\n## Onlayn demo\n\nPlaginning ishlashini brauzerda sinab ko'rishingiz mumkin:\n\n👉 [Online Demo](https://yunusga.uz/postcss-sort-media-queries/)\n\n---\n\n## Misollar\n\n### Mobile first tartiblash\n\n**Oldin**\n\n```css\n@media (min-width: 1400px) {\n}\n@media (min-width: 1200px) {\n}\n\n@layer reset {\n  @media (min-width: 1200px) {\n    @media (min-width: 992px) {\n    }\n    @media (min-width: 768px) {\n    }\n  }\n\n  @media (min-width: 768px) {\n    @media (min-width: 640px) {\n    }\n    @media (min-width: 320px) {\n    }\n  }\n}\n```\n\n**Keyin**\n\n```css\n@layer reset {\n  @media (min-width: 768px) {\n    @media (min-width: 320px) {\n    }\n    @media (min-width: 640px) {\n    }\n  }\n\n  @media (min-width: 1200px) {\n    @media (min-width: 768px) {\n    }\n    @media (min-width: 992px) {\n    }\n  }\n}\n\n@media (min-width: 1200px) {\n}\n@media (min-width: 1400px) {\n}\n```\n\n---\n\n### Desktop first tartiblash\n\n**Oldin**\n\n```css\n@media screen and (width \u003c 640px) {\n  .header {\n    color: #cdcdcd;\n  }\n}\n@media screen and (min-width: 760px) {\n  .desktop-first {\n    color: #cdcdcd;\n  }\n}\n@media screen and (width \u003c 640px) {\n  .main {\n    color: #cdcdcd;\n  }\n}\n@media screen and (min-width: 1280px) {\n  .desktop-first {\n    color: #cdcdcd;\n  }\n}\n@media screen and (max-width: 760px) {\n  .footer {\n    color: #cdcdcd;\n  }\n}\n@media screen and (max-width: 640px) {\n  .footer {\n    color: #cdcdcd;\n  }\n}\n```\n\n**Keyin**\n\n```css\n@media screen and (max-width: 760px) {\n  .footer {\n    color: #cdcdcd;\n  }\n}\n@media screen and (width \u003c 640px) {\n  /* combined */\n  .header {\n    color: #cdcdcd;\n  }\n  .main {\n    color: #cdcdcd;\n  }\n  .footer {\n    color: #cdcdcd;\n  }\n}\n@media screen and (min-width: 760px) {\n  .desktop-first {\n    color: #cdcdcd;\n  }\n}\n@media screen and (min-width: 1280px) {\n  .desktop-first {\n    color: #cdcdcd;\n  }\n}\n```\n\n---\n\n## O'rnatish\n\nAvvalo modulni o'rnating:\n\n    npm install postcss postcss-sort-media-queries --save-dev\n\n---\n\n## Foydalanish\n\nLoyihangizda mavjud **PostCSS konfiguratsiyasini** tekshiring:\n\n- `postcss.config.js`\n- `package.json` ichidagi `\"postcss\"` bo'limi\n- yoki bundler konfiguratsiyasi\n\n### Import qilish\n\n```js\n// CJS\nlet sortCssMq = require(\"postcss-sort-media-queries\");\n\n// ESM\nimport sortCssMq from \"postcss-sort-media-queries\";\n```\n\nAgar siz allaqachon PostCSS ishlatayotgan bo'lsangiz, plaginni `plugins`\nro'yxatiga qo'shing:\n\n```diff\nmodule.exports = {\n  plugins: [\n+   require('postcss-sort-media-queries')({\n+     sort: 'mobile-first'\n+   }),\n    require('autoprefixer')\n  ]\n}\n```\n\nYoki **maxsus tartiblash funksiyasi** bilan:\n\n```diff\nmodule.exports = {\n  plugins: [\n+   require('postcss-sort-media-queries')({\n+     sort: function(a, b) {\n+        // custom sorting function\n+     }\n+   }),\n    require('autoprefixer')\n  ]\n}\n```\n\nAgar siz PostCSS ishlatmasangiz, uni [official\ndocs](https://github.com/postcss/postcss#usage) bo'yicha o'rnatib, ushbu\nplaginni konfiguratsiyaga qo'shing.\n\n---\n\n## Opsiyalar\n\n\u003e Tartiblash\n\u003e [OlehDutchenko/sort-css-media-queries](https://github.com/OlehDutchenko/sort-css-media-queries)\n\u003e funksiyasiga asoslangan.\n\n### sort\n\nUshbu parametr **string** yoki **function** qiymatlarini qabul qiladi.\n\n- `{string}` `'mobile-first'` --- (standart) mobile-first tartiblash\n- `{string}` `'desktop-first'` --- desktop-first tartiblash\n- `{function}` --- o'zingiz yozgan tartiblash funksiyasi\n\n#### mobile-first\n\n```js\npostcss([\n  sortMediaQueries({\n    sort: \"mobile-first\",\n  }),\n]).process(css);\n```\n\n#### desktop-first\n\n```js\npostcss([\n  sortMediaQueries({\n    sort: \"desktop-first\",\n  }),\n]).process(css);\n```\n\n---\n\n### Maxsus tartiblash funksiyasi\n\n```js\npostcss([\n  sortMediaQueries({\n    function(a, b) {\n      return a.localeCompare(b);\n    },\n  }),\n]).process(css);\n```\n\nBu misolda barcha media so'rovlari **A dan Z gacha** tartibda\nsaralanadi.\n\nFunksiya to'g'ridan-to'g'ri `Array.sort()` metodiga uzatiladi.\n\n---\n\n### Tartiblash konfiguratsiyasi\n\nUshbu konfiguratsiya orqali tartiblash xatti-harakatini boshqarishingiz\nmumkin.\n\n```js\npostcss([\n  sortMediaQueries({\n    configuration: {\n      unitlessMqAlwaysFirst: true,\n    },\n  }),\n]).process(css);\n```\n\nYoki loyiha ildizida `sort-css-mq.config.json` faylini yaratishingiz\nmumkin.\n\nShuningdek `package.json` ichida ham sozlash mumkin:\n\n```json\n{\n  \"sortCssMQ\": {}\n}\n```\n\n---\n\n## O'zgarishlar jurnali\n\nQarang: [Releases\nhistory](https://github.com/yunusga/postcss-sort-media-queries/blob/master/CHANGELOG.md)\n\n---\n\n## Litsenziya\n\n[MIT](https://github.com/yunusga/postcss-sort-media-queries/blob/master/LICENSE)\n\n---\n\n## Boshqa PostCSS plaginlari\n\n- [`postcss-momentum-scrolling`](https://github.com/solversgroup/postcss-momentum-scrolling)\n  --- iOS qurilmalarida overflow (`scroll`, `auto`) elementlari uchun\n  **momentum scrolling** qo'shadi.\n\n---\n\n## Rahmat\n\nQuyidagi insonlar loyiha rivojiga hissa qo'shgan:\n\n- Andrey Sitnik [@ai](https://github.com/ai)\n- Oleh Dutchenko [@OlehDutchenko](https://github.com/OlehDutchenko)\n- Jakub Caban [@Lustmored](https://github.com/Lustmored)\n- Dmytro Symonov [@Kassaila](https://github.com/Kassaila)\n- Kai Falkowski [@SassNinja](https://github.com/SassNinja)\n- Khayot Razzakov [@Khayotbek1](https://github.com/Khayotbek1)\n- ReindDooyeweerd [@ReindDooyeweerd](https://github.com/ReindDooyeweerd)\n- msev [@msev](https://github.com/msev)\n- ajiho [@ajiho](https://github.com/ajiho)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunusga%2Fpostcss-sort-media-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyunusga%2Fpostcss-sort-media-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyunusga%2Fpostcss-sort-media-queries/lists"}