npmpackage.info

Gathering detailed insights and metrics for jss-plugin-sort-css-media-queries

jss-plugin-sort-css-media-queries - 1.0.1-beta.0 | npmpackage.info

jss-plugin-sort-css-media-queries

JSS plugin for sort CSS media queries

1.0.1-beta.0

BSD-3-Clause

TypeScript

10.21 kB

2.7

Installations

npm install jss-plugin-sort-css-media-queries

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

15.1.0

NPM Version

7.0.15 Pull Requests

Open

0

Total

1

Closed

0

Merged

1

Issues

Open

1

Total

1

Closed

0

Releases

Unable to fetch releases

Languages

TypeScript

JavaScript

TypeScript (67.97%)

JavaScript (32.03%)

Developer

dutchenkoOleg

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

BSD-3-Clause License

1 Stars

6 Commits

1 Watchers

2 Branches

1 Contributors

Updated on Feb 15, 2021

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

1.0.1-beta.0

Package Id

jss-plugin-sort-css-media-queries@1.0.1-beta.0

Unpacked Size

10.21 kB

Size

4.04 kB

File Count

NPM Version

7.0.15

Node Version

15.1.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

jss-plugin-sort-css-media-queries

JSS plugin for sort CSS media queries

Install

1npm i jss-plugin-sort-css-media-queries

Plugin options

`desktopFirst`

type: boolean
default: false

By default, plugin is using mobileFirst methodology for sorting CSS Media Queries.
By this option you can change behavior to the desktopFirst methodology.

`combineMediaQueries`

type: boolean
default: false

You can combine similar CSS Media Queries rules into the one block.

1import jss from 'jss';
2jss.use(sortCssMediaQueries());
3
4const sheet = jss.createStyleSheet({
5    button: {
6        width: 100,
7        '@media (min-width: 600px)': {
8            width: 150
9        }
10    },
11    span: {
12        color: 'blue',
13        '@media (min-width: 600px)': {
14            width: 'yellow'
15        }
16    }
17});

Result without combineMediaQueries

1button {
2    width: 100px;
3}
4
5span {
6    color: blue;
7}
8
9@media (min-width: 600px) {
10    button {
11        width: 150px;
12    }
13}
14
15@media (min-width: 600px) {
16    span {
17        color: yellow;
18    }
19}

Result with combineMediaQueries: true

1button {
2    width: 100px;
3}
4
5span {
6    color: blue;
7}
8
9@media (min-width: 600px) {
10    button {
11        width: 150px;
12    }
13
14    span {
15        color: yellow;
16    }
17}

How it works

Unfortunately, I have not found a more correct method of influencing the sorting of the list of rules than how to modify the RuleList::toString() method.
That is a wrong way from the architecture OOP principles, but it is the most non-breaking way for the whole JSS workflow.
After calling .toString() method JSS work is done and in this point I can make own job with sorting, combining and returning CSS output.

Contributing

Please fill free to create issues or send PR

Licence

BSD-3-Clause License

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.7

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

jss-plugin-sort-css-media-queries

Installations

Developer Guide

No

CommonJS

15.1.0

7.0.15

Pull Requests

0

1

0

1

Issues

1

1

0

Releases

Unable to fetch releases

Languages

Developer

dutchenkoOleg

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

jss-plugin-sort-css-media-queries

Install

Plugin options

desktopFirst

combineMediaQueries

How it works

Contributing

Licence

10

10

10

3

0

0

0

0

0

0

0

0

0

2.7

/10

`desktopFirst`

`combineMediaQueries`