{"_id":"emotion-mdx","_rev":"257973","name":"emotion-mdx","description":"A fine blend of Emotion, theming, MDX, and React components","dist-tags":{"latest":"1.0.0-6","next":"1.0.0-3"},"maintainers":[{"name":"jxnblk","email":""}],"time":{"modified":"2021-06-03T16:32:14.000Z","created":"2019-03-23T02:53:37.317Z","1.0.0-6":"2019-04-01T21:22:40.360Z","1.0.0-5":"2019-04-01T21:11:16.607Z","1.0.0-4":"2019-03-30T20:16:06.533Z","1.0.0-3":"2019-03-30T14:01:41.215Z","1.0.0-2":"2019-03-28T18:22:15.899Z","1.0.0-1":"2019-03-27T16:55:36.577Z","1.0.0-0":"2019-03-23T02:53:37.317Z"},"users":{},"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"versions":{"1.0.0-6":{"name":"emotion-mdx","version":"1.0.0-6","description":"A fine blend of Emotion, theming, MDX, and React components","main":"index.cjs.js","scripts":{"prepare":"babel index.js -o index.cjs.js","test":"jest","start":"gx docs"},"keywords":[],"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"license":"MIT","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@emotion/core":"^10.0.10","@emotion/styled":"^10.0.10","@mdx-js/mdx":"^1.0.0-alpha.16","@mdx-js/react":"^1.0.0-alpha.16","@styled-system/css":"^1.0.0","emotion-theming":"^10.0.10","gx":"^2.0.0-22","jest":"^24.5.0","jest-emotion":"^10.0.10","lodash.pick":"^4.4.0","react":"^16.8.6","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","styled-system":"^4.1.0"},"peerDependencies":{"@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.16","@mdx-js/react":"^1.0.0-alpha.16","emotion-theming":"^10.0.9"},"dependencies":{"lodash.get":"^4.4.2","lodash.merge":"^4.6.1"},"jest":{"snapshotSerializers":["jest-emotion"],"coverageReporters":["lcov","html"]},"gitHead":"1d7984eb33a56d12592b4b9f79093b7f0b7b0e33","_id":"emotion-mdx@1.0.0-6","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"shasum":"0178ced4b9be8972ec233f720ec51af6ef390462","size":4094,"noattachment":false,"key":"/emotion-mdx/-/emotion-mdx-1.0.0-6.tgz","tarball":"http://registry.cnpm.dingdandao.com/emotion-mdx/download/emotion-mdx-1.0.0-6.tgz"},"maintainers":[{"name":"jxnblk","email":""}],"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/emotion-mdx_1.0.0-6_1554153760255_0.604325482555395"},"_hasShrinkwrap":false,"publish_time":1554153760360,"_cnpm_publish_time":1554153760360},"1.0.0-5":{"name":"emotion-mdx","version":"1.0.0-5","description":"A fine blend of Emotion, theming, MDX, and React components","main":"index.cjs.js","scripts":{"prepare":"babel index.js -o index.cjs.js","test":"jest","start":"gx docs"},"keywords":[],"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"license":"MIT","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@emotion/core":"^10.0.10","@emotion/styled":"^10.0.10","@mdx-js/mdx":"^1.0.0-alpha.16","@mdx-js/react":"^1.0.0-alpha.16","@styled-system/css":"^1.0.0","emotion-theming":"^10.0.10","gx":"^2.0.0-22","jest":"^24.5.0","jest-emotion":"^10.0.10","lodash.pick":"^4.4.0","react":"^16.8.6","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","styled-system":"^4.1.0"},"peerDependencies":{"@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.16","@mdx-js/react":"^1.0.0-alpha.16","emotion-theming":"^10.0.9"},"dependencies":{"lodash.get":"^4.4.2","lodash.merge":"^4.6.1"},"jest":{"snapshotSerializers":["jest-emotion"],"coverageReporters":["lcov","html"]},"gitHead":"ec97629bd140cf0e99875fdaf204cdfa41ac2ab6","_id":"emotion-mdx@1.0.0-5","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"shasum":"6a49057392f10c2eb5a0740de8c38bc0f3c6a10b","size":4040,"noattachment":false,"key":"/emotion-mdx/-/emotion-mdx-1.0.0-5.tgz","tarball":"http://registry.cnpm.dingdandao.com/emotion-mdx/download/emotion-mdx-1.0.0-5.tgz"},"maintainers":[{"name":"jxnblk","email":""}],"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/emotion-mdx_1.0.0-5_1554153076439_0.062173798961239646"},"_hasShrinkwrap":false,"publish_time":1554153076607,"_cnpm_publish_time":1554153076607},"1.0.0-4":{"name":"emotion-mdx","version":"1.0.0-4","description":"A fine blend of Emotion, theming, MDX, and React components","main":"index.cjs.js","scripts":{"prepare":"babel index.js -o index.cjs.js","test":"jest","start":"gx docs"},"keywords":[],"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"license":"MIT","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@emotion/core":"^10.0.10","@emotion/styled":"^10.0.10","@mdx-js/mdx":"^1.0.0-alpha.16","@mdx-js/react":"^1.0.0-alpha.16","@styled-system/css":"^1.0.0","emotion-theming":"^10.0.10","gx":"^2.0.0-22","jest":"^24.5.0","jest-emotion":"^10.0.10","lodash.pick":"^4.4.0","react":"^16.8.6","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","styled-system":"^4.1.0"},"peerDependencies":{"@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.16","@mdx-js/react":"^1.0.0-alpha.16","emotion-theming":"^10.0.9"},"dependencies":{"lodash.merge":"^4.6.1"},"jest":{"snapshotSerializers":["jest-emotion"],"coverageReporters":["lcov","html"]},"gitHead":"2aae92deccf9cf57b038731abbf38635080f8f77","_id":"emotion-mdx@1.0.0-4","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"shasum":"3a7d5cb3eccc5151f3b699495add965cad774761","size":4274,"noattachment":false,"key":"/emotion-mdx/-/emotion-mdx-1.0.0-4.tgz","tarball":"http://registry.cnpm.dingdandao.com/emotion-mdx/download/emotion-mdx-1.0.0-4.tgz"},"maintainers":[{"name":"jxnblk","email":""}],"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/emotion-mdx_1.0.0-4_1553976966400_0.25754570060079063"},"_hasShrinkwrap":false,"publish_time":1553976966533,"_cnpm_publish_time":1553976966533},"1.0.0-3":{"name":"emotion-mdx","version":"1.0.0-3","description":"A fine blend of Emotion, theming, MDX, and React components","main":"index.cjs.js","scripts":{"prepare":"babel index.js -o index.cjs.js","test":"jest","start":"gx docs"},"keywords":[],"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"license":"MIT","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@emotion/core":"^10.0.10","@emotion/styled":"^10.0.10","@mdx-js/mdx":"^1.0.0-alpha.16","@mdx-js/react":"^1.0.0-alpha.16","@styled-system/css":"^1.0.0","emotion-theming":"^10.0.10","gx":"^2.0.0-22","jest":"^24.5.0","jest-emotion":"^10.0.10","lodash.pick":"^4.4.0","react":"^16.8.6","react-dom":"^16.8.6","react-test-renderer":"^16.8.6","styled-system":"^4.1.0"},"peerDependencies":{"@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.16","@mdx-js/react":"^1.0.0-alpha.16","emotion-theming":"^10.0.9"},"dependencies":{"lodash.merge":"^4.6.1"},"jest":{"snapshotSerializers":["jest-emotion"],"coverageReporters":["lcov","html"]},"readmeFilename":"README.md","gitHead":"034287073cd648758f9c6aa21af90a0f7943ceb5","_id":"emotion-mdx@1.0.0-3","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"shasum":"829c5e302d6496234af7bce4a74bac1d989c0264","size":4274,"noattachment":false,"key":"/emotion-mdx/-/emotion-mdx-1.0.0-3.tgz","tarball":"http://registry.cnpm.dingdandao.com/emotion-mdx/download/emotion-mdx-1.0.0-3.tgz"},"maintainers":[{"name":"jxnblk","email":""}],"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/emotion-mdx_1.0.0-3_1553954500682_0.8547279934105538"},"_hasShrinkwrap":false,"publish_time":1553954501215,"_cnpm_publish_time":1553954501215},"1.0.0-2":{"name":"emotion-mdx","version":"1.0.0-2","description":"A fine blend of Emotion, theming, MDX, and React components","main":"index.cjs.js","scripts":{"prepare":"babel index.js -o index.cjs.js","test":"jest","start":"gx docs"},"keywords":[],"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"license":"MIT","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.9","@mdx-js/tag":"^1.0.0-alpha.6","@styled-system/css":"^1.0.0-0","emotion-theming":"^10.0.9","gx":"^2.0.0-18","jest":"^24.5.0","jest-emotion":"^10.0.9","lodash.pick":"^4.4.0","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.5","styled-system":"^4.0.6"},"peerDependencies":{"@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.7","@mdx-js/tag":"^1.0.0-alpha.6","emotion-theming":"^10.0.9"},"dependencies":{"lodash.merge":"^4.6.1"},"jest":{"snapshotSerializers":["jest-emotion"],"coverageReporters":["lcov","html"]},"readmeFilename":"README.md","gitHead":"78cbcb7404f50828eee2317b479f1f54c446024d","_id":"emotion-mdx@1.0.0-2","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"shasum":"004ee0e5e0a9959626a209294344cd0aa410beec","size":4254,"noattachment":false,"key":"/emotion-mdx/-/emotion-mdx-1.0.0-2.tgz","tarball":"http://registry.cnpm.dingdandao.com/emotion-mdx/download/emotion-mdx-1.0.0-2.tgz"},"maintainers":[{"name":"jxnblk","email":""}],"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/emotion-mdx_1.0.0-2_1553797335749_0.01842511844872652"},"_hasShrinkwrap":false,"publish_time":1553797335899,"_cnpm_publish_time":1553797335899},"1.0.0-1":{"name":"emotion-mdx","version":"1.0.0-1","description":"A fine blend of Emotion, theming, MDX, and React components","main":"index.cjs.js","scripts":{"prepare":"babel index.js -o index.cjs.js","test":"jest","start":"gx docs"},"keywords":[],"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"license":"MIT","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.9","@mdx-js/tag":"^1.0.0-alpha.6","@styled-system/css":"^1.0.0-0","emotion-theming":"^10.0.9","gx":"^2.0.0-18","jest":"^24.5.0","jest-emotion":"^10.0.9","lodash.pick":"^4.4.0","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.5","styled-system":"^4.0.6"},"peerDependencies":{"@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.7","@mdx-js/tag":"^1.0.0-alpha.6","emotion-theming":"^10.0.9"},"dependencies":{"lodash.merge":"^4.6.1"},"jest":{"snapshotSerializers":["jest-emotion"],"coverageReporters":["lcov","html"]},"gitHead":"9a0463f98562aa94e204f220526ddd9d33200818","_id":"emotion-mdx@1.0.0-1","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"shasum":"ed6d47c2b01c647984aac37aa0b95b68153f50ca","size":4257,"noattachment":false,"key":"/emotion-mdx/-/emotion-mdx-1.0.0-1.tgz","tarball":"http://registry.cnpm.dingdandao.com/emotion-mdx/download/emotion-mdx-1.0.0-1.tgz"},"maintainers":[{"name":"jxnblk","email":""}],"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/emotion-mdx_1.0.0-1_1553705736476_0.6691011822729376"},"_hasShrinkwrap":false,"publish_time":1553705736577,"_cnpm_publish_time":1553705736577},"1.0.0-0":{"name":"emotion-mdx","version":"1.0.0-0","description":"A fine blend of Emotion, theming, MDX, and React components","main":"index.cjs.js","scripts":{"prepare":"babel index.js -o index.cjs.js","test":"jest","start":"gx docs"},"keywords":[],"author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"license":"MIT","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.9","@mdx-js/tag":"^1.0.0-alpha.6","emotion-theming":"^10.0.9","gx":"^2.0.0-18","jest":"^24.5.0","jest-emotion":"^10.0.9","lodash.pick":"^4.4.0","react":"^16.8.5","react-dom":"^16.8.5","react-test-renderer":"^16.8.5","styled-system":"^4.0.6"},"peerDependencies":{"@emotion/core":"^10.0.9","@emotion/styled":"^10.0.9","@mdx-js/mdx":"^1.0.0-alpha.7","@mdx-js/tag":"^1.0.0-alpha.6","emotion-theming":"^10.0.9"},"dependencies":{"lodash.merge":"^4.6.1"},"jest":{"snapshotSerializers":["jest-emotion"],"coverageReporters":["lcov","html"]},"gitHead":"97baceefd688f27d52b85a168f61f91d1270075e","_id":"emotion-mdx@1.0.0-0","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"shasum":"631eeecefd0cf64e200fd684263ecfa9cf9e605d","size":3928,"noattachment":false,"key":"/emotion-mdx/-/emotion-mdx-1.0.0-0.tgz","tarball":"http://registry.cnpm.dingdandao.com/emotion-mdx/download/emotion-mdx-1.0.0-0.tgz"},"maintainers":[{"name":"jxnblk","email":""}],"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/emotion-mdx_1.0.0-0_1553309617140_0.10411730871346192"},"_hasShrinkwrap":false,"publish_time":1553309617317,"_cnpm_publish_time":1553309617317}},"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-theming @mdx-js/mdx@next @mdx-js/react@next\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.\n\n```jsx\n<ComponentProvider\n  theme={{\n    styles: {\n      h1: {\n        fontSize: 48,\n        color: 'tomato',\n      },\n    }\n  }}\n/>\n```\n\n## Transforming Styles\n\nA `transform` function can be provided to transform the style object based on the theme.\nThis can be used with libraries like [Styled System][] to quickly add theme-derived styles.\n\n```jsx\nimport React from 'react'\nimport { ComponentProvider } from 'emotion-mdx'\nimport css from '@styled-system/css'\n\nexport default props =>\n  <ComponentProvider\n    transform={css}\n    theme={{\n      colors: {\n        primary: 'tomato',\n      },\n      styles: {\n        h1: {\n          color: 'primary'\n        }\n      }\n    }}\n  />\n```\n\nThe `transform` function should accept `styles` as an argument and return a function that accepts `theme` as an argument.\n\n```js\ntransform(styles)(theme)\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\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 theme = {\n  styles: {\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}\n\nexport default props =>\n  <ComponentProvider\n    {...props}\n    theme={theme}\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","_attachments":{},"license":"MIT"}