{"_id":"@angelblock/fillings","_rev":"4-2eefed909d13c963a8429d94f9784e08","name":"@angelblock/fillings","dist-tags":{"latest":"0.1.1"},"versions":{"0.0.1":{"name":"@angelblock/fillings","version":"0.0.1","author":{"url":"https://angelblock.io","name":"rafal2228","email":"rafal@angelblock.io"},"license":"MIT","_id":"@angelblock/fillings@0.0.1","maintainers":[{"name":"rafal2228","email":"rafal2228@gmail.com"}],"dist":{"shasum":"a7e17e6dcc0a23fbe621a737b6d230aa4ec97435","tarball":"https://registry.npmjs.org/@angelblock/fillings/-/fillings-0.0.1.tgz","fileCount":9,"integrity":"sha512-z6kJjXQV3Cmf1q1b6k3NFXKcVbeI03PvsfZxfWS3ZH2AWwkIvulIbMyuY8L7LRTVzXHrHBUnnV9IRhtBmZ9DFw==","signatures":[{"sig":"MEUCIQDucoRgzQ+qNXSBOYAu38mA1fyG636XYms6ToJUmJ4TiQIgEJt0D60jkjn8AH8fJLGIQ7dLP/hPWeCZN6TsztBqznU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":207807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijiVYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreAw//fiUozqtYvIpifIQRTx/iDAF87CFGHCIra9aEkbICdX+tGliN\r\nyKxpJMgcHh2IfvIem2OPOMArU5XUeZtWbMtKBvathgtFMf0U9fa87vCNQL9U\r\nFBm2OaEfsS08ANc6eyGq6udRtpB4LOLDaAJyepkEnjR/TFjXrl7ef0eQtC3Z\r\nUvEOSd7eP225Vp8DWwh/8AMyCVd2J0rFN6p7ZUvs8UAYvqwlXpwhJoYZTaoj\r\nKsZWvqqg/h6wh0KySg8ZcC9c2ewNYs8sAXu3pvvSzMYaY9WdOoWtjrweylzk\r\ntnn8yjMirjir21/D/K4DpzhANq1Nlk7/X69q0mop7lv8WAzmKIB1uNDMgVyp\r\nQk50uIK59qB6MCN1lGp5U2kakradP4DUdPKEITSWCmgJjfiB/qI2RCPufHuA\r\ne7txGOjv7fKxD9oczb5euLNMAHHEM1yzL+r7JqFQ6KZwUaOKi7Pd4gE9rtz1\r\nLx4BYRzqwClH4dJmJ9wixSbCFN2OefNxBm/Ae/xWnNfTAwojYJFkolsKEHEm\r\nsFkuXeiMIOMiyuYJAhKBdLUR2URdnHtHSTKHfuYqogGKmQf9BLIXQ+qCESzE\r\nqQ833nrupffVnGM8NKPYvdOADJbuZnbO+oLPuYK88ygyUbAGu9WhNFXR2Ngj\r\nHc6fd+ikFqjLzC7PZ8TOvVoB8QyjqGImGtY=\r\n=kU2/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./index.umd.js","module":"./index.esm.js","exports":{".":{"module":"./index.esm.js","default":"./index.umd.js"},"./package.json":"./package.json","./createRuntimeFillings":{"module":"./createRuntimeFillings.esm.js","default":"./createRuntimeFillings.umd.js"}},"gitHead":"30ab8b8da3c19e76077af70c684f5e3a15a33250","typings":"./index.d.ts","_npmUser":{"name":"rafal2228","email":"rafal2228@gmail.com"},"_npmVersion":"8.1.0","description":"Dynamic styled-system like API without the usual overhead of CSS-in-JS","directories":{},"sideEffects":false,"_nodeVersion":"16.13.0","dependencies":{},"_hasShrinkwrap":false,"peerDependencies":{"@vanilla-extract/css":"^1.7.0","@vanilla-extract/dynamic":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/fillings_0.0.1_1653482840300_0.6400573883350344","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@angelblock/fillings","version":"0.0.2","author":{"url":"https://angelblock.io","name":"rafal2228","email":"rafal@angelblock.io"},"license":"MIT","_id":"@angelblock/fillings@0.0.2","maintainers":[{"name":"rafal2228","email":"rafal2228@gmail.com"}],"homepage":"https://github.com/angel-block/angelblock-frontend#readme","bugs":{"url":"https://github.com/angel-block/angelblock-frontend/issues"},"dist":{"shasum":"e2890ec673f4b60b47164df945d9d120a546d30a","tarball":"https://registry.npmjs.org/@angelblock/fillings/-/fillings-0.0.2.tgz","fileCount":9,"integrity":"sha512-lY4gunhFlb4mPjURxjdJghrSE2unsx/JqtnLc+AbT3NfHWycuBtyboH/3yGERC3k6ID3kuMX9QfKzIDBG/pAgQ==","signatures":[{"sig":"MEYCIQCe81qIPxpvwoE8HKY81UmobV1vsyGTRGlozq9Qi2q+7AIhALqbudXCsY2T33+Q5LsKTnRytGTxKDvRunAhIMoGce7n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij2I+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodiRAAo2DAwsMH0ecwTIZkUWCvt+9DimWVDJBu4E+Z2UwtjajtDm+K\r\nT9inwSOLoNnno7/QWYloGlzcWedUpzmiD1YSSi4w/Dg5WJv3y7VA0wXEPUpQ\r\nvfDpbMWxR+47rSNVO1U7Kn8vUMmMP4oPymLKqZX3rHsUURMeiVYr64PLK7ZK\r\n3rQM5YDwZAdAYfaNAr9dkpppAje94xSOe7p3Lud15xMICiMSONUHFTTAls4/\r\nfjbEA9c/IXv+NQr1m6QZUPB6C2OXqaJjppNYOIoq56X6pf0PRuoP4RMO8/GC\r\n0KbWzioX5vlzpHXKV2yBHiUVB6rrbexq7Z1PG0g3BL54AXfkv6Dw4z92VMgT\r\nN1ETgdoHgjgUziLs7gKdjcMUj+pDe+IXI+TahlJZ6vxEHUntZhD36g4dTfk7\r\nQY9DXt8v8X54PQGFurjrL/+SaVuRx8sTTdDPp4mBgu89Uz5TILKfTCpb72+f\r\n4oUgodzfppI/Ln7Jlw2yh2sUgdV7IR17yw0RMvD/H4xtNOAYsAOHq8hd748U\r\n3LPXAmdKv2i/hXbgmIo+vbgbYIajsb6rCEvblyzE1UdfkmLwgXL8rytGUJI1\r\n/377Q5jlngxLe/2+Q2s8YJ3vA9jnBwYCP6tBpES3hkvJYNXQO07m2q2s3xor\r\nPEobgoeoYVfBis39otURlkRyq9gImpvmS8I=\r\n=eTWx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./index.umd.js","module":"./index.esm.js","exports":{".":{"module":"./index.esm.js","default":"./index.umd.js"},"./package.json":"./package.json","./createRuntimeFillings":{"module":"./createRuntimeFillings.esm.js","default":"./createRuntimeFillings.umd.js"}},"typings":"./index.d.ts","_npmUser":{"name":"rafal2228","email":"rafal2228@gmail.com"},"repository":{"url":"git+https://github.com/angel-block/angelblock-frontend.git","type":"git"},"_npmVersion":"7.14.0","description":"Dynamic styled-system like API without the usual overhead of CSS-in-JS","directories":{},"sideEffects":false,"_nodeVersion":"16.2.0","dependencies":{},"_hasShrinkwrap":false,"peerDependencies":{"@vanilla-extract/css":"^1.7.0","@vanilla-extract/dynamic":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/fillings_0.0.2_1653563966770_0.1281581726792851","host":"s3://npm-registry-packages"}},"0.0.3":{"name":"@angelblock/fillings","version":"0.0.3","author":{"url":"https://angelblock.io","name":"rafal2228","email":"rafal@angelblock.io"},"license":"MIT","_id":"@angelblock/fillings@0.0.3","maintainers":[{"name":"rafal2228","email":"rafal2228@gmail.com"}],"homepage":"https://github.com/angel-block/angelblock-frontend#readme","bugs":{"url":"https://github.com/angel-block/angelblock-frontend/issues"},"dist":{"shasum":"7cb67cad5fe8f302c1dc08390549e76e7bef1485","tarball":"https://registry.npmjs.org/@angelblock/fillings/-/fillings-0.0.3.tgz","fileCount":10,"integrity":"sha512-ZTH7FeReyvvnatzpmYc7EJY8XgqhoQi1AckIAyqrcHmfPFTyg2XnOVN5cnRz1n/6ROiUKf0XQh2XGH0Q4LnTww==","signatures":[{"sig":"MEYCIQDf5ZsXp4N0Ctr3j+XpD/YD3ErEEsxxCuqcxFkaOtNkZgIhAJTsVyMM+VbEF767pNsSzPM/wGzrqXq/6RbImXTbqDf2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":208232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJil2I9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/zQ//W007+4ZHrtAqjgsDhT7fxdcBfw3Tz9hjTk+xY8xxzwSCzbsF\r\nY+W1O6nPW76X1NW2uu3I3BXYdVk7unOboDhZmMRdkFix651Gl54bj/M6nsi5\r\nvuNHA0IxraRtDpANs5LPy9Cx506JkGHVZ73Jl77H7hbUva7hS0PYXiOF1lwf\r\nokl0mkcF7ezZEPeaYXAcUJJ80v09986QUtcMqZ8p3JGTVfjbJPtz/gk0igoN\r\nr2RrF3WQB35k1/ESd2rsTugSCKWPrNMmycivSq1hfRMuZN+VbIZhoWPlqCwD\r\n2juw5/fVxUUJr/9DMd1u8DHOYFoNL7Qyqws+ji/+vkcXCuQEfsd4u/IyTbwm\r\nNwYY84BLRkvZM/LAXz3BtijcwQ9RmVU8g0FA6VGgH5uJjNprCfW7wKGOi0gT\r\nF3ZEy1bWvxPVF3XpbFEG85TIAWj4AZepZEGT65jT3zDEZnbhWSNZzzo/l7Mn\r\nQ8tnqDcixbR/BsciBoE+z6zs44xMvTEgA+p0avKaJolbzhIIZRozf0SZvTGF\r\nvvcVFDUpDdu4W3pV/CvTGQ+nRUcqGfBkR3uaPqsUyA1lQYI3++SjTDCX01mo\r\nn65CSoi43Dl4L1CzsCpgI2Zs8bOxU4FRlnNtIgX7FaMJywUEx/HC0O1pViEH\r\n7SG5Aw6VsJyPqL+4NRBA3i86eWBxKtRbqUE=\r\n=+sF+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./index.umd.js","module":"./index.esm.js","exports":{".":{"module":"./index.esm.js","default":"./index.umd.js"},"./package.json":"./package.json","./createRuntimeFillings":{"module":"./createRuntimeFillings.esm.js","default":"./createRuntimeFillings.umd.js"}},"typings":"./index.d.ts","_npmUser":{"name":"rafal2228","email":"rafal2228@gmail.com"},"repository":{"url":"git+https://github.com/angel-block/angelblock-frontend.git","type":"git"},"_npmVersion":"7.14.0","description":"Dynamic styled-system like API without the usual overhead of CSS-in-JS","directories":{},"sideEffects":false,"_nodeVersion":"16.2.0","dependencies":{},"_hasShrinkwrap":false,"peerDependencies":{"@vanilla-extract/css":"^1.7.0","@vanilla-extract/dynamic":"^2.0.2"},"_npmOperationalInternal":{"tmp":"tmp/fillings_0.0.3_1654088253391_0.8398074447225945","host":"s3://npm-registry-packages"}},"0.1.0":{"name":"@angelblock/fillings","version":"0.1.0","author":{"url":"https://angelblock.io","name":"rafal2228","email":"rafal@angelblock.io"},"license":"MIT","_id":"@angelblock/fillings@0.1.0","maintainers":[{"name":"rafal2228","email":"rafal2228@gmail.com"}],"homepage":"https://github.com/angel-block/angelblock-frontend#readme","bugs":{"url":"https://github.com/angel-block/angelblock-frontend/issues"},"dist":{"shasum":"619826de9634ea75b62f36e7e41ce8d143898314","tarball":"https://registry.npmjs.org/@angelblock/fillings/-/fillings-0.1.0.tgz","fileCount":10,"integrity":"sha512-FU5wQrtGHKkr6NKWPc6BLohreHJyf4YDTjn+e6crSH1LcttdIpwLuVIstafYdjWP7xokQrJf/+tR63850P/tYQ==","signatures":[{"sig":"MEYCIQC7TCLNKzn4u4MeZQO3Xreo+zZjf8gwmMHBDrN1rWGlpQIhAN1h9TW8AGkOmvmaJwcers3enuSpv1+/iK4bFUNCR6QO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":146165},"main":"./index.esm.js","type":"module","types":"./index.esm.d.ts","module":"./index.esm.js","exports":{".":{"module":"./index.esm.js","default":"./index.umd.js"},"./package.json":"./package.json","./createRuntimeFillings":{"module":"./createRuntimeFillings.esm.js","default":"./createRuntimeFillings.umd.js"}},"gitHead":"97d783be693e7497b602924f78bb77fdde6b2957","_npmUser":{"name":"rafal2228","email":"rafal2228@gmail.com"},"repository":{"url":"git+https://github.com/angel-block/angelblock-frontend.git","type":"git"},"_npmVersion":"10.2.4","description":"Dynamic styled-system like API without the usual overhead of CSS-in-JS","directories":{},"sideEffects":false,"_nodeVersion":"20.11.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/fillings_0.1.0_1731405928702_0.5460914048153274","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@angelblock/fillings","version":"0.1.1","description":"Dynamic styled-system like API without the usual overhead of CSS-in-JS","sideEffects":false,"exports":{"./package.json":"./package.json",".":{"module":"./index.esm.js","default":"./index.umd.js"},"./createRuntimeFillings":{"module":"./createRuntimeFillings.esm.js","default":"./createRuntimeFillings.umd.js"}},"repository":{"type":"git","url":"git+https://github.com/angel-block/angelblock-frontend.git"},"author":{"name":"rafal2228","email":"rafal@angelblock.io","url":"https://angelblock.io"},"license":"MIT","module":"./index.esm.js","type":"module","main":"./index.esm.js","types":"./index.esm.d.ts","_id":"@angelblock/fillings@0.1.1","gitHead":"3070216b89b297b84563be0c167e5d8aa981f0f5","bugs":{"url":"https://github.com/angel-block/angelblock-frontend/issues"},"homepage":"https://github.com/angel-block/angelblock-frontend#readme","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-soEnYpOHjmVN47fhLeEus6hxm97L4SDlOAVPXPP+Rvzk6gtxaDwOk2Wi0ljSkxE0VyPFxb91zeV2RWBppnsdaQ==","shasum":"3e64d2fba30940ea66c6769224aa2d11430920f8","tarball":"https://registry.npmjs.org/@angelblock/fillings/-/fillings-0.1.1.tgz","fileCount":10,"unpackedSize":146825,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDByP/X6S1c2PlXPNd/c53t+7QV3MEpYU/320kophfBswIhAPyP66potuZcRnP3P64l9v6P8JJp9v7wgAg97/gATDrA"}]},"_npmUser":{"name":"rafal2228","email":"rafal2228@gmail.com"},"directories":{},"maintainers":[{"name":"rafal2228","email":"rafal2228@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fillings_0.1.1_1731406481073_0.9627897408872299"},"_hasShrinkwrap":false}},"time":{"created":"2022-05-25T12:47:20.194Z","modified":"2024-11-12T10:14:41.440Z","0.0.1":"2022-05-25T12:47:20.499Z","0.0.2":"2022-05-26T11:19:26.913Z","0.0.3":"2022-06-01T12:57:33.574Z","0.1.0":"2024-11-12T10:05:28.906Z","0.1.1":"2024-11-12T10:14:41.260Z"},"bugs":{"url":"https://github.com/angel-block/angelblock-frontend/issues"},"author":{"name":"rafal2228","email":"rafal@angelblock.io","url":"https://angelblock.io"},"license":"MIT","homepage":"https://github.com/angel-block/angelblock-frontend#readme","repository":{"type":"git","url":"git+https://github.com/angel-block/angelblock-frontend.git"},"description":"Dynamic styled-system like API without the usual overhead of CSS-in-JS","maintainers":[{"name":"rafal2228","email":"rafal2228@gmail.com"}],"readme":"# Fillings API\n\nGenerate a static set of dynamically assignable properties. This API allows you to create component interface similar to the one known from [styled-system](https://styled-system.com/getting-started), without the usual style generation overhead of CSS-in-JS. You can think about this API as a dynamic equivalent of **Sprinkles**, where user is free to specify any value to the properties.\n\n## Installation\n\nFollow instructions on setting up [vanilla-extract](https://vanilla-extract.style/documentation/setup). After that make sure you have all necessary dependencies installed:\n\n```sh\nnpm install @vanilla-extract/css @vanilla-extract/dynamic @angelblock/fillings\n```\n\n## Usage\n\n### `createFillings`\n\nCreate static definition of you CSS classes. This function generates respective class names with associated CSS variables.\n\n```ts\n// styles.css.ts\nimport { createFillings } from '@angelblock/fillings';\n\nexport const sizeFillings = createFillings({\n  properties: ['width', 'height'],\n});\n```\n\n## Conditional styles\n\nThis API really shines when used in combination with `@media`/`@supports`/`selector` conditions, creating dynamic API that remove the need to create custom styles every time you would want to assign different values to CSS properties on different screen sizes, color modes or other conditions.\n\n```ts\n// styles.css.ts\nimport { createFillings } from '@angelblock/fillings';\n\nconst responsive = {\n  sm: { '@media': '' }, // treated as special case - style not wrapped with selector\n  lg: { '@media': 'screen and (min-width: 986px)' },\n} as const;\n\nexport const sizeFillings = createFillings({\n  conditions: responsive,\n  defaultCondition: 'sm',\n  properties: ['width', 'height'],\n});\n```\n\n```tsx\n// app.tsx\nimport type { FillingsProps } from '@angelblock/fillings';\nimport type { FC } from 'react';\nimport { sizeFillings } from './styles.css.ts';\n\ntype Props = FillingsProps<typeof sizeFillings>;\n\nconst Box: FC<Props> = ({ ...props, children }) => {\n  const { className, style } = sizeFillings(props);\n\n  return (\n    <div style={style} className={className}>\n      {children}\n    </div>\n  );\n};\n\nconst App = () => (\n  <Box width={{ sm: '200px', lg: '400px' }} height={{ sm: '200px', lg: '400px' }}>\n    ... App content\n  </Box>\n);\n```\n\n## `@layer` support\n\nOptionally when creating fillings you can scope them to specific [CSS layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer).\n\n```ts\n// styles.css.ts\nimport { createFillings } from '@angelblock/fillings';\nimport { layer } from '@vanilla-extract/css';\n\nconst components = layer('components');\n\nconst responsive = {\n  sm: { '@media': '' }, // treated as special case - style not wrapped with selector\n  lg: { '@media': 'screen and (min-width: 986px)' },\n} as const;\n\nexport const sizeFillings = createFillings({\n  '@layer': components,\n  conditions: responsive,\n  defaultCondition: 'sm',\n  properties: ['width', 'height'],\n});\n```\n","readmeFilename":"README.md"}