This commit is contained in:
2024-03-22 03:47:51 +05:30
parent 8bcf3d211e
commit 89819f6fe2
28440 changed files with 3211033 additions and 2 deletions

20
node_modules/postcss-sort-media-queries/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright 2019 Yunus Gaziev <yunusga@yandex.ru>
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

265
node_modules/postcss-sort-media-queries/README-UZ.md generated vendored Normal file
View File

@@ -0,0 +1,265 @@
# PostCSS tartiblash media so'rovlari
[PostCSS]: https://github.com/postcss/postcss
[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
[![npm](https://img.shields.io/npm/v/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries) [![Node.js CI](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml/badge.svg?branch=main&event=status)](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml)
[![npm](https://img.shields.io/npm/dt/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries)
<img src="logo.svg?sanitize=true" align="right" title="PostCSS sort media queries logotype" width="100" height="100">
🌏 [**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)
- [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)
- [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.
## 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 qoshing.
---
## O'zgarishlar jurnali
Bu yerda: [Releases history]
## Litsenziya
[MIT]
## Boshqa PostCSS plaginlari
- [`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
- 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)
- Khayot Razzakov [@SassNinja](https://github.com/Khayotbek1)

259
node_modules/postcss-sort-media-queries/README.md generated vendored Normal file
View File

@@ -0,0 +1,259 @@
# PostCSS Sort Media Queries
[PostCSS]: https://github.com/postcss/postcss
[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
[![npm](https://img.shields.io/npm/v/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries) [![Node.js CI](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml/badge.svg?branch=main&event=status)](https://github.com/yunusga/postcss-sort-media-queries/actions/workflows/test.yml)
[![npm](https://img.shields.io/npm/dt/postcss-sort-media-queries.svg)](https://www.npmjs.com/package/postcss-sort-media-queries)
<img src="logo.svg?sanitize=true" align="right" title="PostCSS sort media queries logotype" width="100" height="100">
🌏 **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
And here is the [online demo](https://postcss-sort-media-queries.github.io)
## Examples
### Mobile first sorting
**before**
```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 }
}
```
**after**
```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) {
/* combined */
.head { color: #cfcfcf }
.main { color: #cfcfcf }
.footer { color: #cfcfcf }
}
```
### Desktop first sorting
**before**
```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 }
}
```
**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 }
}
@media screen and (min-width: 760px) {
.desktop-first { color: #cdcdcd }
}
@media screen and (min-width: 1280px) {
.desktop-first { color: #cdcdcd }
}
```
## Install
First thing's, install the module:
```
npm install postcss postcss-sort-media-queries --save-dev
```
## Usage
Check you project for existed PostCSS config: `postcss.config.js`
in the project root, `"postcss"` section in `package.json`
or `postcss` in bundle config.
If you already use PostCSS, add the plugin to plugins list:
```diff
module.exports = {
plugins: [
+ require('postcss-sort-media-queries')({
+ 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
+ }
+ }),
require('autoprefixer')
]
}
```
If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.
## Options
> Sorting works based on [dutchenkoOleg/sort-css-media-queries](https://github.com/dutchenkoOleg/sort-css-media-queries) function.
### sort
This option support **string** or **function** values.
- `{string}` `'mobile-first'` - (default) mobile first sorting
- `{string}` `'desktop-first'` - desktop first sorting
- `{function}` your own sorting function
#### `'mobile-first'`
```js
postcss([
sortMediaQueries({
sort: 'mobile-first' // default
})
]).process(css);
```
#### `'desktop-first'`
```js
postcss([
sortMediaQueries({
sort: 'desktop-first'
})
]).process(css);
```
### Custom sort function
```js
postcss([
sortMediaQueries({
function(a, b) {
return a.localeCompare(b);
}
})
]).process(css);
```
In this example, all your media queries will sort by A-Z order.
This sorting function is directly passed to Array#sort() method of an array of all your media queries.
### Sort configuration
By this configuration you can control sorting behaviour.
```js
postcss([
sortMediaQueries({
configuration: {
unitlessMqAlwaysFirst: true, // or false
}
})
]).process(css);
```
Or alternatively create a `sort-css-mq.config.json` file in the root of your project. Or add property `sortCssMQ: {}` in your `package.json`.
---
## Changelog
See [Releases history]
## License
[MIT]
## Other PostCSS plugins
- [`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
- 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)
- Khayot Razzakov [@SassNinja](https://github.com/Khayotbek1)

54
node_modules/postcss-sort-media-queries/browser.js generated vendored Normal file
View File

@@ -0,0 +1,54 @@
function sortAtRules(queries, sort, sortCSSmq) {
if (typeof sort !== 'function') {
sort = sort === 'desktop-first' ? sortCSSmq.desktopFirst : sortCSSmq
}
return queries.sort(sort)
}
module.exports = (opts = {}) => {
opts = Object.assign(
{
sort: 'mobile-first',
configuration: {
unitlessMqAlwaysFirst: false,
},
},
opts
)
const createSort = require('sort-css-media-queries/lib/create-sort');
const sortCSSmq = createSort(opts.configuration);
return {
postcssPlugin: 'postcss-sort-media-queries',
OnceExit(root, { AtRule }) {
let atRules = [];
root.walkAtRules('media', atRule => {
let query = atRule.params
if (!atRules[query]) {
atRules[query] = new AtRule({
name: atRule.name,
params: atRule.params,
source: atRule.source
})
}
atRule.nodes.forEach(node => {
atRules[query].append(node.clone())
})
atRule.remove()
})
sortAtRules(Object.keys(atRules), opts.sort, sortCSSmq).forEach(query => {
root.append(atRules[query])
})
}
}
}
module.exports.postcss = true

52
node_modules/postcss-sort-media-queries/index.js generated vendored Normal file
View File

@@ -0,0 +1,52 @@
function sortAtRules(queries, sort, sortCSSmq) {
if (typeof sort !== 'function') {
sort = sort === 'desktop-first' ? sortCSSmq.desktopFirst : sortCSSmq
}
return queries.sort(sort)
}
module.exports = (opts = {}) => {
opts = Object.assign(
{
sort: 'mobile-first',
configuration: false,
},
opts
)
const createSort = require('sort-css-media-queries/lib/create-sort');
const sortCSSmq = opts.configuration ? createSort(opts.configuration) : require('sort-css-media-queries');
return {
postcssPlugin: 'postcss-sort-media-queries',
OnceExit (root, { AtRule }) {
let atRules = [];
root.walkAtRules('media', atRule => {
let query = atRule.params
if (!atRules[query]) {
atRules[query] = new AtRule({
name: atRule.name,
params: atRule.params,
source: atRule.source
})
}
atRule.nodes.forEach(node => {
atRules[query].append(node.clone())
})
atRule.remove()
})
sortAtRules(Object.keys(atRules), opts.sort, sortCSSmq).forEach(query => {
root.append(atRules[query])
})
}
}
}
module.exports.postcss = true

95
node_modules/postcss-sort-media-queries/package.json generated vendored Normal file
View File

@@ -0,0 +1,95 @@
{
"name": "postcss-sort-media-queries",
"version": "4.4.1",
"description": "PostCSS plugin for sorting and combining CSS media queries with mobile first / **desktop first methodologies",
"keywords": [
"postcss",
"postcss-plugin",
"css",
"css-optimizations",
"sort",
"mobile-first",
"desktop-first",
"mediaquery",
"media-queries",
"mq",
"responsive-css",
"combine-media-query",
"sort-media-query",
"css-mqpacker",
"node-css-mqpacker"
],
"author": "Yunus Gaziyev <yunusga@yandex.ru>",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/solversgroup/postcss-sort-media-queries.git"
},
"bugs": {
"url": "https://github.com/solversgroup/postcss-sort-media-queries/issues"
},
"homepage": "https://github.com/solversgroup/postcss-sort-media-queries",
"scripts": {
"test": "jest-ci --coverage && eslint-ci .",
"refresh-deps": "rm -rf node_modules && rm package-lock.json && npm i"
},
"engines": {
"node": ">=10.0.0"
},
"dependencies": {
"sort-css-media-queries": "2.1.0"
},
"devDependencies": {
"autoprefixer": "^10.4.0",
"eslint": "^8.3.0",
"eslint-ci": "^1.0.0",
"eslint-plugin-jest": "^25.3.0",
"husky": "^7.0.4",
"jest": "^27.3.1",
"jest-ci": "^0.1.1",
"jest-cli": "^27.3.1",
"lint-staged": "^12.1.2",
"postcss": "^8.4.4",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-media-minmax": "^5.0.0",
"postcss-nested": "^5.0.6"
},
"peerDependencies": {
"postcss": "^8.4.16"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": "eslint --fix"
},
"eslintConfig": {
"parserOptions": {
"ecmaVersion": 2017
},
"env": {
"node": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:jest/recommended"
],
"rules": {
"jest/expect-expect": "off"
}
},
"jest": {
"testEnvironment": "node",
"coverageThreshold": {
"global": {
"statements": 100
}
}
},
"sortCssMQ": {
"unitlessMqAlwaysFirst": false
}
}