Git Product home page Git Product logo

sublime-cssorder's Introduction

#Sublime CSSOrder

CSSOrder is a sublime text plugin for CSS file formatting.

Required Node.js

Intro

CSSOrder is a css coding style formatter with Tencent CSS Style

It can handle some special case like 'base64 url', 'single comment // ' and so on in CSS files.

Effect

Make CSS code become the following coding style:

/* Final CSS code */
.some-style,
.same-style {
    position: relative;
    top: -2px;
    right: 0;
    bottom: 0;
    left: 5px;
    z-index: 100;

    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 5px 10px;
    overflow: hidden;

    vertical-align: middle;

    color: #fff;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    background-color: rgba(82,157,218,.9);
    -webkit-background-clip: padding-box;
       -moz-background-clip: padding-box;
            background-clip: padding-box;
}

Install

  1. Install Node.js ( if you don't install it before ).

  2. Install Package Control.

  3. Press ctrl+shift+p , then input install and press Enter .

After that input CSSOrder to find the plugin and press Enter to install it.

Manually:

Clone or download git repo into your packages folder (in SublimeText, find Browse Packages... menu item to open this folder)

Usage

Press ctrl+shift+o

or right click the content and select Run Cssorder.

Custom configuration

  • You can write your own configuration by opening

Tools> Css Order> Set Cssorder Config

or right click the content and select Set Cssorder Config

  • order_config is using for some special case (like add newline for every block).

comb_config is using for the configuration of CSSComb.

  • It will automatically format when you saved the file,

and you can close automatical format by

setting format_on_save to false in Set Cssorder Config.

Release History

  • v0.4.0: Add custom config to handle special case.
  • v0.3.1: Fix libs dependence.
  • v0.3.0: Support Sass and Less.
  • v0.2.1: Submitting to Sublime Package Control.
  • v0.2.0: Handle compressive file case.
  • v0.1.0: Release.

sublime-cssorder's People

Contributors

lightningtgc avatar

Stargazers

Georgios K. avatar  avatar Alexandre Gomes avatar Adam avatar  avatar  avatar alwayrun avatar Double Han avatar  avatar  avatar 天凉 avatar  avatar  avatar  avatar  avatar Cauli Ziani avatar 德胜 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar Dean Shi avatar  avatar  avatar mochen.china avatar  avatar  avatar yexilong avatar chen avatar 王斌 avatar  avatar

Watchers

James Cloos avatar  avatar 德胜 avatar  avatar  avatar  avatar  avatar

sublime-cssorder's Issues

Support for shadow DOM?

I really love this sublime package and use it extensively. However, a recent project I am working on requires me to code into the shadow DOM and the "/deep/" declaration in my SCSS files causes the plugin to blow up.

Is there a way for me to work around this and still get the ordering working?

screen shot 2015-08-24 at 12 04 51 pm

CSSOrder Stops Working After 3103 Update

Sublime released an update as of the 9th of Feb. Post about the update can be found here:
https://www.sublimetext.com/blog/articles/sublime-text-3-build-3103

The only thing that stands out in the change log as a possible cause are the updates to the CSS package improvements, but I honestly have no idea. No errors in the status bar or anything when trying to order, there is simply no changes.

If you can't reproduce this, let me know. I really enjoy this plugin, and would be happy to help supply information that might help the issue be solved.

[REQUEST] Sass/Less specifics

Sorry for being a bit of a nitpicker, but I think it would help if the Sass/Less specific mixins and stuff got pushed to the top of the blocks instead of the bottom.

Now when using Bootstrap with Sass I get this:

.test {
     position: absolute;

    height: 230px;

    background: url("../images/logo.png") center 25px no-repeat transparent;

    @include make-xs-column(12);
}

Which breaks the 'position: absolute' part because the @include comes after it. It would be better if it rendered to:

.test {
    @include make-xs-column(12);

     position: absolute;

    height: 230px;

    background: url("../images/logo.png") center 25px no-repeat transparent;
}

[REQUEST] Space before new rule

I really like this plugin but I would LOVE an option to add a newline before each new rule. I find that it would add to the readability of the css.

Thanks for the awesome plugin though!

cssOrder error

When I run cssOrder I get a popup saying cssOrder error. I have node js installed. Is there something I'm missing?

src order

Hello,
in css for font i use multiple "src" and the order change everything when i save my css. I have a specific "src" it must be first (it is eot declaration for IE). So i have added in the cssorder settings the "src" to the end and when i save no move of multiple "src".

Thank you.

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.