{"_id":"@stitches/core","_rev":"99-3690ee221ce996cd367e76222d726e21","name":"@stitches/core","dist-tags":{"latest":"1.2.8","canary":"1.3.1-1"},"versions":{"0.0.1":{"name":"@stitches/core","version":"0.0.1","description":"The modern CSS-in-JS library","contributors":[{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},{"name":"Pedro Duarte","email":"pedro@modulz.app"},{"name":"Abdul Hallak","email":"abdul@modulz.app"}],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/modulz/stitches.git"},"main":"lib/index.js","module":"es/index.js","publishConfig":{"access":"public"},"scripts":{"build":"npm run build:lib & npm run build:es","build:lib":"tsc -p tsconfig.build.json --outDir lib --module commonjs","build:es":"tsc -p tsconfig.build.json --outDir es --module es2015","clean":"rimraf dist es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"node ../../node_modules/jest/bin/jest.js --env=jsdom --watch --updateSnapshot","prebuild":"npm run clean","postbuild":"rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","css-in-js","css","library"],"dependencies":{"@types/node":"^13.11.1","tslib":"^1.11.1"},"gitHead":"c3509acc346ab0f9820b61ffb26307ec280ccebf","bugs":{"url":"https://github.com/modulz/stitches/issues"},"homepage":"https://github.com/modulz/stitches#readme","_id":"@stitches/core@0.0.1","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.22.1/node@v10.20.1+x64 (darwin)","dist":{"integrity":"sha512-PcNQsc/88BY97WUYPk7paWqtMxxH/W/WY5yCqHrwMnxw3jVyrZyJqYty6tuC+TzEfE3ZVkDvfayE8Nicg6YoIw==","shasum":"40c10773f9d144cb54ae2d63a9bc42669aa6d2ac","tarball":"https://registry.npmjs.org/@stitches/core/-/core-0.0.1.tgz","fileCount":51,"unpackedSize":1827305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTjR8CRA9TVsSAnZWagAAPsYP/jSc7vqK7niABi+gqhuh\nRnOVJsfNMSKjz3P4b3MGx6uQwCucHTZgiP10yt4Lqx2ReEot336rPDcNJcPs\nE2/90A07HbzgA6qQg3638MT6yz42BCNCoO+e7Fm+skeOldKDF5G8TKwCitg2\nfa3EhTqVFm3jHy6EEyAcyNBWEKxJm+Gxahi+VE4qhnqYKHaYW3MuTOeEoMd2\n6QKlxIo2n4GBcoXNPSqYzUvrBu6MRwUHg1na8hgh+gjCxtZspq+l4owS+xGu\n9GWAaSxDeETk/WBBSsy5LC01n8WfEiNcagsztK+BQf822j8rANS++FaZ37uG\nHaVNNI0bHeN5zkKYGJAVo+WJYU3WgAhahdYFyO4f006UPaWrhhVvN579aTHT\npoXXYODyinQtEt+fBQywJsf/9dP+Ji4Bt10QYVrVlT8l9zpsTUtz71mN4Nsf\nq97R/AqruObOS/RpzG11K1+1Yz3opYWGNSOma93DEEkkcEKkaw29H+Q7Ex/2\n88UqtSjmt6B4o+RLZlMw9mT7lGcbNU+N784Oqa5WEmuGUZ+XjWFp4doboQum\nY+XG/CxgjSjU3/BQIbY2BXgBgNy0B/alrsPduQoVU6UbJmvix7A/1TKSr0yf\n/xAxWbBMtbeO5vut8w0bGOd3LKgM4eFekbLWOv6YJ9S/jpmG/pHlPD6s9A6J\nkTYj\r\n=RC89\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBrvuLhf7N+qg3rp0Vsd1VB++TbpWLO5G1zJfWBQ+I2uAiEA9WOQRb4B/Ic0c0yuiEmOAa7hXj8JsQ59544DAdvkMIw="}]},"maintainers":[{"name":"peduarte","email":"contact@peduarte.com"},{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_npmUser":{"name":"peduarte","email":"contact@peduarte.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/core_0.0.1_1598960764484_0.6853460066607209"},"_hasShrinkwrap":false},"0.0.2-canary.0":{"name":"@stitches/core","version":"0.0.2-canary.0","description":"The modern CSS-in-JS library","main":"dist/core.cjs.js","module":"dist/core.esm.js","contributors":[{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},{"name":"Pedro Duarte","email":"pedro@modulz.app"},{"name":"Abdulhadi Alhallak","email":"abdulhadi@modulz.app"}],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/modulz/stitches.git"},"publishConfig":{"access":"public"},"preconstruct":{"source":"src/index.ts"},"lint-staged":{"./**/*.{js,jsx,ts,tsx}":["tslint --fix","prettier --write","git add"],"./**/*.{css,md,json}":["prettier --write","git add"]},"scripts":{"clean":"rimraf dist es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"node ../../node_modules/jest/bin/jest.js --env=jsdom --watch --updateSnapshot","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","css-in-js","css","library"],"dependencies":{"@types/node":"^13.11.1","tslib":"^1.11.1"},"gitHead":"fcf069d00544c1438a4d2c55669bca2abc338b8b","readme":"## Why\n\n- **Atomic mindset**: Each CSS property is an atomic part of your complete CSS\n- **Reusability**: Each CSS property, given the same screen, pseudo and value is considered the same, giving high degree of reusability\n- **Optimal injection**: You can compose your styles outside of your UI, but no injection happens until it is actually used\n- **Tokenized**: Configure with tokens to give design restrictions\n- **Screens**: Define a set of media queries as screens to easily express CSS active within a screen\n- **Utils**: Create your own CSS properties\n- **Typed**: Fully typed API, even though you are not using Typescript\n- **Specificity solved**: No more specificity issues, as an atomic mindset opens up a more efficient and straight forward way to solve it\n- **Token based theming**: Tokens are CSS variables. Create themes overriding the tokens and expose themes to any parts of your app\n\n[A simple benchmark VS styled-components](https://codesandbox.io/s/benchmark-stitches-vs-styled-components-xi7qh?file=/src/App.js)\n\n## Get started\n\n`npm install @stitches/core`\n\n```ts\nimport { css } from '@stitches/core';\n\nconst button = css({\n color: 'gray',\n '&:hover': {\n color: 'black',\n },\n borderColor: 'black',\n padding: '1rem',\n});\n\nconst alertButton = css(button, {\n borderColor: 'red',\n});\n\nconst dynamicButton = (disabled = false) =>\n css(\n button,\n disabled && {\n opacity: 0.5,\n }\n );\n```\n\n## Configure an instance\n\n```ts\nimport { createCss } from '@stitches/core';\n\nexport const css = createCss({\n // Optinally add a prefix to all classnames to avoid crashes\n prefix: 'my-lib',\n // Maps tokens to properties. Follows the system-ui theme specification: https://system-ui.com/theme\n tokens: {\n colors: {\n RED: 'tomato',\n },\n space: {\n 0: '1rem',\n },\n fontSizes: {},\n fonts: {},\n fontWeights: {},\n lineHeights: {},\n letterSpacings: {},\n sizes: {},\n borderWidths: {},\n borderStyles: {},\n radii: {},\n shadows: {},\n zIndices: {},\n transitions: {},\n },\n // Create screens with media queries. Note that the media queriy with the\n // highest specificity should go last\n breakpoints: {\n tablet: (rule) => `@media (min-width: 700px) { ${rule} }`,\n },\n // Create your own custom CSS properties. Here the functional syntax\n // shines to handle pseudo selectors\n utils: {\n marginX: (config) => (value: number | string) => ({\n marginLeft: value,\n marginRight: value,\n }),\n },\n});\n\ncss({\n color: 'RED', // Creates \"tomato\"\n tablet: {\n color: 'blue', // Color is \"blue\" when media query is active\n },\n marginX: 0, // Creates \"1rem\", as it composes margin, using \"space\" from tokens\n border: '1px solid RED', // creates a \"tomato\" border\n border: ['1px', 'solid', 'RED'], // You can also use array syntax to get typing\n boxShadow: ['1px', '1px', '1px', 'RED'], // You can also use array syntax with shadow\n});\n```\n\n## Utility first\n\nStitches also allows you to put your utils at the front. That means you can create your very own CSS abstraction, where the underlying CSS properties are secondary.\n\n```ts\nimport { createCss } from '@stitches/core';\n\nexport const css = createCss({\n utilityFirst: true,\n utils: {\n text: (config) => (value: { color?: string; size?: number }) => ({\n ...(color ? { color } : {}),\n ...(size ? { fontSize: size + 'rem' } : {}),\n }),\n },\n});\n\ncss({\n text: {\n color: 'red',\n size: 2,\n },\n ':hover': {\n text: {\n color: 'blue',\n },\n },\n // Override is a property that allows you to override\n // with specific low level CSS properties\n override: {\n padding: '2rem',\n },\n});\n```\n\n## Themes\n\nYou can create theme instances which overrides tokens:\n\n```ts\nimport { createCss } from '@stitches/core';\n\nexport const css = createCss({\n tokens: {\n colors: {\n primary: 'tomato',\n },\n },\n});\n\nexport const funnyTheme = css.theme({\n colors: {\n primary: 'pink',\n },\n});\n```\n\nThis theme represents a classname which can be added at any point in your DOM tree. You can add multiple themes, which overrides each other by the nested level you apply them.\n\n## Server side rendering\n\nThe `createCss` factory automatically detects if you are in a browser or server environment. That means when you this factory on the server it will **hash** the classnames (for rehydration abilities) and allow you to collect the styling to include in the responded html:\n\n```ts\nimport { createCss } from '@stitches/core';\n\nconst css = createCss({});\nconst { result, styles } = css.getStyles(() => renderSomething(css));\n```\n\nNote that server produced CSS does not contain vendor prefixes, as there is no browser environment to look at. If you have a server rendered application you can either manually add the vendor prefixes you need:\n\n```ts\ncss({\n WebkitFontSmoothing: 'antialiased',\n MozOsxFontSmoothing: 'grayscale',\n});\n```\n\nOr you can use a [postcss](https://www.npmjs.com/package/postcss) to do the conversion:\n\n```ts\nimport { createCss } from '@stitches/core';\nimport postcss from 'postcss';\nimport autoprefixer from 'autoprefixer';\n\nconst css = createCss({});\nconst { result, styles } = css.getStyles(() => renderSomething(css));\n\nPromise.all(\n styles.map((style) => postcss([autoprefixer({ browsers: ['> 1%', 'last 2 versions'] })]).process(style))\n).then((styles) => {\n // styles with vendor prefixes\n});\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/modulz/stitches/issues"},"homepage":"https://github.com/modulz/stitches#readme","_id":"@stitches/core@0.0.2-canary.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.22.1/node@v10.20.1+x64 (darwin)","_npmUser":{"name":"peduarte","email":"contact@peduarte.com"},"dist":{"integrity":"sha512-v8MNt44oiwWFCaBLUSbhSpGgHEQ8jVlFSW4O+QMmdX/I2JcNu9raGSS4r9oI8QCIMZSwJ4H0LAkSxAOyVKYh6w==","shasum":"184c40041e20b7037ebc2a2a3864e3f45b3c5b1f","tarball":"https://registry.npmjs.org/@stitches/core/-/core-0.0.2-canary.0.tgz","fileCount":16,"unpackedSize":554875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUp53CRA9TVsSAnZWagAAryMP/1rbfsKdODoa70ACgC/8\nrUnvTcp9nNuRIZVSsNZ2FfXcNpAm3dFGTXWU8jKuk5ZBoXs6FDx2nUPpZgEs\nrbOOZQhbeuORSk9EoDBDQdqjRL/fdce2aZpe7yvE97nA8166n/B8F58rx16y\nT5RpxbHAP1rGoYyQ6WydbcOdupELXO7lLyjVE0d8XnENYE7Q3BBLsYXrL6mI\nvJWqTosy1HeSvHmxFFKLrW1auevNUENzRDWPIqRJEWVDBylmaSHEhwUhOz6A\nIJ6XDQRktKh7FOAtocz72C2GstEWR3W+11/s4u9IBvvn1cYMxpPIWgL0GXk5\nBCW0BSC5/ZQ7HJXcaB1RqMy01kO18tUZ+OXBcPLbWKMK4Mq4WKzCETxqhHh/\nX3BhMw0tWnvC4cCFTC8vJLCLXo8sc0bf+xkULNGiUcVB66IC716RBgolGqa0\n5StJybf4DJWrMTFjHP8aGwVCpPInIFKDxkwfhyGPlQ0Q0q3NVbeR1/Q2RKwa\nRNy98nVYKZXneC0rEeuN8ro17w3D1Ts06CVqizJj24TrSIhiyj6ythPdaAgh\nXeT3QJap0Urta8yQPaj51yqhE6geVmKBDBcXxdAhqRRArWdtF2tnCGoQaZiw\nZ1N0VWnIvQAmxlQZUtHm99E917NNgalZgn6SiNiJbiOK6Lf8tyhAXCuomEis\ncAev\r\n=kY9b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCw7oLmNS1S5Q6PyclLuAAaA4ilXDPyI0ENGkCQUU9/6QIhAKqdg8eIlw5hgsGrATqC/XraNXodlwpKaNh0UJtU4jbz"}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"},{"name":"peduarte","email":"contact@peduarte.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/core_0.0.2-canary.0_1599250039240_0.16484923826351494"},"_hasShrinkwrap":false},"0.0.3-canary.0":{"name":"@stitches/core","version":"0.0.3-canary.0","description":"The modern CSS-in-JS library","main":"dist/core.cjs.js","module":"dist/core.esm.js","contributors":[{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},{"name":"Pedro Duarte","email":"pedro@modulz.app"},{"name":"Abdulhadi Alhallak","email":"abdulhadi@modulz.app"}],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/modulz/stitches.git"},"publishConfig":{"access":"public"},"preconstruct":{"source":"src/index.ts"},"lint-staged":{"./**/*.{js,jsx,ts,tsx}":["tslint --fix","prettier --write","git add"],"./**/*.{css,md,json}":["prettier --write","git add"]},"scripts":{"clean":"rimraf dist es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"node ../../node_modules/jest/bin/jest.js --env=jsdom --watch --updateSnapshot","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","css-in-js","css","library"],"dependencies":{"@types/node":"^13.11.1","tslib":"^1.11.1"},"gitHead":"483ad0781514a92f7323df56bfd4948ad781686c","readme":"## Why\n\n- **Atomic mindset**: Each CSS property is an atomic part of your complete CSS\n- **Reusability**: Each CSS property, given the same screen, pseudo and value is considered the same, giving high degree of reusability\n- **Optimal injection**: You can compose your styles outside of your UI, but no injection happens until it is actually used\n- **Tokenized**: Configure with tokens to give design restrictions\n- **Screens**: Define a set of media queries as screens to easily express CSS active within a screen\n- **Utils**: Create your own CSS properties\n- **Typed**: Fully typed API, even though you are not using Typescript\n- **Specificity solved**: No more specificity issues, as an atomic mindset opens up a more efficient and straight forward way to solve it\n- **Token based theming**: Tokens are CSS variables. Create themes overriding the tokens and expose themes to any parts of your app\n\n[A simple benchmark VS styled-components](https://codesandbox.io/s/benchmark-stitches-vs-styled-components-xi7qh?file=/src/App.js)\n\n## Get started\n\n`npm install @stitches/core`\n\n```ts\nimport { css } from '@stitches/core';\n\nconst button = css({\n color: 'gray',\n '&:hover': {\n color: 'black',\n },\n borderColor: 'black',\n padding: '1rem',\n});\n\nconst alertButton = css(button, {\n borderColor: 'red',\n});\n\nconst dynamicButton = (disabled = false) =>\n css(\n button,\n disabled && {\n opacity: 0.5,\n }\n );\n```\n\n## Configure an instance\n\n```ts\nimport { createCss } from '@stitches/core';\n\nexport const css = createCss({\n // Optinally add a prefix to all classnames to avoid crashes\n prefix: 'my-lib',\n // Maps tokens to properties. Follows the system-ui theme specification: https://system-ui.com/theme\n tokens: {\n colors: {\n RED: 'tomato',\n },\n space: {\n 0: '1rem',\n },\n fontSizes: {},\n fonts: {},\n fontWeights: {},\n lineHeights: {},\n letterSpacings: {},\n sizes: {},\n borderWidths: {},\n borderStyles: {},\n radii: {},\n shadows: {},\n zIndices: {},\n transitions: {},\n },\n // Create screens with media queries. Note that the media queriy with the\n // highest specificity should go last\n breakpoints: {\n tablet: (rule) => `@media (min-width: 700px) { ${rule} }`,\n },\n // Create your own custom CSS properties. Here the functional syntax\n // shines to handle pseudo selectors\n utils: {\n marginX: (config) => (value: number | string) => ({\n marginLeft: value,\n marginRight: value,\n }),\n },\n});\n\ncss({\n color: 'RED', // Creates \"tomato\"\n tablet: {\n color: 'blue', // Color is \"blue\" when media query is active\n },\n marginX: 0, // Creates \"1rem\", as it composes margin, using \"space\" from tokens\n border: '1px solid RED', // creates a \"tomato\" border\n border: ['1px', 'solid', 'RED'], // You can also use array syntax to get typing\n boxShadow: ['1px', '1px', '1px', 'RED'], // You can also use array syntax with shadow\n});\n```\n\n## Utility first\n\nStitches also allows you to put your utils at the front. That means you can create your very own CSS abstraction, where the underlying CSS properties are secondary.\n\n```ts\nimport { createCss } from '@stitches/core';\n\nexport const css = createCss({\n utilityFirst: true,\n utils: {\n text: (config) => (value: { color?: string; size?: number }) => ({\n ...(color ? { color } : {}),\n ...(size ? { fontSize: size + 'rem' } : {}),\n }),\n },\n});\n\ncss({\n text: {\n color: 'red',\n size: 2,\n },\n ':hover': {\n text: {\n color: 'blue',\n },\n },\n // Override is a property that allows you to override\n // with specific low level CSS properties\n override: {\n padding: '2rem',\n },\n});\n```\n\n## Themes\n\nYou can create theme instances which overrides tokens:\n\n```ts\nimport { createCss } from '@stitches/core';\n\nexport const css = createCss({\n tokens: {\n colors: {\n primary: 'tomato',\n },\n },\n});\n\nexport const funnyTheme = css.theme({\n colors: {\n primary: 'pink',\n },\n});\n```\n\nThis theme represents a classname which can be added at any point in your DOM tree. You can add multiple themes, which overrides each other by the nested level you apply them.\n\n## Server side rendering\n\nThe `createCss` factory automatically detects if you are in a browser or server environment. That means when you this factory on the server it will **hash** the classnames (for rehydration abilities) and allow you to collect the styling to include in the responded html:\n\n```ts\nimport { createCss } from '@stitches/core';\n\nconst css = createCss({});\nconst { result, styles } = css.getStyles(() => renderSomething(css));\n```\n\nNote that server produced CSS does not contain vendor prefixes, as there is no browser environment to look at. If you have a server rendered application you can either manually add the vendor prefixes you need:\n\n```ts\ncss({\n WebkitFontSmoothing: 'antialiased',\n MozOsxFontSmoothing: 'grayscale',\n});\n```\n\nOr you can use a [postcss](https://www.npmjs.com/package/postcss) to do the conversion:\n\n```ts\nimport { createCss } from '@stitches/core';\nimport postcss from 'postcss';\nimport autoprefixer from 'autoprefixer';\n\nconst css = createCss({});\nconst { result, styles } = css.getStyles(() => renderSomething(css));\n\nPromise.all(\n styles.map((style) => postcss([autoprefixer({ browsers: ['> 1%', 'last 2 versions'] })]).process(style))\n).then((styles) => {\n // styles with vendor prefixes\n});\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/modulz/stitches/issues"},"homepage":"https://github.com/modulz/stitches#readme","_id":"@stitches/core@0.0.3-canary.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.22.1/node@v10.20.1+x64 (darwin)","_npmUser":{"name":"peduarte","email":"contact@peduarte.com"},"dist":{"integrity":"sha512-PoD3noqrHLEGyQlP97AUOUn4x0qZiV8Nm7myGhllDfivaxzGRrhrA9QSXT4pnCcjRku7IxsTSqAZWtUAsHyZ7Q==","shasum":"13f0ea127e88856f189556f9bcd932c595f43402","tarball":"https://registry.npmjs.org/@stitches/core/-/core-0.0.3-canary.0.tgz","fileCount":16,"unpackedSize":552625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfViOmCRA9TVsSAnZWagAAxDcP/i4IRWVyLcnHUAxQs+6x\nB1nzUetU9iAzTHgXK2tvkKx6+ez/cD2HMw01jqJdJrt89ulNLw6mkslTpIIW\nZLqr0teJXaNay97NaXli7IsnMoomU+vqFptvWUNJ/I6r5Gcqt/sTtaS6ynw3\n4nvQTDwbpdF4sRV5i9hrGqIZDnQ+wTcMxek/wppqpVEmFWevhfTqgSYpft9n\njksbIN+LYGnteU6jtMpdBCCUagBg7hADfoE62qyAHixbgSU5bgoARTnuiM2m\nOIO/ItCp1cH/zQwq03FqUGU/afkXvapNoX9UeRiM/MaqHpBrCysKHaFQlA6d\nhJIJy9OSc1hKPfL7yJOstwZwudh4ppIAYfl+jBcX8xb1rBO+/81lTUSX4i/R\nv8bviGO7Ok8Dpb1HOCIWyptaFLXUG0jPsBao0svLUgvpqhtEXRhpj3eSqvLX\n5LnYikP2jrl48WjT32pvaX3Yp1k/Sd1on9rix8TYzdEyWJPE045xh9UTT7Qo\nXVlmn6qyPuwUO+tlkJ4JiObDbdXF+qBvr113HBsMVQ4JUCbl3RWWUCoP3fnU\n25d0lUQcsm8RmqhGqCXoHixreDkAiQX9Hn5qbGIx+RaSBM6tYu2LiMrnkrRd\nLJQZZjwUaCEFwkY11xXEuAccza1uKKKtV95OTCJMwe0GODzL7JFer8pGYJzv\nYmgT\r\n=cA0H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCu4y/whU3LqPLkA0N4ZH2pIESf4NV32fXP3HUeyQLTFgIgRCE8TQ/4ZQ8WDsbCGrvMtP4MJQwC+rTI7T2KeqYxFCk="}]},"maintainers":[{"name":"christianalfoni","email":"christianalfoni@gmail.com"},{"name":"peduarte","email":"contact@peduarte.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/core_0.0.3-canary.0_1599480741777_0.06347936037009116"},"_hasShrinkwrap":false},"0.0.2":{"name":"@stitches/core","version":"0.0.2","description":"The modern CSS-in-JS library","main":"dist/core.cjs.js","module":"dist/core.esm.js","contributors":[{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},{"name":"Pedro Duarte","email":"pedro@modulz.app"},{"name":"Abdulhadi Alhallak","email":"abdulhadi@modulz.app"}],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/modulz/stitches.git"},"publishConfig":{"access":"public"},"preconstruct":{"source":"src/index.ts"},"lint-staged":{"./**/*.{js,jsx,ts,tsx}":["tslint --fix","prettier --write","git add"],"./**/*.{css,md,json}":["prettier --write","git add"]},"scripts":{"clean":"rimraf dist es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"node ../../node_modules/jest/bin/jest.js --env=jsdom --watch --updateSnapshot","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","css-in-js","css","library"],"dependencies":{"@types/node":"^13.11.1","tslib":"^1.11.1"},"gitHead":"6f8c785326b9b786b1715bff9efd0e5a09cb6d89","bugs":{"url":"https://github.com/modulz/stitches/issues"},"homepage":"https://github.com/modulz/stitches#readme","_id":"@stitches/core@0.0.2","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.22.1/node@v10.20.1+x64 (darwin)","_npmUser":{"name":"peduarte","email":"contact@peduarte.com"},"dist":{"integrity":"sha512-fvwZcUbb/cqV52+g+nGbwo8NbLt+Zpz7TSik+EwjtJd5Y3cpPOK0UZ+3hvMLlvqIPIzzcQULgrVuU08XkTdPfw==","shasum":"027b965cd3745ee113094279766d6e7ad777bb3e","tarball":"https://registry.npmjs.org/@stitches/core/-/core-0.0.2.tgz","fileCount":16,"unpackedSize":552530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfVj0uCRA9TVsSAnZWagAAhYcP/jy5ReNOy0yWM20JxDdX\nBETbAOFTR2GYTJNuRUjhf6pDDBDHEc0WWj/K6fVPehOAOLvj41NNQwlfz2fu\n10IIEs8uRWvJAhE6L9WOMuiYuUna9r8HYLdpgHhyS4QizsNuCmkBXHVMnJOV\njS/3Luruj8rIOTK7EmOBVno0FdiQJTWoLmFFuvAZctHWJhJfiC813lkPAa19\n5kBvsA+U1i5wECQ3I+K3Af+BNp9Lq+Ci1USA5mZjI2G25aPiUQcDCvCuD32o\n6LpIJXiAwq7+oTwJIGh7BSBEHqzv99FJAK9WhFo2sExHxFonmRT3FKOaFEtU\nZgMdK5UOnhmVG0qOEam+62y3dML8PP9saXkKXUlSsL6SOrwoMrH9gZEwVaZs\nM0GNKamAaPY0brdsLSKiU62G1lP2E8Bk/y1N4cK5u/rles71z2auBrOTqvwZ\nPYd6pbDR3wRQmz8UfS61iW2irLuKeocyvMgcmapHBMpRqamr0v1Kt3XcaK0P\nvNT5zZ8da07zEte2zOklptSx74cgqLy8ITo6pBgKtrgrRZrekQgivwvPWLNL\nNf27qugEIadXNRwSaFpaU8u73E4GMF5vZ6GB3OX0q6a+lwyF3QJDgs0D4qx8\nmPmawnDM/ZU7lUtcrHWGa2x4cFa4Reymok2vAnRux+I5qSsIFJKvlDJQjgrB\naNMT\r\n=Jm97\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/5QdbLMuUaA4IbgqlzzfvERFNCaDS7mPf3VGEhuxniAiEA6m0MNvFCAEFsvwkp88TB1v1s6qlvPEBnV3/Ei2kMldM="}]},"maintainers":[{"name":"peduarte","email":"contact@peduarte.com"},{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/core_0.0.2_1599487278333_0.32107518783671507"},"_hasShrinkwrap":false},"0.0.3-canary.1":{"name":"@stitches/core","version":"0.0.3-canary.1","description":"The modern CSS-in-JS library","main":"dist/core.cjs.js","module":"dist/core.esm.js","contributors":[{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},{"name":"Pedro Duarte","email":"pedro@modulz.app"},{"name":"Abdulhadi Alhallak","email":"abdulhadi@modulz.app"}],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/modulz/stitches.git"},"publishConfig":{"access":"public"},"preconstruct":{"source":"src/index.ts"},"lint-staged":{"./**/*.{js,jsx,ts,tsx}":["tslint --fix","prettier --write","git add"],"./**/*.{css,md,json}":["prettier --write","git add"]},"scripts":{"clean":"rimraf dist es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest --env=jsdom --coverage","test:watch":"node ../../node_modules/jest/bin/jest.js --env=jsdom --watch --updateSnapshot","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","css-in-js","css","library"],"dependencies":{"@types/node":"^13.11.1","tslib":"^1.11.1"},"gitHead":"60ef24464cb5d1eef7f4be01add51c5d9d43ed70","readme":"## Why\n\n- **Atomic mindset**: Each CSS property is an atomic part of your complete CSS\n- **Reusability**: Each CSS property, given the same screen, pseudo and value is considered the same, giving high degree of reusability\n- **Optimal injection**: You can compose your styles outside of your UI, but no injection happens until it is actually used\n- **Tokenized**: Configure with tokens to give design restrictions\n- **Screens**: Define a set of media queries as screens to easily express CSS active within a screen\n- **Utils**: Create your own CSS properties\n- **Typed**: Fully typed API, even though you are not using Typescript\n- **Specificity solved**: No more specificity issues, as an atomic mindset opens up a more efficient and straight forward way to solve it\n- **Token based theming**: Tokens are CSS variables. Create themes overriding the tokens and expose themes to any parts of your app\n\n[A simple benchmark VS styled-components](https://codesandbox.io/s/benchmark-stitches-vs-styled-components-xi7qh?file=/src/App.js)\n\n## Get started\n\n`npm install @stitches/core`\n\n```ts\nimport { css } from '@stitches/core';\n\nconst button = css({\n color: 'gray',\n '&:hover': {\n color: 'black',\n },\n borderColor: 'black',\n padding: '1rem',\n});\n\nconst alertButton = css(button, {\n borderColor: 'red',\n});\n\nconst dynamicButton = (disabled = false) =>\n css(\n button,\n disabled && {\n opacity: 0.5,\n }\n );\n```\n\n## Configure an instance\n\n```ts\nimport { createCss } from '@stitches/core';\n\nexport const css = createCss({\n // Optinally add a prefix to all classnames to avoid crashes\n prefix: 'my-lib',\n // Maps tokens to properties. Follows the system-ui theme specification: https://system-ui.com/theme\n tokens: {\n colors: {\n RED: 'tomato',\n },\n space: {\n 0: '1rem',\n },\n fontSizes: {},\n fonts: {},\n fontWeights: {},\n lineHeights: {},\n letterSpacings: {},\n sizes: {},\n borderWidths: {},\n borderStyles: {},\n radii: {},\n shadows: {},\n zIndices: {},\n transitions: {},\n },\n // Create screens with media queries. Note that the media queriy with the\n // highest specificity should go last\n breakpoints: {\n tablet: (rule) => `@media (min-width: 700px) { ${rule} }`,\n },\n // Create your own custom CSS properties. Here the functional syntax\n // shines to handle pseudo selectors\n utils: {\n marginX: (config) => (value: number | string) => ({\n marginLeft: value,\n marginRight: value,\n }),\n },\n});\n\ncss({\n color: 'RED', // Creates \"tomato\"\n tablet: {\n color: 'blue', // Color is \"blue\" when media query is active\n },\n marginX: 0, // Creates \"1rem\", as it composes margin, using \"space\" from tokens\n border: '1px solid RED', // creates a \"tomato\" border\n border: ['1px', 'solid', 'RED'], // You can also use array syntax to get typing\n boxShadow: ['1px', '1px', '1px', 'RED'], // You can also use array syntax with shadow\n});\n```\n\n## Utility first\n\nStitches also allows you to put your utils at the front. That means you can create your very own CSS abstraction, where the underlying CSS properties are secondary.\n\n```ts\nimport { createCss } from '@stitches/core';\n\nexport const css = createCss({\n utilityFirst: true,\n utils: {\n text: (config) => (value: { color?: string; size?: number }) => ({\n ...(color ? { color } : {}),\n ...(size ? { fontSize: size + 'rem' } : {}),\n }),\n },\n});\n\ncss({\n text: {\n color: 'red',\n size: 2,\n },\n ':hover': {\n text: {\n color: 'blue',\n },\n },\n // Override is a property that allows you to override\n // with specific low level CSS properties\n override: {\n padding: '2rem',\n },\n});\n```\n\n## Themes\n\nYou can create theme instances which overrides tokens:\n\n```ts\nimport { createCss } from '@stitches/core';\n\nexport const css = createCss({\n tokens: {\n colors: {\n primary: 'tomato',\n },\n },\n});\n\nexport const funnyTheme = css.theme({\n colors: {\n primary: 'pink',\n },\n});\n```\n\nThis theme represents a classname which can be added at any point in your DOM tree. You can add multiple themes, which overrides each other by the nested level you apply them.\n\n## Server side rendering\n\nThe `createCss` factory automatically detects if you are in a browser or server environment. That means when you this factory on the server it will **hash** the classnames (for rehydration abilities) and allow you to collect the styling to include in the responded html:\n\n```ts\nimport { createCss } from '@stitches/core';\n\nconst css = createCss({});\nconst { result, styles } = css.getStyles(() => renderSomething(css));\n```\n\nNote that server produced CSS does not contain vendor prefixes, as there is no browser environment to look at. If you have a server rendered application you can either manually add the vendor prefixes you need:\n\n```ts\ncss({\n WebkitFontSmoothing: 'antialiased',\n MozOsxFontSmoothing: 'grayscale',\n});\n```\n\nOr you can use a [postcss](https://www.npmjs.com/package/postcss) to do the conversion:\n\n```ts\nimport { createCss } from '@stitches/core';\nimport postcss from 'postcss';\nimport autoprefixer from 'autoprefixer';\n\nconst css = createCss({});\nconst { result, styles } = css.getStyles(() => renderSomething(css));\n\nPromise.all(\n styles.map((style) => postcss([autoprefixer({ browsers: ['> 1%', 'last 2 versions'] })]).process(style))\n).then((styles) => {\n // styles with vendor prefixes\n});\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/modulz/stitches/issues"},"homepage":"https://github.com/modulz/stitches#readme","_id":"@stitches/core@0.0.3-canary.1","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.22.1/node@v10.20.1+x64 (darwin)","_npmUser":{"name":"peduarte","email":"contact@peduarte.com"},"dist":{"integrity":"sha512-HhTTkax8Yz6LMDXwVaPk9ZhEA167bUWHABPbIQFpmIIzuYtQ4W8Ju4i/0yR+/kOl2bqaV/zrx11nXEBPDQPj1g==","shasum":"cae76be9388889090df83cab7e7ba90d2233d1ab","tarball":"https://registry.npmjs.org/@stitches/core/-/core-0.0.3-canary.1.tgz","fileCount":16,"unpackedSize":561031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYzr1CRA9TVsSAnZWagAAis0P/0sXXcW91iirJYoqM9rF\nlzkJMHyxporlDAWokca5qmt25ZQp79pwu47CgWYuwdo0YEG5QBRhpyMjoIDC\nfEo9vcgLHVktt2xnEy1PlXW3i5bLsdqJK2E37v0unUFYGVTn4YN/GJBR1Bww\nXjIpmqLLKlJG75V1Iz6nsPjyo3m/xGlMJjs7kPO1bvxOIr5joQYO9HzEFQf7\nrznq8YUBg8U1qkwcK5cNZbIgz1/w2JDC2ImyB2tN/ilpCH1lWK6WfVOHzXS5\n+d1XY3voXblQ/FBejSoFnNVVmeY4GNOszjFMKKOt7LXUinycvrDmx5FYOGGv\ncy4nrWA5MiTFsw9AB/8+eC6jXDSShl/+kJG3cv/+fgVuNHStFDNx3TpJMn06\nHLUBlfnFQzyGFAs7j7CsQeBlagM9EOj4VSmpxPtpA+we4L4Ajbk4tDS6dmXh\nLA7fizPXdE1+5zPbC/ms15OPxvxrsut6rVTIZ12i511fUOphXt0EVdmbl/e/\n9hPB0yN4IKeY6xmJq3b5aWUOC1RrY1T0kZ/3QIFUclamd89o85F1dh5xykIN\namZujBqLFmh/BORZ+s+VZ15ziIrDLT1OOrS7VAqI40jOmfGjtTCHlgfBKMe2\nvGL+JmppQUIzbyDVnWOkrit4aPpGYmZbFi0QgMqze7HDur5JRzgKja9pL24N\nEGsz\r\n=/59y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEBTGTdBNXPMO5Uf/hJFtZ7LHsRWbGbkiFCKrtsE2pJIAiEAixgTFTjVyE2f+LtYbW9gy1pdMRC+oasw0p75ra/HIOQ="}]},"maintainers":[{"name":"peduarte","email":"contact@peduarte.com"},{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/core_0.0.3-canary.1_1600338677544_0.43699635005050297"},"_hasShrinkwrap":false},"0.0.3-canary.2":{"name":"@stitches/core","version":"0.0.3-canary.2","description":"The modern CSS-in-JS library","main":"dist/core.cjs.js","module":"dist/core.esm.js","contributors":[{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},{"name":"Pedro Duarte","email":"pedro@modulz.app"},{"name":"Abdulhadi Alhallak","email":"abdulhadi@modulz.app"}],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/modulz/stitches.git"},"publishConfig":{"access":"public"},"preconstruct":{"source":"src/index.ts"},"lint-staged":{"./**/*.{js,jsx,ts,tsx}":["tslint --fix","prettier --write","git add"],"./**/*.{css,md,json}":["prettier --write","git add"]},"scripts":{"clean":"rimraf dist es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest","test:watch":"jest --watch --updateSnapshot","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","css-in-js","css","library"],"devDependencies":{"@types/node":"^13.11.1","tslib":"^1.11.1"},"gitHead":"ee0a38532fc8c5904fc59be9530cf37e17829bf8","readme":"## Why\n\n- **Atomic mindset**: Each CSS property is an atomic part of your complete CSS\n- **Reusability**: Each CSS property, given the same screen, pseudo and value is considered the same, giving high degree of reusability\n- **Optimal injection**: You can compose your styles outside of your UI, but no injection happens until it is actually used\n- **Tokenized**: Configure with tokens to give design restrictions\n- **Screens**: Define a set of media queries as screens to easily express CSS active within a screen\n- **Utils**: Create your own CSS properties\n- **Typed**: Fully typed API, even though you are not using Typescript\n- **Specificity solved**: No more specificity issues, as an atomic mindset opens up a more efficient and straight forward way to solve it\n- **Token based theming**: Tokens are CSS variables. Create themes overriding the tokens and expose themes to any parts of your app\n\n[A simple benchmark VS styled-components](https://codesandbox.io/s/benchmark-stitches-vs-styled-components-xi7qh?file=/src/App.js)\n\n## Get started\n\n`npm install @stitches/core`\n\n```ts\nimport { css } from '@stitches/core';\n\nconst button = css({\n color: 'gray',\n '&:hover': {\n color: 'black',\n },\n borderColor: 'black',\n padding: '1rem',\n});\n\nconst alertButton = css(button, {\n borderColor: 'red',\n});\n\nconst dynamicButton = (disabled = false) =>\n css(\n button,\n disabled && {\n opacity: 0.5,\n }\n );\n```\n\n## Configure an instance\n\n```ts\nimport { createCss } from '@stitches/core';\n\nexport const css = createCss({\n // Optinally add a prefix to all classnames to avoid crashes\n prefix: 'my-lib',\n // Maps tokens to properties. Follows the system-ui theme specification: https://system-ui.com/theme\n tokens: {\n colors: {\n RED: 'tomato',\n },\n space: {\n 0: '1rem',\n },\n fontSizes: {},\n fonts: {},\n fontWeights: {},\n lineHeights: {},\n letterSpacings: {},\n sizes: {},\n borderWidths: {},\n borderStyles: {},\n radii: {},\n shadows: {},\n zIndices: {},\n transitions: {},\n },\n // Create screens with media queries. Note that the media queriy with the\n // highest specificity should go last\n breakpoints: {\n tablet: (rule) => `@media (min-width: 700px) { ${rule} }`,\n },\n // Create your own custom CSS properties. Here the functional syntax\n // shines to handle pseudo selectors\n utils: {\n marginX: (config) => (value: number | string) => ({\n marginLeft: value,\n marginRight: value,\n }),\n },\n});\n\ncss({\n color: 'RED', // Creates \"tomato\"\n tablet: {\n color: 'blue', // Color is \"blue\" when media query is active\n },\n marginX: 0, // Creates \"1rem\", as it composes margin, using \"space\" from tokens\n border: '1px solid RED', // creates a \"tomato\" border\n border: ['1px', 'solid', 'RED'], // You can also use array syntax to get typing\n boxShadow: ['1px', '1px', '1px', 'RED'], // You can also use array syntax with shadow\n});\n```\n\n## Utility first\n\nStitches also allows you to put your utils at the front. That means you can create your very own CSS abstraction, where the underlying CSS properties are secondary.\n\n```ts\nimport { createCss } from '@stitches/core';\n\nexport const css = createCss({\n utilityFirst: true,\n utils: {\n text: (config) => (value: { color?: string; size?: number }) => ({\n ...(color ? { color } : {}),\n ...(size ? { fontSize: size + 'rem' } : {}),\n }),\n },\n});\n\ncss({\n text: {\n color: 'red',\n size: 2,\n },\n ':hover': {\n text: {\n color: 'blue',\n },\n },\n // Override is a property that allows you to override\n // with specific low level CSS properties\n override: {\n padding: '2rem',\n },\n});\n```\n\n## Themes\n\nYou can create theme instances which overrides tokens:\n\n```ts\nimport { createCss } from '@stitches/core';\n\nexport const css = createCss({\n tokens: {\n colors: {\n primary: 'tomato',\n },\n },\n});\n\nexport const funnyTheme = css.theme({\n colors: {\n primary: 'pink',\n },\n});\n```\n\nThis theme represents a classname which can be added at any point in your DOM tree. You can add multiple themes, which overrides each other by the nested level you apply them.\n\n## Server side rendering\n\nThe `createCss` factory automatically detects if you are in a browser or server environment. That means when you this factory on the server it will **hash** the classnames (for rehydration abilities) and allow you to collect the styling to include in the responded html:\n\n```ts\nimport { createCss } from '@stitches/core';\n\nconst css = createCss({});\nconst { result, styles } = css.getStyles(() => renderSomething(css));\n```\n\nNote that server produced CSS does not contain vendor prefixes, as there is no browser environment to look at. If you have a server rendered application you can either manually add the vendor prefixes you need:\n\n```ts\ncss({\n WebkitFontSmoothing: 'antialiased',\n MozOsxFontSmoothing: 'grayscale',\n});\n```\n\nOr you can use a [postcss](https://www.npmjs.com/package/postcss) to do the conversion:\n\n```ts\nimport { createCss } from '@stitches/core';\nimport postcss from 'postcss';\nimport autoprefixer from 'autoprefixer';\n\nconst css = createCss({});\nconst { result, styles } = css.getStyles(() => renderSomething(css));\n\nPromise.all(\n styles.map((style) => postcss([autoprefixer({ browsers: ['> 1%', 'last 2 versions'] })]).process(style))\n).then((styles) => {\n // styles with vendor prefixes\n});\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/modulz/stitches/issues"},"homepage":"https://github.com/modulz/stitches#readme","_id":"@stitches/core@0.0.3-canary.2","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.22.1/node@v10.20.1+x64 (darwin)","_npmUser":{"name":"peduarte","email":"contact@peduarte.com"},"dist":{"integrity":"sha512-/XoN4uXxRoIlWoHkr8nRujxjRAIG3zHKGPZtk40Ll+ug5qRIOSHCqDh+DGJfNpApy2W3/MRNG1ILvjKt2hCdug==","shasum":"01949caa1d68766584caae0332577168d9e1bd79","tarball":"https://registry.npmjs.org/@stitches/core/-/core-0.0.3-canary.2.tgz","fileCount":16,"unpackedSize":564473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfde3/CRA9TVsSAnZWagAA7vAP/30JTgLPbeOE1ssP/7TV\nGa4vfA86b5gksmnQuj/44LV7SGXBigNOCKZ59pfR/1Gv96/iID1ak9n9643y\nIBxwYXmXkO3vm4q4eMRCm/yFUKj1OMARqTBT0f8saR1TiE0lgHm0zYIfN3Pb\nxQoA5cI19hPHTRAsDWwa2dSjU65grudPBZ8uH3qX+O9GvJf+0zfVztOGExG9\nbOgDxLSEThMhcZXgKntMhrKfn3UuQ6x12sHu88y7X0RvRM1N9he9OJroS8MP\nPq0GC83ux9lbCpFjyxpTCB6rHYr7X+BFbtgzB/3GwhBHBvXHlKiuCM1K7EiS\njSjNBCJiWc6b0MhrWgxScMbmYapcvwplgWL36IRadWwMV88dMohUcqi5iv03\nnMLCOwAwOWOvH33jtnmwX4kPiMW4/z2+vrvSSmwwu5Ak3FSNmKbLDR02fpPm\nlr1tLuHQHVVP/KVdZKPwfI9pW+i14C49EQdK6cAScqYqYqUXrvREvZb/ZdrG\ngFB03GhMVda3lzhcLmYXOpx7SachqGpvmK9yt0DTsNxaLAr1sFTpWt+gGCfU\nMSb8avWeWr8ipCNZjZL84qqPc59BHpGDi/XlmByhQGHv9W9BHH1rXjMdxe3T\nKuu2ogClW1x8D2iLjG2SBSFEgrc7I7/nHhjorbSDiZaWXCqG4rMS/swA/wET\nY4So\r\n=ZhUY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpTIn08DoqHLJvmocoOkhBknbkqYHe+dpm+fePY9Sp+AiAlPP+FsBQyNxtWDXuExp3z5A1smoAvm5dKLwWmMQkqRg=="}]},"maintainers":[{"name":"peduarte","email":"contact@peduarte.com"},{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/core_0.0.3-canary.2_1601564159225_0.6647585489405348"},"_hasShrinkwrap":false},"0.0.3-canary.4":{"name":"@stitches/core","version":"0.0.3-canary.4","description":"The modern CSS-in-JS library","main":"dist/core.cjs.js","module":"dist/core.esm.js","contributors":[{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},{"name":"Pedro Duarte","email":"pedro@modulz.app"},{"name":"Abdulhadi Alhallak","email":"abdulhadi@modulz.app"}],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/modulz/stitches.git"},"publishConfig":{"access":"public"},"preconstruct":{"source":"src/index.ts"},"lint-staged":{"./**/*.{js,jsx,ts,tsx}":["tslint --fix","prettier --write","git add"],"./**/*.{css,md,json}":["prettier --write","git add"]},"scripts":{"clean":"rimraf dist es lib coverage","typecheck":"tsc --noEmit","lint":"tslint --project tsconfig.json --format stylish","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","test":"jest","test:watch":"jest --watch --updateSnapshot","posttest":"npm run typecheck && npm run lint","preversion":"npm test","postversion":"git push && git push --tags"},"keywords":["typescript","css-in-js","css","library"],"devDependencies":{"@types/node":"^13.11.1","tslib":"^1.11.1"},"gitHead":"79dc35cc717de6ef398e667deab887ddb2256973","readme":"## Why\n\n- **Atomic mindset**: Each CSS property is an atomic part of your complete CSS\n- **Reusability**: Each CSS property, given the same screen, pseudo and value is considered the same, giving high degree of reusability\n- **Optimal injection**: You can compose your styles outside of your UI, but no injection happens until it is actually used\n- **Tokenized**: Configure with tokens to give design restrictions\n- **Screens**: Define a set of media queries as screens to easily express CSS active within a screen\n- **Utils**: Create your own CSS properties\n- **Typed**: Fully typed API, even though you are not using Typescript\n- **Specificity solved**: No more specificity issues, as an atomic mindset opens up a more efficient and straight forward way to solve it\n- **Token based theming**: Tokens are CSS variables. Create themes overriding the tokens and expose themes to any parts of your app\n\n[A simple benchmark VS styled-components](https://codesandbox.io/s/benchmark-stitches-vs-styled-components-xi7qh?file=/src/App.js)\n\n## Get started\n\n`npm install @stitches/core`\n\n```ts\nimport { css } from '@stitches/core';\n\nconst button = css({\n color: 'gray',\n '&:hover': {\n color: 'black',\n },\n borderColor: 'black',\n padding: '1rem',\n});\n\nconst alertButton = css(button, {\n borderColor: 'red',\n});\n\nconst dynamicButton = (disabled = false) =>\n css(\n button,\n disabled && {\n opacity: 0.5,\n }\n );\n```\n\n## Configure an instance\n\n```ts\nimport { createCss } from '@stitches/core';\n\nexport const css = createCss({\n // Optinally add a prefix to all classnames to avoid crashes\n prefix: 'my-lib',\n // Maps tokens to properties. Follows the system-ui theme specification: https://system-ui.com/theme\n tokens: {\n colors: {\n RED: 'tomato',\n },\n space: {\n 0: '1rem',\n },\n fontSizes: {},\n fonts: {},\n fontWeights: {},\n lineHeights: {},\n letterSpacings: {},\n sizes: {},\n borderWidths: {},\n borderStyles: {},\n radii: {},\n shadows: {},\n zIndices: {},\n transitions: {},\n },\n // Create screens with media queries. Note that the media queriy with the\n // highest specificity should go last\n breakpoints: {\n tablet: (rule) => `@media (min-width: 700px) { ${rule} }`,\n },\n // Create your own custom CSS properties. Here the functional syntax\n // shines to handle pseudo selectors\n utils: {\n marginX: (config) => (value: number | string) => ({\n marginLeft: value,\n marginRight: value,\n }),\n },\n});\n\ncss({\n color: 'RED', // Creates \"tomato\"\n tablet: {\n color: 'blue', // Color is \"blue\" when media query is active\n },\n marginX: 0, // Creates \"1rem\", as it composes margin, using \"space\" from tokens\n border: '1px solid RED', // creates a \"tomato\" border\n border: ['1px', 'solid', 'RED'], // You can also use array syntax to get typing\n boxShadow: ['1px', '1px', '1px', 'RED'], // You can also use array syntax with shadow\n});\n```\n\n## Utility first\n\nStitches also allows you to put your utils at the front. That means you can create your very own CSS abstraction, where the underlying CSS properties are secondary.\n\n```ts\nimport { createCss } from '@stitches/core';\n\nexport const css = createCss({\n utilityFirst: true,\n utils: {\n text: (config) => (value: { color?: string; size?: number }) => ({\n ...(color ? { color } : {}),\n ...(size ? { fontSize: size + 'rem' } : {}),\n }),\n },\n});\n\ncss({\n text: {\n color: 'red',\n size: 2,\n },\n ':hover': {\n text: {\n color: 'blue',\n },\n },\n // Override is a property that allows you to override\n // with specific low level CSS properties\n override: {\n padding: '2rem',\n },\n});\n```\n\n## Themes\n\nYou can create theme instances which overrides tokens:\n\n```ts\nimport { createCss } from '@stitches/core';\n\nexport const css = createCss({\n tokens: {\n colors: {\n primary: 'tomato',\n },\n },\n});\n\nexport const funnyTheme = css.theme({\n colors: {\n primary: 'pink',\n },\n});\n```\n\nThis theme represents a classname which can be added at any point in your DOM tree. You can add multiple themes, which overrides each other by the nested level you apply them.\n\n## Server side rendering\n\nThe `createCss` factory automatically detects if you are in a browser or server environment. That means when you this factory on the server it will **hash** the classnames (for rehydration abilities) and allow you to collect the styling to include in the responded html:\n\n```ts\nimport { createCss } from '@stitches/core';\n\nconst css = createCss({});\nconst { result, styles } = css.getStyles(() => renderSomething(css));\n```\n\nNote that server produced CSS does not contain vendor prefixes, as there is no browser environment to look at. If you have a server rendered application you can either manually add the vendor prefixes you need:\n\n```ts\ncss({\n WebkitFontSmoothing: 'antialiased',\n MozOsxFontSmoothing: 'grayscale',\n});\n```\n\nOr you can use a [postcss](https://www.npmjs.com/package/postcss) to do the conversion:\n\n```ts\nimport { createCss } from '@stitches/core';\nimport postcss from 'postcss';\nimport autoprefixer from 'autoprefixer';\n\nconst css = createCss({});\nconst { result, styles } = css.getStyles(() => renderSomething(css));\n\nPromise.all(\n styles.map((style) => postcss([autoprefixer({ browsers: ['> 1%', 'last 2 versions'] })]).process(style))\n).then((styles) => {\n // styles with vendor prefixes\n});\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/modulz/stitches/issues"},"homepage":"https://github.com/modulz/stitches#readme","_id":"@stitches/core@0.0.3-canary.4","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.22.1/node@v10.20.1+x64 (darwin)","_npmUser":{"name":"peduarte","email":"contact@peduarte.com"},"dist":{"integrity":"sha512-VlDwtJfhWvxItU8ai5i0UQcNx7MRUIMpy2i6ufUVxcINXkrFZDTBxfahdgKQIT5oS3kT0LbUySctRDEMbt79YA==","shasum":"47f5bcf250f5a010218e76510af4ba52e066de6c","tarball":"https://registry.npmjs.org/@stitches/core/-/core-0.0.3-canary.4.tgz","fileCount":16,"unpackedSize":564688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhwu6CRA9TVsSAnZWagAAxb8P/2SUBRkjzfdIU+zgXFeH\nRFCT0XrLj7onNc/ekgyp7YqeoBURy3Yc5/AeDfWjfaZJoCLEkaPGAd+wLDxr\nwM53eQbuIf3E9Kd6BS9xUE56W8+3HwLQEC+aLDDa1KQuVzu4TD71TlNk0SiS\nq5OJRzX9xdJj6BziW5Eh4/TU19i9hsNlmhJ9bNr8bXZdWUS1fc/8/lCSeZsc\nkqVfUfwL/UcolPSReSC6zkU/x/bMldy6mrjPD6BXNCpdPONloYoxG7AWafw3\nUYwLeALop24xnOIumkgpXOiUu0w1AzrjakoPbOKBPbj+mTYiM0bqL7YBEB2H\n3IY19QVpCd0t7gU/7NK695Pcmx14LG6KolTmg4jcSuF5DqeZRmkhz6WrnWy1\nVCY8GsqRXBA5qN26EELbkp0JhdYbQyNlM4/S+j5N+Frp76z4fQpS3ZCe2gBa\nZ5qxKH5nDNPGmSwosnA83uVJj2Dc9m6+PDIVVNBNWO/PgGczBCQcpQ5AlMuX\ndPEaGM3+EzwCxHu/IxgCCDMLmJkakWToWdEB6UvvOZ4ebcAkodNRuVUX3s/E\n/M6AwGsq5nU99PI/cNbSZbT9b5waJxpd9bMiiwkBogAIfT7bVP0iExUdo4ry\np0E9hxbJsigFnFVqCntrdSOKpSHQidRqybiNaQF3nz10wGAFzxDOZPr2nCB3\nWUye\r\n=pTuX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE6gNe2zPmrgX3qYF6vLJADWVC2z8HHQM7kEJL1AeOemAiAEXjthfQrdHKdqbsID2B7zIs0tsiOpNYf8W5W7BuakRg=="}]},"maintainers":[{"name":"peduarte","email":"contact@peduarte.com"},{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/core_0.0.3-canary.4_1602685882429_0.08951726813707417"},"_hasShrinkwrap":false},"0.1.0-canary.0":{"name":"@stitches/core","version":"0.1.0-canary.0","description":"The modern CSS-in-JS library","type":"module","typings":"types/index.d.ts","main":"dist/stitches.core.cjs.cjs","module":"dist/stitches.core.esm.mjs","unpkg":"dist/stitches.core.iife.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/modulz/stitches.git"},"homepage":"https://github.com/modulz/stitches#readme","bugs":{"url":"https://github.com/modulz/stitches/issues"},"contributors":[{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},{"name":"Pedro Duarte","email":"pedro@modulz.app"},{"name":"Abdulhadi Alhallak","email":"abdulhadi@modulz.app"},{"name":"Jonathan Neal","email":"jonathan@modulz.app"}],"publishConfig":{"access":"public"},"keywords":["component","components","create","css","css-in-js","global","globals","javascript","js","nesting","object","object-oriented","oo","oocss","oriented","scope","scoped","style","styled","styles","stylesheet","stylesheets","theme","themes","theming","token","tokens","type","typed","types","transform","ts","variable","variables"],"gitHead":"d2d04f083ceaa3eaabe690220799f407993b559c","readme":"# Stitches Core\n\nNear-zero runtime, server-side rendering, multi-variant support, and best-in-class developer experience.\n\n## Get started\n\n```sh\nnpm install @stitches/core\n```\n\n```js\nimport createCss from '@stitches/core'\n\nconst sheet = createCss({\n theme: {\n colors: {\n black: '#2f2f2f',\n white: '#f3f3f3',\n },\n },\n})\n\nconst button = sheet.css({\n all: 'unset',\n boxShadow: '0 0 0 1px $black',\n backgroundColor: '$black',\n color: '$white',\n padding: '.5em 1em',\n})\n\nconst alertButton = sheet.css(button, {\n boxShadow: '0 0 0 1px red',\n})\n\nconsole.log(`