YUI Compressor

https://yui.github.io/yuicompressor/
Admin
YUI Compressor is a JavaScript and CSS minification tool that safely reduces code size while...
Tokens:3,956
Snippets:53
Trust Score:9.7
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install CSSMin Node.js Module

Source: https://yui.github.io/yuicompressor/css.html

Install the Node.js module 'cssmin', which utilizes the JavaScript port of the YUI Compressor for CSS minification, using npm.

```bash
$ npm install cssmin
```

--------------------------------

### Run YUI Compressor Tests

Source: https://yui.github.io/yuicompressor/css.html

To run tests for YUI Compressor, navigate to the root directory and execute the 'ant' command. Ensure you have a Java SDK (1.4+) and Ant installed.

```bash
ant
```

--------------------------------

### YUI Compressor Command Line Usage

Source: https://yui.github.io/yuicompressor

Displays the help information for the YUI Compressor, outlining all available global and type-specific options.

```bash
$ java -jar yuicompressor-x.y.z.jar
Usage: java -jar yuicompressor-x.y.z.jar [options] [input file]

  Global Options
    -h, --help                Displays this information
    --type <js|css>           Specifies the type of the input file
    --charset <charset>       Read the input file using <charset>
    --line-break <column>     Insert a line break after the specified column number
    -v, --verbose             Display informational messages and warnings
    -o <file>                 Place the output into <file> or a file pattern.
                              Defaults to stdout.

  JavaScript Options
    --nomunge                 Minify only, do not obfuscate
    --preserve-semi           Preserve all semicolons
    --disable-optimizations   Disable all micro optimizations

GLOBAL OPTIONS

  -h, --help
      Prints help on how to use the YUI Compressor

  --line-break
      Some source control tools don't like files containing lines longer than,
      say 8000 characters. The linebreak option is used in that case to split
      long lines after a specific column. It can also be used to make the code
      more readable, easier to debug (especially with the MS Script Debugger)
      Specify 0 to get a line break after each semi-colon in JavaScript, and
      after each rule in CSS.

  --type js|css
      The type of compressor (JavaScript or CSS) is chosen based on the
      extension of the input file name (.js or .css) This option is required
      if no input file has been specified. Otherwise, this option is only
      required if the input file extension is neither 'js' nor 'css'.

  --charset character-set
      If a supported character set is specified, the YUI Compressor will use it
      to read the input file. Otherwise, it will assume that the platform's
      default character set is being used. The output file is encoded using
      the same character set.

  -o outfile

      Place output in file outfile. If not specified, the YUI Compressor will
      default to the standard output, which you can redirect to a file.
      Supports a filter syntax for expressing the output pattern when there are
      multiple input files.  ex:
          java -jar yuicompressor.jar -o '.css$:-min.css' *.css
      ... will minify all .css files and save them as -min.css

  -v, --verbose
      Display informational messages and warnings.

JAVASCRIPT ONLY OPTIONS

  --nomunge
      Minify only. Do not obfuscate local symbols.

  --preserve-semi
      Preserve unnecessary semicolons (such as right before a '}') This option
      is useful when compressed code has to be run through JSLint (which is the
      case of YUI for example)

  --disable-optimizations
      Disable all the built-in micro optimizations.

```

--------------------------------

### Execute Test Suite Script

Source: https://yui.github.io/yuicompressor/css.html

Navigate to the 'tests/' directory and run the './suite.sh' script to execute all tests, including those for the JavaScript port of the minifier.

```bash
cd tests/
./suite.sh
```

--------------------------------

### Convert `none` to `0` for CSS Properties

Source: https://yui.github.io/yuicompressor/css.html

Replaces the CSS value `none` with `0` for properties where they have the same meaning (e.g., `border: none;` becomes `border: 0;`). This is a safe optimization.

```css
.classname {
    border: none;
    background: none;
    outline: none;
}
```

```css
.classname{border:0;background:0;outline:0}
```

--------------------------------

### Minify JavaScript File

Source: https://yui.github.io/yuicompressor

Minifies a JavaScript file named 'myfile.js' and outputs the compressed content to 'myfile-min.js'.

```bash
$ java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js
```

--------------------------------

### Shorten IE Alpha Opacity Filter Syntax

Source: https://yui.github.io/yuicompressor/css.html

Replaces the verbose `progid:DXImageTransform.Microsoft.Alpha(Opacity=XX)` syntax with the shorter `alpha(opacity=XX)` for Internet Explorer.

```css
.classname {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);       /* IE < 8 */
}
```

```css
.classname{-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80)}
```

--------------------------------

### Minify JavaScript File with UTF-8 Encoding

Source: https://yui.github.io/yuicompressor

Minifies a JavaScript file named 'myfile.js' and outputs to 'myfile-min.js', explicitly specifying UTF-8 encoding for the input and output files.

```bash
$ java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8
```

--------------------------------

### Shorten Zero Values and Units in CSS

Source: https://yui.github.io/yuicompressor/css.html

Removes units from zero values (e.g., `0px` to `0`) and consolidates multiple zero values for margins/paddings. Also reduces floating-point numbers smaller than 1 by removing the leading zero.

```css
a {
    margin: 0px 0pt 0em 0%;
    background-position: 0 0ex;
    padding: 0in 0cm 0mm 0pc
}
```

