Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sbekrin/styled-email-components
💌 styled-components for emails
https://github.com/sbekrin/styled-email-components
css css-in-js emails react styled-components
Last synced: 3 months ago
JSON representation
💌 styled-components for emails
- Host: GitHub
- URL: https://github.com/sbekrin/styled-email-components
- Owner: sbekrin
- License: mit
- Created: 2018-06-24T19:48:57.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2022-12-08T14:02:23.000Z (over 1 year ago)
- Last Synced: 2024-03-24T23:07:20.263Z (3 months ago)
- Topics: css, css-in-js, emails, react, styled-components
- Language: JavaScript
- Homepage:
- Size: 1.37 MB
- Stars: 253
- Watchers: 2
- Forks: 3
- Open Issues: 11
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Lists
- awesome-stars - sbekrin/styled-email-components - 💌 styled-components for emails (JavaScript)
README
# 💌 styled-email-components
[](https://www.npmjs.com/package/styled-email-components)
[](https://travis-ci.org/sbekrin/styled-email-components)
[](https://david-dm.org/sbekrin/styled-email-components)
[](https://david-dm.org/sbekrin/styled-email-components?type=dev)
Extension of [`styled-components (v5.x)`](https://www.styled-components.com/) with
essential features for building email components.
## Features
- Styles are injected inline
- [Shorthand rules](./src/css-to-style.js#L6) are expanded
- [`styled.*` aliases](./src/utils/xhtml-elements.js) are XHTML compliant
- Supports [Outlook-specific elements](#outlook-specific-vml-elements)
- Compatible with [original APIs](https://www.styled-components.com/docs/api)
- Provides TypeScript typings
## Motivation
`styled-components` is a universal styling solution with great developer
experience and low learning curve. Unfortunately, there's no native support for
inline styling which is essential for building emails. This module adds all
necessary features to build mail-first components.
## Installation
yarn:
```sh
yarn add styled-email-components
```
npm:
```sh
npm install --save styled-email-components
```
## Getting Started
Check original
[Getting Started](https://www.styled-components.com/docs/basics#getting-started)
for more examples.
```js
import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import styled from 'styled-email-components';
const Link = styled.a`
font-family: sans-serif;
background: blue;
color: white;
`;
renderToStaticMarkup(Hey),
// 👇 output
// Hey
```
## API
### `styled.*`
This module sets list of XHTML 1.0 Transitional
[element aliases](./src/utils/xhtml-elements.js) instead of the original HTML5 set,
which is a widely used doctype in emails.
### Outlook-specific VML elements
In addition to XHTML elements, `styled.vml.*`, `styled.wml.*` and
`styled.office.*` aliases are available. These are simple proxies and pass tag
names as-is with `v:`, `w:` and `o:` prefixes respectively.
### Other APIs
[Original APIs](https://www.styled-components.com/docs/api) are mirrored without
any modifications from `styled-components`. Make sure to check
[server-side rendering](https://www.styled-components.com/docs/advanced#server-side-rendering)
guide for rendering the final email.
## License
MIT © [Sergey Bekrin](http://bekrin.me/)