PHPackages                             stylecow/stylecow - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. stylecow/stylecow

AbandonedArchivedLibrary[Utility & Helpers](/categories/utility)

stylecow/stylecow
=================

CSS preprocesor written in PHP

v1.4.2(12y ago)462186AGPL-3.0PHPPHP >=5.3.0

Since Jun 22Pushed 10y ago1 watchersCompare

[ Source](https://github.com/oscarotero/stylecow)[ Packagist](https://packagist.org/packages/stylecow/stylecow)[ Docs](http://idc.anavallasuiza.com/project/stylecow/)[ RSS](/packages/stylecow-stylecow/feed)WikiDiscussions master Synced yesterday

READMEChangelog (1)DependenciesVersions (9)Used By (0)

This package is deprecated. Use  instead
====================================================================

[](#this-package-is-deprecated-use-httpstylecowgithubio-instead)

Stylecow
========

[](#stylecow)

Created by Oscar Otero

GNU Affero GPL version 3.

Stylecow is a php library that allows parsing and manipulating css files.

Features:

- Written in php 5.3
- Includes the @import files (only files with relative path)
- Extensible with plugins
- Uses the PSR-0 autoloader standard

Why another CSS preprocessor?
-----------------------------

[](#why-another-css-preprocessor)

The main purpose of Stylecow is to bring more CSS support to all browsers. You write CSS and you get CSS. You don't have to learn another different language such LESS, SASS, etc. Stylecow converts your code to be more compatible with all browsers throught plugins without writing any non-standard code. There is a plugin to add automatically the vendor prefixes to all selectors, properties and values in need. There is another plugin that allows using rem values with fallback for IE<=8. There is a plugin to use css variables with the same syntax of the w3c standard (). And other plugins emulate some CSS effects (rotate, opacity, etc) in IE using the property "filter". So you can use Stylecow just to fix your modern CSS code and make it compatible with old browsers. And if you stop using Stylecow, your CSS code will remain CSS code.

But if you don't mind to write "non pure CSS code", there are more plugins that can help you to write styles faster. For example, Color allows manipulate colors changing some of the values (saturation, light, etc), Math can execute math operations, Grid makes easier to work with fixed columns, etc.

Demo
----

[](#demo)

Here you can test stylecow:

How to use
----------

[](#how-to-use)

```
//Include the library (if no psr-0 compatible loader is available)
include('Stylecow/autoloader.php');

//Load and parse the code
$css = Stylecow\Parser::parseFile('my-styles.css');

//Transform the css code using the plugins.
$css->applyPlugins(array(
	'Rem',
	'Variables',
	'VendorPrefixes'
));

//Print the result css code
echo $css;
```

Plugins
=======

[](#plugins)

Stylecow provides some basic plugins (but you can make your owns):

Plugins to bring CSS support:

- [BaseUrl](#baseurl) Changes the base url in url() functions
- [IeBackgroundAlpha](#iebackgroundalpha) IE support for rgba/hsla colors as background (IE <= 8 | )
- [IeClip](#ieclip) Fixes clip css syntax (IE <= 7)
- [IeFloat](#iefloat) Fixes double margin bug in floated elements in (IE 6)
- [IeInlineBlock](#ieinlineblock) Emulate the display: inline-block property (IE <= 7 | )
- [IeLinearGradient](#ielineargradient) Add ie filters to emulate linear-gradients (IE <= 9 | )
- [IeMinHeight](#ieminheight) Emulate the min-height property (IE <= 6 | )
- [IeOpacity](#ieopacity) Emulate the opacity property (IE <= 8 | )
- [IeTransform](#ietransform) Adds ie filters to emulate some css 2d transform (rotate, reflections, etc) (IE <= 8 | )
- [Initial](#initial) Adds support for "initial" value
- [Matches](#matches) Support for the CSS4 selector :matches() ()
- [MediaQuery](#mediaquery) Filters the css code for a specific mediaquery
- [NestedRules](#nestedrules) Brings nested rules support. There is a draft spec of CSS Hierarchies Module Level 3 () but have some differences (in w3c standard you must use the & character in all cases)
- [Rem](#rem) Add support for rem values (IE <= 8 | )
- [Variables](#variables) Support for variables (W3C syntax )
- [VendorPrefixes](#vendorprefixes) Adds automatically the vendor prefixes to all properties in need

Other plugins with non-standard syntax:

- [Color](#color) Provides the function color() to manipulate color values
- [Grid](#grid) Useful to work with one or various grids.
- [Math](#math) Provides the function math() to execute math operations

BaseUrl
-------

[](#baseurl)

Changes the base url in css url() functions. Useful in some cases when the css path is not the same of the assets path (images)

#### You write

[](#you-write)

```
div.foo {
	background-image: url('img/bg.png');
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to)

```
div.foo {
	background-image: url('/my/custom/baseurl/img/bg.png');
}
```

You have to define the base url at the second argument

```
$css->applyPlugins(array(
	'BaseUrl' => '/my/custom/baseurl/'
));
```

IeBackgroundAlpha
-----------------

[](#iebackgroundalpha)

Generate Internet Explorer filters to support alpha values as background (rgba/hsla colors)

#### You write

[](#you-write-1)

```
div.foo {
	background: rgba(0, 0, 0, 0.5);
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-1)

```
div.foo {
	background: rgba(0, 0, 0, 0.5);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#80000000', endColorStr='#80000000');
}
```

IeClip
------

[](#ieclip)

Fix the clip syntax in Internet Explorer 6-7 ([http://www.ibloomstudios.com/articles/misunderstood\_css\_clip/](http://www.ibloomstudios.com/articles/misunderstood_css_clip/))

#### You write

[](#you-write-2)

```
div.foo {
	clip: rect(5px, 40px, 45px, 5px);
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-2)

```
div.foo {
	clip: rect(5px, 40px, 45px, 5px);
	*clip: rect(5px 40px 45px 5px);
}
```

IeFloat
-------

[](#iefloat)

Fix the double margin bug in Internet Explorer 6 in floated elements.

#### You write

[](#you-write-3)

```
div.foo {
	float: left;
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-3)

```
div.foo {
	float: left;
	_display: inline;
}
```

IeInlineBlock
-------------

[](#ieinlineblock)

Adds css code to emulate display: inline-block property in Internet Explorer 6-7

#### You write

[](#you-write-4)

```
div.foo {
	display: inline-block;
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-4)

```
div.foo {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}
```

IeLinearGradient
----------------

[](#ielineargradient)

Generate ie filters to emulate background linear-gradients

#### You write

[](#you-write-5)

```
div.foo {
	background: linear-gradient(top, red, blue);
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-5)

```
div.foo {
	background: linear-gradient(top, red, blue);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FF0000', endColorStr='#0000FF');
}
```

IeMinHeight
-----------

[](#ieminheight)

Add css code to emulate min-height property in Internet Explorer 6

#### You write

[](#you-write-6)

```
div.foo {
	min-height: 200px;
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-6)

```
div.foo {
	min-height: 200px;
	_height: 200px;
}
```

IeOpacity
---------

[](#ieopacity)

Generate ie filters to add opacity support in Internet Explorer 6-8

#### You write

[](#you-write-7)

```
div.foo {
	opacity: 0.5;
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-7)

```
div.foo {
	opacity: 0.5;
	filter: alpha(opacity=50);
}
```

IeTransform
-----------

[](#ietransform)

Generate ie filters to add support for some css 2d transform in Internet Explorer 6-8

#### You write

[](#you-write-8)

```
div.foo {
	transform: rotate(45deg);
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-8)

```
div.foo {
	transform: rotate(45deg);
	filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = 0.70710678118655, M12 = -0.70710678118655, M21 = 0.70710678118655, M22 = 0.70710678118655);
}
```

Initial
-------

[](#initial)

Replace all "inital" values for the real value

#### You write

[](#you-write-9)

```
div.foo {
	background-position: initial;
	height: initial;
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-9)

```
div.foo {
	background-position: 0 0;
	height: auto;
}
```

Matches
-------

[](#matches)

Resolve the :matches() css4 selector ()

#### You write

[](#you-write-10)

```
div.foo :matches(h1, h2, h3, h4, h5, h6) a {
	color: blue;
}

div.foo :matches(article, section) header :matches(h1, h2) {
	color: black;
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-10)

```
div.foo h1 a, div.foo h2 a, div.foo h3 a, div.foo h4 a, div.foo h5 a, div.foo h6 a {
	color: blue;
}

div.foo article header h1, div.foo article header h2, div.foo section header h1, div.foo section header h2 {
	color: black;
}
```

MediaQuery
----------

[](#mediaquery)

Filter all css code for apply to specific mediaquery. This is useful for browser with no support for media queries.

In this example, lets say we want the css code for a browser with a screen of 1024px:

#### You write

[](#you-write-11)

```
@media screen and (max-width:400px) {
	.foo {
		font-size: 1em;
	}
}
@media screen and (max-width:800px) {
	.foo {
		font-size: 2em;
	}
}
@media only screen and (max-width:800px) {
	.foo {
		font-size: 3em;
	}
}
@media all and (max-width:1200px) {
	.foo {
		font-size: 4em;
	}
}
@media print and (max-width:1200px) {
	.foo {
		font-size: 5em;
	}
}
@media (min-width:1024px) {
	.foo {
		font-size: 6em;
	}
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-11)

```
.foo {
	font-size: 4em;
}
.foo {
	font-size: 6em;
}
```

You have to define the browser capabilities at the second argument

```
$css->applyPlugins(array(
	'MediaQuery' => array(
		'width' => '1024px',
		'type' => 'screen'
	)
));
```

NestedRules
-----------

[](#nestedrules)

Resolves the nested rules, allowing to write css in a more legible way:

#### You write

[](#you-write-12)

```
article.main {
	padding: 4px;

	header {
		margin-bottom: 20px;

		h1, h2 {
			font-size: Helvetica, sans-serif;
			color: #000;
		}

		p {
			color: #666;

			a {
				text-decoration: none;
				color: green;
			}

			a:hover {
				text-decoration: underline;
			}
		}
	}
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-12)

```
article.main {
	padding: 4px;
}

article.main header {
	margin-bottom: 20px;
}

article.main header h1,
article.main header h2 {
	font-size: Helvetica, sans-serif;
	color: #000;
}

article.main header p {
	color: #666;
}

article.main header p a {
	text-decoration: none;
	color: green;
}

article.main header p a:hover {
	text-decoration: underline;
}
```

This function can be combined with variables to define variables in specific scope.

Rem
---

[](#rem)

Allows use the rem value ([http://snook.ca/archives/html\_and\_css/font-size-with-rem](http://snook.ca/archives/html_and_css/font-size-with-rem)) to define the text size in a safe way for old browsers.

The default rem is 1em (16px) but you can change it with the :root or html selector.

#### You write

[](#you-write-13)

```
html {
	font-size: 1.2em;
}
.foo {
	font-size: 2em;
}
.foo div {
	font-size: 1rem;
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-13)

```
html {
	font-size: 1.2em;
}
.foo {
	font-size: 2em;
}
.foo div {
	font-size: 19.2px;
	font-size: 1rem;
}
```

Variables
---------

[](#variables)

You can store values in variables to use later. The syntax is the same than the w3c syntax: . For global variables (available in all properties), you have to define them in the selectors :root, html or body:

#### You write

[](#you-write-14)

```
:root {
	var-title-font: Helvetica, Arial, sans-serif;
	var-title-size: 2em;
	var-title-color: red;
}

div.foo h1 {
	font-family: $title-font;
	font-size: $title-size;
	color: $title-color;
	border-bottom: solid 1px $title-color;
}

/* You can change the values of the variables just for one selector */
div.foo h2 {
	var-title-color: blue;

	font-family: $title-font;
	font-size: $title-size;
	color: $title-color;
	border-bottom: solid 1px $title-color;
}

/* And you can use the function var() to provide a fallback if the variable is not defined: */
div.foo h3 {
	font-family: $title-font;
	font-size: $title-size;
	font-weight: var(title-weight, bold);
	color: $title-color;
	border-bottom: solid 1px $title-color;
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-14)

```
div.foo h1 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 2em;
	color: red;
	border-bottom: solid 1px red;
}

div.foo h2 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 2em;
	color: blue;
	border-bottom: solid 1px blue;
}

div.foo h3 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 2em;
	font-weight: bold;
	color: red;
	border-bottom: solid 1px red;
}
```

You can define some predefined variables on apply the plugin:

```
$css->applyPlugins(array(
	'Variables' => array(
		'myColor' => '#456',
		'myFont' => 'Helvetica, Arial, sans-serif'
	)
));
```

VendorPrefixes
--------------

[](#vendorprefixes)

Adds the vendor prefixes to all properties in need. For example.

#### You write

[](#you-write-15)

```
div.foo {
	border-radius: 4px;
	border-top-left-radius: 0;
	background: linear-gradient(#333, #999);
}

div.foo ::selection {
	background: red;
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-15)

```
div.foo {
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	border-top-left-radius: 0;
	-moz-border-radius-topleft: 0;
	-webkit-border-top-left-radius: 0;
	background: linear-gradient(#333, #999);
	background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#999));
	background: -moz-linear-gradient(#333, #999);
	background: -webkit-linear-gradient(#333, #999);
}

div.foo ::selection {
	background: red;
}

div.foo ::-moz-selection {
	background: red;
}
```

Color
-----

[](#color)

Manipulate color dinamically. Changes the hue, saturation, light, red, green, blue, alpha and tint values. You can use absolute or relative values:

- saturation:50 Set the saturation value to 50
- saturation:+10 Increments 10% the current saturation

This function supports all css color formats:

- names (black, red, blue, etc)
- hexadecimal (#333, #34FC98, etc)
- rgb / rgba
- hsl / hsla

This function may change in a future due to the possible implementation a color() function in CSS4 color module:

#### You write

[](#you-write-16)

```
div.foo {
	background: color(#369, light:50, alpha: 0.5);
	color: color(#369, blue:-30);
	border: solid 1px color(black, 20); /* Integer: Shortcut for color(black, tint:20) */
	box-shadow: 0 0 4px color(black, 0.2); /* Float: Shortcut for color(black, alpha:0.2) */
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-16)

```
div.foo {
	background: rgba(64, 128, 191, 0.5);
	color: #33667b;
	border: solid 1px #CCCCCC;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
```

Grid
----

[](#grid)

You can configurate and use one or various grids for the layout. You simply have to define the available width, number of columns and the gutter between.

The available function of grid plugin are:

- cols() Floats the element, define the with in columns and the gutter as margin-right
- cols-with() With in columns
- left() Margin left in columns
- right() Margin right in columns
- background() Define a background-image with the grid (using griddle.it service)
- columns() Overwrites the default number of columns
- width() Overwrites the default width of the grid
- gutter() Overwrites the default gutter of the grid
- in-cols() Useful to insert columns inside columns with padding

#### You write

[](#you-write-17)

```
$grid {
	width: 950px;
	columns: 24;
	gutter: 10px;
}

.left-column {
	$grid: cols(8);
}

.center-column {
	$grid: cols(12);
}

.right-column {
	$grid: cols(4);
	margin-right: 0;
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-17)

```
.left-column {
	width: 310px;
	float: left;
	margin-right: 10px;
}

.center-column {
	width: 470px;
	float: left;
	margin-right: 10px;
}

.right-column {
	margin-right: 0;
	width: 150px;
	float: left;
}
```

Math
----

[](#math)

You can execute math operations (+-\*/):

#### You write

[](#you-write-18)

```
.foo {
	font-size: math(2+4)em;
	height: math((30*5)/3)px;
}
```

#### And Stylecow converts to

[](#and-stylecow-converts-to-18)

```
.foo {
	font-size: 6em;
	height: 50px;
}
```

###  Health Score

33

—

LowBetter than 72% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity24

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity63

Established project with proven stability

 Bus Factor1

Top contributor holds 97.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~73 days

Recently: every ~47 days

Total

8

Last Release

4604d ago

Major Versions

0.3.3 → v1.0.02012-07-30

### Community

Maintainers

![](https://www.gravatar.com/avatar/e99df56b617f4af8cf0556a51a0ca20c7420104920c57d7e9eab093f92bb744f?d=identicon)[oscarotero](/maintainers/oscarotero)

---

Top Contributors

[![oscarotero](https://avatars.githubusercontent.com/u/377873?v=4)](https://github.com/oscarotero "oscarotero (191 commits)")[![exside](https://avatars.githubusercontent.com/u/445501?v=4)](https://github.com/exside "exside (3 commits)")[![adrian-seijo](https://avatars.githubusercontent.com/u/881852?v=4)](https://github.com/adrian-seijo "adrian-seijo (1 commits)")

---

Tags

csspreprocessor

### Embed Badge

![Health badge](/badges/stylecow-stylecow/health.svg)

```
[![Health](https://phpackages.com/badges/stylecow-stylecow/health.svg)](https://phpackages.com/packages/stylecow-stylecow)
```

###  Alternatives

[components/flag-icon-css

A curated collection of all country flags in SVG — plus the CSS for easier integration.

12.2k1.6M23](/packages/components-flag-icon-css)[matthiasmullie/minify

CSS & JavaScript minifier, in PHP. Removes whitespace, strips comments, combines files (incl. @import statements and small assets in CSS files), and optimizes/shortens a few common programming patterns.

2.3k33.1M430](/packages/matthiasmullie-minify)[scssphp/scssphp

scssphp is a compiler for SCSS written in PHP.

62929.3M294](/packages/scssphp-scssphp)[css-crush/css-crush

CSS preprocessor

540321.1k13](/packages/css-crush-css-crush)[tubalmartin/cssmin

A PHP port of the YUI CSS compressor

23142.7M63](/packages/tubalmartin-cssmin)[mexitek/phpcolors

A series of methods that let you manipulate colors. Just incase you ever need different shades of one color on the fly.

4993.8M20](/packages/mexitek-phpcolors)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)