{"_id":"@charlietango/emotion-sx","_rev":"3-c1d4caee51261aa0a6d4537b90b1a34a","name":"@charlietango/emotion-sx","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@charlietango/emotion-sx","version":"1.0.0","description":"JSX pragma for Emotion SX prop","author":{"name":"Charlie Tango"},"license":"MIT","main":"dist/jsx.js","scripts":{"build":"tsc"},"peerDependencies":{"@emotion/react":"*","@styled-system/css":"*"},"devDependencies":{"@emotion/react":"^11.0.0-next.15","@styled-system/css":"^5.1.5","@types/react":"^16.9.46","@types/styled-system__css":"^5.0.13","prettier":"^2.1.0","prettier-plugin-pkg":"^0.8.0","react":"^16.13.1","typescript":"^4.0.2"},"release":{"branches":["master"],"plugins":["@semantic-release/commit-analyzer","@semantic-release/release-notes-generator","@semantic-release/npm","@semantic-release/github"]},"gitHead":"9e28ba17324cf3bbe1bd5301ce026462a78c6d8c","_id":"@charlietango/emotion-sx@1.0.0","_nodeVersion":"13.13.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-zn88E/sQtXpSX/H9Uwltq8NcYBL0TZOXLRbI9PK/GDu2iQlbCYslkVIua1YUmvJBbIZSSE1dYtMref58kwLbRg==","shasum":"c2a34941f872649d952c3236acd691c1ab7fdeed","tarball":"https://registry.npmjs.org/@charlietango/emotion-sx/-/emotion-sx-1.0.0.tgz","fileCount":10,"unpackedSize":7665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ6zDCRA9TVsSAnZWagAAngoP/jotX6v1GzaNOu7+PzBL\nBf1m4bHwevUmcG/FhCTryw+cAfqs8d5I5VuYMwmlp3i6rdHi4xJupCMCDhpQ\noGlNiYdySSIIEFdjWi7xB4LlARe5SbLyf0MX2FnUG4xGd7aGvx/OU+JT4pUF\nuRkD0dSHG8DJmltc32psw4QlMyx9EWcMNuNnQz5QbDX32fOftRdnHxwjz/La\n8ghjkw++HNs/qg6sCImClM9MFNdV2/RB8wKO9hZiyGM6x7jRZF05RQCuzzjW\nzJp0UHpSYe2Lh6A77ETOZAuFFheNrzxpSaxF62mf6PMptnwKucXDG6p8Zzym\nE0tx8BPdyra8lCBZO/BXJKO+Ebx3zEDlnmp7cWPrNJ5c4joeiSqhi4sf6rtx\niCEOGBOvCileQBb794sjgMfBrvFTYbgsz6vJ2fXv4TCY3SBCRdLb1XYstt4v\nameqECfg3ZPwGNZXWsBLAMzWMvZ1e2f7r2U+GDoFxSFCjdst74/a4uHWvHbc\n4rzXKOhW5GaH90dgoRRpfVv5IXJYCrwLp4Uuke4uEdRH09CWXr0KDCdehk75\nfA30l6bZPuYmO2eyLROHTbhfIsYMlH+sRXHGSvxTFZ2i1W7mAn9kLvhLm+uU\nCV3IT3hPLeJZEJ9r4BxlB4O1sI5UfAybcooFvFfDmq8Z1JBr3sxXMEWg/VNe\nUxxL\r\n=sl+p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDVQNcJxfGopyE5/6V8xqUd8Y7fNJHgIjAvJQDglJJ4tAiEAkeGbxY7j8ltGjJ0FywM/CZcAPA2g2JUPi9S9zyrgzT4="}]},"maintainers":[{"name":"thebuilder","email":"dsc@charlietango.dk"}],"_npmUser":{"name":"thebuilder","email":"dsc@charlietango.dk"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/emotion-sx_1.0.0_1598270659125_0.1415406643132595"},"_hasShrinkwrap":false},"1.0.1":{"name":"@charlietango/emotion-sx","version":"1.0.1","description":"JSX pragma for Emotion SX prop","author":{"name":"Charlie Tango"},"license":"MIT","source":"src/jsx.ts","main":"dist/jsx.js","module":"dist/jsx.esm.js","esmodule":"dist/jsx.modern.js","scripts":{"build":"microbundle -f es,cjs,modern --no-compress"},"peerDependencies":{"@emotion/react":"*","@styled-system/css":"*"},"devDependencies":{"@emotion/react":"^11.0.0-next.15","@styled-system/css":"^5.1.5","@types/react":"^16.9.46","@types/styled-system__css":"^5.0.13","microbundle":"^0.12.3","prettier":"^2.1.0","prettier-plugin-pkg":"^0.8.0","react":"^16.13.1","typescript":"^4.0.2"},"release":{"branches":["master"],"plugins":["@semantic-release/commit-analyzer","@semantic-release/release-notes-generator","@semantic-release/npm","@semantic-release/github"]},"gitHead":"78860e7c1e3e8ff17a34a75b1a54eb0a81ddc716","_id":"@charlietango/emotion-sx@1.0.1","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-in1tVbxGv9ZASL8WgM115YefrkiEc3WJ5Ch8i1UE1A8UfSTdl2uk4/9O8yYd4RbCKnow8VPmuiNcNyJtCnTZAg==","shasum":"862fc5a668d29e862217bf050d6fa6e6a850a8cb","tarball":"https://registry.npmjs.org/@charlietango/emotion-sx/-/emotion-sx-1.0.1.tgz","fileCount":12,"unpackedSize":17415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRMvECRA9TVsSAnZWagAAzFgP/3LbsPkuFzZtsiG2ZW6D\nVbKU+7tmCdlfwAefmvEAsxJb3aaB8xtPKjja/PMgoTJ9n52kz+DnR/tHesPF\n5e2lQhIPO8ssnnzfxyVQR1xju0e8d4VhlBAzRrzGsZ+YOOaY7yW9J0aGnKbd\n8Qc04sYT22SV/8ovlPaIW3pTsx9n5YcGBvg48c//019lUDmPCdjTJCZpVdFS\neu6182XcI97OTfxLiYrfS2uHbgCGJL/EUDk98foqVsPJ5p1+VD8Xwhk8iku5\nZIDzdKZhT5PSq0oJhw5fDiqShWCJ/4HobqkTZr0F3BAwtHkJ1Ax4QtvEQK0i\ng8CZTeDrd+IibCHOWz9WiF1e/AItdgC0/EXfmIEOmdSdjulukbpOist46dcJ\nQn2RQZV4dkJM19LDLPV57plNeM+2RvVnnX03cyg1SY9Q3xiswlM4+NuYPbt5\n0du4ifdEvG4H/XcRX0WgEA2PYynNwDaLdiPlcSt+C+BVAUlv9SY2j2NtyrxT\nLLmnOZdEZ3rcjsrRM5fpOc+ji5gjn3oonSYuryTxbA6v9VGbRI8TmeaV6TVq\nN5mQpW6tWJx9yAGL/vRk6fR85GoeENxqoZ18ofIiq1pYEHjbfVkKB5chCJPx\nIaZsCKzMSlj2tU5qEDicDFbvrRc9VVou5IrPbuEWrsx3H28CSX0VMOJfaMSj\nyOwV\r\n=x05N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLZUSbffuLqF/xAeTjoaGKxay9FQEEVCKHiM5r8w3OCAiEA8R8Dzjyt883RHTtlt/rS3tCBgrbREzUYEdHA47TArhY="}]},"maintainers":[{"name":"thebuilder","email":"dsc@charlietango.dk"}],"_npmUser":{"name":"thebuilder","email":"dsc@charlietango.dk"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/emotion-sx_1.0.1_1598344131647_0.03489000907808393"},"_hasShrinkwrap":false}},"time":{"created":"2020-08-24T12:04:18.962Z","1.0.0":"2020-08-24T12:04:19.222Z","modified":"2022-04-04T22:32:28.240Z","1.0.1":"2020-08-25T08:28:51.792Z"},"maintainers":[{"email":"frederik+npm@bosch.dev","name":"frederik_bosch"},{"email":"dsc@charlietango.dk","name":"thebuilder"}],"description":"JSX pragma for Emotion SX prop","author":{"name":"Charlie Tango"},"license":"MIT","readme":"# @charlietango/emotion-sx\n\n### Using `sx` prop\n\nNormally when running [emotion](https://www.emotion.sh/) through Babel you can use the `css` prop -\nthis allows you to write the tagged template or Object styling directly on the components. It's then\nconverted into a style and `className` by Babel.\n\nWe extend this setup by adding support for [@styled-system/css](https://styled-system.com/css) under\na new `sx` props. This allows us to consume the theme and add responsive values with arrays. This is\ndone by creating a custom JSX Pragma that adds support for the `sx` prop on all React elements.\n\n```jsx harmony\nconst Example = () => (\n \n);\n```\n\n> Make sure\n> [@charlie-tango/babel-preset-sx-prop](https://github.com/charlie-tango/babel-preset-sx-prop) is\n> installed, otherwise the `sx` prop will not do anything.\n\n### Custom JSX pragma\n\nIf you can't add\n[@charlie-tango/babel-preset-sx-prop](https://github.com/charlie-tango/babel-preset-sx-prop) to the\nproject, you can still use the `sx` prop by defining a custom JSX Pragma in the React file.\n\nInclude this at the top of the file:\n\n```tsx\n/** @jsx jsx */\nimport { jsx } from '@charlietango/emotion-sx';\n```\n\nThis replaces the normal `import * as React from 'react'` (which imports the default JSX from\nReact).\n\n## Base CSS\n\nThe library includes a `` Global styles file - It's built on top of\n[sanitize.css](https://github.com/csstools/sanitize.css), with some of our settings included.\n\n```typescript jsx\nimport { ThemeProvider } from '@emotion/react';\nimport { BaseCss, baseTheme } from '@charlietango/ui';\n\nconst App = () => (\n \n \n \n \n);\n```\n\nIn addition to this, it also extracts a few values (if set) from the theme, and defines as global\ndefaults.\n\n```css\nhtml {\n background-color: 'theme.colors.background';\n color: 'theme.colors.text';\n font-family: 'theme.fonts.body';\n}\n```\n","readmeFilename":"readme.md"}