{"dist":{"shasum":"829c5e302d6496234af7bce4a74bac1d989c0264","tarball":"https://registry.npmjs.org/emotion-mdx/-/emotion-mdx-1.0.0-3.tgz","fileCount":4,"integrity":"sha512-/Lep9DZotOEwfeo0AN98VZuVExiPAtUN+7d/znD4R8AJehs/WjUMsdrxJiNXLHFKz/Brf289LA0CSOZF0a5K+Q==","signatures":[{"sig":"MEQCIAmaT9dUSD64fshApQf2NP3khIBay9dWCyGRFxaY2zyvAiBMtIKPdQvvpvRwocObYbTgjtPXXLmluUZtQViqAlv36g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":14262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcn3bFCRA9TVsSAnZWagAAdJ8P+wWlGh21frhZpuJFyHxu\n+NgypJX8NkUQebPpTNbWLKnX0fmXhqfvwsmxzGpw7aR3m2vdqzFSPLeJKDAS\na7HrexTJrfBTf0aBGE8g/nffQwfSipCW/8vtreFCo2xkL3Q4HLghp3oss2Vb\n0SjDKTXTIG7C43fbLv9r73AbBQitARkiN4F1m2oE6gTDQ9BW/gr4GiS8GksN\nwYJ5XnzJoriCuTalqVzD/M2lCQiOb3bIV9mrwiRIitnd5J+SSw8CjOw/8hf+\ns4sG3ybq4pAKn+8Y4caK1WCGcthMtijSUJ98PzzPEzPrwxkjgb1abKvewa0T\nD6cs73Gb7YkSOkwD9/Os4o00XzGAqm2DJa8S/rWf7XBWr7v0T0AJWUlMIpjj\nbyUh3CwL4bispU54zZ2j5s6JCBJWkKLZ8tXpX7M3e3r0tkLWicZb4YjJvAs5\nnYDugJHGQAMveFX4EtuYEnHPGQ97xydWuaHLi//DnHeBVjq5U/NYq6W3A4wX\nxlGEaVNQpU8lA4PFCOOHra7ts7KBymvS+gyw5AomoXEnXYbpDN+dt1WSlAer\n156Iz8wPEn/+AUhE9xs6qEzbBFSdzHt9YKfosLV2DXSMuTkw+304OzGxaWhk\nxHzy5B328JJUth7mcorvYCrXPswge35yAlvaLJXW0KDbgsZrr4Nb3J2TxGLA\nsVnm\r\n=tHcl\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"coverageReporters":["lcov","html"],"snapshotSerializers":["jest-emotion"]},"main":"index.cjs.js","name":"emotion-mdx","author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"readme":"\n# emotion-mdx\n\nA fine blend of [Emotion][], theming, [MDX][], and React components\n\n**WIP/Experimental**\n\n```sh\nnpm i emotion-mdx\n```\n\nYou'll also need the following:\n\n```sh\nnpm i @emotion/core @emotion/styled emotion-theming @mdx-js/mdx @mdx-js/tag\n```\n\nEmotion MDX is a context provider meant to be a complete replacement for both the `MDXProvider` and `ThemeProvider`.\nIt creates styled MDX components that have access to the Emotion theme object and can be nested to created contextual styles.\n\n```jsx\n// basic example\nimport React from 'react'\nimport { ComponentProvider } from 'emotion-mdx'\nimport theme from './theme'\nimport components from './components'\nimport Hello from './hello.mdx'\n\nexport default props =>\n  <ComponentProvider\n    theme={theme}\n    components={components}>\n    <Hello />\n  </ComponentProvider>\n```\n\n## Styles\n\nThe `theme.styles` object adds styles to child MDX elements, using `@emotion/styled`.\n\n```jsx\n<ComponentProvider\n  theme={{\n    styles: {\n      h1: {\n        fontSize: 48,\n        color: 'tomato',\n      },\n    }\n  }}\n/>\n```\n\nEach style can pick up values from the `theme` object by passing a function.\n\n```jsx\n<ComponentProvider\n  theme={{\n    colors: {\n      primary: 'tomato',\n    },\n    styles: {\n      h1: props => ({\n        color: props.theme.colors.primary,\n      })\n    }\n  }}\n/>\n```\n\n## Transforming Styles\n\nA `transform` function can be provided to transform the style object based on props.\nThis can be used with libraries like [Styled System][] to quickly add theme-derived styles.\n\n```jsx\nconst customTransform = style => props => {\n  const color = props.theme.colors[style.color] || style.color\n  const transformed = {\n    ...style,\n    color,\n  }\n  return transformed\n}\n\nexport default props =>\n  <ComponentProvider\n    transform={customTransform}\n    theme={{\n      colors: {\n        primary: 'tomato',\n      },\n      styles: {\n        h1: {\n          color: 'primary'\n        }\n      }\n    }}\n  />\n```\n\n\n## Nesting Providers\n\nThe `ComponentProvider` can be nested to make contextual changes to the `theme`, `components`, or `theme.styles`.\n\n## Props\n\n- `components` (object) React components to render MDX elements\n- `theme` (object) Emotion theming object\n- `theme.styles` (object) Nested style objects for each component, with access to the Emotion `theme` context\n- `transform` (function) Optional function to transform styles\n\n## useComponents\n\nThe `useComponents` hook will return an object of styled components that can be used outside of an MDX document.\n\n```jsx\nimport React from 'react'\nimport { useComponents } from 'emotion-mdx'\n\nexport default props => {\n  const Styled = useComponents()\n  return (\n    <>\n      <Styled.h1>Hello</Styled.h1>\n      <Styled.p>I'm themed</Styled.p>\n    </>\n  )\n}\n```\n\nThe `useComponents` hook accepts a `styles` object argument to make optional contextual overrides.\n\n```jsx\n// with component-level overrides\nimport React from 'react'\nimport { useComponents } from 'emotion-mdx'\n\nexport default props => {\n  const Styled = useComponents({\n    // override the h1 component's defaults\n    h1: props => ({\n      fontSize: props.theme.fontSizes[4],\n      color: 'tomato'\n    })\n  })\n  return (\n    <>\n      <Styled.h1>Hello</Styled.h1>\n      <Styled.p>I'm themed</Styled.p>\n    </>\n  )\n}\n```\n\n## Styled Components\n\nThe `Styled` component can be imported directly and works similarly to the `useComponents` hook.\n\n```jsx\nimport React from 'react'\nimport { Styled } from 'emotion-mdx'\n\nexport default props =>\n  <Styled.div>\n    <Styled.h1>Hello</Styled.h1>\n  </Styled.div>\n```\n\n## Theming\n\nEmotion MDX can be used to create isolated \"theme\" layout components for MDX documents.\nThese component can encapsulate typography styles that will only apply to MDX elements.\n\n```jsx\n// example MDX theme\nimport React from 'react'\nimport { ComponentProvider } from 'emotion-mdx'\n\nconst components = {\n  // MDX-specific component\n  wrapper: {\n    fontFamily: 'Roboto, system-ui, sans-serif',\n    lineHeight: 1.5,\n  },\n  h1: {\n    fontSize: 48,\n    fontWeight: 900,\n    lineHeight: 1.25,\n  },\n  h2: {\n    fontSize: 32,\n    lineHeight: 1.25,\n  }\n}\n\nexport default props =>\n  <ComponentProvider\n    {...props}\n    components={components}\n  />\n```\n\n```mdx\n// example mdx file\nimport Theme from './theme'\nexport default Theme\n\n# Hello\n\n## We're styled!\n```\n\nMIT License\n\n[mdx]: https://mdxjs.com\n[emotion]: https://emotion.sh\n[styled system]: https://styled-system.com\n\n","gitHead":"034287073cd648758f9c6aa21af90a0f7943ceb5","license":"MIT","scripts":{"test":"jest","start":"gx docs","prepare":"babel index.js -o index.cjs.js"},"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"keywords":[],"_npmVersion":"6.9.0","description":"A fine blend of Emotion, theming, MDX, and React components","directories":{},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"_nodeVersion":"10.15.0","dependencies":{"lodash.merge":"^4.6.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"gx":"^2.0.0-22","jest":"^24.5.0","react":"^16.8.6","react-dom":"^16.8.6","@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@mdx-js/mdx":"^1.0.0-alpha.16","lodash.pick":"^4.4.0","jest-emotion":"^10.0.10","@emotion/core":"^10.0.10","@mdx-js/react":"^1.0.0-alpha.16","styled-system":"^4.1.0","@emotion/styled":"^10.0.10","emotion-theming":"^10.0.10","@babel/preset-env":"^7.4.2","@styled-system/css":"^1.0.0","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.8.6"},"peerDependencies":{"@mdx-js/mdx":"^1.0.0-alpha.16","@emotion/core":"^10.0.9","@mdx-js/react":"^1.0.0-alpha.16","@emotion/styled":"^10.0.9","emotion-theming":"^10.0.9"},"_npmOperationalInternal":{"tmp":"tmp/emotion-mdx_1.0.0-3_1553954500682_0.8547279934105538","host":"s3://npm-registry-packages"},"_id":"emotion-mdx@1.0.0-3","version":"1.0.0-3"}