{"bugs":{"url":"https://github.com/modulz/stitches/issues"},"dist":{"shasum":"47f5bcf250f5a010218e76510af4ba52e066de6c","tarball":"https://registry.npmjs.org/@stitches/core/-/core-0.0.3-canary.4.tgz","fileCount":16,"integrity":"sha512-VlDwtJfhWvxItU8ai5i0UQcNx7MRUIMpy2i6ufUVxcINXkrFZDTBxfahdgKQIT5oS3kT0LbUySctRDEMbt79YA==","signatures":[{"sig":"MEQCIE6gNe2zPmrgX3qYF6vLJADWVC2z8HHQM7kEJL1AeOemAiAEXjthfQrdHKdqbsID2B7zIs0tsiOpNYf8W5W7BuakRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"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"},"main":"dist/core.cjs.js","name":"@stitches/core","module":"dist/core.esm.js","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","gitHead":"79dc35cc717de6ef398e667deab887ddb2256973","license":"MIT","scripts":{"lint":"tslint --project tsconfig.json --format stylish","test":"jest","clean":"rimraf dist es lib coverage","format":"prettier '**/*.{md,js,jsx,json,ts,tsx}' --write","posttest":"npm run typecheck && npm run lint","typecheck":"tsc --noEmit","preversion":"npm test","test:watch":"jest --watch --updateSnapshot","postversion":"git push && git push --tags"},"_npmUser":{"name":"peduarte","email":"contact@peduarte.com"},"homepage":"https://github.com/modulz/stitches#readme","keywords":["typescript","css-in-js","css","library"],"repository":{"url":"git+https://github.com/modulz/stitches.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v10.20.1+x64 (darwin)","description":"The modern CSS-in-JS library","directories":{},"lint-staged":{"./**/*.{css,md,json}":["prettier --write","git add"],"./**/*.{js,jsx,ts,tsx}":["tslint --fix","prettier --write","git add"]},"maintainers":[{"name":"peduarte","email":"contact@peduarte.com"},{"name":"christianalfoni","email":"christianalfoni@gmail.com"}],"_nodeVersion":"10.20.1","contributors":[{"name":"Christian Alfoni","email":"christianalfoni@gmail.com"},{"name":"Pedro Duarte","email":"pedro@modulz.app"},{"name":"Abdulhadi Alhallak","email":"abdulhadi@modulz.app"}],"preconstruct":{"source":"src/index.ts"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"tslib":"^1.11.1","@types/node":"^13.11.1"},"_npmOperationalInternal":{"tmp":"tmp/core_0.0.3-canary.4_1602685882429_0.08951726813707417","host":"s3://npm-registry-packages"},"_id":"@stitches/core@0.0.3-canary.4","version":"0.0.3-canary.4"}