jss - JSS is an authoring tool for CSS which uses JavaScript as a host language.

•    Javascript

---

JSS is a more powerful abstraction over CSS. It uses JavaScript as a language to describe styles in a declarative and maintainable way. It is a high performance JS to CSS compiler which works at runtime and server-side. This core library is low level and framework agnostic. It is about 6KB (minified and gzipped) and is extensible via plugins API. Feel free to ask any JSS related questions on twitter by using hashtag #cssinjs and mentioning @oleg008, watch my latest talk about "Unique Value Proposition of CSSinJS" and try it on a playground.

js css css-in-js cssinjs jss stylesheets components

postcss-js - PostCSS for React Inline Styles, Free Style and other CSS-in-JS

•    Javascript

---

PostCSS for React Inline Styles, Radium, JSS and other CSS-in-JS.For example, to use Stylelint, RTLCSS or postcss-write-svg plugins in your workflow.

postcss postcss-runner js inline react css cssinjs

react-jss - JSS integration for React.

•    Javascript

---

React-JSS provides components for JSS as a layer of abstraction. JSS and the default preset are already built in! Try it out in the playground. React-JSS wraps your component with a higher-order component. It injects a classes prop, which is a simple map of rule names and generated class names. It can act both as a simple wrapping function and as an ES7 decorator.

react jss cssinjs css-in-js style css stylesheet hoc decorator

glamorous - 💄 Maintainable CSS with React

•    Javascript

---

With the release of glamorous-primitives, now you can use glamorous with react-sketchapp to manage design systems and use React components for designs.You can find documentation and related examples here.

css-in-js glamor react styled-components glamorous css cssinjs jsxstyle

glamorous-native - React Native component styling solved💄

•    Javascript

---

glamorous for React Native. React component styling solved with an elegant (inspired) API, small footprint, and great performance. For full feature documentation, see the glamorous docs. In React Native, we write styles within our JS, but you don't like having to create entire component functions just for styling purposes. You don't want to give a name to something that's purely style-related. And it's kind of annoying to do the StyleSheet.create, conditionals, and props-forwarding song and dance.

react react-native glamorous styled-components css-in-js jsxstyle cssinjs

emotion - style as a function of state

•    Javascript

---

Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production. Get up and running with a single import.

css-in-js babel-plugin react reactjs css emotion styles

linaria - Zero-runtime CSS in JS library

•    Javascript

---

Fast zero-runtime CSS in JS library

css css-in-js css-in-react react

babel-plugin-css-in-js - A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e

•    Javascript

---

A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e.g. the className prop of React elements. While transforming, the plugin processes all JavaScript style definitions found and bundles them up into a CSS file, ready to be requested from your web server. babel-plugin-css-in-js works seamlessly on both client and server. It has built-in support for media queries, pseudo-classes, attribute selectors, and theming. The plugin's options allow you to configure vendor-prefixing, minification, and class name compression.

babel-plugin css-in-js stylesheet bundler

minify - CSS & JavaScript minifier, in PHP

•    PHP

---

And it comes with a huge test suite. The object constructor accepts 0, 1 or multiple paths of files, or even complete CSS/JS content, that should be minified. All CSS/JS passed along, will be combined into 1 minified file.

minify minifier css css-minifier js-minifier compressor compression js

react-inline - Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e

•    Javascript

---

Note: Thanks to the new possibilities of Babel v6+, there's also my babel-plugin-css-in-js project, which works exactly the same but doesn't require a separate CLI/API. If you're using Babel for code transpilation, just put babel-plugin-css-in-js in your build pipeline. Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the className prop of React elements.

react style styles stylesheet inline bundle extract css

styled-system - Design system utilities for styled-components and other css-in-js libraries

•    Javascript

---

Design system utilities for styled-components, glamorous, and other css-in-js libraries

react css-in-js design-systems styled-components glamorous glamor typography layout emotion fela cxs responsive

styled-tools - Useful interpolated functions for CSS-in-JS

•    Javascript

---

Useful interpolated functions for styled-components 💅, emotion 👩‍🎤, JSS and other CSS-in-JS libraries. Same as prop, except that it returns props.theme[path] instead of props[path].

styled-components react css-in-js lodash utilities emotion jss styled-tools

Ideal-Image-Slider-JS - Quite simply the ideal Image Slider in vanilla JS.

•    Javascript

---

Ideal Image Slider is written in vanilla JS and has no dependancies.Next you need to include the CSS file in the <head> section of your HTML and you need to include the script before the </body> tag in your HTML. Note you can optionally include a theme CSS file in the <head> too.

ideal image slider

aphrodite - Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

•    Javascript

---

Support for colocating your styles with your JavaScript component.If you'd rather watch introductory videos, you can find them here.

css aphrodite css-in-js react inline-styles

frontend-bootcamp - Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux

•    TypeScript

---

In this two-day workshop you'll learn the basics of frontend development while building a working web app. The first day provides an introduction to the fundamentals of the web: HTML, CSS and JavaScript. This is targeted at new and experienced developers alike. On the second day we'll dive into more advanced topics like TypeScript, state management, and testing. While the examples should be accessible to anyone, you'll get the most out of it if you have some prior experience with programming and web technologies.

react typescript html css css-in-js office-ui-fabric-react microsoft redux redux-thunk

micron - a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power

•    CSS

---

Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript. Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods.

js javascript-library css css3 css-animations css-modules animation micron micronjs micro-interaction microinteraction-library micro-interaction-css micro-interaction-js interaction-js ui-interaction-js

free-style - Make CSS easier and more maintainable by using JavaScript

•    TypeScript

---

Free-Style is designed to make CSS easier and more maintainable by using JavaScript. There's a great presentation by Christopher Chedeau you should check out.

css js dedupe hash typescript css-in-js css-string minification inline style server

TinyEditor - A functional HTML/CSS/JS editor in less than 400 bytes

•    HTML

---

A functional HTML/CSS/JS editor in less than 400 bytes

html css

react-css-components - Define React presentational components with CSS

•    Javascript

---

Define React presentational components with CSS (or even SASS or Less if you like). The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules.

css-in-js react webpack css-modules react-dom css postcss postcss-plugin webpack-loader

Hardy - Selenium-driven, cucumber-powered CSS testing.

•    Javascript

---

This is almost entirely working but not 100%. If you spot a problem, please file an issue. Hardy is a collection of CSS testing steps and a boilerplate testing setup to get you up-and-running with automated CSS testing as quickly as possible. Tests are written in Cucumber and use Selenium. Hardy runs on Node.js and therefore all the example CSS test helpers are written in JS. The functionality behind them can easily be reused in any test setup, whether your tests are written in Java, Ruby or anything else.

cucumber selenium automated css test