README-UK.md

sort-css-media-queries

Сортування медіазапитів: mobile-first та desktop-first для css-mqpacker та pleeease (котрий використовує css-mqpacker) та, можливо, для чогось ще ))

---

Зміст

🇬🇧 English | 🇺🇦 Українська

• Альтернатива mqpacker
• Використання в CSS-in-JS 🚀
• Встановлення
• Використання
  • mobile-first
  • desktop-first
• Конфігурація сортування
  • Параметри конфігурації
• Інформація про проєкт

Альтернатива mqpacker

https://github.com/hail2u/node-css-mqpacker - є депрекейтнутим!
Одним з альтернативных плагінів може бути - postcss-sort-media-queries

Використання в CSS-in-JS 🚀

Пакет sort-css-media-queries використовується в jss-plugin-sort-css-media-queries

Встановлення

npm install --save sort-css-media-queries
# or using yarn cli
yarn add sort-css-media-queries

Використання

Для початку, ознайомтесь з оригінальною документацією:
https://www.npmjs.com/package/css-mqpacker#sort

const sortCSSmq = require('sort-css-media-queries');

// your cool code
// ...

postcss([
	mqpacker({
		sort: sortCSSmq
	})
]).process(css);

mobile-first

Сортування медіазапит від мобільних пристроїв до десктопних. Послідовність медіазапитів:

1. min-width та min-height від меньшого до більшого,
2. max-width та max-height від більшого до меншого,
3. min-device-width та min-device-height від меньшого до більшого,
4. max-device-width та max-device-height від більшого до меншого,
5. медіазапит без одиниць виміру: tv, ttp, ...
6. в кінці:
   • print
   • print and (orientation: landscape)
   • print and (orientation: portrait)

Приклад початкового коду:

// min-width/-height -> from smallest to largest
'screen and (min-width: 320px) and (max-width: 767px)',
'screen and (min-height: 480px)',
'screen and (min-height: 480px) and (min-width: 320px)',
'screen and (min-width: 640px)',
'screen and (min-width: 1024px)',
'screen and (min-width: 1280px)',
// device
'screen and (min-device-width: 320px) and (max-device-width: 767px)',
// max-width/-height <- from largest to smallest
'screen and (max-width: 1023px)',
'screen and (max-height: 767px) and (min-height: 320px)',
'screen and (max-width: 767px) and (min-width: 320px)',
'screen and (max-width: 639px)',
// no units
'screen and (orientation: landscape)',
'screen and (orientation: portrait)',
'print',
'tv';

Результат сортування:

'screen and (min-width: 320px) and (max-width: 767px)',
'screen and (min-height: 480px)',
'screen and (min-height: 480px) and (min-width: 320px)',
'screen and (min-width: 640px)',
'screen and (min-width: 1024px)',
'screen and (min-width: 1280px)',
'screen and (min-device-width: 320px) and (max-device-width: 767px)',
'screen and (max-width: 1023px)',
'screen and (max-height: 767px) and (min-height: 320px)',
'screen and (max-width: 767px) and (min-width: 320px)',
'screen and (max-width: 639px)',
'print',
'screen and (orientation: landscape)',
'screen and (orientation: portrait)',
'tv';

desktop-first

const sortCSSmq = require('sort-css-media-queries');

// your cool code
// ...

postcss([
	mqpacker({
		sort: sortCSSmq.desktopFirst
	})
]).process(css);

Сортування медіазапитів від десктопних пристроїв до мобільних. Послідовність медіазапитів:

1. max-width та max-height від більшого до меншого,
2. min-width та min-height від меньшого до більшого,
3. max-device-width та max-device-heightвід більшого до меншого,
4. min-device-width та min-device-height від меньшого до більшого,
5. медіазапит без одиниць виміру: tv, ttp, ...
6. в кінці:
   • print
   • print and (orientation: landscape)
   • print and (orientation: portrait)

---

Конфігурація сортування

Ви можете імпортувати окремий хелпер сортування з пакета та створити власний метод сортування з конфігурацією за необхідності:

const createSort = require("sort-css-media-queries/lib/create-sort");
const sortCSSmq = createSort({ ...configuration });

Або створити файл sort-css-mq.config.json у корені вашого проєкту з необхідними опціями, або додати властивість sortCssMQ: {} у вашому package.json.

Параметри конфігурації

unitlessMqAlwaysFirst

• тип: boolean | undefined
• дефолтне значення: undefined

---

Інформація про проєкт

• Release notes
• Contributor Covenant Code of Conduct
• License MIT