Giter Club home page Giter Club logo

styled-email-components's Introduction

πŸ’Œ styled-email-components

npm Version Build Status dependencies Status devDependencies Status

Extension of styled-components (v5.x) with essential features for building email components.

Features

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:

yarn add styled-email-components

npm:

npm install --save styled-email-components

Getting Started

Check original Getting Started for more examples.

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(<Link href="https://example.com">Hey</Link>),
// πŸ‘‡ output
// <a href="https://example.com" style="font-family:sans-serif;background-color:blue;color:white;">Hey</a>

API

styled.*

This module sets list of XHTML 1.0 Transitional element aliases 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 are mirrored without any modifications from styled-components. Make sure to check server-side rendering guide for rendering the final email.

License

MIT Β© Sergey Bekrin

styled-email-components's People

Contributors

dependabot[bot] avatar sbekrin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

styled-email-components's Issues

font-family fails with multiple values

Because we're relying on original InlineStyles.js which uses css-to-react-native for parsing css rules, it fails to recognize multiple font-family values. Current workaround would be to use .attrs API:

const Text = styled.p.attrs({
  style: {
    font: 'Arial, Helvetica, sans-serif',
  },
})`
  font-size: 16px;
  color: blue;
`;

It'd be great to use font-family in template string literal, but it would require implementing custom css parser to solve this. I'll leave it open for now to address other potential parsing-related bugs in a single batch.

An in-range update of eslint-plugin-react is breaking the build 🚨

The devDependency eslint-plugin-react was updated from 7.14.0 to 7.14.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

Release Notes for v7.14.1

Fixed

  • Fix prop-types crash on multiple destructuring (#2319 @golopot)
Commits

The new version differs by 3 commits.

  • 62255af Update CHANGELOG and bump version
  • 655eb01 Merge pull request #2320 from golopot/issue-2319
  • 9639d82 [Fix] prop-types: fix crash on multiple destructuring

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of @types/react is breaking the build 🚨

The devDependency @types/react was updated from 16.8.24 to 16.8.25.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of prettier is breaking the build 🚨

The devDependency prettier was updated from 1.14.3 to 1.15.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

prettier is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

Release Notes for Prettier 1.15: HTML, Vue, Angular and MDX Support

πŸ”— Release Notes

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of react is breaking the build 🚨

There have been updates to the react monorepo:

    • The devDependency react was updated from 16.6.1 to 16.6.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of styled-components is breaking the build 🚨

Version 3.4.6 of styled-components was just published.

Branch Build failing 🚨
Dependency styled-components
Current Version 3.4.5
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

styled-components is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

Release Notes v3.4.6

Fixed an issue when streaming with very large amounts of output where sometimes styles might not make it to the client, by @probablyup (see #1997)

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

An in-range update of styled-components is breaking the build 🚨

The devDependency styled-components was updated from 3.4.9 to 3.4.10.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

styled-components is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

Release Notes for v3.4.10
  • Added a few iframe attributes to the valid attribute list: allow, allowUserMedia, allowPaymentRequest, by @asoltys (see #2083 and #2085)
FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

Implement XHTML-specific `isValidAttr`

Currently we're using isValidAttr from styled-components which prevents non-valid attributes on DOM nodes. Since XHTML supports less/different attributes, styled-email-components would benefit from a custom xhtml attribute list to avoid "invalid prop" errors and reduce unwanted props destructuring.

Install fails with Command "generateErrors" not found.

npm i styled-email-components
(node:83593) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
(Use `node --trace-warnings ...` to show where the warning was created)
npm ERR! code 1
npm ERR! path /Users/gajus/Documents/dev/contra/contra-manager/node_modules/styled-email-components
npm ERR! command failed
npm ERR! command sh -c yarn --cwd vendor/styled-components/packages/styled-components generateErrors
npm ERR! yarn run v1.22.10
npm ERR! info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
npm ERR! error Command "generateErrors" not found.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/gajus/.npm/_logs/2021-04-15T20_48_39_702Z-debug.log

An in-range update of @types/react is breaking the build 🚨

The devDependency @types/react was updated from 16.7.14 to 16.7.15.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.