
Product
Announcing Socket Fix 2.0
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.
compare-media-queries
Advanced tools
Opinionated sorting function. Originaly made to be used in mqpacker sort function.
This function evaluates only first media query. It can't compare additional queries separated by comma.
Warning: You have to take into account that sorting media queries in CSS can produce unintended results.
import compare from 'compare-media-queries';
compare(a, b, options);
Returns numbers as required by Array.prototype.sort()
.
Parameter | Type | Description |
---|---|---|
a | string | required First media query |
b | string | required Second media query |
options | object | Options |
Function uses two objects to evaluate weight of media query.
weights
Object containing weights for different parts of media query. You can efectively change sorting rules by providing different weights.
Defaults:
const defaultWeights = {
types: {
all: 1000,
screen: 2000,
print: 3000,
unknown: 9000
},
modifiers: {
min: 100,
max: 200,
unknown: 900
},
features: {
blank: 10,
width: 20,
height: 30,
resolution: 40,
unknown: 90
}
}
unknown
is used for every unknown rule
units
units
are used for value conversion. For example 10px
will became 10
, 10em
will became 160
etc.
You can provide rules for unknown units.
Defaults:
const defaultUnits = {
ch: 8.8984375,
em: 16,
rem: 16,
ex: 8.296875,
px: 1,
dppx: 1,
dpi: 1
}
Default weights are for mobile-first sorting and are calculated based on following order
all
| unspecified
, screen
, print
, other typesmin
, max
width
, height
, resolution
, otherIf specifity is same for both queries, values are compared. If modifier max
is used, values are sorted in descending order.
FAQs
Opinionated function to compare media queries
The npm package compare-media-queries receives a total of 5 weekly downloads. As such, compare-media-queries popularity was classified as not popular.
We found that compare-media-queries demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.
Security News
Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get smarter.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.