Sorry, but I've not yet supported your browser ( IE7 or IE8 ). Please use another, advanced, browser to view this site

thank you

Supported browsers

My first attempt at a sublime text 2 plugin and…it works!!

August 7th, 2013
Categories: Blog, Development, Plugins | Tags: , , ,

I’m currently contracting for a company in Liverpool Street, London. I’m was in the process of taking old CSS and moving, cleaning, tidying and fixing ALL of it, for this specific Magento page. It’s a painful task but someone needed to doit!

I was working on a large…sorry I mean HUGE…CSS file and it was all written inline, nearly at minified level!. This is my worst, coding, nightmare come true.

#ExampleCSSCodeSelector { background: url('../images/thissucks.jpg') no-repeat 0 10px #f00; font-size: 12px; font-family: arial, helvetica, serif; color: #fff; border-radius: 20px 20px 20px 20px;}you get what i mean, right? it’s difficult to read let a lone see where one style starts/finishes.

I spent about 10 minutes manually spacing, new line-in’ and indenting the CSS in to manageable blocks before I gave up and got frustrated…so I tweeted about it, as you do.

This was when I turned to Google and looked for a ready made plugin to clean up the CSS automatically as manually doing this wasn’t going to go down well for me and the people around me. I was more frustrated with why this code was written like this in the first place than anything else; no developer should write code like this…unless they’re manually minifying the code (which never happens).

I came across this post – Sublime Forum – and was presented with the following two blocks of code:

import sublime, sublime_plugin, re # toggle a single-line or multi-line formatted css statementclass ToggleSingleLineCssCommand(sublime_plugin.TextCommand):   def run(self,edit):      for region in reversed(self.view.sel()):            text = self.view.substr(region)            # check if the css statement needs to be expanded or collapsed            if re.match('^.*\{.*}\s*$', text):                # expand the css statement                m = re.search('^(?P<key>.*)\{(?P<params>.*)\;\s*}$', text)                multiline = '%s{\n\t%s;\n}' % (m.group('key'), m.group('params').strip().replace('; ', ';\n\t'))                self.view.replace(edit, region, multiline)            else:                # collapse the css statement                singleline = ' '.join([x.strip() for x in text.split('\n')])                self.view.replace(edit, region, singleline)

{ "keys": ["ctrl+shift+j"], "command": "toggle_single_line_css" }

There was no explanation on what to do with these so I Google’d again and found what I needed todo:

From what I remember, here are the steps I took:

  1. Select Tools | New Plugin… in the menu
  2. Save to Packages/User/NameOfYouPlugin.py.
  3. Paste in code from block 1
  4. Save
  5. Select Preferences | Key Bindings – User
  6. Paste the second block of code in between the ” [ ] “‘s
  7. Save

You then head over to a CSS document with, stupidly, typed CSS and highlight one selector block (it only works one block at a time) and press the keys, ctrl+shift+j, previously assigned to the plugin (these are editable).

You should see the CSS change immediately so it becomes legible, as below:

#ExampleCSSCodeSelector {    background: url('../images/thissucks.jpg') no-repeat 0 10px #f00;    font-size: 12px;    font-family: arial, helvetica, serif;    color: #fff;    border-radius: 20px 20px 20px 20px;} tabbing doesn’t translate too well in to WordPress

If you find it doesn’t work then drop me a message via the boxes below and I’ll find out what I’ve forgot to mention. I hope this saves you time, as it did me!

latest work

  1. Responsive design, Responsive grid integration, Media queries, HTML5, jQuery, JavaScript, CSS3 animations

  2. Responsive carousel, design, grid and media queries, HTML5, custom jQuery & JavaScript, HTML5 & CSS3 animations, custom nomination form.

  3. Responsive design, grid and media queries, HTML5, custom jQuery & JavaScript, mobile optimised design and development

  4. Custom Wordpress posts, one page design and development, Custom JavaScript for mobile and desktop carousel switching, mobile optimised design and development

Back to top

designed & developed by Scripted Pixels Ltd