Giter Site home page Giter Site logo

cleancss's Introduction

CleanCSS is a Sublime Text 3 package for beautifying your CSS. CleanCSS indents all your rules properly, aligns all the values by the colon, and sorts each property into categories within each rule:

  • Imports (for LESS)
  • Variables (for LESS)
  • Mixins (for LESS)
  • Content
  • Positional
  • Dimensional
  • Appearance
  • Animation

Installation

CleanCSS is on Package Control, so just open the Command Palette and select "Package Control: Install Package", then search for CleanCSS and you're done!

Usage

You can clean a css file by accessing the CleanCSS command from the command palette

or you can bind a key to the clean_css command in Preferences -> Key Bindings - User for ultra fast cleaning

{"keys":["f6"], "command" : "clean_css"},

Configuration

You can access the configuration settings by selecting Preferences -> Package Settings -> CleanCSS.

  • add_space_between_categories (Boolean) If true, then an empty line will be inserted between categories
  • add_space_between_rules (Boolean) Adds spaces inbetween each css rule.
  • indent_string (String) The string of characters used to indent. Defaults to a tab.
  • min_styles_to_collaspe (Number) If the rule has equal to or less styles, it won't add the category spacing. Defaults to 3.
  • vertically_align_selector_property_values (Boolean) If true, will align the colons of each style within each rule
  • categories (Array) Contains how CleanCSS should sort and group each CSS property. Feel free to customize this as you like. Ordering of the properities in here will dictate how the properties are ordered when you clean the file.

cleancss's People

Contributors

antonaavik avatar katiek2 avatar loquillo avatar serkanyersen avatar stolksdorf avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

cleancss's Issues

Breaks valid CSS

Plugin breaks this css- at begin I got 2 properties without {} braces.

/*Clipboard ÆӨÆӨÆӨ*/
td, body {  
  color:#000;
  line-height: 1.5;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
}
body{
	background: #FFFFFF url(bg.jpg) top repeat-x;
}
li{
  list-style: square;
}
h1 {
   font-size: 22px;
 }
h2{
    font-size: 18px;
  }
h3{
    font-size: 16px;
}
.code{
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  background: #EEEEEE;
  color: #4B0082;
  margin-top: 2px;
  margin-right: 20px;
}
.inlinecode{
  font-family: "Courier New", Courier, monospace;
  background: #EEEEEE;
  color: #4B0082;
}
table
{
  border-collapse:collapse;
  border:darkgray;
}
td
{
  padding:3px;
}

Not working on ST3

When I try to run it in ST3 I get:

Traceback (most recent call last):
  File "/Applications/Sublime Text.app/Contents/MacOS/sublime_plugin.py", line 549, in run_
    return self.run(edit)
  File "/Users/john/Library/Application Support/Sublime Text 3/Packages/CleanCSS/CleanCSS.py", line 44, in run
    self.formatRegion(cssRule)
  File "/Users/john/Library/Application Support/Sublime Text 3/Packages/CleanCSS/CleanCSS.py", line 77, in formatRegion
    result = self.createPartitionedRules(result, results[1])
  File "/Users/john/Library/Application Support/Sublime Text 3/Packages/CleanCSS/CleanCSS.py", line 165, in createPartitionedRules
    result = [filterAndSortRules(lines,rl) for rl in ruleLists]
TypeError: 'NoneType' object is not iterable

I noticed that spaces (rule alignment) are added

OSX 10.7.5
Sublime Text 3 Build 3059

Support media queries

I tried to clean up my CSS with media queries. Unfortunately CleanCSS removed almost all attributes and make media queries nested.

