{"dist":{"shasum":"004ee0e5e0a9959626a209294344cd0aa410beec","tarball":"https://registry.npmjs.org/emotion-mdx/-/emotion-mdx-1.0.0-2.tgz","fileCount":4,"integrity":"sha512-J50mdF1Bwok6ZDNEQyiTddzU88f1UldFSASPE8izRoXFQMmh/OI+z8hNnHNdzOTd+WAnKjygOjHgqWSk2gHG/g==","signatures":[{"sig":"MEYCIQD+2ju/171Sv3TTPiP0056xad2zPGFqKSB2Fd1rfUxs0AIhAKpV6OU2vd1n8HE5vTEkkmYPCXeAt21jTiJ4kOfujYOm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":14189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcnRDYCRA9TVsSAnZWagAAPYQP/2wVTAoEIw8ils9DFblw\nFXPOiKaRx3Ilzz3K9lZFwKZZdmef5xwLmIP4NN+6FMi4iyjsWvXK/0aMmLAY\nwQgFrsjDjAp4esEMiLvt14oQBuwieVJzgBCRhJzTSuPn/Xv14KrN5P9J5e3f\nIjkYAFsZqyvV75pfJFsOqGeei/4pGGp5gTJN4XAKUivo3/6grjp2mSylocKs\nYF1P9znzpDNKJJ4d419Y1X8BUCnsyQDSK1oaQtAZYBNb04gykAR1sZ5OFSk1\nawrTBZtBQxgP7jBiyMkFxQrbptnpSrQk9DmoZb4zMij4LkbiBx4AgMmqcHM6\nsl0/O5FaEyfl+pWdp5exdfeOXu6tbZVSGh1r+/WTcbOXaJhVKIm0ywPA5yKB\n0CX3UJSaeBZWJU/1LzWkVL723sKO/mNue0EJg00injJ3TtJhlJoEQBvpGnmJ\nPV/DTWsB07Sad15S2B2Gp5pah9PXvnd2eYT8Bsi3rd8ZA7HQDOdy+T12v/A5\nSh+6cuAm4FKrbY2340qg2g8+k7dtjpIuN47CN1WsbVGE2QmVK5/NVbpPLJKr\nva1Uq6HXUbPz3cjfElQ6WwiW3EyYu3efNlMHE4YhJg5LTEHkcbqPTKiBBpL0\nq+W0jILWrzfeV7zXl/tMfuAXxJ88MUuuu2Mlr6T1rXpmeVKS2HiO33EkD8c5\nVOeA\r\n=2w0z\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":"78cbcb7404f50828eee2317b479f1f54c446024d","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-18","jest":"^24.5.0","react":"^16.8.5","react-dom":"^16.8.5","@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@mdx-js/mdx":"^1.0.0-alpha.9","@mdx-js/tag":"^1.0.0-alpha.6","lodash.pick":"^4.4.0","jest-emotion":"^10.0.9","@emotion/core":"^10.0.9","styled-system":"^4.0.6","@emotion/styled":"^10.0.9","emotion-theming":"^10.0.9","@babel/preset-env":"^7.4.2","@styled-system/css":"^1.0.0-0","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.8.5"},"peerDependencies":{"@mdx-js/mdx":"^1.0.0-alpha.7","@mdx-js/tag":"^1.0.0-alpha.6","@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","emotion-theming":"^10.0.9"},"_npmOperationalInternal":{"tmp":"tmp/emotion-mdx_1.0.0-2_1553797335749_0.01842511844872652","host":"s3://npm-registry-packages"},"_id":"emotion-mdx@1.0.0-2","version":"1.0.0-2"}