[ { "path": ".github/workflows/test.yml", "content": "name: Test\n\non:\n push:\n branches:\n - main\n pull_request:\n branches:\n - main\n\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n with:\n submodules: recursive\n - uses: actions/setup-node@v2\n with:\n node-version: 14\n - run: yarn\n - run: yarn build\n - run: yarn test\n" }, { "path": ".gitignore", "content": "node_modules/\ndist/\n*.log" }, { "path": ".gitmodules", "content": "[submodule \"styled-components\"]\n\tpath = vendor/styled-components\n\turl = https://github.com/styled-components/styled-components.git\n\tbranch = legacy-v5\n" }, { "path": ".vscode/settings.json", "content": "{\n \"cSpell.words\": [\n \"camelcase\"\n ]\n}" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2021 Sergey Bekrin\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "babel.config.js", "content": "module.exports = {\n presets: [\"./vendor/styled-components/babel-preset\"],\n plugins: [\n // Replace `styled-components/src/*` imports with relative `./vendor/styled-components/*` to let rollup bundle the original sources\n [\n \"babel-plugin-module-resolver\",\n {\n alias: {\n \"styled-components/src\":\n \"./vendor/styled-components/packages/styled-components/src\",\n },\n },\n ],\n ],\n};\n" }, { "path": "jest.config.js", "content": "module.exports = {\n testPathIgnorePatterns: [\"/node_modules/\", \"/vendor/\"],\n transformIgnorePatterns: [\"/node_modules/(?!styled-components).+\\\\.js$\"],\n setupFiles: ['./vendor/styled-components/packages/styled-components/src/test/globals.js']\n} " }, { "path": "package.json", "content": "{\n \"name\": \"styled-email-components\",\n \"version\": \"5.0.3\",\n \"description\": \"💌 styled-components for emails\",\n \"repository\": \"sbekrin/styled-email-components\",\n \"author\": \"Sergey Bekrin \",\n \"license\": \"MIT\",\n \"main\": \"dist/styled-email-components.cjs.js\",\n \"jsnext:main\": \"dist/styled-email-components.esm.js\",\n \"module\": \"dist/styled-email-components.esm.js\",\n \"browser\": {\n \"./dist/styled-email-components.esm.js\": \"./dist/styled-email-components.browser.esm.js\",\n \"./dist/styled-email-components.cjs.js\": \"./dist/styled-email-components.browser.cjs.js\"\n },\n \"files\": [\n \"dist\",\n \"styled-email-components.d.ts\"\n ],\n \"types\": \"./styled-email-components.d.ts\",\n \"scripts\": {\n \"prepare\": \"yarn --cwd vendor/styled-components/packages/styled-components generateErrors\",\n \"test\": \"jest\",\n \"build\": \"rollup -c\"\n },\n \"dependencies\": {\n \"@emotion/is-prop-valid\": \"1.1.0\",\n \"@emotion/stylis\": \"0.8.5\",\n \"@emotion/unitless\": \"0.7.5\",\n \"color-shorthand-hex-to-six-digit\": \"3.0.7\",\n \"css-shorthand-expand\": \"1.2.0\",\n \"hoist-non-react-statics\": \"3.3.2\",\n \"lodash.camelcase\": \"4.3.0\",\n \"postcss-safe-parser\": \"5.0.2\",\n \"shallowequal\": \"1.1.0\"\n },\n \"devDependencies\": {\n \"@babel/cli\": \"7.0.0\",\n \"@babel/core\": \"7.0.0\",\n \"@babel/plugin-external-helpers\": \"7.0.0\",\n \"@babel/plugin-proposal-class-properties\": \"7.0.0\",\n \"@babel/plugin-proposal-object-rest-spread\": \"7.0.0\",\n \"@babel/preset-env\": \"7.0.0\",\n \"@babel/preset-flow\": \"7.12.13\",\n \"@babel/preset-react\": \"7.0.0\",\n \"@types/jest\": \"26.0.22\",\n \"babel-jest\": \"26.5.2\",\n \"babel-plugin-add-module-exports\": \"1.0.2\",\n \"babel-plugin-module-resolver\": \"4.1.0\",\n \"babel-plugin-tester\": \"10.0.0\",\n \"babel-plugin-transform-react-remove-prop-types\": \"0.4.24\",\n \"jest\": \"26.6.3\",\n \"react\": \"17.0.1\",\n \"react-dom\": \"17.0.1\",\n \"react-is\": \"17.0.1\",\n \"react-test-renderer\": \"17.0.1\",\n \"rollup\": \"1.13.1\",\n \"rollup-plugin-babel\": \"4.3.2\",\n \"rollup-plugin-commonjs\": \"10.0.0\",\n \"rollup-plugin-flow\": \"github:probablyup/rollup-plugin-flow#breaking-update-flow-remove-types\",\n \"rollup-plugin-json\": \"4.0.0\",\n \"rollup-plugin-node-resolve\": \"5.0.1\",\n \"rollup-plugin-replace\": \"2.2.0\",\n \"rollup-plugin-sourcemaps\": \"0.4.2\",\n \"rollup-plugin-terser\": \"5.0.0\",\n \"styled-components\": \"file:./vendor/styled-components/packages/styled-components\"\n }\n}\n" }, { "path": "readme.md", "content": "# 💌 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(Hey),\n// 👇 output\n// Hey\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 © [Sergey Bekrin](http://bekrin.me/)" }, { "path": "rollup.config.js", "content": "import nodeResolve from \"rollup-plugin-node-resolve\";\nimport replace from \"rollup-plugin-replace\";\nimport commonjs from \"rollup-plugin-commonjs\";\nimport babel from \"rollup-plugin-babel\";\nimport json from \"rollup-plugin-json\";\nimport flow from \"rollup-plugin-flow\";\nimport { terser } from \"rollup-plugin-terser\";\nimport sourceMaps from \"rollup-plugin-sourcemaps\";\nimport pkg from \"./package.json\";\n\n/**\n * NODE_ENV explicit replacement is only needed for standalone packages, as webpack\n * automatically will replace it otherwise in the downstream build.\n */\n\nconst cjs = {\n exports: \"named\",\n format: \"cjs\",\n sourcemap: true,\n};\n\nconst esm = {\n format: \"esm\",\n sourcemap: true,\n};\n\nconst getCJS = (override) => ({ ...cjs, ...override });\nconst getESM = (override) => ({ ...esm, ...override });\n\nconst commonPlugins = [\n flow({\n // needed for sourcemaps to be properly generated\n pretty: true,\n }),\n sourceMaps(),\n json(),\n nodeResolve(),\n babel({\n configFile: require.resolve(\"./babel.config.js\"),\n exclude: [\"node_modules/**\"],\n }),\n commonjs({\n ignoreGlobal: true,\n namedExports: {\n \"react-is\": [\"isElement\", \"isValidElementType\", \"ForwardRef\", \"typeof\"],\n },\n }),\n replace({\n __VERSION__: JSON.stringify(pkg.version),\n }),\n];\n\n// this should always be last\nconst minifierPlugin = terser({\n compress: {\n passes: 2,\n },\n sourcemap: true,\n});\n\nconst configBase = {\n input: \"./src/index.js\",\n\n // \\0 is rollup convention for generated in memory modules\n external: (id) =>\n !id.startsWith(\"\\0\") && !id.startsWith(\".\") && !id.startsWith(\"/\"),\n plugins: commonPlugins,\n};\n\nconst serverConfig = {\n ...configBase,\n output: [\n getESM({ file: \"dist/styled-email-components.esm.js\" }),\n getCJS({ file: \"dist/styled-email-components.cjs.js\" }),\n ],\n plugins: configBase.plugins.concat(\n replace({\n __SERVER__: JSON.stringify(true),\n }),\n minifierPlugin\n ),\n};\n\nconst browserConfig = {\n ...configBase,\n output: [\n getESM({ file: \"dist/styled-email-components.browser.esm.js\" }),\n getCJS({ file: \"dist/styled-email-components.browser.cjs.js\" }),\n ],\n plugins: configBase.plugins.concat(\n replace({\n __SERVER__: JSON.stringify(false),\n }),\n minifierPlugin\n ),\n};\n\nexport default [serverConfig, browserConfig];\n" }, { "path": "src/css-to-style.js", "content": "import expandRule from \"css-shorthand-expand\";\nimport { conv as expandHexColor } from \"color-shorthand-hex-to-six-digit\";\nimport camelCase from \"lodash.camelcase\";\n\nfunction shouldExpandRule(name) {\n return [\n \"background\",\n \"font\",\n \"padding\",\n \"margin\",\n \"border\",\n \"border-width\",\n \"border-style\",\n \"border-color\",\n \"border-top\",\n \"border-right\",\n \"border-bottom\",\n \"border-left\",\n \"border-radius\",\n \"outline\",\n ].includes(name);\n}\n\nfunction convertCssPairsToStyle(rules) {\n return (\n rules\n // Expand shorthand rules\n .reduce((out, [name, value]) => {\n if (shouldExpandRule(name)) {\n const expanded = expandRule(name, value);\n const next = Object.keys(expanded).map((rule) => [\n rule,\n expanded[rule],\n ]);\n return [...out, ...next];\n }\n return [...out, [name, value]];\n }, [])\n // Expand colors to 6 digits\n .reduce((out, [name, value]) => {\n return {\n ...out,\n [camelCase(name)]: /color/i.test(name)\n ? expandHexColor(value)\n : value,\n };\n }, {})\n );\n}\n\nexport default convertCssPairsToStyle;\n" }, { "path": "src/index.js", "content": "import constructWithOptions from \"styled-components/src/constructors/constructWithOptions\";\nimport xhtmlElements from \"./xhtml-elements\";\nimport StyleSheet from \"./stylesheet\";\nimport createInlineStyle from \"./inline-style\";\nimport createStyledEmailComponent from \"./styled-email-component\";\n\nconst InlineStyle = createInlineStyle(StyleSheet);\nconst StyledEmailComponent = createStyledEmailComponent(InlineStyle);\nconst styled = (tag) => constructWithOptions(StyledEmailComponent, tag);\n\n// Set xhtml element aliases\nxhtmlElements.forEach((element) =>\n Object.defineProperty(styled, element, {\n enumerable: true,\n configurable: false,\n get() {\n return styled(element);\n },\n })\n);\n\n// Set VML (v:*), WML (w:*) and Office (o:*) dynamic aliases\n[\"vml\", \"wml\", \"office\"].forEach((namespace) => {\n Object.defineProperty(styled, namespace, {\n enumerable: true,\n configurable: false,\n get() {\n const target = {};\n return new Proxy(target, {\n get(object, property) {\n if (property in object) {\n return object[property];\n }\n if (typeof property === \"string\") {\n return styled(`${namespace.charAt(0)}:${property}`);\n }\n return undefined;\n },\n });\n },\n });\n});\n\nexport {\n createGlobalStyle,\n css,\n isStyledComponent,\n keyframes,\n ServerStyleSheet,\n StyleSheetConsumer,\n StyleSheetContext,\n StyleSheetManager,\n ThemeConsumer,\n ThemeContext,\n ThemeProvider,\n useTheme,\n version,\n withTheme,\n} from \"styled-components/src/base\";\n\nexport default styled;\n" }, { "path": "src/inline-style.js", "content": "import generateComponentId from \"styled-components/src/utils/generateComponentId\";\nimport flatten from \"styled-components/src/utils/flatten\";\nimport parse from \"postcss-safe-parser\";\nimport cssToStyle from \"./css-to-style\";\n\nconst generated = new Map();\n\nexport const resetStyleCache = () => {\n generated.clear();\n};\n\nexport default (stylesheet) => {\n return class MailInlineStyle {\n constructor(rules) {\n this.rules = rules;\n }\n\n generateStyleObject(executionContext) {\n const flatStyles = flatten(this.rules, executionContext).join(\"\");\n const hash = generateComponentId(flatStyles);\n if (!generated.has(hash)) {\n const rules = [];\n parse(flatStyles).each((node) => {\n switch (node.type) {\n case \"decl\":\n rules.push([node.prop, node.value]);\n return;\n case \"comment\":\n return;\n default:\n if (process.env.NODE_ENV !== \"production\") {\n console.warn(\n `Node of type ${node.type} not supported as an inline style`\n );\n }\n }\n });\n const styles = cssToStyle(rules);\n const instance = stylesheet.create({ generated: styles });\n generated.set(hash, instance.generated);\n }\n return generated.get(hash);\n }\n };\n};\n" }, { "path": "src/is-vml-tag.js", "content": "export default function isVmlTag(tag) {\n return typeof tag === \"string\" && /^(v|w|o):/i.test(tag);\n}\n" }, { "path": "src/styled-email-component.js", "content": "import validAttr from \"@emotion/is-prop-valid\";\nimport hoist from \"hoist-non-react-statics\";\nimport React from \"react\";\nimport determineTheme from \"styled-components/src/utils/determineTheme\";\nimport { EMPTY_ARRAY, EMPTY_OBJECT } from \"styled-components/src/utils/empties\";\nimport generateComponentId from \"styled-components/src/utils/generateComponentId\";\nimport generateDisplayName from \"styled-components/src/utils/generateDisplayName\";\nimport getComponentName from \"styled-components/src/utils/getComponentName\";\nimport isTag from \"styled-components/src/utils/isTag\";\nimport isFunction from \"styled-components/src/utils/isFunction\";\nimport isStyledComponent from \"styled-components/src/utils/isStyledComponent\";\nimport merge from \"styled-components/src/utils/mixinDeep\";\nimport { ThemeContext } from \"styled-components/src/models/ThemeProvider\";\nimport StyleSheet from \"./stylesheet\";\nimport isVmlTag from \"./is-vml-tag\";\n\nconst identifiers = {};\n\n/* We depend on components having unique IDs */\nfunction generateId(displayName, parentComponentId) {\n const name = typeof displayName !== \"string\" ? \"sc\" : escape(displayName);\n // Ensure that no displayName can lead to duplicate componentIds\n identifiers[name] = (identifiers[name] || 0) + 1;\n const componentId = `${name}-${generateComponentId(\n name + identifiers[name]\n )}`;\n return parentComponentId\n ? `${parentComponentId}-${componentId}`\n : componentId;\n}\n\nfunction useResolvedAttrs(theme = EMPTY_OBJECT, props, attrs) {\n // NOTE: can't memoize this\n // returns [context, resolvedAttrs]\n // where resolvedAttrs is only the things injected by the attrs themselves\n const context = { ...props, theme };\n const resolvedAttrs = {};\n\n attrs.forEach((attrDef) => {\n let resolvedAttrDef = attrDef;\n let key;\n\n if (isFunction(resolvedAttrDef)) {\n resolvedAttrDef = resolvedAttrDef(context);\n }\n\n /* eslint-disable guard-for-in */\n for (key in resolvedAttrDef) {\n context[key] = resolvedAttrs[key] = resolvedAttrDef[key];\n }\n /* eslint-enable guard-for-in */\n });\n\n return [context, resolvedAttrs];\n}\n\nfunction useStyledComponentImpl(forwardedComponent, props, forwardedRef) {\n const {\n attrs: componentAttrs,\n inlineStyle,\n defaultProps,\n shouldForwardProp,\n target,\n } = forwardedComponent;\n\n // NOTE: the non-hooks version only subscribes to this when !componentStyle.isStatic,\n // but that'd be against the rules-of-hooks. We could be naughty and do it anyway as it\n // should be an immutable value, but behave for now.\n const theme = determineTheme(\n props,\n React.useContext(ThemeContext),\n defaultProps\n );\n\n const [context, attrs] = useResolvedAttrs(\n theme || EMPTY_OBJECT,\n props,\n componentAttrs\n );\n\n const generatedStyles = inlineStyle.generateStyleObject(context);\n\n const refToForward = forwardedRef;\n\n const elementToBeCreated =\n attrs.$as || props.$as || attrs.as || props.as || target;\n\n const isTargetTag = isTag(elementToBeCreated);\n const isTargetVmlTag = isVmlTag(elementToBeCreated);\n const computedProps = attrs !== props ? { ...props, ...attrs } : props;\n const propsForElement = {};\n\n // eslint-disable-next-line guard-for-in\n for (const key in computedProps) {\n if (key[0] === \"$\" || key === \"as\") continue;\n else if (key === \"forwardedAs\") {\n propsForElement.as = computedProps[key];\n } else if (\n shouldForwardProp\n ? shouldForwardProp(key, validAttr, elementToBeCreated)\n : isTargetVmlTag\n ? true\n : isTargetTag\n ? validAttr(key)\n : true\n ) {\n propsForElement[key] = computedProps[key];\n }\n }\n\n propsForElement.style = StyleSheet.flatten([\n generatedStyles,\n props.style,\n attrs.style,\n ]);\n\n propsForElement.ref = refToForward;\n\n return React.createElement(elementToBeCreated, propsForElement);\n}\n\nexport default (MailInlineStyle) => {\n const createStyledEmailComponent = (target, options, rules) => {\n const isTargetStyledComp = isStyledComponent(target);\n\n const {\n displayName = generateDisplayName(target),\n componentId = generateId(options.displayName, options.parentComponentId),\n attrs = EMPTY_ARRAY,\n } = options;\n\n const styledComponentId =\n options.displayName && options.componentId\n ? `${escape(options.displayName)}-${options.componentId}`\n : options.componentId || componentId;\n\n // fold the underlying StyledComponent attrs up (implicit extend)\n const finalAttrs =\n isTargetStyledComp && target.attrs\n ? target.attrs.concat(attrs).filter(Boolean)\n : attrs;\n\n // eslint-disable-next-line prefer-destructuring\n let shouldForwardProp = options.shouldForwardProp;\n\n if (isTargetStyledComp && target.shouldForwardProp) {\n if (options.shouldForwardProp) {\n // compose nested shouldForwardProp calls\n shouldForwardProp = (prop, filterFn, elementToBeCreated) =>\n target.shouldForwardProp(prop, filterFn, elementToBeCreated) &&\n options.shouldForwardProp(prop, filterFn, elementToBeCreated);\n } else {\n // eslint-disable-next-line prefer-destructuring\n shouldForwardProp = target.shouldForwardProp;\n }\n }\n\n /**\n * forwardRef creates a new interim component, which we'll take advantage of\n * instead of extending ParentComponent to create _another_ interim class\n */\n let WrappedStyledComponent;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const forwardRef = (props, ref) =>\n useStyledComponentImpl(WrappedStyledComponent, props, ref);\n\n forwardRef.displayName = displayName;\n\n WrappedStyledComponent = React.forwardRef(forwardRef);\n\n WrappedStyledComponent.attrs = finalAttrs;\n WrappedStyledComponent.inlineStyle = new MailInlineStyle(\n isTargetStyledComp ? target.inlineStyle.rules.concat(rules) : rules\n );\n WrappedStyledComponent.displayName = displayName;\n WrappedStyledComponent.shouldForwardProp = shouldForwardProp;\n\n WrappedStyledComponent.styledComponentId = styledComponentId;\n\n // fold the underlying StyledComponent target up since we folded the styles\n WrappedStyledComponent.target = isTargetStyledComp ? target.target : target;\n\n WrappedStyledComponent.withComponent = function withComponent(tag) {\n const { componentId: previousComponentId, ...optionsToCopy } = options;\n\n const newComponentId =\n previousComponentId &&\n `${previousComponentId}-${escape(getComponentName(tag))}`;\n\n const newOptions = {\n ...optionsToCopy,\n attrs: finalAttrs,\n componentId: newComponentId,\n };\n\n return createStyledEmailComponent(tag, newOptions, rules);\n };\n\n Object.defineProperty(WrappedStyledComponent, \"defaultProps\", {\n get() {\n return this._foldedDefaultProps;\n },\n\n set(obj) {\n this._foldedDefaultProps = isTargetStyledComp\n ? merge({}, target.defaultProps, obj)\n : obj;\n },\n });\n\n hoist(WrappedStyledComponent, target, {\n // all SC-specific things should not be hoisted\n attrs: true,\n inlineStyle: true,\n displayName: true,\n shouldForwardProp: true,\n styledComponentId: true,\n target: true,\n withComponent: true,\n });\n\n return WrappedStyledComponent;\n };\n\n return createStyledEmailComponent;\n};\n" }, { "path": "src/stylesheet.js", "content": "let lastId = 0;\nconst registry = {};\n\nconst guid = () => lastId++;\n\nconst registerStyle = (style) => {\n const id = guid();\n registry[id] = style;\n return id;\n};\n\nconst resolveStyle = (id) => registry[id];\n\nconst create = (styles) => {\n const result = {};\n Object.keys(styles).forEach((key) => {\n result[key] = registerStyle(styles[key]);\n });\n return result;\n};\n\nconst merge = (left = {}, right = {}) => ({ ...left, ...right });\n\nconst flatten = (input) => {\n if (Array.isArray(input)) {\n return input.reduce((acc, val) => merge(acc, flatten(val)), {});\n } else if (typeof input === \"number\") {\n return resolveStyle(input);\n } else if (!input) {\n return undefined;\n }\n return input;\n};\n\nconst resolve = (style) => flatten(style);\n\nconst StyleSheet = {\n hairlineWidth: 1,\n absoluteFill: registerStyle({\n position: \"absolute\",\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n }),\n create,\n flatten,\n resolve,\n};\n\nexport default StyleSheet;\n" }, { "path": "src/xhtml-elements.js", "content": "// List of XHTML 1.0 Transitional elements\nexport default [\n \"a\",\n \"abbr\",\n \"acronym\",\n \"address\",\n \"applet\",\n \"area\",\n \"b\",\n \"base\",\n \"basefont\",\n \"bdo\",\n \"big\",\n \"blockquote\",\n \"body\",\n \"br\",\n \"button\",\n \"caption\",\n \"center\",\n \"cite\",\n \"code\",\n \"col\",\n \"colgroup\",\n \"dd\",\n \"del\",\n \"dfn\",\n \"dir\",\n \"div\",\n \"dl\",\n \"dt\",\n \"em\",\n \"fieldset\",\n \"font\",\n \"form\",\n \"h1\",\n \"h2\",\n \"h3\",\n \"h4\",\n \"h5\",\n \"h6\",\n \"head\",\n \"hr\",\n \"html\",\n \"i\",\n \"iframe\",\n \"img\",\n \"input\",\n \"ins\",\n \"isindex\",\n \"kbd\",\n \"label\",\n \"legend\",\n \"li\",\n \"link\",\n \"map\",\n \"menu\",\n \"meta\",\n \"noframes\",\n \"noscript\",\n \"object\",\n \"ol\",\n \"optgroup\",\n \"option\",\n \"p\",\n \"param\",\n \"pre\",\n \"q\",\n \"s\",\n \"samp\",\n \"script\",\n \"select\",\n \"small\",\n \"span\",\n \"strike\",\n \"strong\",\n \"style\",\n \"sub\",\n \"sup\",\n \"table\",\n \"tbody\",\n \"td\",\n \"textarea\",\n \"tfoot\",\n \"th\",\n \"thead\",\n \"title\",\n \"tr\",\n \"tt\",\n \"u\",\n \"ul\",\n \"var\",\n];\n" }, { "path": "styled-email-components.d.ts", "content": "import * as React from \"react\";\nimport {\n css,\n keyframes,\n injectGlobal,\n isStyledComponent,\n consolidateStreamedStyles,\n ThemeProvider,\n withTheme,\n ServerStyleSheet,\n StyleSheetManager,\n ThemedStyledFunction,\n StyledComponentClass,\n} from \"styled-components\";\n\n// #region xhtmltypes\nexport interface XHTMLElements {\n a: React.DetailedHTMLProps<\n React.AnchorHTMLAttributes,\n HTMLAnchorElement\n >;\n abbr: React.DetailedHTMLProps, HTMLElement>;\n acronym: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLElement\n >;\n address: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLElement\n >;\n applet: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLElement\n >;\n area: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLAreaElement\n >;\n b: React.DetailedHTMLProps, HTMLElement>;\n base: React.DetailedHTMLProps<\n React.BaseHTMLAttributes,\n HTMLBaseElement\n >;\n basefont: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLElement\n >;\n bdo: React.DetailedHTMLProps, HTMLElement>;\n big: React.DetailedHTMLProps, HTMLElement>;\n blockquote: React.DetailedHTMLProps<\n React.BlockquoteHTMLAttributes,\n HTMLElement\n >;\n body: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLBodyElement\n >;\n br: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLBRElement\n >;\n button: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes,\n HTMLButtonElement\n >;\n caption: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLElement\n >;\n center: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLElement\n >;\n cite: React.DetailedHTMLProps, HTMLElement>;\n code: React.DetailedHTMLProps, HTMLElement>;\n col: React.DetailedHTMLProps<\n React.ColHTMLAttributes,\n HTMLTableColElement\n >;\n colgroup: React.DetailedHTMLProps<\n React.ColgroupHTMLAttributes,\n HTMLTableColElement\n >;\n dd: React.DetailedHTMLProps, HTMLElement>;\n del: React.DetailedHTMLProps<\n React.DelHTMLAttributes,\n HTMLElement\n >;\n dfn: React.DetailedHTMLProps, HTMLElement>;\n dir: React.DetailedHTMLProps, HTMLElement>;\n div: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLDivElement\n >;\n dl: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLDListElement\n >;\n dt: React.DetailedHTMLProps, HTMLElement>;\n em: React.DetailedHTMLProps, HTMLElement>;\n fieldset: React.DetailedHTMLProps<\n React.FieldsetHTMLAttributes,\n HTMLFieldSetElement\n >;\n font: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLFontElement\n >;\n form: React.DetailedHTMLProps<\n React.FormHTMLAttributes,\n HTMLFormElement\n >;\n h1: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLHeadingElement\n >;\n h2: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLHeadingElement\n >;\n h3: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLHeadingElement\n >;\n h4: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLHeadingElement\n >;\n h5: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLHeadingElement\n >;\n h6: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLHeadingElement\n >;\n head: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLHeadElement\n >;\n hr: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLHRElement\n >;\n html: React.DetailedHTMLProps<\n React.HtmlHTMLAttributes,\n HTMLHtmlElement\n >;\n i: React.DetailedHTMLProps, HTMLElement>;\n iframe: React.DetailedHTMLProps<\n React.IframeHTMLAttributes,\n HTMLIFrameElement\n >;\n img: React.DetailedHTMLProps<\n React.ImgHTMLAttributes,\n HTMLImageElement\n >;\n input: React.DetailedHTMLProps<\n React.InputHTMLAttributes,\n HTMLInputElement\n >;\n ins: React.DetailedHTMLProps<\n React.InsHTMLAttributes,\n HTMLModElement\n >;\n isindex: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLElement\n >;\n kbd: React.DetailedHTMLProps, HTMLElement>;\n label: React.DetailedHTMLProps<\n React.LabelHTMLAttributes,\n HTMLLabelElement\n >;\n legend: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLLegendElement\n >;\n li: React.DetailedHTMLProps<\n React.LiHTMLAttributes,\n HTMLLIElement\n >;\n link: React.DetailedHTMLProps<\n React.LinkHTMLAttributes,\n HTMLLinkElement\n >;\n map: React.DetailedHTMLProps<\n React.MapHTMLAttributes,\n HTMLMapElement\n >;\n menu: React.DetailedHTMLProps<\n React.MenuHTMLAttributes,\n HTMLElement\n >;\n meta: React.DetailedHTMLProps<\n React.MetaHTMLAttributes,\n HTMLMetaElement\n >;\n noframes: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLElement\n >;\n noscript: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLElement\n >;\n object: React.DetailedHTMLProps<\n React.ObjectHTMLAttributes,\n HTMLObjectElement\n >;\n ol: React.DetailedHTMLProps<\n React.OlHTMLAttributes,\n HTMLOListElement\n >;\n optgroup: React.DetailedHTMLProps<\n React.OptgroupHTMLAttributes,\n HTMLOptGroupElement\n >;\n option: React.DetailedHTMLProps<\n React.OptionHTMLAttributes,\n HTMLOptionElement\n >;\n p: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLParagraphElement\n >;\n param: React.DetailedHTMLProps<\n React.ParamHTMLAttributes,\n HTMLParamElement\n >;\n pre: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLPreElement\n >;\n q: React.DetailedHTMLProps<\n React.QuoteHTMLAttributes,\n HTMLQuoteElement\n >;\n s: React.DetailedHTMLProps, HTMLElement>;\n samp: React.DetailedHTMLProps, HTMLElement>;\n script: React.DetailedHTMLProps<\n React.ScriptHTMLAttributes,\n HTMLScriptElement\n >;\n select: React.DetailedHTMLProps<\n React.SelectHTMLAttributes,\n HTMLSelectElement\n >;\n small: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLElement\n >;\n span: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLSpanElement\n >;\n strike: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLElement\n >;\n strong: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLElement\n >;\n style: React.DetailedHTMLProps<\n React.StyleHTMLAttributes,\n HTMLStyleElement\n >;\n sub: React.DetailedHTMLProps, HTMLElement>;\n sup: React.DetailedHTMLProps, HTMLElement>;\n table: React.DetailedHTMLProps<\n React.TableHTMLAttributes,\n HTMLTableElement\n >;\n tbody: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLTableSectionElement\n >;\n td: React.DetailedHTMLProps<\n React.TdHTMLAttributes,\n HTMLTableDataCellElement\n >;\n textarea: React.DetailedHTMLProps<\n React.TextareaHTMLAttributes,\n HTMLTextAreaElement\n >;\n tfoot: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLTableSectionElement\n >;\n th: React.DetailedHTMLProps<\n React.ThHTMLAttributes,\n HTMLTableHeaderCellElement\n >;\n thead: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLTableSectionElement\n >;\n title: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLTitleElement\n >;\n tr: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLTableRowElement\n >;\n tt: React.DetailedHTMLProps, HTMLElement>;\n u: React.DetailedHTMLProps, HTMLElement>;\n ul: React.DetailedHTMLProps<\n React.HTMLAttributes,\n HTMLUListElement\n >;\n var: React.DetailedHTMLProps, HTMLElement>;\n}\n// #endregion\n\n// #region vmlelements\nexport type VMLAttrs = { [attr: string]: any };\nexport interface VMLElements {\n shape: React.DetailedHTMLProps;\n shapetype: React.DetailedHTMLProps;\n group: React.DetailedHTMLProps;\n background: React.DetailedHTMLProps;\n path: React.DetailedHTMLProps;\n formulas: React.DetailedHTMLProps;\n handles: React.DetailedHTMLProps;\n fill: React.DetailedHTMLProps;\n stroke: React.DetailedHTMLProps;\n shadow: React.DetailedHTMLProps;\n textbox: React.DetailedHTMLProps;\n textpath: React.DetailedHTMLProps;\n imagedata: React.DetailedHTMLProps;\n line: React.DetailedHTMLProps;\n polyline: React.DetailedHTMLProps;\n curve: React.DetailedHTMLProps;\n roundrect: React.DetailedHTMLProps;\n oval: React.DetailedHTMLProps;\n arc: React.DetailedHTMLProps;\n image: React.DetailedHTMLProps;\n}\n// #endregion\n\n// Helpers, copied from styled-components.d.ts\ntype KeyofBase = keyof any;\ntype Diff = ({ [P in T]: P } &\n { [P in U]: never })[T];\ntype Omit = Pick>;\ntype WithOptionalTheme

= Omit & {\n theme?: T;\n};\n\n// Re-define all types with XHTML elements\ntype ThemedStyledComponentFactories = {\n [TTag in keyof XHTMLElements]: ThemedStyledFunction;\n};\nexport interface ThemedBaseStyledInterface\n extends ThemedStyledComponentFactories {\n (tag: TTag): ThemedStyledFunction<\n P,\n T,\n P & XHTMLElements[TTag]\n >;\n (component: StyledComponentClass): ThemedStyledFunction<\n P,\n T,\n O\n >;\n

(\n component: React.ComponentType

\n ): ThemedStyledFunction>;\n}\nexport type BaseStyledInterface = ThemedBaseStyledInterface;\nexport type ThemedStyledInterface = ThemedBaseStyledInterface;\n\n// Define vml.*, wml.* and office.* proxy\ntype AnyAttrs = { [attr: string]: T };\ntype NamespacedElementFactory = {\n [tag: string]: ThemedStyledFunction<\n React.DetailedHTMLProps<\n React.HTMLAttributes & AnyAttrs,\n HTMLElement\n >,\n T\n >;\n};\ntype VMLNamespaceFactory = {\n [TTag in keyof VMLElements]: ThemedStyledFunction;\n};\ntype WMLNamespaceFactory = {\n [tag: string]: ThemedStyledFunction;\n};\ntype OfficeNamespaceFactory = {\n [tag: string]: ThemedStyledFunction;\n};\ninterface NamespacedStyledInterface extends ThemedStyledInterface {\n vml: VMLNamespaceFactory;\n wml: WMLNamespaceFactory;\n office: OfficeNamespaceFactory;\n}\n\n// Re-export it\nexport type StyledInterface = NamespacedStyledInterface;\ndeclare const styled: StyledInterface;\n\nexport * from \"styled-components\";\n\nexport default styled;\n" }, { "path": "test/namespace.spec.js", "content": "import React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport prettier from \"prettier\";\nimport styled from \"../src\";\n\nconst format = (html) => prettier.format(html, { parser: \"html\" });\n\ndescribe(\"namespace\", () => {\n it(\"supports vml, wml, and office namespaces\", () => {\n const RoundRect = styled.vml.roundrect.attrs({\n arcsize: \"10%\",\n strokecolor: \"#1e3650\",\n fill: \"true\",\n })`\n v-text-anchor: middle;\n height: 40px;\n width: 200px;\n `;\n const Lock = styled.wml.anchorlock``;\n const Fill = styled.vml.fill.attrs({\n type: \"tile\",\n src: \"https://i.imgur.com/0xPEf.gif\",\n color: \"#556270\",\n })``;\n const Text = styled.center`\n font-family: sans-serif;\n font-weight: bold;\n font-size: 13px;\n color: #fff;\n `;\n const Button = ({ children, ...rest }) => {\n children;\n return (\n \n \n \n {children}\n \n );\n };\n expect(\n format(\n renderToStaticMarkup(\n \n )\n )\n ).toMatchInlineSnapshot(`\n \"\n \n Click me\n \n \"\n `);\n });\n});\n" }, { "path": "test/specific.spec.js", "content": "import React from \"react\";\nimport ReactTestRenderer from \"react-test-renderer\";\nimport styled from \"../src\";\n\nconst render = (element) => ReactTestRenderer.create(element).toJSON();\n\ndescribe(\"specific\", () => {\n it(\"supports mail-specific props\", () => {\n const MsoComponent = styled.center`\n mso-hide: all;\n `;\n expect(render()).toMatchInlineSnapshot(`\n\n`);\n });\n\n it(\"supports vml specific elements\", () => {\n const AnchorLock = styled(\"w:anchorlock\")``;\n expect(render()).toMatchInlineSnapshot(`\n\n`);\n });\n\n it(\"supports custom attributes\", () => {\n const RoundRect = styled.vml.roundrect.attrs({\n \"xmlns:v\": \"urn:schemas-microsoft-com:vml\",\n \"xmlns:w\": \"urn:schemas-microsoft-com:office:word\",\n })``;\n expect(render()).toMatchInlineSnapshot(`\n\n`);\n });\n\n it(\"outputs correct units\", () => {\n const Box = styled.center`\n padding: 10px;\n margin: 10in;\n left: -1em;\n right: 5pt;\n line-height: 1.2;\n `;\n expect(render()).toMatchInlineSnapshot(`\n\n`);\n });\n\n it(\"expands color to 6 digits\", () => {\n const Color = styled.p`\n color: #000;\n border: 1px solid #333;\n `;\n expect(render()).toMatchInlineSnapshot(`\n\n`);\n });\n});\n" }, { "path": "test/styled.spec.js", "content": "import React from \"react\";\nimport ReactTestRenderer from \"react-test-renderer\";\nimport styled, { css } from \"../src\";\n\nconst render = (element) => ReactTestRenderer.create(element).toJSON();\n\ndescribe(\"styled\", () => {\n it(\"works with `styled.component`\", () => {\n const Link = styled.a`\n font-weight: bold;\n color: blue;\n `;\n expect(render(Hey)).toMatchInlineSnapshot(`\n\n Hey\n\n`);\n });\n\n it(\"works with `styled(Component)`\", () => {\n const Link = styled((props) => )`\n font-weight: bold;\n color: green;\n `;\n expect(render(Hey)).toMatchInlineSnapshot(`\n\n Hey\n\n`);\n });\n\n it(\"interpolates props-based values correctly\", () => {\n const Text = styled.p`\n color: #333;\n font-size: ${(props) => (props.big ? 32 : 16)}px;\n `;\n expect(render(Hey)).toMatchInlineSnapshot(`\n\n Hey\n

\n`);\n });\n\n it(\"composes components\", () => {\n const Link = styled.a`\n text-decoration: underline;\n font-size: 16px;\n color: blue;\n `;\n const Button = styled(Link)`\n text-decoration: none;\n font-weight: bold;\n padding: 5px 10px;\n background: blue;\n color: white;\n `;\n const BigButton = styled(Button)`\n padding: 10px 20px;\n font-size: 20px;\n `;\n expect(render(Click me))\n .toMatchInlineSnapshot(`\n\n Click me\n\n`);\n });\n\n it(\"works with `.attrs`\", () => {\n const Action = styled.a.attrs({\n href: \"https://example.com\",\n target: \"blank\",\n })`\n color: blue;\n `;\n expect(render(Click me)).toMatchInlineSnapshot(`\n\n Click me\n\n`);\n });\n\n it(\"works with `.withComponent`\", () => {\n const Text = styled.p`\n color: green;\n `;\n const Heading = Text.withComponent(\"h1\");\n expect(render(Hey)).toMatchInlineSnapshot(`\n\n Hey\n\n`);\n });\n\n it(\"works with `css` helper\", () => {\n const mixin = css`\n color: ${(props) => (props.primary ? \"blue\" : \"#333\")};\n `;\n const Link = styled.a`\n font-size: 16px;\n ${mixin};\n `;\n expect(render(Click)).toMatchInlineSnapshot(`\n\n Click\n\n`);\n });\n\n it(\"warns about nested rules\", () => {\n let lastConsoleWarn;\n const originalConsoleWarn = console.warn;\n console.warn = (...message) => (lastConsoleWarn = message.join(\" \"));\n const Invalid = styled.div`\n color: #333;\n\n // This won't work\n .nested {\n color: blue;\n }\n `;\n expect(render()).toMatchInlineSnapshot(`\n\n`);\n expect(lastConsoleWarn).toMatchInlineSnapshot(\n `\"Node of type rule not supported as an inline style\"`\n );\n console.warn = originalConsoleWarn;\n });\n\n it(\"expands style rules\", () => {\n const Box = styled.p`\n border: 1px solid #333;\n background: #333;\n `;\n expect(render()).toMatchInlineSnapshot(`\n\n`);\n });\n\n it(\"overrides and merges styles by value from `style` prop\", () => {\n const Link = styled.a`\n font-size: 16px;\n color: red;\n `;\n expect(render()).toMatchInlineSnapshot(`\n\n`);\n });\n\n it(\"overrides and merges styles by value from `.attrs`\", () => {\n const Link = styled.a.attrs({\n style: {\n color: \"red\",\n },\n })`\n font-size: 16px;\n color: blue;\n `;\n expect(render()).toMatchInlineSnapshot(`\n\n`);\n });\n\n it(\"works with styles-returning function API\", () => {\n const Link = styled.a(({ color }) => ({ color }));\n expect(render()).toMatchInlineSnapshot(`\n\n`);\n });\n});\n" }, { "path": "test/theme.spec.js", "content": "import React from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport styled, { withTheme, ThemeProvider } from \"../src\";\n\ndescribe(\"theme\", () => {\n it(\"works with `styled.element`\", () => {\n const Link = styled.a`\n color: ${(props) => props.theme.color};\n `;\n expect(\n renderToStaticMarkup(\n \n Link\n \n )\n ).toMatchInlineSnapshot(`\"Link\"`);\n });\n\n it(\"works with `styled(Component)`\", () => {\n const Heading = (props) =>

;\n const StyledHeading = styled(Heading)`\n font-size: ${(props) => props.theme.size};\n `;\n expect(\n renderToStaticMarkup(\n \n Hey\n \n )\n ).toMatchInlineSnapshot(`\"

Hey

\"`);\n });\n\n it(\"works with `withTheme`\", () => {\n const Component = ({ theme, innerRef, ...rest }) =>
;\n const ThemedComponent = withTheme(Component);\n const WrapperComponent = (props) => ;\n const StyledComponent = styled(WrapperComponent)``;\n expect(\n renderToStaticMarkup(\n \n \n \n )\n ).toMatchInlineSnapshot(`\"
\"`);\n });\n});\n" }, { "path": "test/typings.spec.tsx", "content": "// @ts-check\nimport styled from \"../\";\n\ndescribe(\"typings\", () => {\n it(\"does not report ts error\", () => {\n const StyledCenter = styled.center``;\n\n const StyledFont = styled.font``;\n\n const StyledVmlRoundRect = styled.vml.roundrect``;\n\n const StyledAnchorLock = styled.wml.anchorlock``;\n\n const StyledVmlRoundRectAttrs = styled.vml.roundrect.attrs({\n \"xmlns:v\": \"urn:schemas-microsoft-com:vml\",\n \"xmlns:w\": \"urn:schemas-microsoft-com:office:word\",\n })``;\n });\n});\n" }, { "path": "tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"module\": \"commonjs\",\n \"strict\": true,\n \"esModuleInterop\": true,\n \"skipLibCheck\": true,\n \"forceConsistentCasingInFileNames\": true\n }\n}\n" } ]