nano-css

What is nano-css?

nano-css is a lightweight CSS-in-JS library that allows you to write CSS styles directly in your JavaScript code. It is designed to be minimal and efficient, making it suitable for performance-critical applications.

What are nano-css's main functionalities?

Basic Styling

This feature allows you to define basic CSS styles using JavaScript objects. The `rule` function generates a class name that can be applied to HTML elements.

const { create } = require('nano-css');
const { addon: addonRule } = require('nano-css/addon/rule');
const nano = create();
addonRule(nano);
const { rule } = nano;
const button = rule({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  border: 'none',
  borderRadius: '5px'
});
console.log(button); // Outputs the generated class name

Keyframes

This feature allows you to define CSS keyframes for animations. The `keyframes` function generates a name for the keyframes that can be used in your styles.

const { create } = require('nano-css');
const { addon: addonKeyframes } = require('nano-css/addon/keyframes');
const nano = create();
addonKeyframes(nano);
const { keyframes } = nano;
const fadeIn = keyframes({
  from: { opacity: 0 },
  to: { opacity: 1 }
});
console.log(fadeIn); // Outputs the generated keyframes name

Global Styles

This feature allows you to define global CSS styles that apply to the entire document. The `global` function takes an object where the keys are selectors and the values are style objects.

const { create } = require('nano-css');
const { addon: addonGlobal } = require('nano-css/addon/global');
const nano = create();
addonGlobal(nano);
const { global } = nano;
global({
  body: {
    margin: 0,
    padding: 0,
    fontFamily: 'Arial, sans-serif'
  }
});

Other packages similar to nano-css

styled-components

styled-components is a popular CSS-in-JS library that allows you to write actual CSS code to style your components. It provides a more feature-rich and expressive API compared to nano-css, including support for theming, nesting, and more.

emotion

Emotion is another powerful CSS-in-JS library that offers both string and object styles. It is known for its high performance and flexibility, providing a wide range of features including theming, keyframes, and server-side rendering support.

aphrodite

Aphrodite is a CSS-in-JS library developed by Khan Academy. It focuses on performance and ease of use, providing a straightforward API for defining styles and handling media queries. It is less feature-rich compared to styled-components and emotion but is very efficient.

README

nano-css

Tiny 5^th generation CSS-in-JS library that you can actually use in production. Motto of nano-css is simple: create the smallest possible CSS-in-JS library and provide all features of any other library through addons.

• Only 0.5 Kb in base configuration, e.g. styled-components is 15.1Kb
• Library-agnostic — use it standalone, with React, Preact, Vue.js, or any other library
• Isomorphic — render on server and browser, generates stable class names, and re-hydrates
• Performant — simply the fastest library; does not create wrapper components, does not use inline styles or inline <style> elements, but caches all styles for re-use and injects CSS using .insertRule() for performance
• @media queries and animation @keyframes are supported
• Auto-prefixes your styles
• Extract CSS into external style sheet
• Public domain — Unlicense license

For pre-configured simple-to-use package see nano-theme, which builds on top of nano-css.

Reference

• Installation
• Addons
  • put() — demo!
  • rule() — demo!
  • drule() — demo!
  • sheet() — demo!
  • dsheet() — demo!
  • jsx() — demo!
  • useStyles() — demo!
  • withStyles() — demo!
  • decorator — demo № 1 and demo № 2
  • component — demo!
  • style() — demo!
  • styled()() — demo!
  • hyperstyle() — demo!
  • stable
  • atoms — demo!
  • emmet
  • nesting
  • keyframes()
  • hydrate()
  • prefixer
  • stylis
  • unitless
  • !important
  • :global
  • animate/*
  • reset/*
  • reset-font
  • googleFont()
  • limit
  • amp
  • virtual
  • spread
  • array
  • snake — demo!
  • tachyons
  • rtl
  • extract
  • sourcemaps
  • .units
  • cssom
  • vcssom
• Presets
• Server-side rendering