Luckily the Find and Replace regular expression engine is pretty cool!

I’ve got this small (!) regular expression that should minify your CSS, by putting:

;?\s*([:;,{}])\s*|\s*/\*()[\S\s]+?\*/\s*|(\s)\s+

in the Find box and:

$1

in the replace box, and by ensuring that Regular expression is ticked, you should be able to minify CSS with the Replace All button!

Note: I haven’t test this particularly extensively, or with the IE expression(). This may produce undesired results! It certainly seems to be fine on all the standard CSS I’ve tested it with.

http://www.dom111.co.uk/files/minifycss/

If it’s useful, I might set up a memorable URL, let me know in the comments

I did set up syntax highlighting, using codemirror, which looked pretty nice, but made the minification (on large-ish files) take far too long. I haven’t really tested on any huge files, so try this at your own risk, but it seems faster that TextMate was.

The primary reason for the update is to add a new ‘non-CSS’ property of ‘include’. This property allows you to include styles that have already been defined in the current class.

For example, if you had a stylesheet that looked like this:

.bold {
  font-weight: bold;
}
 
.important {
  font-weight: bold;
}

You could rewrite this using:

JSS({
  ".bold": {
    "font-weight": "bold"
  },
  ".important": {
    "include": ".bold"
  }
});

Which I know you shouldn’t really do, and yes, it probably does go against the whole point of CSS, but I’m sure it’ll be useful in some situation at some point… No? Well it was interesting making it anyway.

Other minor updates are a PHP version so you can write nested stylesheets and output minified CSS all server-side and a bunch of HTML colour names that are actually shorter than the 6 digit hex codes.

I might work on doing other languages if I fancy the practice… Probably make a CSS to JSS conversion script first though…

You can see the updated demo page here, or just download the files here and have a look for yourself.

Ever wanted nested stylesheets?

I have!

Now you can have them! If you code your stylesheets as JSON and parse them using JSS 0.1. You could have the following:

      JSS({
        'html': {
          'body': {
            background: '#fff',
 
            'div#header': {
              height: '100px',
              background: '#00f'
            },
 
            'div#footer': {
              height: '40px',
 
              'span#copyright': {
                color: '#0f0'
              },
              'span#testing': {
                color: 'black',
                background: '#eeccff'
              }
            }
          },
          width: '800px'
        }
      });

Turned into:

      html {
        width: 800px;
      }
 
      html body {
        background: #fff;
      }
 
      html body div#header {
        height: 100px;
        background: #00f;
      }
 
      html body div#footer {
        height: 40px;
      }
 
      html body div#footer span#copyright {
        color: #0f0;
      }
 
      html body div#footer span#testing {
        color: black;
        background: #eeccff;
      }

You can get it here or view the test page here.