stylis

What is stylis?

The stylis npm package is a lightweight CSS preprocessor that allows developers to write nested CSS, use mixins, and perform other transformations before the CSS is compiled. It is particularly designed to be used with CSS-in-JS libraries and offers a middleware architecture to extend its capabilities.

What are stylis's main functionalities?

CSS Preprocessing

Stylis allows you to write nested CSS rules, which it will then flatten into valid CSS. The code sample demonstrates how to preprocess a nested CSS string.

const stylis = require('stylis');

const css = `
  .parent {
    color: red;
    .child {
      color: blue;
    }
  }
`;

const output = stylis('.parent', css);
console.log(output);

Prefixing

Stylis automatically adds vendor prefixes to CSS rules when necessary. The code sample shows how to automatically prefix the 'display: flex;' rule.

const stylis = require('stylis');

const css = `display: flex;`;

const output = stylis('', css);
console.log(output);

Middleware

Stylis supports middleware, allowing you to intercept and transform CSS at various stages of processing. The code sample demonstrates a middleware that changes the color property for elements with the class '.button'.

const stylis = require('stylis');

stylis.use((context, content, selectors, parents, line, column, length) => {
  if (context === 2 && selectors[0] === '.button') {
    return content.replace('color: red', 'color: blue');
  }
});

const css = `.button { color: red; }`;

const output = stylis('', css);
console.log(output);

Other packages similar to stylis

postcss

PostCSS is a tool for transforming CSS with JavaScript plugins. It is more established and has a larger ecosystem of plugins compared to stylis. PostCSS can be used for a wide range of tasks including linting, optimization, and applying polyfills.

sass

Sass is a mature and feature-rich CSS extension language that allows for variables, nesting, mixins, and more. Unlike stylis, Sass has its own syntax and requires compilation to CSS, but it offers a more comprehensive set of features for styling.

less

Less is another CSS pre-processor that extends the capabilities of CSS with variables, mixins, functions, and more. It is similar to Sass and offers a different syntax and feature set compared to stylis.

README

Stylis

• ~705bytes minified+gzipped
• ~1kb minified

Stylis is a small css compiler that turns this

stylis('#user', styles);

Where styles is the following css

@root {
	body {
		background: yellow;
	}
}

.name {
    transform: rotate(30deg);
}

span, h1 {
	color:red;

	/**
	 * removes block comments and line comments
	 */
}

&{
	animation: slidein 3s ease infinite;
}

&:before {
	animation: slidein 3s ease infinite;	
}

@keyframes slidein {
	from { transform: translate(10px); }
	to { transform: translate(200px); }
}

@media (max-width: 600px) {
	& { appearance: none; }
}

into this (minus the whitespace)

body {
    background: yellow;
}
#user .name {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
#user span,
#user h1 {
    color: red;
}
#user {
    -webkit-animation: userslidein 3s ease infinite;
    animation: userslidein 3s ease infinite;
}
#user:before {
    -webkit-animation: userslidein 3s ease infinite;
    animation: userslidein 3s ease infinite;
}
@-webkit-keyframes userslidein {
    from {
        -webkit-transform: translate(10px);
        transform: translate(10px);
    }
    to {
        -webkit-transform: translate(200px);
        transform: translate(200px);
    }
}
@keyframes userslidein {
    from {
        -webkit-transform: translate(10px);
        transform: translate(10px);
    }
    to {
        -webkit-transform: translate(200px);
        transform: translate(200px);
    }
}
@media (max-width: 600px) {
    #user {
        -webkit-appearance: none;
        appearance: none;
    }
}

and if you wanted to append this to a style element/string

// browser
stylis('#user', styles, document.querySelector('style'));

// or explicity request a string, 
// in node this returns the css wrapped in <style></style> tags
// and in the browser this returns a style element with the css
stylis('#user', styles, true);

Supports

• Edge
• IE 9+
• Chrome
• Firefox
• Safari
• Node.js

Installation

direct download

<script src=stylis.min.js></script>

CDN

<script src=https://unpkg.com/stylis@0.1.5/stylis.min.js></script>

npm

npm install stylis --save