seanjm / css-clean Goto Github PK

View Code? Open in Web Editor NEW

3.0 3.0 0.0 80 KB

JavaScript 72.22% CSS 27.78%

css-clean's People

Stargazers

Watchers

css-clean's Issues

Feature request: Custom sort order

It would be nice to be able to define a custom sort order for declarations.

Linear-gradient breaks it

background-image: linear-gradient(33deg, hsl(200,80%,40%), hsl(155,75%,45%));

Media queries add extra ')' on first argument

It seems like an extra ')' is added if the first argument doesn't start with 'and' or 'only'

Input

@media (min-height: 480px) and (max-height : 767px) {
    #box {
        background-color: green;
    }
}

Output

@media 
    (min-height : 480px))
    and (max-height : 767px) {
    #box {
        background-color : green;
    }
}

Removes css variables in root

They are just gone when applying css-clean on a css file.

Example:

:root {
  --main-bg: #263238;
  --main-text: #eceff1;
}

Results:

:root {}

Reproducible: Always
Atom version: 1.15.0
css-clean version: 2.19.0

Experimental CSS properties

Any chance you can add support to ignore certain properties (or even add support) to experimental CSS properties such as the 'clip-path'.

Also, I absolutely love this package! Best CSS beautifier I've come across. Amazing job @SeanJM

Nested media queries have wrong indentation on first arg

Media query arguments should have tab_size * (depth + 1) indentation,
but a nested media query incorrectly indents it's first arg to be tab_size * ((depth * 2) + 1).

Input

/* Works fine on depth 0 */
@media only screen and (min-width: 480px) {
    #box {
        background-color: green;
    }
}

/* But not on nested media queries */
@supports (display: grid) {
    @media only screen and (min-width : 480px) {
        @media (color) and (min-height: 480px) and (max-height : 767px) {
            #box {
                background-color: red;
            }
        }
        @media (color) and (min-height: 768px) and (max-height: 991px) {
            #box {
                background-color: blue;
            }
        }
    }
}

My .csscleanrc file:

{
  "tab_size": 4,
  "tab_char": "space"
}

Actual Output

/* Works fine on depth 0 */

@media 
    only screen
    and (min-width : 480px) {
    #box {
        background-color : green;
    }
}

/* But not on nested media queries */

@supports (display: grid) {
    @media 
            only screen
        and (min-width : 480px) {
        @media 
                    (color)
            and (min-height : 480px)
            and (max-height : 767px) {
            #box {
                background-color : red;
            }
        }
        @media 
                    (color)
            and (min-height : 768px)
            and (max-height : 991px) {
            #box {
                background-color : blue;
            }
        }
    }
}

Expected Output

/* Works fine on depth 0 */

@media 
    only screen
    and (min-width : 480px) {
    #box {
        background-color : green;
    }
}

/* But not on nested media queries */

@supports (display: grid) {
    @media 
        only screen
        and (min-width : 480px) {
        @media 
            (color)
            and (min-height : 480px)
            and (max-height : 767px) {
            #box {
                background-color : red;
            }
        }
        @media 
            (color)
            and (min-height : 768px)
            and (max-height : 991px) {
            #box {
                background-color : blue;
            }
        }
    }
}

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.