```css
a{margin:0;background-position:0 0;padding:0}
```

```css
.classname {
    margin: 0.6px 0.333pt 1.2em 8.8cm;
}
```

```css
.classname{margin:.6px .333pt 1.2em 8.8cm}
```

--------------------------------

### Underscore/Star Hack Preservation

Source: https://yui.github.io/yuicompressor/css.html

YUICompressor preserves the underscore and star hacks used to target IE6 and IE7, as its regular expression-based minifier accepts various property prefixes.

```css
#element {
    width: 1px;
    *width: 2px;
    _width: 3px;
}
```

```css
#element{width:1px;*width:3pt;_width:2em}
```

--------------------------------

### Strip Comments and Whitespace in CSS

Source: https://yui.github.io/yuicompressor/css.html

Removes all comments and unnecessary whitespace from CSS. Use this to reduce file size for production.

```css
/*****
  Multi-line comment
  before a new class name
*****/
.classname {
    /* comment in declaration block */
    font-weight: normal;
}
```

```css
.classname{font-weight:normal}
```

--------------------------------

### Preserve Special Comments in CSS

Source: https://yui.github.io/yuicompressor/css.html

Retains comments marked with '!' at the beginning, useful for copyright notices. This prevents accidental minification of important comments.

```css
/*!
  (c) Very Important Comment
*/
.classname {
    /* comment in declaration block */
    font-weight: normal;
}
```

```css
/*!
  (c) Very Important Comment
*/.classname{font-weight:normal}
```

--------------------------------

### Remove Empty CSS Declarations

Source: https://yui.github.io/yuicompressor/css.html

Eliminates empty declaration blocks, such as `{ ; }`, which do not affect styling. This cleans up the CSS and reduces file size.

```css
.empty { ;}
.nonempty {border: 0;}
```

```css
.nonempty{border:0}
```

--------------------------------

### IE5/Mac Hack Preservation

Source: https://yui.github.io/yuicompressor/css.html

YUICompressor retains comments that appear to use the IE5/Mac hack, while minifying the comments themselves. This hack targets IE5/Mac using a parsing bug in comments.

```css
/* Ignore the next rule in IE mac \*/
.selector {
    color: khaki;
}
/* Stop ignoring in IE mac */
```

```css
/*\*/.selector{color:khaki}/**/
```

--------------------------------

### Optimize CSS Color Values

Source: https://yui.github.io/yuicompressor/css.html

Converts RGB color values to shorter hex codes and simplifies hex codes like `#AABBCC` to `#ABC` where possible. Does not minify colors in IE filter values.

```css
.color-me {
    color: rgb(123, 123, 123);
    border-color: #ffeedd;
    background: none repeat scroll 0 0 rgb(255, 0,0);
}
```

```css
.color-me{color:#7b7b7b;border-color:#fed;background:none repeat scroll 0 0 #f00}
```

```css
.cantouch {
    color: rgba(1, 2, 3, 4);
    filter: chroma(color="#FFFFFF");
}
```

```css
.cantouch{color:rgba(1,2,3,4);filter:chroma(color="#FFFFFF")}
```

--------------------------------

### Box Model Hack Retention

Source: https://yui.github.io/yuicompressor/css.html

The box model hack, which uses valid CSS without special comment usage, is retained by YUICompressor. This hack is often used to address differing box model interpretations in browsers.

```css
#elem {
    width: 100px; /* IE */
    voice-family: "}"",
    voice-family:inherit;
    width: 200px; /* others */
}
html>body #elem {
    width: 200px; /* others */
}
```

```css
#elem{width:100px;voice-family:"}"",voice-family:inherit;width:200px}html>body #elem{width:200px}
```

--------------------------------

### Child Selector Hack Tolerance

Source: https://yui.github.io/yuicompressor/css.html

YUICompressor retains empty comments immediately following the '>' character to preserve the child selector hack, which hides declarations from IE7 and below.

```css
html >/**/ body p {
    color: blue;
}
```

```css
html>/**/body p{color:blue}
```

--------------------------------

### Keep Only the First CSS @charset Declaration

Source: https://yui.github.io/yuicompressor/css.html

When multiple `@charset` declarations exist due to merged stylesheets, only the first one is preserved. This ensures correct character encoding interpretation.

```css
@charset "utf-8";
#foo {
    border-width: 1px;
}
 
/* second css, merged */
@charset "another one";
#bar {
    border-width: 10px;
}
```

```css
@charset "utf-8";#foo{border-width:1px}#bar{border-width:10px}
```

--------------------------------

### Strip Extra Semicolons in CSS

Source: https://yui.github.io/yuicompressor/css.html

Removes redundant semicolons within CSS declaration blocks. Ensures only one semicolon separates properties.

```css
.classname {
    border-top: 1px; ;
    border-bottom: 2px;;;
}
```

```css
.classname{border-top:1px;border-bottom:2px}
```

--------------------------------

### Strip Trailing Semicolon in CSS Declarations

Source: https://yui.github.io/yuicompressor/css.html

Removes the last semicolon in a CSS declaration block, which is not required for parsing. This is a minor optimization for file size.

```css
.classname {
    border-top: 1px;
    border-bottom: 2px;
}
```

```css
.classname{border-top:1px;border-bottom:2px}
```
Tokens:
Raw