Subscribe to the RSS feed

[Macro] Format CSS blocks

Posted by stan on 2009-07-02 07:31
Forums: Komodo Macros and Extensions | OS: All / Any

What it does:

Takes something like this (a mess):

#rule
{
    text-align:  center;
    width: 58px;
    cursor: default;
    display: block;
    font-size:90%; line-height: 110%;
}

and turns it into this (a beauty):

#rule
{
    /* Sorted alphabetically, values aligned */
    cursor:      default;
    display:     block;
    font-size:   90%;
    line-height: 110%;
    text-align:  center;
    width:       58px;
}

Prerequisites

None, just follow the install routine below.

How to Install?

Make you you've got the latest Komodo Edit/IDE installed. Then simply download, drag & drop the .kpz file inside your Toolbox. Restart Komodo for changes to take effect.

How to Use?

Bring up a CSS buffer and press Ctrl+M, Ctrl+C inside a CSS block (between { and }) to trigger.

Known Issues & Limitations

  • The macro works in CSS documents only. It cannot operate on CSS regions within another language (HTML, PHP, etc.)
  • If the cursor is placed immediately before the closing }, the macro will report an error. Simply move one position back and try again.
  • Multiple blocks cannot be formatted at the same time
  • Most CSS hacks are not supported probably - *property-name works however

[Source code]

Download

Just gave it a spin, got a
nathan | Fri, 2009-07-03 10:44

Just gave it a spin, got a php doc with html in it (prototype) in the header is a section and in there I have the following bit:

                .main-bg .r1_c1 {
                        background: url(images/main-bg-80_01.jpg);
                        background-repeat: no-repeat;
                        background-position: top center;
                        width: 100%;
                        height: 196px;
                        float: left;
                }

When I run the macro I get:

        background:          url(images/main-bg-80_01.jpg);
        background:          url(images/main-bg-80_02.jpg);
        background:          url(images/main-bg-80_03.jpg);
        background:          url(images/main-bg-80_04.jpg);
        background:          url(images/main-bg-80_05.jpg);
        background:          url(images/main-bg-80_06.jpg);
        background-position: top center;
        background-position: top right;
        background-position: top center;
        background-position: top left;
        background-position: top center;
        background-position: top center;
        background-repeat:   no-repeat;
        background-repeat:   no-repeat;
        background-repeat:   no-repeat;
        background-repeat:   no-repeat;
        background-repeat:   no-repeat;
        background-repeat:   no-repeat;
        border:              1px solid red;
        color:               red;
        e-mail:              </label>;
        e-mail:              </label>;
        float:               left;
        float:               left;
        float:               left;
        float:               left;
        float:               left;
        float:               left;
        font-weight:         bold;
        height:              196px;
        height:              415px;
        height:              415px;
        height:              415px;
        height:              186px;
        height:              242px;
        left:                50%;
        margin-left:         -959.5px;
        name:                </label>;
        overflow:            hidden;
        position:            absolute;
        top:                 0px;
        width:               1919px;
        width:               100%;
        width:               606px;
        width:               705px;
        width:               608px;
        width:               100%;
        width:               100%;

It looks like the macro ran through my entire document rather than just my selection.

I'm using Komodo IDE, version 5.1.4, build 30485, platform win32-x86.

Lookse promising though :)

Nathan, Yes I am aware of
stan | Fri, 2009-07-03 11:39

Nathan,

Yes I am aware of this issue. The macro only runs in CSS documents and cannot operate on a CSS region within another language (PHP, HTML, etc.)

This should be easy to fix and I am considering it for the next update, if time permits.

different style
tsi | Fri, 2010-10-08 04:20

First, thanks a lot for this post and for sharing this script.
I would like to have a slightly different format, somthing like this :

#rule {
  text-align: center;
  width: 58px;
  cursor: default;
  display: block;
  font-size: 90%;
  line-height: 110%;
}

How is that possible ?
Thanks again.