Breaks if { on single line

If using CSS with
.class
{
properties:value;
}

It breaks on the linebreak before the opening {

Would also like to have this added that the output will be formatted with opening curly on its own line, is this possible to customize?

serene trips

Snatch the deal with Serene Trips you can get up to 60% discount (Ranging from 999 to 2000), Book Cheap & Budget Hotels and Houseboats,Srinagar Hotels, Hotels, Kashmir, Paradise, Kashmir Hotels, Hotels in Kashmir, Honeymoon Packages in Kashmir, Cheap Hotels in Kashmir, Gulmarg Hotels, Hotels in Srinagar, Pahalgam Hotels, Budget Hotels in Kashmir, Sonmarg Hotels

Messes up

p + figure,
p + iframe {
  margin-top : 30px;
}

figure + p,
iframe + p {
  margin-top : 30px;
}

@include media(">=tablet") {
  p + figure,
  p + iframe {
    margin-top : 60px;
  }
  figure + p,
  iframe + p {
    margin-top : 60px;
  }
}

turns to

p + iframe {
  margin-top : 30px;
}

iframe + p {
  margin-top : 30px;
}

@include media(">=tablet") {
  p + figure,
  figure + p,

  p + iframe {
    margin-top : 60px;
  }

  iframe + p {
    margin-top : 60px;
  }
}

error in settings

i cant open sublimetext2 anymore, i get this alert msg:

error trying to parse settings: expected value in CleanCss\CleanCSS.sublime-settings:7:1

Error in default CleanCSS.sublime-settings

{
"add_space_between_categories" : true,
"add_space_between_rules" : true,

//The most rules to not add spaces between categories
// 0 to disable

<<<<<<< HEAD
"min_rules_to_collaspe" : 3,
"min_styles_to_collaspe" : 3,

//Vertically align selector property values
"vertically_align_selector_property_values" : true,

"num_rules_to_collapse" : 3,

683838c

//Vertically align selector property values
"vertically_align_selector_property_values" : 1,

//Your css rules will be order by category in the order they appear here, and ordered within
// each category as they are here as well
"categories" : [
    {
        "name" : "import",
        "attributes" : []
    },
    {
        "name" : "variable",
        "attributes" : []
    },
    {
        "name" : "mixin",
        "attributes" : []
    },
    //Content Rules
    {
        "name" : "content",
        "attributes" : [
            "content",
            "counter-increment",
            "counter-reset",
            "quotes",
            "crop",
            "move-to",
            "page-policy",

            "target",
            "target-name",
            "target-new",
            "target-position",

            "bookmark-label",
            "bookmark-level",
            "bookmark-target",
            "float-offset",
            "hyphenate-after",
            "hyphenate-before",
            "hyphenate-character",
            "hyphenate-lines",
            "hyphenate-resource",
            "hyphens",
            "image-resolution",
            "marks",
            "string-set"
        ]
    },

    //Positional Rules
    {
        "name" : "position",
        "attributes" : [
            "position",
            "display",
            "vertical-align",
            "float",
            "clear",
            "clip",

            "top",
            "right",
            "bottom",
            "left",

            "visibility",
            "z-index",
            "appearance",
            "box-sizing",
            "outline-offset",
            "resize",

            "alignment-adjust",
            "alignment-baseline",
            "baseline-shift",
            "dominant-baseline",
            "drop-initial-after-adjust",
            "drop-initial-after-align",
            "drop-initial-before-adjust",
            "drop-initial-before-alignbox",
            "drop-initial-size",
            "drop-initial-value",
            "inline-box-align",
            "line-stacking",
            "line-stacking-ruby",
            "line-stacking-shift",
            "line-stacking-strategy",
            "text-height"
        ]
    },

    //Dimensional Rules
    {
        "name" : "dimension",
        "attributes" : [
            "overflow",
            "overflow-x",
            "overflow-y",
            "overflow-style",

            "height",
            "min-height",
            "max-height",
            "width",
            "min-width",
            "max-width",

            "margin",
            "margin-top",
            "margin-right",
            "margin-bottom",
            "margin-left",

            "padding",
            "padding-top",
            "padding-bottom",
            "padding-right",
            "padding-left",

            "border-collapse",
            "border-spacing",
            "caption-side",
            "empty-cells",
            "table-layout",

            "grid-columns",
            "grid-rows",

            "box-align",
            "box-direction",
            "box-flex",
            "box-flex-group",
            "box-lines",
            "box-ordinal-group",
            "box-orient",
            "box-pack",

            "column-count",
            "column-fill",
            "column-gap",
            "column-rule",
            "column-rule-color",
            "column-rule-style",
            "column-rule-width",
            "column-span",
            "column-width",
            "columns",

            "rotation",
            "rotation-point"
        ]
    },


    //Appearance Rules
    {
        "name" : "appearance",
        "attributes" : [
            "cursor",
            "opacity",

            "background",
            "background-attachment",
            "background-color",
            "background-image",
            "background-position",
            "background-repeat",
            "background-clip",
            "background-origin",
            "background-size",


            "font",
            "@font-face",
            "font-family",
            "font-size",
            "font-style",
            "font-variant",
            "font-weight",
            "font-size-adjust",
            "font-stretch",

            "color",
            "direction",
            "letter-spacing",
            "line-height",
            "text-align",
            "text-decoration",
            "text-indent",
            "text-transform",
            "text-align-last",
            "text-justify",
            "text-outline",
            "text-overflow",
            "text-shadow",
            "text-wrap",
            "word-break",
            "word-wrap",

            "border",
            "border-color",
            "border-style",
            "border-width",
            "border-radius",
            "border-image",
            "border-image-outset",
            "border-image-repeat",
            "border-image-slice",
            "border-image-source",
            "border-image-width",
            "border-top",
            "border-top-color",
            "border-top-style",
            "border-top-width",
            "border-right",
            "border-right-color",
            "border-right-style",
            "border-right-width",
            "border-bottom",
            "border-bottom-color",
            "border-bottom-style",
            "border-bottom-width",
            "border-left",
            "border-left-color",
            "border-left-style",
            "border-left-width",

            "border-top-right-radius",
            "border-top-left-radius",
            "border-bottom-right-radius",
            "border-bottom-left-radius",

            "box-decoration-break",
            "box-shadow",

            "outline",
            "outline-color",
            "outline-style",
            "outline-width",

            "list-style",
            "list-style-image",
            "list-style-position",
            "list-style-type",

            "color-profile",
            "rendering-intent",
            "unicode-bidi",
            "white-space",
            "word-spacing",
            "hanging-punctuation",
            "punctuation-trim"
        ]
    },
    {
        "name" : "animation",
        "attributes" : [
            "-webkit-animation",
            "-moz-animation",
            "-ms-animation",
            "-o-animation",
            "animation",
            "-webkit-animation-name",
            "-moz-animation-name",
            "-ms-animation-name",
            "-o-animation-name",
            "animation-name",
            "-webkit-animation-duration",
            "-moz-animation-duration",
            "-ms-animation-duration",
            "-o-animation-duration",
            "animation-duration",
            "-webkit-animation-timing-function",
            "-moz-animation-timing-function",
            "-ms-animation-timing-function",
            "-o-animation-timing-function",
            "animation-timing-function",
            "-webkit-animation-delay",
            "-moz-animation-delay",
            "-ms-animation-delay",
            "-o-animation-delay",
            "animation-delay",
            "-webkit-animation-iteration-count",
            "-moz-animation-iteration-count",
            "-ms-animation-iteration-count",
            "-o-animation-iteration-count",
            "animation-iteration-count",
            "-webkit-animation-direction",
            "-moz-animation-direction",
            "-ms-animation-direction",
            "-o-animation-direction",
            "animation-direction",
            "-webkit-animation-play-state",
            "-moz-animation-play-state",
            "-ms-animation-play-state",
            "-o-animation-play-state",
            "animation-play-state",

            "-webkit-transition",
            "-moz-transition",
            "-ms-transition",
            "-o-transition",
            "transition",
            "-webkit-transition-property",
            "-moz-transition-property",
            "-ms-transition-property",
            "-o-transition-property",
            "transition-property",
            "-webkit-transition-duration",
            "-moz-transition-duration",
            "-ms-transition-duration",
            "-o-transition-duration",
            "transition-duration",
            "-webkit-transition-timing-function",
            "-moz-transition-timing-function",
            "-ms-transition-timing-function",
            "-o-transition-timing-function",
            "transition-timing-function",
            "-webkit-transition-delay",
            "-moz-transition-delay",
            "-ms-transition-delay",
            "-o-transition-delay",
            "transition-delay",

            "-webkit-marquee-direction",
            "-moz-marquee-direction",
            "-ms-marquee-direction",
            "-o-marquee-direction",
            "marquee-direction",
            "-webkit-marquee-play-count",
            "-moz-marquee-play-count",
            "-ms-marquee-play-count",
            "-o-marquee-play-count",
            "marquee-play-count",
            "-webkit-marquee-speed",
            "-moz-marquee-speed",
            "-ms-marquee-speed",
            "-o-marquee-speed",
            "marquee-speed",
            "-webkit-marquee-style",
            "-moz-marquee-style",
            "-ms-marquee-style",
            "-o-marquee-style",
            "marquee-style",

            "-webkit-transform",
            "-moz-transform",
            "-ms-transform",
            "-o-transform",
            "transform",
            "-webkit-transform-origin",
            "-moz-transform-origin",
            "-ms-transform-origin",
            "-o-transform-origin",
            "transform-origin",
            "-webkit-transform-style",
            "-moz-transform-style",
            "-ms-transform-style",
            "-o-transform-style",
            "transform-style",
            "-webkit-perspective",
            "-moz-perspective",
            "-ms-perspective",
            "-o-perspective",
            "perspective",
            "-webkit-perspective-origin",
            "-moz-perspective-origin",
            "-ms-perspective-origin",
            "-o-perspective-origin",
            "perspective-origin",
            "-webkit-backface-visibility",
            "-moz-backface-visibility",
            "-ms-backface-visibility",
            "-o-backface-visibility",
            "backface-visibility",

            "@-webkit-keyframes",
            "@-moz-keyframes",
            "@-ms-keyframes",
            "@-o-keyframes",
            "@keyframes"
        ]
    },
    {
        "name" : "other" ,
        "attributes" : []
    }
]

}

Hello, CleanCss delete build normalize.css error

here is output

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{background-color:transparent}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:700}
dfn{font-style:italic}
h1{font-size:2em;margin:.67em 0}
mark{background:#ff0;color:#000}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button{overflow:visible}
button,select{text-transform:none}
nput[type=reset],button,html input[type=button],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input{line-height:normal}
input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}
textarea{overflow:auto}
optgroup{font-weight:700}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}
html{overflow:auto}
.ui{display:inline-block}
.transform{-webkit-transform:rotate(35deg);-moz-transform:rotate(35deg);-ms-transform:rotate(35deg);-o-transform:rotate(35deg);transform:rotate(35deg);-webkit-transition:all ease-out linear;-moz-transition:all ease-out linear;-o-transition:all ease-out linear;transition:all ease-out linear;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.slider{width:550px;height:400px;background:url(../bitmaps/common/non.png) no-repeat 0 0}
.tmpl{width:100px;*zoom:1;*display:none;opacity:1;_width:100px}
.tmpl2{background:url(../bitmaps/common/ui.png) no-repeat 0 0}
/*# sourceMappingURL=templator.min.css.map */

on line 29 it was missing an 'i'.

It doesn't clean code inside @media

Try it with anything inside @media brackets: it will clean the rest of the file, but nothing inside the @media element (nothing happen).

Example of CSS to clean:

@media screen and (orientation: landscape) {
[role='toolbar'] {
height: 100%;
width: 30px;
}}

Issue when parsing.

hello i found a bug. i have uploaded short video for details.

you can try with this code block.

.l-sidemenu {
  background      : url(../assets/images/sidemenu-bg.png) no-repeat center center;
  background-size : cover;
}
.l-sidemenu .list .item,
.l-sidemenu .list .item-content {
  background-color : transparent;
  font-size        : $font-size-base;
  font-weight      : 400;
  color            : $secondary-text-color;
  text-align       : center;
  border           : none;
}

.l-sidemenu .list .item-content {
  padding : $item-padding;
}

.l-sidemenu .list .item.activated .item-content {
  background : $divider-light-color;
  color      : $white;
}

.l-sidemenu .list .item-profile {
  padding-top : 0;

  .item-content {
    padding-top : 0;
  }

  &.activated .item-content {
    background-color : transparent;
  }
}

.l-sidemenu .item-profile .item-profile-name {
  display    : block;

  margin-top : $content-padding;

  color      : $white;
}

.l-sidemenu .item-profile .item-profile-avatar {
  max-width     : 60px;

  border-radius : 50%;
}

and

.settings-list {

  > .item.-current {
    display         : flex;

    border-color    : $divider-dark-color;

    align-items     : center;
    justify-content : space-between;
  }


  > .item.-current > .value {
    font-size   : $font-size-base;
    font-weight : 400;
    color       : $primary-text-color;
  }

  > .item.-current > .value > input {
    display     : initial;
    float       : right;

    height      : 20px;

    font-weight : 600;
    line-height : 20px;
    text-align  : right;
  }

  > .item.item-toggle,
  > .item.-current > .label {
    font-size : $font-size-base;
    color     : $secondary-text-color;
  }
}

.settings-list > .item-toggle > .toggle {
  top : 15px;

  > .track {
    height       : 22px;

    border-color : $divider-dark-color;
  }

  > .track > .handle {
    top              : 10px;
    left             : 12px;

    height           : 12px;
    width            : 12px;

    background-color : $accent-color;
    box-shadow       : none;
  }

  > input[type="checkbox"]:checked + .track {
    background-color : $accent-color;
    border-color     : $accent-color;
  }

  > input[type="checkbox"]:checked + .track > .handle {
    left             : 19px;

    background-color : $white;
  }
}

parsing-bug.zip

Preprocessor support

Would be nice to have support for cleaning our preprocessor CSS (the scss files for example, so pre compilation files)

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

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

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.