react-with-styles - Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation

•    Javascript

---

Use CSS-in-JavaScript for your React components without being tightly coupled to one implementation (e.g. Aphrodite, Radium, or React Native). Easily access shared theme information (e.g. colors, fonts) when defining your styles.Create a module that exports an object with shared theme information like colors.

react css css-in-js styles aphrodite radium inline native

email-templates - :mailbox: Create, preview, and send custom email templates for Node

•    Javascript

---

Create, preview, and send custom email templates for Node.js. Highly configurable and supports automatic inline CSS, stylesheets, embedded images and fonts, and much more! Made for sending beautiful emails with Lad.NEW: v3.x is released (you'll need Node v6.4.0+); see breaking changes below. 2.x branch docs available if necessary.

nodejs email templates template-engine juice pug ejs custom node inline css inline-css responsive template nodemailer postmark mandrill sendgrid mailchimp webresource lad lass koa consolidate engine transport moonmail mailgun

inliner - Node utility to inline images, CSS and JavaScript for a web page - useful for mobile sites

•    Javascript

---

Turns your web page to a single HTML file with everything inlined - perfect for appcache manifests on mobile devices that you want to reduce those http requests.Once you've inlined the crap out of the page, you can optionally configure a service worker to add advanced caching and offline functionality.

mobile inline production build minify

glamor - inline css for react et al

•    Javascript

---

This expands on ideas from @vjeux's 2014 css-in-js talk. We introduce an api to annotate arbitrary dom nodes with style definitions ("rules") for, um, the greater good. as a compromise, we enable the former 'speedy' mode NODE_ENV=production, and disable it otherwise. You can manually toggle this with the speedy() function.

css inline

vivid - a JavaScript library which is built to easily customize and use the SVG Icons with a blaze.

•    Javascript

---

Vivid.JS is an SVG Icons library which can be used to add highly customizable vibrant icons to the DOM without any dev dependencies. Vivid.JS is easy to adapt and can bring SVG icons to life using html5 data attributes on the go. Icons can also be individually customized in terms of colors and size using html5 data attributes which gives more power to Vivid.JS library.

svg svg-icons svg-images nodejs node library javascript-library javascript-framework icon icons react inline svgicon svgicons vivid builder

common-tags - 🔖 Useful template literal tags for dealing with strings in ES2015+

•    Javascript

---

🔖 A set of well-tested, commonly used template literal tag functions for use in ES2015+. 🌟 Plus some extra goodies for easily making your own tags.

multiline-strings string-substitution indentation inline html-template tagged-template tagged-template-literals composition composable abstraction es6 es2015 array babel es2015-tag es6-tag heredoc html indent indents line literal multi multiline normalize one oneline single singleline string strings strip tag tagged template

iphone-inline-video - 📱 Make videos playable inline on the iPhone (prevents automatic fullscreen)

•    Javascript

---

📱 Make videos playable inline on the iPhone (prevents automatic fullscreen)

iphone autoplaying-videos polyfill playsinline browser ios play video inline fullscreen full-screen ipod autoplay multiple audio sound canvas gif

svg-sprite - SVG sprites & stacks galore — A low-level Node

•    Javascript

---

It comes with a set of Mustache templates for creating stylesheets in good ol' CSS or one of the major pre-processor formats (Sass, Less and Stylus). Tweaking the templates or even adding your own custom output format is really easy, just as switching on the generation of an HTML example document along with your sprite. For an up-to-date list of browsers supporting SVG in general respectively SVG fragment identifiers in particular (required for <defs> and <symbol> sprites as well as SVG stacks) please refer to caniuse.com.

icon icons svg png sprite spritesheet stack generator css sass less stylus stylesheet inline html vector rwd retina mustache gulpfriendly

iphone-inline-video - 📱 Make videos playable inline on the iPhone (prevents automatic fullscreen)

•    Javascript

---

📱 Make videos playable inline on the iPhone (prevents automatic fullscreen)

iphone autoplaying-videos polyfill playsinline audio autoplay browser canvas full-screen fullscreen gif inline ios ipod multiple play sound video

Email Templates - Create, preview, and send custom email templates for Node.js

•    Javascript

---

Create, preview, and send custom email templates for Node.js. Highly configurable and supports automatic inline CSS, stylesheets, embedded images and fonts, and much more! Made for sending beautiful emails with Lad. If you don't need this module to send your email, you can still use it to render HTML and/or text templates.

template node template-engine mandrill custom responsive email inline-css juice templates pug inline mailchimp postmark ejs sendgrid nodemailer webresource email-remplate email-preview

webpack-isomorphic-tools - Server-side rendering for your Webpack-built applications (e.g. React)

•    Javascript

---

THIS PACKAGE IS DEPRECATED. LOOK ELSEWHERE. webpack-isomorphic-tools is a small helper module providing very basic support for isomorphic (universal) rendering when using Webpack. It was created a long time ago when Webpack was v1 and the whole movement was just starting. Therefore webpack-isomorphic-tools is a hacky solution. It allowed many projects to set up basic isomorphic (universal) rendering in the early days but is now considered deprecated and new projects shouldn't use it. This library can still be found in legacy projects. For new projects use either universal-webpack or all-in-one frameworks like Next.js.

webpack isomorphic react style inline css

ContentTools - A beautiful & small content editor

•    Javascript

---

A JS library for building WYSIWYG editors for HTML content. It is one of a collection of libraries designed for building tools that make it easier to edit HTML content. It is framework agnostic, The library doesn't use any JavaScript frameworks (no JQuery) but plays nicely with any of them.

contenttools wysiwyg-editor wysiwyg inline html editor html-editor rich-text-editor

react-inlinesvg - An SVG loader component for ReactJS

•    Javascript

---

But there's an alternative that sidesteps these issues: load the SVG with an XHR request and then embed it in the document. That's what this component does. The SVG <use> element can be used to achieve something similar to this component. See this article for more information and this table for browser support and caveats.

react component svg inline react-component

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

svgxuse - A simple polyfill that fetches external SVGs referenced in use elements when the browser itself fails to do so

•    Javascript

---

A simple polyfill that fetches external SVGs referenced in <use> elements when the browser itself fails to do so. IE (9, 10, 11) fails to load symbol-defs.svg in the example above. svgxuse goes through every <use> element. If the element is referencing an external SVG and the browser has failed to load it, the script sends a GET request to grab and prepend the SVG to <body>.

svg inline xlink:href polyfill external

gulp-svg-sprite - SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours

•    Javascript

---

This document covers only gulp specific installation and configuration aspects. For a full list of features and options, please see the svg-sprite manual. NOTICE: By default, svg-sprite doesn't send any files downstream unless you configure it. There are tons of options available — please see below for some basic examples. Also, you should possibly take care of errors that might occur.

gulpplugin icon icons svg png sprite spritesheet stack generator css sass less stylus stylesheet inline html vector rwd retina mustache

rustify - Rust WebAssembly transform for Browserify

•    Javascript

---

Rust WebAssembly transform for Browserify. Because this is an unstable rust feature, at the time of writing it relies on wasm-gc to be available from the command line. See Installation for instructions on how to install. Probably also doesn't work on Windows. Because this feature is experimental in Rust, this module should be considered similarly.

browserify node inline

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-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

gulp-inline-css - Inline linked css in an html file. Useful for emails.

•    Javascript

---

Inline your CSS properties into the style attribute in an html file. Useful for emails. Inspired by the grunt plugin grunt-inline-css. Uses the inline-css module.

gulpplugin inline css html email