npmpackage.info

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

Other packages similar to jss-plugin-sort-css-media-queries

jss-plugin-props-sort

10.10.0

JSS plugin that ensures style properties extend each other instead of override

postcss-sort-media-queries

5.2.0

PostCSS plugin for sorting and combining CSS media queries with mobile first / **desktop first methodologies

sort-css-media-queries

2.4.0

The custom `sort` method (mobile-first / desktop-first) of CSS media queries for `postcss-sort-media-queries`, `css-mqpacker` or `pleeease` (which uses css-mqpacker) or, perhaps, something else ))

postcss-custom-media

11.0.5

Use Custom Media Queries in CSS

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

jss-plugin-sort-css-media-queries

JSS plugin for sort CSS media queries

1.0.1-beta.0

BSD-3-Clause

TypeScript

45,923 2.7

Installations

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

Pull Requests

Open

0

Total

1

Closed

0

Merged

1

Issues

Open

1

Total

1

Closed

0

Releases

Unable to fetch releases

Developer

dutchenkoOleg

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

15.1.0

NPM Version

7.0.15 Statistics

1 Stars

6 Commits

1 Watching

2 Branches

1 Contributors

Updated on 15 Feb 2021

Languages

TypeScript (67.97%)

JavaScript (32.03%)

Total Downloads

Cumulative downloads

Total Downloads

45,923

Last day

-91.4%

Compared to previous day

Last week

77.8%

2,215

Compared to previous week

Last month

563.4%

4,677

Compared to previous month

Last year

12.4%

18,065

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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

Dangerous-Workflow

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

10

Binary-Artifacts

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

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

Branch-Protection

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

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.7

/10

Last Scanned on 2024-11-25

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

Other packages similar to jss-plugin-sort-css-media-queries

Other packages similar to jss-plugin-sort-css-media-queries

jss-plugin-sort-css-media-queries

Installations

Pull Requests

0

1

0

1

Issues

1

1

0

Releases

Unable to fetch releases

Developer

dutchenkoOleg

Developer Guide

CommonJS

No

15.1.0

7.0.15

Statistics

Languages

Total Downloads

45,923

Daily Downloads

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`