{"id":13793505,"url":"https://github.com/sbekrin/styled-email-components","last_synced_at":"2025-03-29T19:01:52.236Z","repository":{"id":34261376,"uuid":"138510870","full_name":"sbekrin/styled-email-components","owner":"sbekrin","description":"💌 styled-components for emails","archived":false,"fork":false,"pushed_at":"2022-12-08T14:02:23.000Z","size":1440,"stargazers_count":254,"open_issues_count":11,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-18T13:49:11.817Z","etag":null,"topics":["css","css-in-js","emails","react","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sbekrin.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-24T19:48:57.000Z","updated_at":"2024-04-01T03:16:51.000Z","dependencies_parsed_at":"2023-01-15T05:45:41.685Z","dependency_job_id":null,"html_url":"https://github.com/sbekrin/styled-email-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbekrin%2Fstyled-email-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbekrin%2Fstyled-email-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbekrin%2Fstyled-email-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sbekrin%2Fstyled-email-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sbekrin","download_url":"https://codeload.github.com/sbekrin/styled-email-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246230518,"owners_count":20744347,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-in-js","emails","react","styled-components"],"created_at":"2024-08-03T23:00:22.632Z","updated_at":"2025-03-29T19:01:52.200Z","avatar_url":"https://github.com/sbekrin.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# 💌 styled-email-components\n\n[![npm Version](https://img.shields.io/npm/v/styled-email-components.svg)](https://www.npmjs.com/package/styled-email-components)\n[![Build Status](https://img.shields.io/travis/sbekrin/styled-email-components.svg)](https://travis-ci.org/sbekrin/styled-email-components)\n[![dependencies Status](https://img.shields.io/david/sbekrin/styled-email-components.svg)](https://david-dm.org/sbekrin/styled-email-components)\n[![devDependencies Status](https://img.shields.io/david/dev/sbekrin/styled-email-components.svg)](https://david-dm.org/sbekrin/styled-email-components?type=dev)\n\nExtension of [`styled-components (v5.x)`](https://www.styled-components.com/) with\nessential features for building email components.\n\n## Features\n\n- Styles are injected inline\n- [Shorthand rules](./src/css-to-style.js#L6) are expanded\n- [`styled.*` aliases](./src/utils/xhtml-elements.js) are XHTML compliant\n- Supports [Outlook-specific elements](#outlook-specific-vml-elements)\n- Compatible with [original APIs](https://www.styled-components.com/docs/api)\n- Provides TypeScript typings\n\n## Motivation\n\n`styled-components` is a universal styling solution with great developer\nexperience and low learning curve. Unfortunately, there's no native support for\ninline styling which is essential for building emails. This module adds all\nnecessary features to build mail-first components.\n\n## Installation\n\nyarn:\n\n```sh\nyarn add styled-email-components\n```\n\nnpm:\n\n```sh\nnpm install --save styled-email-components\n```\n\n## Getting Started\n\nCheck original\n[Getting Started](https://www.styled-components.com/docs/basics#getting-started)\nfor more examples.\n\n```js\nimport React from 'react';\nimport { renderToStaticMarkup } from 'react-dom/server';\nimport styled from 'styled-email-components';\n\nconst Link = styled.a`\n  font-family: sans-serif;\n  background: blue;\n  color: white;\n`;\n\nrenderToStaticMarkup(\u003cLink href=\"https://example.com\"\u003eHey\u003c/Link\u003e),\n// 👇 output\n// \u003ca href=\"https://example.com\" style=\"font-family:sans-serif;background-color:blue;color:white;\"\u003eHey\u003c/a\u003e\n```\n\n## API\n\n### `styled.*`\n\nThis module sets list of XHTML 1.0 Transitional\n[element aliases](./src/utils/xhtml-elements.js) instead of the original HTML5 set,\nwhich is a widely used doctype in emails.\n\n### Outlook-specific VML elements\n\nIn addition to XHTML elements, `styled.vml.*`, `styled.wml.*` and\n`styled.office.*` aliases are available. These are simple proxies and pass tag\nnames as-is with `v:`, `w:` and `o:` prefixes respectively.\n\n### Other APIs\n\n[Original APIs](https://www.styled-components.com/docs/api) are mirrored without\nany modifications from `styled-components`. Make sure to check\n[server-side rendering](https://www.styled-components.com/docs/advanced#server-side-rendering)\nguide for rendering the final email.\n\n## License\n\nMIT \u0026copy; [Sergey Bekrin](http://bekrin.me/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsbekrin%2Fstyled-email-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsbekrin%2Fstyled-email-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsbekrin%2Fstyled-email-components/lists"}