stylis-rule-sheet

What is stylis-rule-sheet?

The stylis-rule-sheet npm package is a plugin for Stylis, a lightweight CSS preprocessor. It allows you to handle CSS rules in a more programmatic way, making it easier to manipulate and inject styles dynamically.

What are stylis-rule-sheet's main functionalities?

Injecting CSS Rules

This feature allows you to inject CSS rules dynamically. The `ruleSheet` function takes a callback that will be called with each CSS rule, allowing you to handle it as needed.

const stylis = require('stylis');
const ruleSheet = require('stylis-rule-sheet');

const insertRule = ruleSheet((rule) => {
  console.log(rule); // This will log the CSS rule
});

stylis.use(insertRule);
stylis('.class', 'color: red;');

Handling Nested Rules

This feature allows you to handle nested CSS rules. The `ruleSheet` function will be called with each nested rule, making it easier to manage complex styles.

const stylis = require('stylis');
const ruleSheet = require('stylis-rule-sheet');

const insertRule = ruleSheet((rule) => {
  console.log(rule); // This will log the nested CSS rule
});

stylis.use(insertRule);
stylis('.parent', '.child { color: blue; }');

Other packages similar to stylis-rule-sheet

emotion

Emotion is a library designed for writing CSS styles with JavaScript. It provides powerful and flexible styling capabilities, including support for dynamic styles and theming. Compared to stylis-rule-sheet, Emotion offers a more comprehensive solution for styling in JavaScript, including a CSS-in-JS approach.

styled-components

Styled-components is a popular library for writing CSS in JavaScript. It allows you to create styled React components with tagged template literals. While stylis-rule-sheet focuses on handling CSS rules programmatically, styled-components provides a more integrated approach to styling React components.

jss

JSS is a library for writing CSS with JavaScript. It allows you to define styles as JavaScript objects and provides a powerful API for managing styles dynamically. JSS offers more advanced features for style management compared to stylis-rule-sheet, which is more focused on rule handling.

README

stylis rule-sheet

stylis plugin to extract individual rules to use with the insertRule API

var sheet = document.head.appendChild(document.createElement('style')).sheet
var length = sheet.cssRules.length

var plugin = stylisRuleSheet((rulset, safe) => {
	// indicates that the rule will throw when used with `insertRule`
	if (safe < 0)
		return

	try {
		sheet.insertRule(rulset, length)
		length++
	} catch (e) {
		console.log(e)
	}
})

stylis.use(plugin)