From b0311ef41f0352b541be608d5e0e38056eb66907 Mon Sep 17 00:00:00 2001 From: Yunus Gaziev Date: Tue, 18 Apr 2023 09:06:35 +0500 Subject: [PATCH 01/16] deps: Security fix --- package-lock.json | 78 +++++++++++++++++++++-------------------------- 1 file changed, 35 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index 862c84c..25dbd25 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1714,9 +1714,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001390", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001390.tgz", - "integrity": "sha512-sS4CaUM+/+vqQUlCvCJ2WtDlV81aWtHhqeEVkLokVJJa3ViN4zDxAGfq9R8i1m90uGHxo99cy10Od+lvn3hf0g==", + "version": "1.0.30001480", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz", + "integrity": "sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==", "dev": true, "funding": [ { @@ -1726,6 +1726,10 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ] }, @@ -3913,13 +3917,10 @@ "dev": true }, "node_modules/json5": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", - "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", "dev": true, - "dependencies": { - "minimist": "^1.2.5" - }, "bin": { "json5": "lib/cli.js" }, @@ -4244,9 +4245,9 @@ } }, "node_modules/minimatch": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", - "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", "dev": true, "dependencies": { "brace-expansion": "^1.1.7" @@ -4255,12 +4256,6 @@ "node": "*" } }, - "node_modules/minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", - "dev": true - }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -4268,10 +4263,16 @@ "dev": true }, "node_modules/nanoid": { - "version": "3.1.30", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz", - "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==", + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -6910,9 +6911,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001390", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001390.tgz", - "integrity": "sha512-sS4CaUM+/+vqQUlCvCJ2WtDlV81aWtHhqeEVkLokVJJa3ViN4zDxAGfq9R8i1m90uGHxo99cy10Od+lvn3hf0g==", + "version": "1.0.30001480", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz", + "integrity": "sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==", "dev": true }, "chalk": { @@ -8557,13 +8558,10 @@ "dev": true }, "json5": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", - "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==", - "dev": true, - "requires": { - "minimist": "^1.2.5" - } + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "dev": true }, "kleur": { "version": "3.0.3", @@ -8798,20 +8796,14 @@ "dev": true }, "minimatch": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", - "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", "dev": true, "requires": { "brace-expansion": "^1.1.7" } }, - "minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", - "dev": true - }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -8819,9 +8811,9 @@ "dev": true }, "nanoid": { - "version": "3.1.30", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz", - "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==", + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", "dev": true }, "natural-compare": { From 9faf6bd710fea82827e28e1fa0884a63b1179250 Mon Sep 17 00:00:00 2001 From: Yunus Gaziev Date: Thu, 20 Apr 2023 09:47:10 +0500 Subject: [PATCH 02/16] Prepare documentation for 5.0.0 release --- README-UZ.md | 15 +++++++++++++++ README.md | 52 +++++++++++++++++++++++++++++++++++++++++----------- logo.svg | 25 +++++++++++++++++++++++++ package.json | 17 ++++++++++++----- 4 files changed, 93 insertions(+), 16 deletions(-) create mode 100644 README-UZ.md create mode 100644 logo.svg diff --git a/README-UZ.md b/README-UZ.md new file mode 100644 index 0000000..ee79c36 --- /dev/null +++ b/README-UZ.md @@ -0,0 +1,15 @@ +# PostCSS Sort Media Queries + +[PostCSS]: https://github.com/postcss/postcss +[ci-img]: https://travis-ci.org/solversgroup/postcss-sort-media-queries.svg +[ci]: https://travis-ci.org/solversgroup/postcss-sort-media-queries +[MIT]: https://github.com/solversgroup/postcss-sort-media-queries/blob/master/LICENSE +[official docs]: https://github.com/postcss/postcss#usage +[Releases history]: https://github.com/solversgroup/postcss-sort-media-queries/blob/master/CHANGELOG.md + +[](https://www.npmjs.com/package/postcss-sort-media-queries) [![Build Status][ci-img]][ci] +[](https://www.npmjs.com/package/postcss-sort-media-queries) + + + +🌏 [**English**](README.md) ▫ **O'zbek** diff --git a/README.md b/README.md index 887f20e..2025cc8 100644 --- a/README.md +++ b/README.md @@ -10,9 +10,30 @@ [](https://www.npmjs.com/package/postcss-sort-media-queries) [![Build Status][ci-img]][ci] [](https://www.npmjs.com/package/postcss-sort-media-queries) -[PostCSS] plugin for combine and sort CSS media queries with **mobile first** or **desktop first** methods. + -> **Combine** same media queries into one - is a unexpected side effect for this plugin 🧬 +🌏 **English** ▫ [**O'zbek**](README-UZ.md) + +[PostCSS] plugin for sorting and combining CSS media queries with **mobile first** / **desktop first** methodologies. + +> From 5.0.0 plugin support [Media Feature Types: “range”](https://www.w3.org/TR/mediaqueries-4/#mq-ranges) + +## Table of Contents + + - [Online demo](#online-demo) + - [Examples](#examples) + - [Mobile first sorting](#mobile-first-sorting) + - [Desktop first sorting](#desktop-first-sorting) + - [Install](#install) + - [Usage](#usage) + - [Options](#options) + - [sort](#sort) + - [Custom sort function](#custom-sort-function) + - [Sort configuration](#sort-configuration) + - [Changelog](#changelog) + - [License](#license) + - [Other PostCSS plugins](#other-postcss-plugins) + - [Thanks 💪](#thanks) ## Online demo @@ -22,8 +43,9 @@ And here is the [online demo](https://postcss-sort-media-queries.github.io) ### Mobile first sorting +**before** + ```css -/* before */ @media screen and (max-width: 640px) { .head { color: #cfcfcf } } @@ -42,8 +64,11 @@ And here is the [online demo](https://postcss-sort-media-queries.github.io) @media screen and (max-width: 640px) { .footer { color: #cfcfcf } } +``` -/* after */ +**after** + +```css @media screen and (min-width: 640px) { .mobile-first { color: #cfcfcf } } @@ -54,6 +79,7 @@ And here is the [online demo](https://postcss-sort-media-queries.github.io) .footer { color: #cfcfcf } } @media screen and (max-width: 640px) { + /* combined */ .head { color: #cfcfcf } .main { color: #cfcfcf } .footer { color: #cfcfcf } @@ -62,8 +88,8 @@ And here is the [online demo](https://postcss-sort-media-queries.github.io) ### Desktop first sorting +**before** ```css -/* before */ @media screen and (max-width: 640px) { .header { color: #cdcdcd } } @@ -82,12 +108,16 @@ And here is the [online demo](https://postcss-sort-media-queries.github.io) @media screen and (max-width: 640px) { .footer { color: #cdcdcd } } +``` -/* after */ +**after** + +```css @media screen and (max-width: 760px) { .footer { color: #cdcdcd } } @media screen and (max-width: 640px) { + /* combined */ .header { color: #cdcdcd } .main { color: #cdcdcd } .footer { color: #cdcdcd } @@ -100,7 +130,7 @@ And here is the [online demo](https://postcss-sort-media-queries.github.io) } ``` -## Getting Started +## Install First thing's, install the module: @@ -108,7 +138,7 @@ First thing's, install the module: npm install postcss postcss-sort-media-queries --save-dev ``` -## 🍳 Usage +## Usage Check you project for existed PostCSS config: `postcss.config.js` in the project root, `"postcss"` section in `package.json` @@ -133,7 +163,7 @@ module.exports = { If you do not use PostCSS, add it according to [official docs] and set this plugin in settings. -## 🍰 Options +## Options > Sorting works based on [dutchenkoOleg/sort-css-media-queries](https://github.com/dutchenkoOleg/sort-css-media-queries) function. @@ -210,10 +240,10 @@ See [Releases history] - [`postcss-momentum-scrolling`](https://github.com/solversgroup/postcss-momentum-scrolling) - plugin for adding **momentum** style scrolling behavior (`-webkit-overflow-scrolling:touch`) for elements with overflow (scroll, auto) on iOS -## Thanks 💪 +## Thanks - Andrey Sitnik [@ai](https://github.com/ai) +- Oleh Dutchenko [@dutchenkoOleg](https://github.com/dutchenkoOleg) - Jakub Caban [@Lustmored](https://github.com/Lustmored) - Dmytro Symonov [@Kassaila](https://github.com/Kassaila) - Kai Falkowski [@SassNinja](https://github.com/SassNinja) -- Олег Дутченко [@dutchenkoOleg](https://github.com/dutchenkoOleg) diff --git a/logo.svg b/logo.svg new file mode 100644 index 0000000..c64c880 --- /dev/null +++ b/logo.svg @@ -0,0 +1,25 @@ + diff --git a/package.json b/package.json index 0763b9e..995d7a3 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,25 @@ { "name": "postcss-sort-media-queries", "version": "4.3.0", - "description": "PostCSS plugin for combine and sort CSS media queries with mobile first or desktop first methods.", + "description": "PostCSS plugin for sorting and combining CSS media queries with mobile first / **desktop first methodologies", "keywords": [ "postcss", - "css", "postcss-plugin", + "css", + "css-optimizations", "sort", - "media-queries", + "mobile-first", + "desktop-first", "mediaquery", + "media-queries", "mq", - "optimization" + "responsive-css", + "combine-media-query", + "sort-media-query", + "css-mqpacker", + "node-css-mqpacker" ], - "author": "Yunus Gaziev ", + "author": "Yunus Gaziyev ", "license": "MIT", "repository": { "type": "git", From 2a991da0fbdc193483d16a05b78c1e65e0b67e8f Mon Sep 17 00:00:00 2001 From: Yunus Gaziev Date: Thu, 20 Apr 2023 09:53:56 +0500 Subject: [PATCH 03/16] Update README.md --- README.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 2025cc8..1ab7c6e 100644 --- a/README.md +++ b/README.md @@ -150,7 +150,18 @@ If you already use PostCSS, add the plugin to plugins list: module.exports = { plugins: [ + require('postcss-sort-media-queries')({ -+ // sort: 'mobile-first' default value ++ sort: 'mobile-first' default value ++ }), + require('autoprefixer') + ] +} +``` + +or with custom sort function +```diff +module.exports = { + plugins: [ ++ require('postcss-sort-media-queries')({ + sort: function(a, b) { + // custom sorting function + } @@ -195,7 +206,7 @@ postcss([ ]).process(css); ``` -#### Custom sort function +### Custom sort function ```js postcss([ sortMediaQueries({ From d6c896f2e9b89a2e1ae5f3e7017447e48335952e Mon Sep 17 00:00:00 2001 From: C L O N E * <114242863+Khayotbek1@users.noreply.github.com> Date: Thu, 20 Apr 2023 11:26:45 +0500 Subject: [PATCH 04/16] Mundarija tarjima qilindi --- README-UZ.md | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/README-UZ.md b/README-UZ.md index ee79c36..2fa37db 100644 --- a/README-UZ.md +++ b/README-UZ.md @@ -1,4 +1,4 @@ -# PostCSS Sort Media Queries +# PostCSS tartiblash media so'rovlari [PostCSS]: https://github.com/postcss/postcss [ci-img]: https://travis-ci.org/solversgroup/postcss-sort-media-queries.svg @@ -13,3 +13,27 @@ 🌏 [**English**](README.md) ▫ **O'zbek** + +[PostCSS] CSS media so'rovlarini **mobil qurilma** va **ish stoli kompyuter** metodologiyalari bilan ularni saralash va birlashtirish uchun xizmat qiladi. + + + +> 5.0.0 plaginini qo'llab-quvvatlaydigan [Media funksiyasi turlari: “diapazon”](https://www.w3.org/TR/mediaqueries-4/#mq-ranges) + + +## Mundarija + + - [Onlayn demo](#onlayn-demo) + - [Misollar](#misollar) + - [Mobil qurilmalarni tartiblash](#mobil-qurilmalarni-tartiblash) + - [Ish stoli kompyuter qurilmalarni tartiblash](#ish-stoli-kompyuter-qurilmalarni-tartiblash) + - [O'rnatish](#ornatish) + - [Foydalanish](#foydalanish) + - [Variantlar](#variantlar) + - [Saralash](#saralash) + - [Maxsus tartiblash funksiyasi](#maxsus-tartiblash-funksiyasi) + - [Saralash konfiguratsiyasi](#saralash-konfiguratsiyasi) + - [O'zgarishlar jurnali](#ozgarishlar-jurnali) + - [Litsenziya](#litsenziya) + - [Boshqa PostCSS plaginlari](#boshqa-postCSS-plaginlari) + - [Rahmat 💪](#rahmat) From 62f753f6bc6341844d4edb5e022ced2b4b33b9f2 Mon Sep 17 00:00:00 2001 From: C L O N E * <114242863+Khayotbek1@users.noreply.github.com> Date: Thu, 20 Apr 2023 13:09:09 +0500 Subject: [PATCH 05/16] o'rnatish va foydalanish bo'limlari tarjima b-di --- README-UZ.md | 141 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 141 insertions(+) diff --git a/README-UZ.md b/README-UZ.md index 2fa37db..96c0823 100644 --- a/README-UZ.md +++ b/README-UZ.md @@ -37,3 +37,144 @@ - [Litsenziya](#litsenziya) - [Boshqa PostCSS plaginlari](#boshqa-postCSS-plaginlari) - [Rahmat 💪](#rahmat) + + +## Onlayn demo + +bu yerda [onlayn demo](https://postcss-sort-media-queries.github.io) + + +## Misollar + +### Mobil qurilmalarni tartiblash + +**oldin** + +```css +@media screen and (max-width: 640px) { + .head { color: #cfcfcf } +} +@media screen and (max-width: 768px) { + .footer { color: #cfcfcf } +} +@media screen and (max-width: 640px) { + .main { color: #cfcfcf } +} +@media screen and (min-width: 1280px) { + .mobile-first { color: #cfcfcf } +} +@media screen and (min-width: 640px) { + .mobile-first { color: #cfcfcf } +} +@media screen and (max-width: 640px) { + .footer { color: #cfcfcf } +} +``` + +**keyin** + +```css +@media screen and (min-width: 640px) { + .mobile-first { color: #cfcfcf } +} +@media screen and (min-width: 1280px) { + .mobile-first { color: #cfcfcf } +} +@media screen and (max-width: 768px) { + .footer { color: #cfcfcf } +} +@media screen and (max-width: 640px) { + /* birlashtirilgan */ + .head { color: #cfcfcf } + .main { color: #cfcfcf } + .footer { color: #cfcfcf } +} +``` + +### Ish stoli kompyuter qurilmalarni tartiblash + +**oldin** +```css +@media screen and (max-width: 640px) { + .header { color: #cdcdcd } +} +@media screen and (min-width: 760px) { + .desktop-first { color: #cdcdcd } +} +@media screen and (max-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 (max-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 + +Birinchi navbatda, modulni o'rnating: + +``` +npm install postcss postcss-sort-media-queries --save-dev +``` + +## Foydalanish + +Mavjud PostCSS konfiguratsiyasi uchun loyihangizni tekshiring: `postcss.config.js` +loyiha ildizida, `package.json` ichidagi `"postcss"` bo`limida +yoki to'plam konfiguratsiyasida "postcss". + +Agar siz allaqachon PostCSS-dan foydalansangiz, plaginni plaginlar ro'yxatiga qo'shing: + +```diff +module.exports = { + plugins: [ ++ require('postcss-sort-media-queries')({ ++ sort: 'mobile-first' default value ++ }), + 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-dan foydalanmasangiz, uni [official docs] ga +muvofiq qo'shing va sozlamalarda ushbu plaginni o'rnating. From bb04c6dbfc8008a8b13ff0440d7e64da2aa18df7 Mon Sep 17 00:00:00 2001 From: C L O N E * <114242863+Khayotbek1@users.noreply.github.com> Date: Thu, 20 Apr 2023 16:29:56 +0500 Subject: [PATCH 06/16] Options --- README-UZ.md | 90 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 88 insertions(+), 2 deletions(-) diff --git a/README-UZ.md b/README-UZ.md index 96c0823..86653f1 100644 --- a/README-UZ.md +++ b/README-UZ.md @@ -29,13 +29,13 @@ - [Ish stoli kompyuter qurilmalarni tartiblash](#ish-stoli-kompyuter-qurilmalarni-tartiblash) - [O'rnatish](#ornatish) - [Foydalanish](#foydalanish) - - [Variantlar](#variantlar) + - [Optsiyalar](#optsiyalar) - [Saralash](#saralash) - [Maxsus tartiblash funksiyasi](#maxsus-tartiblash-funksiyasi) - [Saralash konfiguratsiyasi](#saralash-konfiguratsiyasi) - [O'zgarishlar jurnali](#ozgarishlar-jurnali) - [Litsenziya](#litsenziya) - - [Boshqa PostCSS plaginlari](#boshqa-postCSS-plaginlari) + - [Boshqa PostCSS plaginlari](#boshqa-postcss-plaginlari) - [Rahmat 💪](#rahmat) @@ -178,3 +178,89 @@ module.exports = { Agar siz PostCSS-dan foydalanmasangiz, uni [official docs] ga muvofiq qo'shing va sozlamalarda ushbu plaginni o'rnating. + + +## Optsiyalar + +> Saralash asosida ishlaydi, funktsiyasi [dutchenkoOleg/sort-css-media-queries](https://github.com/dutchenkoOleg/sort-css-media-queries) + +### Saralash + +Ushbu parametr **string** yoki **funktsiya** qiymatlarini qo'llab-quvvatlaydi. + +- `{string}` `'mobile-first'` - (standart) mobil qurilmalarni tartiblash +- `{string}` `'desktop-first'` - kompyuter qurilmalarni tartiblash +- `{function}` o'zingizning saralash funksiyangiz + +#### `'mobil-qurilmalar'` + +```js +postcss([ + sortMediaQueries({ + sort: 'mobile-first' // standart + }) +]).process(css); +``` + +#### `'kompyuter-qurilmalar'` + +```js +postcss([ + sortMediaQueries({ + sort: 'desktop-first' + }) +]).process(css); +``` + +### Maxsus tartiblash funksiyasi +```js +postcss([ + sortMediaQueries({ + function(a, b) { + return a.localeCompare(b); + } + }) +]).process(css); +``` + +Ishbu misolda barcha media so'rovlaringiz A dan Z gacha tartib bo'yicha saralanadi + +Ushbu tartiblash funksiyasi to'g'ridan-to'g'ri barcha media so'rovlaringiz qatorini Array#sort() usuliga o'tkaziladi. + +### Saralash konfiguratsiyasi + +Ushbu konfiguratsiya orqali siz tartiblash xatti-harakatlarini boshqarishingiz mumkin. + +```js +postcss([ + sortMediaQueries({ + configuration: { + unitlessMqAlwaysFirst: true, // yoki false + } + }) +]).process(css); +``` + +Yoki muqobil ravishda loyihangiz ildizida “sort-css-mq.config.json” faylini yarating. Yoki “package.json”ingizga “sortCssMQ: {}” xususiyatini qo‘shing. + +--- + +## O'zgarishlar jurnali + +Bu yerda: [Releases history] + +## Litsenziya + +[MIT] + +## Boshqa PostCSS plaginlari + +- [`postcss-momentum-scrolling`](https://github.com/solversgroup/postcss-momentum-scrolling) - iOS tizimida toʻlib-toshgan (aylantirish, avtomatik) elementlar uchun **momentum** uslubidagi aylantirish harakatini qoʻshish uchun plagin (`-webkit-overflow-scrolling:touch`) + +## Rahmat + +- Andrey Sitnik [@ai](https://github.com/ai) +- Oleh Dutchenko [@dutchenkoOleg](https://github.com/dutchenkoOleg) +- Jakub Caban [@Lustmored](https://github.com/Lustmored) +- Dmytro Symonov [@Kassaila](https://github.com/Kassaila) +- Kai Falkowski [@SassNinja](https://github.com/SassNinja) From 4b4c98c545b03cdf17fbe357d3769bc3f70aa531 Mon Sep 17 00:00:00 2001 From: C L O N E * <114242863+Khayotbek1@users.noreply.github.com> Date: Thu, 20 Apr 2023 16:41:00 +0500 Subject: [PATCH 07/16] PostCss o'zbek tiliga tarjima --- README-UZ.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README-UZ.md b/README-UZ.md index 86653f1..7aa6aa8 100644 --- a/README-UZ.md +++ b/README-UZ.md @@ -41,7 +41,7 @@ ## Onlayn demo -bu yerda [onlayn demo](https://postcss-sort-media-queries.github.io) +Bu yerda: [onlayn demo](https://postcss-sort-media-queries.github.io) ## Misollar From 18c1d9ccd218462c61989029cad5ef8a862b2006 Mon Sep 17 00:00:00 2001 From: Yunus Gaziev Date: Thu, 20 Apr 2023 16:55:47 +0500 Subject: [PATCH 08/16] Added thanks --- README-UZ.md | 1 + README.md | 1 + 2 files changed, 2 insertions(+) diff --git a/README-UZ.md b/README-UZ.md index 7aa6aa8..02fe396 100644 --- a/README-UZ.md +++ b/README-UZ.md @@ -264,3 +264,4 @@ Bu yerda: [Releases history] - Jakub Caban [@Lustmored](https://github.com/Lustmored) - Dmytro Symonov [@Kassaila](https://github.com/Kassaila) - Kai Falkowski [@SassNinja](https://github.com/SassNinja) +- Khayot Razzakov [@SassNinja](https://github.com/Khayotbek1) diff --git a/README.md b/README.md index 1ab7c6e..0ff337d 100644 --- a/README.md +++ b/README.md @@ -258,3 +258,4 @@ See [Releases history] - Jakub Caban [@Lustmored](https://github.com/Lustmored) - Dmytro Symonov [@Kassaila](https://github.com/Kassaila) - Kai Falkowski [@SassNinja](https://github.com/SassNinja) +- Khayot Razzakov [@SassNinja](https://github.com/Khayotbek1) From e4d94812cc557356082a69230853a16683242f1a Mon Sep 17 00:00:00 2001 From: Yunus Gaziev Date: Sat, 22 Apr 2023 10:27:04 +0500 Subject: [PATCH 09/16] Update READMEs contents --- README-UZ.md | 12 ++++++------ README.md | 10 +++++----- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/README-UZ.md b/README-UZ.md index 02fe396..7775d69 100644 --- a/README-UZ.md +++ b/README-UZ.md @@ -1,11 +1,11 @@ # PostCSS tartiblash media so'rovlari [PostCSS]: https://github.com/postcss/postcss -[ci-img]: https://travis-ci.org/solversgroup/postcss-sort-media-queries.svg -[ci]: https://travis-ci.org/solversgroup/postcss-sort-media-queries -[MIT]: https://github.com/solversgroup/postcss-sort-media-queries/blob/master/LICENSE +[ci-img]: https://travis-ci.org/yunusga/postcss-sort-media-queries.svg +[ci]: https://travis-ci.org/yunusga/postcss-sort-media-queries +[MIT]: https://github.com/yunusga/postcss-sort-media-queries/blob/master/LICENSE [official docs]: https://github.com/postcss/postcss#usage -[Releases history]: https://github.com/solversgroup/postcss-sort-media-queries/blob/master/CHANGELOG.md +[Releases history]: https://github.com/yunusga/postcss-sort-media-queries/blob/master/CHANGELOG.md [](https://www.npmjs.com/package/postcss-sort-media-queries) [![Build Status][ci-img]][ci] [](https://www.npmjs.com/package/postcss-sort-media-queries) @@ -155,7 +155,7 @@ Agar siz allaqachon PostCSS-dan foydalansangiz, plaginni plaginlar ro'yxatiga qo module.exports = { plugins: [ + require('postcss-sort-media-queries')({ -+ sort: 'mobile-first' default value ++ sort: 'mobile-first', // default value + }), require('autoprefixer') ] @@ -255,7 +255,7 @@ Bu yerda: [Releases history] ## Boshqa PostCSS plaginlari -- [`postcss-momentum-scrolling`](https://github.com/solversgroup/postcss-momentum-scrolling) - iOS tizimida toʻlib-toshgan (aylantirish, avtomatik) elementlar uchun **momentum** uslubidagi aylantirish harakatini qoʻshish uchun plagin (`-webkit-overflow-scrolling:touch`) +- [`postcss-momentum-scrolling`](https://github.com/yunusga/postcss-momentum-scrolling) - iOS tizimida toʻlib-toshgan (aylantirish, avtomatik) elementlar uchun **momentum** uslubidagi aylantirish harakatini qoʻshish uchun plagin (`-webkit-overflow-scrolling:touch`) ## Rahmat diff --git a/README.md b/README.md index 0ff337d..416f2df 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ # PostCSS Sort Media Queries [PostCSS]: https://github.com/postcss/postcss -[ci-img]: https://travis-ci.org/solversgroup/postcss-sort-media-queries.svg -[ci]: https://travis-ci.org/solversgroup/postcss-sort-media-queries -[MIT]: https://github.com/solversgroup/postcss-sort-media-queries/blob/master/LICENSE +[ci-img]: https://travis-ci.org/yunusga/postcss-sort-media-queries.svg +[ci]: https://travis-ci.org/yunusga/postcss-sort-media-queries +[MIT]: https://github.com/yunusga/postcss-sort-media-queries/blob/master/LICENSE [official docs]: https://github.com/postcss/postcss#usage -[Releases history]: https://github.com/solversgroup/postcss-sort-media-queries/blob/master/CHANGELOG.md +[Releases history]: https://github.com/yunusga/postcss-sort-media-queries/blob/master/CHANGELOG.md [](https://www.npmjs.com/package/postcss-sort-media-queries) [![Build Status][ci-img]][ci] [](https://www.npmjs.com/package/postcss-sort-media-queries) @@ -150,7 +150,7 @@ If you already use PostCSS, add the plugin to plugins list: module.exports = { plugins: [ + require('postcss-sort-media-queries')({ -+ sort: 'mobile-first' default value ++ sort: 'mobile-first', // default value + }), require('autoprefixer') ] From cb019020576b681f95778d7e0db036c704dafe67 Mon Sep 17 00:00:00 2001 From: Yunus Gaziev Date: Sat, 22 Apr 2023 10:27:22 +0500 Subject: [PATCH 10/16] Added GitHub CI action --- .github/workflows/test.yml | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 .github/workflows/test.yml diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000..4236e1d --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,30 @@ +# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node +# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs + +name: Node.js CI + +on: + push: + branches: [ "main", "develop" ] + pull_request: + branches: [ "main", "develop" ] + +jobs: + build: + + runs-on: [ "ubuntu-latest", "macos-latest" ] + + strategy: + matrix: + node-version: [14.x, 16.x, 18.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - uses: actions/checkout@v3 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node-version }} + cache: 'npm' + - run: npm ci + - run: npm test From 9498587a1e275160fc2786422c648cd80b4cb714 Mon Sep 17 00:00:00 2001 From: Yunus Gaziev Date: Sat, 22 Apr 2023 10:39:58 +0500 Subject: [PATCH 11/16] Update CI badges in READMEs --- README-UZ.md | 4 +--- README.md | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/README-UZ.md b/README-UZ.md index 7775d69..cba6d25 100644 --- a/README-UZ.md +++ b/README-UZ.md @@ -1,13 +1,11 @@ # PostCSS tartiblash media so'rovlari [PostCSS]: https://github.com/postcss/postcss -[ci-img]: https://travis-ci.org/yunusga/postcss-sort-media-queries.svg -[ci]: https://travis-ci.org/yunusga/postcss-sort-media-queries [MIT]: https://github.com/yunusga/postcss-sort-media-queries/blob/master/LICENSE [official docs]: https://github.com/postcss/postcss#usage [Releases history]: https://github.com/yunusga/postcss-sort-media-queries/blob/master/CHANGELOG.md -[](https://www.npmjs.com/package/postcss-sort-media-queries) [![Build Status][ci-img]][ci] +[](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) diff --git a/README.md b/README.md index 416f2df..d7dfecd 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,11 @@ # PostCSS Sort Media Queries [PostCSS]: https://github.com/postcss/postcss -[ci-img]: https://travis-ci.org/yunusga/postcss-sort-media-queries.svg -[ci]: https://travis-ci.org/yunusga/postcss-sort-media-queries [MIT]: https://github.com/yunusga/postcss-sort-media-queries/blob/master/LICENSE [official docs]: https://github.com/postcss/postcss#usage [Releases history]: https://github.com/yunusga/postcss-sort-media-queries/blob/master/CHANGELOG.md -[](https://www.npmjs.com/package/postcss-sort-media-queries) [![Build Status][ci-img]][ci] +[](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) From 0be6d6d4d34476cfb2b5658dacc1726100fde13d Mon Sep 17 00:00:00 2001 From: Yunus Gaziev Date: Sat, 22 Apr 2023 10:40:22 +0500 Subject: [PATCH 12/16] Remove .travis.yml --- .travis.yml | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 .travis.yml diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 75dad6b..0000000 --- a/.travis.yml +++ /dev/null @@ -1,6 +0,0 @@ -language: node_js -cache: yarn -node_js: - - node - - "12" - - "10" From cdc67594dad16bce2f1d9518adf3d214f8b9b213 Mon Sep 17 00:00:00 2001 From: Yunus Gaziev Date: Sat, 22 Apr 2023 10:40:51 +0500 Subject: [PATCH 13/16] Start GitHub actions only for pull request --- .github/workflows/test.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 4236e1d..e54eb71 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -4,8 +4,6 @@ name: Node.js CI on: - push: - branches: [ "main", "develop" ] pull_request: branches: [ "main", "develop" ] @@ -26,5 +24,7 @@ jobs: with: node-version: ${{ matrix.node-version }} cache: 'npm' + - name: Install deps - run: npm ci + - name: Run tests - run: npm test From f4eb0457f04d79309bad09f74ab58f84746f06f3 Mon Sep 17 00:00:00 2001 From: Yunus Gaziev Date: Sat, 22 Apr 2023 10:41:07 +0500 Subject: [PATCH 14/16] Added.github to .npmignore --- .npmignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.npmignore b/.npmignore index 23b4193..061cfee 100644 --- a/.npmignore +++ b/.npmignore @@ -5,6 +5,7 @@ yarn.lock .travis.yml .editorconfig .gitattributes +.github index.test.js CHANGELOG.md From ef26a2ad75d14f2b41a1355017fa04fafa65a3cd Mon Sep 17 00:00:00 2001 From: Yunus Gaziev Date: Sat, 22 Apr 2023 10:45:37 +0500 Subject: [PATCH 15/16] fix(github:ci): Error every step must define a `uses` or `run` key --- .github/workflows/test.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index e54eb71..ca8f624 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -24,7 +24,5 @@ jobs: with: node-version: ${{ matrix.node-version }} cache: 'npm' - - name: Install deps - run: npm ci - - name: Run tests - run: npm test From f72cda0b65c148f070a3d63410edb7ab7b9b6369 Mon Sep 17 00:00:00 2001 From: Yunus Gaziev Date: Sat, 22 Apr 2023 10:46:48 +0500 Subject: [PATCH 16/16] Added logo.svg to .npmignore --- .npmignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.npmignore b/.npmignore index 061cfee..ad5d766 100644 --- a/.npmignore +++ b/.npmignore @@ -10,5 +10,7 @@ index.test.js CHANGELOG.md +logo.svg + test/ coverage/