{"_id":"style-composer","_rev":"151-7d720fa3d13039fc4fc370cc300b1f55","name":"style-composer","dist-tags":{"latest":"0.5.10","next":"0.6.0-alpha13"},"versions":{"0.0.0":{"name":"style-composer","version":"0.0.0","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"parcel example_e/index.html","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","parcel":"^2.0.0-alpha.3.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.0.0","react-native":"^0.4.0"},"dependencies":{"lodash":"^4.17.15","react":"^16.13.1","react-native":"^0.62.2"},"_id":"style-composer@0.0.0","_nodeVersion":"13.13.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-8iw5+A2Wo6KfvBqdffyGwB4i21MLiuQeuPMVuUOPHuyjjS26K07mJfiFhMYs9vvwJ+h4LATePqMfYGhh3agC/A==","shasum":"147c2d3e98a0243333d17e6928c2dc6943545ad8","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.0.0.tgz","fileCount":75,"unpackedSize":586157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuM5WCRA9TVsSAnZWagAA9ZYP/jpYmOiw+OV6jkgByY2h\nFlhm5qzh4g+N/QGf/d12cMpWVe4b12yKYCQFCHBvWB1DzSsnhcysJhbpkhpS\nyXgIeKOFTc3Z8SuhM7jFYIs1fNHZsNJhREze1qbW6RiIew2oFccpZSw1yRdy\nMaephgAn54T9ZNbwIzU5QMxeCc1vJZPQA2TzA41s5R0Nn4tKRbuhIw42wD+F\nuiXmoMhOVtBSr4crsJZFMaybuEcVGZFeB5Z2rWJhx/QTm2ObxwbjygUJppCc\n8zru/lfnWjquqE3a8zuqHhUOw0UpfZ5WE+M9JNrdYtG5dv4nmKJZKtgacxRg\n3/rN9UG7zeGnUu7susUzVbxsCXzaaWec4gcWd25fkF/BUDdW1PgRauyOQmS0\nrmkFVvFcl9Q0PUwqlYlyO6Y5JivQKo34QRi0xXrPFiIpiKqFu0YTBdQUp51F\nlPgEkas02MxnNC/XbmsVxtnX2fJvpHxkLqQkW521Fax3Be5zDF4sxoAQvOeu\nVm4j6YFxcyYZ1eWoQt2mKRPEozCFaCqmOdoBSeCuM/osy2wUsJSpLJVtaRE9\nMUQ4Hcy7hj+wJpiUgGn8wq4JP7wjZtvw7wSkNZvzJRWBj7dG8jUW9vDLvBw7\nKIZoaQ1+finr3AOPMKS5YzV6n1W+YQ1b/xOvZQfnQGeklr1QwZZfPvdEhIpM\nsgZa\r\n=DMvv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAHJZe0EvSYTgTsNZEYJMP6t0cdvW0CLZ+apfJsEy/bQIhAN5pAkNQDDwCFuVEAbXnLyQVUS6oOa3qY8GEhhqPLYjq"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.0.0_1589169749470_0.9836337585587127"},"_hasShrinkwrap":false},"0.0.1-alpha1":{"name":"style-composer","version":"0.0.1-alpha1","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run web","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.0.0","react-native":"^0.4.0"},"dependencies":{"lodash":"^4.17.15"},"gitHead":"31e0d2e969883c2eb561a72433cf4f11b52d2b6c","description":"Universal cross platform styling for React Native and the web","_id":"style-composer@0.0.1-alpha1","_nodeVersion":"13.13.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-3L16OA9Di4uMDX6FLaZPp5salmGQ4Xw9cW7tXJEhM7752/GUIBRh7YBZNCWbdqbw/KrgVX3XZVLXXPIIyp0mHA==","shasum":"dcd4065afb806a7cfcf5364662e30a155c059e5b","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.0.1-alpha1.tgz","fileCount":9,"unpackedSize":7347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuQfGCRA9TVsSAnZWagAAJO4QAJ4gfkadi44LsBQUft5O\nWIZei5CU5N2QmBqtDmdks9slSahgN+79VMxx1bntCn82CMUUzPxXWxTkjCDE\nfJreLM+PO+0MqguoqqTdJ+XnCjA9+ahSbnN+uw6wfkDk1/HZP1yHG2I61Lxc\nXSCPVdNWlgO/QZrkjNMzYDz2BCuI6hlfymSI3hy1hwpScI1ZOzmBpZc9+1vy\nMssliRP02+3o9r2lqp0BBzXRDLdS8P3oNWzA7Lm9YADjGbIAWpyHLgXFsYA5\ndUxgj0jvipqPsKaBQ9ArLAV0UK1nTyatB03zmZaCOn8w/z2GQrt2WNzuWXKp\nUw89RklIzCzBFv755jYCU2dATW/Z6CGP4RSwIvf3QOsVIvQkySuzZjbdfrpq\n6kl74Wh7iGemkO9Bdn2yGKHfSsI+MbSEJt5jfqVshpfaKkdcVeWsGkTHj8f5\nYUh0LmeGxr5VrCdbkC0dWsS4FMr102F1Zgpr1ABW1+Smd+4R6Oq2ifL6pGom\nj9rwLgXw/jwcZoBPOYXV1Le7LmRnonOsMPMktZtFciAZ5KpZa/Z1FdhXU0zk\nxkYcof1Xl5MyvFjgKMK97mN/Z8HjoHIITpo4jCjKKi9qzTnfTg5ZVUyJctv0\ngLUCzyknBu8drzbccx0tWBEToxp7wVAbaAac4qoBtQwl+tjCtMUBDcOAx5jq\n7PBE\r\n=I+hQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCnP4f8lxZl1Dv1IBWojqazS9B8mfrAXpYacpGhjVDmwIgZq/rGiGyzbb+nXXo+51nhklPbyfq9dZWhczSd/uKnq8="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.0.1-alpha1_1589184453664_0.3930268819087601"},"_hasShrinkwrap":false},"0.0.1-alpha2":{"name":"style-composer","version":"0.0.1-alpha2","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run web","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.0.0","react-native":"^0.4.0"},"dependencies":{"lodash":"^4.17.15"},"gitHead":"31e0d2e969883c2eb561a72433cf4f11b52d2b6c","description":"Universal cross platform styling for React Native and the web","_id":"style-composer@0.0.1-alpha2","_nodeVersion":"13.13.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-gUVj4T/c4w9FsTK1BIp2lTy8pXX+IJoufXwSV8Ew+GORq+f6cuV+aLZhBe3RPTpZ1b3rgXbkBDuUm2jjMyMNsg==","shasum":"138b1bd1c873598cf88c06621d961c66a839f250","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.0.1-alpha2.tgz","fileCount":37,"unpackedSize":30627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuQfuCRA9TVsSAnZWagAA66UP/3veMQDCuHnRYUG2IkDL\np5htdRTSoNhjSYUEIK3UdL6zEx2JHnfMxUKGYKjKGxcW+SIxhZnNgi5n9cPF\nDEqurkRRz1cyzR8fyRmpgwwfVUaiZTpmzJP9NdFnV29gDYckCDnE95XW7CIo\nqDBll2fsaSGcVa6cY8roSnGeo2y3zfByNuiztT91QTHjOHUZnl5oLOCaGcX6\ncHsLYhgfRI1dEUW9X1AlRnEqndQuQunVL9N/jIQzRtxf8wlmxpdECz9gy09f\nrbe/swYSEyoKQLwOWijBLc6Pqmvz0H9lro9SupVIin0qDewFmKsprt0+blQl\nXzQiI5KONU7Y/zNdsd/YhohRKPlkdKiojF85qrVYgCcwjHC/Hl/HSy8KSS14\n3MSwLptXeoX4J4IMTc+uV/tbl9nMKKwT7dcfACaNsepTBfZCAbkjys9OY4lY\nHyVwTgsTqvpa/Qp5U4TNs8epdzcaueuP0TpX/kuTbrUJQ/O0ZWVb5pCcVT81\nAtu3hsRnfvXAL14ngywuWKof5Euz82rAhgS+NqRhotDy2qu6LJZv/72TnFFU\nmwF1HpE3ivcqILDSsss9xmXgH/INdtDthEZh6HnJpsF8XPL71fxqniSf/03X\nk5+kdpzuWdFCGeK8iC4KVFbiaYkzQnMcHYme9oSAWuE3uWfk5DdBJ7B6gzZj\ncCKP\r\n=rZhB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuWmS6moLbNWAeEDkrSNgqKgfLn71DThjNk9C57Xkb5QIhAN/y00borJjLlSJhLWiM25mVtzrd2NoVBhFXgmt85eOp"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.0.1-alpha2_1589184493930_0.7088138433577804"},"_hasShrinkwrap":false},"0.0.1-alpha3":{"name":"style-composer","version":"0.0.1-alpha3","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@babel/runtime":"^7.9.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","react-native-custom-fonts":"^1.0.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-font":"^8.1.1","lodash":"^4.17.15"},"gitHead":"31e0d2e969883c2eb561a72433cf4f11b52d2b6c","description":"Universal cross platform styling for React Native and the web","_id":"style-composer@0.0.1-alpha3","_nodeVersion":"13.13.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-OOMQlFQO1icryMH3ARpEL89Z1bBe6XlNlt8RaArzWS9Lfb8ro+Vt/cfF+IlhIFJnaw+pA8UY6ZKICUEg3LZr7A==","shasum":"e70587ccbe0210239f8ed07e85edf24c214a2dc1","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.0.1-alpha3.tgz","fileCount":53,"unpackedSize":44689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuq9lCRA9TVsSAnZWagAAYaAP/03abr2XRCMoNmG7cZKG\nuC6MUKCI7tG5/G6yz/PjJ5fquOPh3JG+v4otG8Vb/nzar6+UjkzZw72JrZYa\nboI7bvtl6J0Wj2TBCwIt24VV6B9Nn8umeEHcBOseIl5sa+1/l1sxGH+LB6KB\nXODw66vsUu09pwunvsScFuhn0x5YJrxKEIw5fzn2jBVq8P+lDiQiHXpIhVSc\ngHq+FSYsydEVtY+kh+7nK0mVKH00AylzR0PJByzTn6aZdUKpNpL6XEOBMHnE\nVqHHyXTID9TMLVhdc6ck6XH+FPN4erZB7BX431Qz2LHKlPvQnGbXWq1g3srl\nKlT8FyQHefmK43PIJWecaove3jxsBmsrXI3/WYAjFdaz2C0Csqb1Lmx9qJ5Z\ncqQLfldkwbjDSz1ihmzkHS69gh+5NfjlLOlZfVCqGQlNbGTTFAQUcOAxFCMK\nyOtB7sRJzboPlLSdC4PBESfsTRKJmwiKBVcpPKPbi43PdQev1FpcutyrZKc0\n2UvU/p9qGzp7d6DllWSyv/OhSF9PaWCAP36tk30cp6CNukaUUjHF4ksl26M/\n8oppbcoYfskXZGa19cUBDkF70ZLJzbDjP32jvVXLIcT5Z5j4ycvJUvQpzAtc\nBwiKdS6293HDCu0L2XwjzoLhVBL+1X1w1FIYUdj7UBYh7NFBW78S6jXPP8Cj\nUA8L\r\n=iCJ1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDJE5fn8iUZ0MHIdvVNKlPOUU7P+9UqfB9eZv32+nojXAiEAq38DsCQJjajwn61UeDrd+Ua6lLkw7xOlMk2K4dWia4o="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.0.1-alpha3_1589292900971_0.3056021812890335"},"_hasShrinkwrap":false},"0.0.1-alpha4":{"name":"style-composer","version":"0.0.1-alpha4","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@babel/runtime":"^7.9.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15"},"gitHead":"31e0d2e969883c2eb561a72433cf4f11b52d2b6c","description":"Universal cross platform styling for React Native and the web","_id":"style-composer@0.0.1-alpha4","_nodeVersion":"13.13.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-t2+kmyOqFoLVpmOdkNDxLxJslO+BrgCRiSKF63rL9opk6WNZIypQIndSQ19q3qZi5NeTtM3QlRSE+ZqLEbf2Kg==","shasum":"5b7aae06684aa6a51548cb80ba39e5d6b4ffdfd0","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.0.1-alpha4.tgz","fileCount":53,"unpackedSize":44674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeurBSCRA9TVsSAnZWagAAsS8P/iwnRX1JUpIYNWaQHdha\nHBFqt95UQhzcU2hXl2YYJlk4mcbjH4TdjKVjSwLMwFjJmwJdcT9Jw4VCuMRy\nRcF9mCvTL0yMm7CawW6ExLyaYvKRF92SuCTa0b/SF7Gpz9K/iUM31lk1/9mo\nG3lDVoEpQqzEMvfwpl9yHYHYNpqxM9M8L+db//pRxsmu0Imoclfdba6ltXfF\ns9t6hbaH+I1PLboNM/s9K+303MLV/m7KNg2I7ZabUPMKSJ8ljc0upFIamLRj\ng5tLBJgJ3yxIweEabiYhicW2XrTA/wcGF1hLeWVSokcj8CAImEZ/EDLGHGzH\nYHlgWRPKeC7pc/afHjnzB+R5IjSZ8+U2cLWRv8OgIuIH+S98F+uRA/5wtfip\nPkyLFO/Pxbc0SFyF4hv/uuUbbvB7R0nJUkPx6tg6RwM4HyQuCexgvnoGv9mK\nvE344csv2IbIxe/HBV91wVNHi/AptpHbPm1TIqnYjfrmmCLAyenbvswOeZ2r\n7H/sZRmCMWFwLmHYJsT3Hesx9v9pAi4FquJwE+RR/nOGQSveE85Uak7KmplO\nUnQ7l4myy6B8kWbxA0shu/InAt3KoYyLvsfC5LJ9nQZmfiZ7axVd1/nsL+SV\nkKIDcrCbtXIBXO2gzWXNbJxcYtLLAdV1O8GqjUZ96eL4+vtcmCa7g5L9xuCW\nh5iv\r\n=njTo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCI8ABFgHCWAkbbe8txa1M0dmJJ/TFHI71IIeDjiDphRQIgMN0pL0P1ZgF+k8DImm42dTqqSyZT4PPeqbkmohl6RJA="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.0.1-alpha4_1589293136896_0.8208257752605399"},"_hasShrinkwrap":false},"0.1.0-alpha2":{"name":"style-composer","version":"0.1.0-alpha2","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15"},"gitHead":"3b9743a90986d46431796d0f1f5baa58e6fb5940","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-alpha2","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-iEpXVruXCdCIhdrNtTzr9zjuvo52AoFfuKo0xBczmJt0Aqizbwg9ie3szX7UoOhjJQbNxj8u9+VIUEZzlpZOUA==","shasum":"45ad0c972cb96e22527de9177eb5cd299364f8fd","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-alpha2.tgz","fileCount":111,"unpackedSize":102049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevjAACRA9TVsSAnZWagAAv54P+wVQ5B5eXVBhpzTh/aaf\nunPpBSL55FMdzCwZJzs/1oGVdBLTX+fJiT/9RI9OPgaGV3CIRHHJvcQ+3lmm\nTR5g9LQeFqOefdjr8h+YUI4MBJMEsb3S/QfqiOwOPeOWvAoWZr7ZKAYhYl2I\np3CEKVPxogV/bGxsAfq8oGX6BPBvqW4el3zJ8GLXos/Gn9KCTAKPTeFr8BtE\nyFjhoFaDKau8kbc3qN0BYvEQZbTythGg49bOtTzKZTXdgWxdXwfP8lDlh2o8\nvRnnHpSb/+Q01O3Op43/TKDBei6g7nOfyHbZ9HztsFP4CA8KzrQXUAG7bECi\nOBpq+2otgIIAHZMqxsswkEwPKtI3KofeasepNJ4/hZXwuLH1ZB6awLDglSPZ\nsR58PPSSuobrFc4SJnpqa5f+m6obvGLYfVoeg59u7xSj58Guix53txRUpTMt\n3jP1fQjTxH+6YlTwkuEXwegJ1nR08tM156wDZYecXv+/mpzV77KqC2SjbPWo\nGWIjUbxWj0gSslJK5XHenUJgEdPkEPHz5nMv9LQFtIqk04nyzUiCRbHUFAu0\nLcGAR1NfVjwsng2TReukfdl1Y1mOpmnrctw+y9BWiTTqWFSNk9qsp6voEzvI\n398MahALycEWns/z+BxdRDciOIjBVUvZ9EHBM7jRK2QlSWPvlbW2m9Tq57eS\nNwez\r\n=Xmqg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB4alqmG3Ci8kHb0NSR6d7LNSTL0u4LjNp4Vs4HOXuM3AiBifv2dSy+KhEOez6efFWY8CxcNhT349LYLD9xDRCdBvw=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-alpha2_1589522432245_0.4323589638044172"},"_hasShrinkwrap":false},"0.1.0-alpha3":{"name":"style-composer","version":"0.1.0-alpha3","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15"},"gitHead":"d533501eca80ba72c92b79e63b67ff5ba1daccf2","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-alpha3","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-61imZmctQw6yCq7ZEp96TTb7gli20n0A8FUqx0gebPGh5ksA3wWbkynubGhxdYGuoJZ1Oc1XAUx6jCFIk8KEuQ==","shasum":"745fcc0ede74835d86e5b3c7b82d5e29731d0dc8","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-alpha3.tgz","fileCount":111,"unpackedSize":102053,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevjAkCRA9TVsSAnZWagAARX4P/jBfSwk4ptpkrcPCWE14\nMXlm3hy5A+yPQlyQF+ULNTIYFU/AAgrWXWvQEzFbi9PCVIIeU3IvDV5kWJxU\ngGdsl6/g74Cr+NzCm/TWQ00Ai7BLXW+ari50izoo22l6XKDcYO50F3psHTCf\nWCsUQIC8udYK2se1xtfe9tSed604I1EHE4rdZDXx/8foC8uFQ7IAe4hgYQYo\nj9gYH3+gl6ezr9Vq83KGLgSRMJr2wD8C7hMigSGrko8K4qMRKob4QcGyFsPM\nx+hbsnY0QYr8er2BeEC0ox2VaumLsCjqcs3IV9Y1IEDtlsjnyxlTjP1+eIzB\nkhG28y8r3Bmn6jg/YnVQ9mM3o69nEADKMWiDK+tmMvizCpAKpB/0O1zlHwKI\nLZdTHc/PVQVNIe3DDCsNola4/Y3H69rsRGOp/S7yiVEt3u3aEKiJqO2247dj\nBmtqbVPo+VDR+IYgSHw7+pzdpCRvGU5JdQve/gcqmNW7e9cznxojFmzGqi9u\nn7aE9WyLy+71qKcQndFrDCvHYv6J63zDFHa+QAIukyC9PmqqBBeEu+HMY6Li\nIb2EGfj8Yq57tFkSPWLxyQAib5by4U+zrPVK7NEqO9qvKrqi0uYTUwaye7O7\ntlT82FF+yf1isG40oMA3l6wGXpqaGd5mYw/KXcRExoVSEs0BQzjiUaiQotGx\nECD3\r\n=6Qkp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDKbKZbLY/gOyvyxN8mjm8Ol2BzLVEZobB5bdXdcqETyAiAQFEPyCJHqa/rjzOIWiwx5vWLw2OSGA3K9bruavso+Og=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-alpha3_1589522468040_0.18458378877375936"},"_hasShrinkwrap":false},"0.1.0-alpha4":{"name":"style-composer","version":"0.1.0-alpha4","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15"},"gitHead":"9bde8e357c5578cd7d9cd2a2053aae2d7e598697","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-alpha4","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-6d/SWN8f0EF8Vq3HZgyM5in+Gd3EpsECO4hIbrhutpdtxOpt8Q2ldohYfKwVCLSlBrP0c2ggKlPO9o38xrQHvQ==","shasum":"7b93ab6b71e061b1b4a58fb43259f90bc0b30fc2","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-alpha4.tgz","fileCount":111,"unpackedSize":104404,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevjGzCRA9TVsSAnZWagAA+ZIP/1tfQRq5qb0bt6VKlGE5\nF5XERQo92KownLUudZ5h92KNCaY1bi2Jre1M2m1Bw2PaCPdOLloTWCH3VVnM\neleg5q5gqVTwRhSejQQPFme71mU1ZLBLmM1Tq9kOJ9nOgMLOW/Rd8OckBIBV\nsOTzp4bF01W8iErmw4KUrPbMy2GHYLb87619ATcPxnGfPceYoda/5uBrc1vp\nPwR2wHMTcZu831NOEanRfT+OffSxn18A6csv4TQH8CjN50OEbEuvc4najs9K\nO7LhfYWcsYUr3VR4gqfKQ4PEU5x+WqwUvrXEKQduA4V5GCtGbV5LZdggupeZ\ncH5ehrDwGur/EFfa+LniDo7yX5emJlO3rktiyODCwscyWBThmoE91ePGS05I\n0RqM6QeMrnxH6Q37cIUtZJcBIVlQsysGJkFcVDyFGD5UtEXYKoCjkS1cspLQ\nB5piy6QkZbNBfkS0tDhdEMcXOnU/z5i3JalO5GI+n3thGlhcW5pDeocvZTPk\nSe2DfYEhsYxZWhD//13EngtZeWo2PmF6r4AeGylFKWzQPthaUOwmFxY/wP2e\nqEUrsPEKR1yOR6iXdjESV02j/2j887u74DF1+XcEk1JC8MRgso2Zv+e5syOT\nxe2KSjmG9cIADJHbpqF4fisJSAT70ZZF6Z/7YPUf/6tdBPyLBZy7B5n8c/+p\ndjyK\r\n=hOzs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF/gccBBjzv4H+obAw7eVa5hiKPTneUMr3DkUX6K1rR1AiBDuyQ84YGWrGw30dyr6yJaTo+PdyGIpQhCrOpSRjDWhA=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-alpha4_1589522866816_0.42207466481011924"},"_hasShrinkwrap":false},"0.1.0-alpha6":{"name":"style-composer","version":"0.1.0-alpha6","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","react-native-web":"0.11.7"},"gitHead":"e04cdb8577b49515034cdc14207867acc5b0399d","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-alpha6","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-e1cUPM3UXcTOl3jROVuRpmJasin4ounxJ9zI8czK9UXKG63df9VYukCBtuzCnaUrHeVRwwJxbL6vXjusXCVXeg==","shasum":"5a3dd9ea4aa326c41fc428e8370d3429b64f44d5","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-alpha6.tgz","fileCount":111,"unpackedSize":104906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevm9ECRA9TVsSAnZWagAAF+oQAKD+CchPcjZ97S6x5A0n\n7rZFhyAUtrxoNQqhT3qjd6GnYr9Ed2AEUlMMcx0gaSyeFtZ8J5KMCikjvyg6\nqci/RNYS/9xzhJehElf6/v7q1DyveQpkYjhOG06oSlRTM0+UpyWc6W6c7vTc\n6U+hQmBTMA+/9iGHWTYb3HjyWj6nAD+ndJuhErcEQCw3gI7QKkviG9TdRjhh\nCSMHZZaSpb2U/38xfoNb0fLfaOzSDDfB7GPgkvLdcwKryV6QqGPi0ie2abon\nA4CIrOLwAKWECftGzh6dAO+CuJllenifBEGfKlpv/qpxIMBWTw7LLvgBLgLy\nzuP6PE+ynqvqOqCGgslxO6Oy85y2Dhq0nYMiNHY0zKCMOd5JpDR5BU91/zf/\n0syBdZTUnEVQt/Um7/2r1omR0Yfy9koCtmZ0hK3Wp7VRKhL5di3CKnmKJuTi\njtlosrEYLYpC12rFAJlzUAbA+Li3d0nPhSv3M8ZPqQ9Izm81VhE0hccnsjVV\np/j1BDLZCFzHK7xY7jb4xVPt9O2N4XFZnWxOlPBPu0ltxnGEU72BOk1PxdWe\ngJXamTXC5gwo3bre32GBaeMPEkc8iZLTCeW7xofhKTpilmA8P4XiK1w/HpH0\nd/VwzgqH9m8Ny7NYUURRQ8qiQTpMRqAwmxeyL3ybsYUBc7DXlHnCvDPyGjfI\nJob/\r\n=UPEq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBtoX8RS9NgLtGnEWRV2BVXIUF44Yvyuj5+BfWsaxbVFAiBET9isj43RH6E7Bu8xxcpMHch7BxtdZ+OstZcCUo7iWA=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-alpha6_1589538627619_0.6148071905032311"},"_hasShrinkwrap":false},"0.1.0-alpha7":{"name":"style-composer","version":"0.1.0-alpha7","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","react-native-web":"0.11.7"},"gitHead":"e04cdb8577b49515034cdc14207867acc5b0399d","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-alpha7","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-JUpUxlk+Exb9TrAnJlpqMSlqElrzO1hZOGWFjxzgLcpQtcj4UFH/7M9dIoWUQB7OnqpCFCRt2vJrXGM7RYXkaA==","shasum":"8e182a888437ca3b73dbe8919ec826ba9d59a156","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-alpha7.tgz","fileCount":111,"unpackedSize":104914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevnBvCRA9TVsSAnZWagAAAN4P/3FeKNguv5NYgbCkLoLm\n+ezFtxD+umuj5d4f/N2ximTamaEMUdMlkRSUIAA2vyJFVJW53njTEH1W5TBw\nB6/Zr/jxmxqBaGnh9qsWouo8XL4k+6FtOjzjE3FAYuOtQZbLXulDtmPNaV7D\nrM/D9o9Po9pnlvA6ymo6vkHUoQgwxU29x/D/Gfw05sP5JQWTymda5cCmu7ez\neumJJGzNhpJbtox9Sfi2dpjkCDGkyzl9QEsFuowVjNtgkDoXKp2+0QoV9jE7\ngJO2la7BPCyVTMLA3VgruZSEqW+f4dS3buUMmhJ6zlVBBCPGYzV9JRLZB5Tj\nk079O1gj+om6byKTiS2ICFFQjE4RpppwSZYxS1tphrJBrqSk0n9LnGoYyE07\nL6TgJSv0v45ogsqZ/U8yHN7rTt97KqRbzuvtj7gQ5ckcZPjT7LNNQrz/KUkn\nn0yq9tvHhDU+PimOsyV30Muod/wILzOiZ9ADadatIQr3d9z+uXp6LQnJUyQc\nTzKlOkW5GxhdlqFvZbNPkuOAv+5OjiD69OLcMciYVbI3tef/WAoGDjNai1xg\ngixLrIU31ImqpzTGnQZccLf887eCXN9+DI7NyouaSkDp7oY3iirq4XqElceB\nAxb2pVa/UDIB2Cs2m9vQNcmxQ4zNAwjqbbcD92BU2cdhdgFDvXuBDIp+KFcN\nvPRX\r\n=X+tR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDBEfkKyM9PHLn3Ga3CO+pJlbd8obIbYJ1jUqV3xm2wrAiEA8kkaT3nlbgm8SuJCMteMk4Chcsa9afJ0jDc01NA56VA="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-alpha7_1589538927414_0.08395206436745739"},"_hasShrinkwrap":false},"0.1.0-alpha8":{"name":"style-composer","version":"0.1.0-alpha8","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","react-native-web":"0.11.7"},"gitHead":"e04cdb8577b49515034cdc14207867acc5b0399d","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-alpha8","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-PTguIgJJV1kdoUvQjjt9QhJ2hfCRaGtqJHWuwt4ss0iRN367smNnP3NxlaNOAvMIlUOLBLmqmpOAjEzFszznGQ==","shasum":"b70e79cfbc9031701de01bd8267e377261e4200b","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-alpha8.tgz","fileCount":111,"unpackedSize":105158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevnGlCRA9TVsSAnZWagAA1hQP/iOhh3qtRHy/udEPs4NT\nN6JONcvrASc3gwQXrAjGthkcqhVB3ivXoC1Wjr8R19N+2gNzB+24CVQGDX5S\n4NVDoPnBwCzLx0Cox27XvSgol+EOpADrfErl7u/qvxKpf8kdBErsAA8VT4in\nN1b7ST1UMZhu4vtoFSIb6Mr6wHynYFDXIbuSmwHyxJ3rfIgNbHIpMMp4XOYB\nnjZ/N+HKI+xizoIciqXLQ8RkX/EL9TW3mKfXgtYP7D3lG3/NudB+62vvqeE+\nXBAthm5Uu/36W58ajrt3LkwUvpTJo2fUkU1shM7K+mhs6XaNCzqNTr8RnFBZ\ndON/IOCj61+3S5rE3tHyhHuFjyJR5pb3JZz89/28+C+U9USsqBmhag3xwy5o\n4K82bEruP/5yCEAa1W16p3x0W69sePWcK0P/eBC6YAeKkc7R6FlY0JOA/oLL\nhYCSDQz4+nH5/e1JDgCCSo8/qA97YtjyWu8gCtZcHf12eWEFIb0N3kY987a0\nuX3sZKzJnRs/Z41AKC4Aacq2P6fHYMrRwiRv/tfLBkmwhqkzral8Ph4tauir\nx2b4F55gOMwufpStuFSSzAgUxFom6BEKTtc9N1AzZO7jfchCD91PaCQ9Bebz\nfmY8k7CTrL+cm04z7HZ6pho5iLH0d+kcZeMMdIYjLfDZcSdlC57qQ1O/8OTj\n2Zi4\r\n=y1Wh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHn8WDghwRdVBRchBZNTxztIPlWyxn+KR56+ziZmsSrHAiApynzznPGWnPdrnZfcL7L1oQtxZEhghOFR63Q39wfJhQ=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-alpha8_1589539237342_0.30559983099951005"},"_hasShrinkwrap":false},"0.1.0-alpha9":{"name":"style-composer","version":"0.1.0-alpha9","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","react-native-web":"0.11.7"},"gitHead":"e04cdb8577b49515034cdc14207867acc5b0399d","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-alpha9","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-6CSZuy9NmxmGv19x9Qry/hpUUkzOa8Okmj5avug48+0Oj6GoDNGbZGzRG2B+jwbgq6qY34Mpp+0bJLIkpItVIQ==","shasum":"4cca2ab9daade1c6c27057cb4e5ad9d1a4bf7bc1","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-alpha9.tgz","fileCount":111,"unpackedSize":108617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevnhCCRA9TVsSAnZWagAAqJcQAIpBku/scMKWOzsV64QF\nZqBeJZlEshsCEgUt0ZF6muTeA+LR9NkRmykKM66JciIER9x8M1k0gZJNb4MB\n1H3lTrMPpJi/Z+vyzMkNcNbhVnyt+8L+jHekJL4liXitY4LVyzRj3UMzedGS\nfXHArZ0zP3zAcztnDthoFq5d9c4LtuC5oV2/uVGajvETpSaXqw1Ey30WjHGz\n6NrG00oEBXVphVBcyqtQUurHCpDHJn7DpUx2y1CSVnA7r/EnlEoS+A6ztKkD\n+cL4GF0rtdQ5DgQZnJhO/g5c5B3VzDLLdc3jh4583CRaBePt1m5qI2An3IeV\nqcKsa/Q8o/s/z94wah17F6gA4C9esgJUB9V5ufwRtNISHPjALlhifeSWEhl2\nzn9zff+q5O1n9NRI43omO0+XlzMNgugb+tf8eH01jX2qnqLfNYlV0HJmNSmF\n+clXtxYfQZZlRLt1z9XfL6C+rjWt3SeClbqsEOk48yL5BCmTQxqaeYIoHJeN\nxOW5UkT0//rKp6nJm3MF18KoUf/ZjfjRIBJo2pbt63QlWOvTmjcsCey4D64I\n1EQL+dM6A5GcJYnF1oxPxJFvtpTCWept1whiah1jYKGhZ4jWSgzgi0Fnm23i\nUbPbx7ADCKUWvw86jqnSb2KFid104GxkVSWxSna8NKYKEyE5TFTVA2Lxsr22\ng8B0\r\n=goFu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQzFVkreTOCtARd3KvUrRbzMsNpTTpBN850ByOlZftrQIhAIaPrqw34y2pwZG5uGmBsQpcGTGBQbFH0daJz0wIQJI6"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-alpha9_1589540930168_0.009982658139765954"},"_hasShrinkwrap":false},"0.1.0-alpha10":{"name":"style-composer","version":"0.1.0-alpha10","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","react-native-web":"0.11.7"},"gitHead":"e04cdb8577b49515034cdc14207867acc5b0399d","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-alpha10","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Q0PEtsCSLyU9bAmIFUWJQGQg7BYXsfxBCQ7Zq4ed234inxgsqNjlOSnWppGEUM8VTzsIGQJShOavLobcFmjiQQ==","shasum":"6caa56bbbaee9e269f0d43ae51a871a02093d0fc","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-alpha10.tgz","fileCount":111,"unpackedSize":110285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevn0RCRA9TVsSAnZWagAAGUsP/RssmtVa4YT1Ob+xqQlP\n97ghao3IHWMeyQmY7MwIrwDAkk0mFAEnW1VpD2hiPfB6VOz+INXVwiYrdVxl\n1V/9qss66AVB/71AeWdOWvgX5uvu6otep5EilJXtCZ2fbeMOGMOVCQdEy7xw\n+mneredT2lrPdSYQa4bB2FqFpNk0FDsOPkO5unaa/LEl6bP9Az65/AKRVcUK\n5bqh0nTby0vBM7ECEOGfT5vwNbt62OKs4kqUByPLAhC1ZeN4mOeZ2zMhtV25\n8o0wVvjcHjxgc/IYKGFU4brCdz6ob9BJsCOhMudc2BB54DB5kHn+xZAuMiw/\nyuruhRcCcl7H0JFoO9uYOipHHbiQyas5OOwyhEFQ12oKvA07RKKD8fIN5H2B\nWCLphvxhpqMQ530VHi4HOEnjGL/HErzZkG91wobj1vzeTNJpASJ+7EyEnT9p\n5Jb0TLb7h2pLizvGI3F0VFjpnH59ZVFL/UjzPooGYfs8bO7YZ+biTIIXw3FJ\n92JaxeCKvPBlBsJYNDgLTUExgap2LZX2+m1sRFoi4VgGZxsLvYTNQIl11M29\n9R/p71dHJnbA+mjap8qG+qhsEpYykCgJ4Japvvh78Z0XGx5gkCl/aGkNkAEe\nW1f3fsPtyUfpaeK5qGAxboyqvDyxQpUYrIAWX7Jfud5LIiJAIhpEBcJZoIDT\n4Pt1\r\n=lHxr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCP8/Db4dve1reb5d/HvF6cpM7PKrQroi/aCx3I2Tb4sQIgehgR99GRmzCzcY2YmBsOqPH+IxssbZEbK9aLl/4ueR4="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-alpha10_1589542161515_0.07762742459992733"},"_hasShrinkwrap":false},"0.1.0-alpha11":{"name":"style-composer","version":"0.1.0-alpha11","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","react-native-web":"0.11.7"},"gitHead":"fe79c25e1a1eebc903248effd1f5507b5f0905dc","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-alpha11","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-1g2ZCZkG41+pb5UPYWsP/UwnHGNNAgCjnm9noPqUz41OaUcDl0GTR3KwCTgK1FXmCyvGDhmiIBcz8uy7LkLtuQ==","shasum":"da4ee36164b7fb80ddb8628b284e188735b1f281","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-alpha11.tgz","fileCount":119,"unpackedSize":124641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevvBsCRA9TVsSAnZWagAAG1gP+gLrqXemyvH/Ef9qZuFr\nuhotv5bJXreWPd+gPrtrP9mcT7tZGe93ZCKjz5/9wPu8L8GbTcKamET5ym7t\nVyXLBssVAfmAnEfvkOFzpqFGoPHVO43JwPjxs6+kq5K9GRlvn6XzQyd0I3/o\nQEtHCE1Yy0ISKndadQx2sav6kPMdNDvRqGJdhp4aZZz3bx/JSbPCoxwP4y1c\nGND2bwGS92glXaD2+2bp6JZWtsAFOvzxhqm4dzEe0V3lCI/ajNltMVDzJrdW\noga6g4LZ1p++Is/N9yDY7PbUiG3dRdCRBRSwwwEJsiMSmo6veeRIs/FIc25l\ntbybb+EeNCB6YuxnABMp4PNXRymRBZzza72mlkfXhS55PoJIAWMTv0Ph6VmQ\nPeKxZtWnt4dNiMhfFYkTddJpQBl7yFH6vidA99Gx6CkyPrz6ci8VHh74U05u\n2F+TYiANk9n8Ua7ytGBWSWt8NMmkQF7pMcd78O/xgehfZjeSKT+pwQCkmLiM\nXz79R6UMoVziFl6OKtNU8PHdYejKlSi9LwC1M3pAv7k5RWbAbRmnA2C8Yqjl\nLK/RLM6f/ELTZwPz5KAcq8RhT9zYDlb7aT8vB+3h4/LXO0mE39onQip9GsPK\n78NEcxSxyQ6vTiy7W70haKAZpM2EOvi/yRsKCk/Ve5J4HNp0qN84C+D34OyK\nulnC\r\n=jsnt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOlA1XCwjY029Jb4kjKB/14GS3zNO96vC1Ly+jrhPISAIgETQsgAGdnef7HFItBQR3YGQn/WPrkYiSRlOEikhEmK4="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-alpha11_1589571692110_0.22803099687009465"},"_hasShrinkwrap":false},"0.1.0-alpha12":{"name":"style-composer","version":"0.1.0-alpha12","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","react-native-web":"0.11.7"},"gitHead":"632b82e804efa420017b47ad87d7a6b2d0aa5cdf","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-alpha12","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-XEIjO59m0bJGkjUlZ37LplLrcBYVP1Nd0FKd0GMnVuXwMjA/GqqOrdQcKR1dGTvU/Y7ltcvkqsiINSeHVWh7YQ==","shasum":"b72aeabd248571d979f651e93fde9b33b814f370","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-alpha12.tgz","fileCount":119,"unpackedSize":124625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevvDtCRA9TVsSAnZWagAAJxsQAJDtIMiwB+eDno2ddnOo\nLw3/k2I6jYyu4XlBCXRDtmhpIgqsoYOaPoBs4IhbG7jDbwKPTqkheqd8hqZk\n+9d5KpH47Vt4Pg82JMqabfE62NQhkQp9ESkEGhJ/t4bclkpA4ceZ+q3MRwfS\nM3ZNhDFmnRwEODsilbXftuoAl9AuTDQPV66jgiNkYZsZQu8SPn8Tlux9RCyh\nQchgRsBrEvfISd2Qk6sU1DMsl45MfqSo51au3o8OIp+SROVWRBcOFx/M1+4s\nKD0QKpSusW8plWXwldagasbfeVnCFmYb0OWvE3/Ou8uez+npbrsrSlbrnB9h\nhlgsWwRU6/jXmMjMj15uL/t737T9HkbhmwNCvK0fdWKhkc7F0h0Cps0e223S\nRxeIbol2W8ZSuXS53JyYzjXxQYsaAADD9UnhsuZLX7LMxPo80MKLFpzBaynn\nye0e9RQ/YMAE3ilkNR1IqQDAbfWEfMp3rDK+fxUf0gkEWqimG31ODCotkmWV\n5LSbgrKDfUfyXgcjOnqLkYYeffpx3h3147VBZC7xvNwT7YUtX7o8edxWBtoR\n5BBhEiAeB7KATlepCFmqLazzs8rsD0/21qXXBSjM713ZaZqM4ua+K1F5NcqV\n9xFBvpSzYseyQzKWBhb2jvGJxcuZPtFQ0DkTncR0zw4Q11rsA+ZbpypFtPJV\nT2we\r\n=dVsI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHUayy22/yr3ZrGAr6tZVZ8LJGqAiQ5U29zWK9OBEZ1zAiEA4ilxMLl6GnZOWuVr7ruK9JPYebIkfFcM6NfcAJbg5Dg="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-alpha12_1589571821367_0.48139869975489824"},"_hasShrinkwrap":false},"0.1.0-alpha13":{"name":"style-composer","version":"0.1.0-alpha13","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","react-native-web":"0.11.7"},"gitHead":"632b82e804efa420017b47ad87d7a6b2d0aa5cdf","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-alpha13","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-8eT9cdJiJVBoe4fP8B1cPNZZ2rj1m0li8LhFM7I7pznGqmJ6cQSDbA+GtMofbkmrZ5uGGh4qnVHxKFyrVaV2Pg==","shasum":"78e9210dfe18fb6b982f2ea215a97aada598698a","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-alpha13.tgz","fileCount":123,"unpackedSize":126529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewRagCRA9TVsSAnZWagAAEKMP/A50MGYvCDM0kV55XyUH\nxjo0orqa+SOyT/JR/9TIhd72a02sul6nD8d3l79VOnprofP6sSYh9Nahf/4L\nj/XcYDb5P63+8vB+s2bKtGYXBzsn/ibh9qPGRz6J2Pp7GxKaF1AtVxmr3oK8\n+fuKyG2ZInhn37unTsEjjIDlIzZeoJi4/3dWyoBLb+WqNbVcAsMBaIHzKtnD\ndBJ2rZwyhzUH/OpUNppmdgPND0gn6RXCG/vntdAfTNUV7i3v0HV+MWX8Hr3J\nn5fRsAxQ8cNtk7mCPAp83Ybr3Wd+vJQ1jpoy975oFYbW/NEdGMgWndxWlIMA\n2ussxMVSvD/TjbgmvZx8HTmo877t3OmdeqK936dcVYB0oSaPHK0hZymHuH5n\nES8JdZoep0EneQFaRDYSU23iMIYtMu+er/lQh6MRTizo9SdO6f9vAyrecKiO\naMwb4sP9qXXuykzeulfdUYl64R7rgvmMknDyf9inlV4HZfXurrdiab7NMMC4\nQILNzxQW0DAOTCeWESQoZC5sdqsAPc1+xt/S0Gy28xXMjk1W1fQi/7Qj18/M\n9yUyEI5t7nYr74sRmSMqwMKj26oECVvOYTsMf9LnmjuOh9tS9RYYX7E/395e\nBdSIgNApYxQ5Sq7dMxRmFypHlMjt3xDxH6aCMShltxqCaQ7NwWByRzMgpYF0\nMbIX\r\n=pbYF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEGQ4t4Tc5jUMif45t0GH4vv14XtT8BNxkAvIO0ebENeAiAVM6G10nc05yHldKjhZvCX+vSYWSl/6b2B8CglwHk60w=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-alpha13_1589712543476_0.8620141159366526"},"_hasShrinkwrap":false},"0.1.0-alpha14":{"name":"style-composer","version":"0.1.0-alpha14","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","react-native-web":"0.11.7"},"gitHead":"632b82e804efa420017b47ad87d7a6b2d0aa5cdf","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-alpha14","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-yALZkAJAjG6pXgxTM71A3A4e+RDxVEPsmrOCvCpm+t8CPg8j7VxkVV0r8mXPAjJZNpBlY+dSCSlaaJLRs/7jZw==","shasum":"663e42760ebb3503aba2a22fd68c7d3652b885c6","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-alpha14.tgz","fileCount":123,"unpackedSize":126843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewRdACRA9TVsSAnZWagAAcSAQAJbr6nYCXDPhyBT+y/cE\nWCrps7N38UHAMmz6LH6jEcJvsX0cRLT0VYqB5B5/981NenXgQ5mw2Ms+A2FS\njwX3KwXiAT9Dvfo4ZeUUMb6+AFL+q11TjLjGLeBpv9FNPENVDlmvUKMjDvQI\nHGHKVF4LPhdpdOT0+k5msWidEjjoRW4felwpMqjY4lmFpzr9GZDmyV8MphY4\nOEKuYSzIpERZRVHF9Y6OSmhOARHRdCbm7HajqDeFnB8dF1p+bQ6ftNbvsaMh\n1Cv8mqekc+uROlfPtbRfEPWHzgeDkdMjvxxhCJjs5QC4I20Z4+8Jg5kobyTu\nU8RgyT3eOjtSWe+7UoFBhgodcRF//tcahWT4xlOK7VkGVHJhd9VyhzW+rhhw\nEDKoZFKRw4n29L6VbWRMHxkUXmVDRx0gVxELl7PmtPFjIjR5JTTmffSkvXNb\nIep1fpw1av28krARtL+NYaq1KQoSZP8auohAZCUvFKvGAZ6fjTxR+7tvNtJ3\nCKi1XgTfs5fnr6sa3DVLzg/AZ6/ZIAbzpX/1f0t/rmvP6A0PDN1IEBE0dmvL\nK5EB8uM/89VMU0phOWMrdXuRTflPxRO+DkCTWFlfYnXS5Pwyin03u0nUlsum\nZps/aM5aaUQhCIeeJqD2TevcNON2EJP/dBXcvdKwwBzGhZKlVQq6+GT38vJL\nrt57\r\n=5ck1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+y9DAkJO5o1EVAvnhBooLnbudHS2Z/4ZdlMm8gOW5vQIgft3FEql7Ut/YX+j8oLBwo/5QRWthISwH6UehUOw3aFI="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-alpha14_1589712703894_0.97798857937041"},"_hasShrinkwrap":false},"0.1.0-alpha15":{"name":"style-composer","version":"0.1.0-alpha15","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","react-native-web":"0.11.7"},"gitHead":"632b82e804efa420017b47ad87d7a6b2d0aa5cdf","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-alpha15","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-CNwu47g5YB1CfAC3yNSYunj3VkOpvqe8QgiboWIUozHNa9oUjzpy0eQOnSKLif54Q0LWSMSO/yLB5Hcq5dq3Ww==","shasum":"2a15bf4ed035c5dd83287bc1e97cf9e7b557890b","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-alpha15.tgz","fileCount":123,"unpackedSize":126853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewRe1CRA9TVsSAnZWagAATNkP/jDkIzuo+ieWLsKJlK/2\nbTfQEV8nq1OnbP6TVDTlwYSJ+3vEGmrGrYuFsEbnQcVZHwB06QuoEffuILaL\ncPM/ZbL1kV4e1886C6XLK/xf5wuc5elaPjc83KM5YShe45dzHln2/7ENyV09\nT/7b5QK6gIuDP90G8K4c7R9oKucBviLYSLGnf0OPpjLgqqLQssEmZoPDPKLd\nXTu6RObWU7vXzm8Rn9nLW5l0Dn4J9DDBtsqGbj8j2Ds5tO0tcplFWfFnXS/3\nzFv6EWWHRkniKy+HCzUyzmqqebU/vXwrKsAA6h6sgRk0R97hX52fvVufGUAD\n2Bv6lCCi9kXcXX/Vm9p//vMLBQKOUXsiamsAuJ8lD79Y2UnNa0hHeBbr2/QD\npeY/LlFqc/FNjLzSb3R4Jhov7Gr96GxzsfMrdugRSTeYXUWp7x8neh4+DwhB\nhlqwnUC2kQUqO3w5/vUU/VVbf/KOWD0PtHP7mB4bSmbS/sXKExEuHkO7bjql\npZjZ4UvNZQKlvw0rLHMCvaeHVUhkuFfqH0uF94ppliowMyjxC48u/9Wz9aLj\nFbzsE8UhkcRtRgvqzLvsRtzEiYpJ8eRiEu7n5sf85EfsUriMwwHuI0huwZ7b\nF9oCCC9HTrfaIUmCe22Hchud5GbArkbiTU4vbx52xVMt/ziK0vTzoQc+n11F\nLtZL\r\n=g1YO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCD9s5qv5ldRh8sFlhhJQBtv9gsgTt4gRDb9Berr+HEFwIhAL4QOcwnn7fWM/9lX7t1A9GsO5KvN44u6sONLHaEOgO5"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-alpha15_1589712820667_0.36044526323091874"},"_hasShrinkwrap":false},"0.1.0-alpha16":{"name":"style-composer","version":"0.1.0-alpha16","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","react-native-web":"0.11.7"},"gitHead":"f3486a8cb0aeb28a0dc4efae92d75537f4f951d1","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-alpha16","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-tGp/FLGPi3jTTqdegz4XabHK0QMuYUbsUMLw9qXF97aeVj/v5/sXWHU/HRei1k0ADx23BCx+QS113/ZNazms1w==","shasum":"5effb5013fadffa9cc793cec460886bd1659f170","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-alpha16.tgz","fileCount":123,"unpackedSize":130090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewUGYCRA9TVsSAnZWagAAJ2sP/RM4WHcEK8044ljixLzm\n4TBVvHs/P6V71C9bQtnVgDVwlQX114gN0Qg4Rx+VvQEzuYtOoJ6vPQBjI7Tn\npo9VUq9LciOKFMniu7e8t0MkYT1/pbp24tUZupzNWYb4itJqYBiaFDCkvLvt\nlf8SQwEva9c9vs5bnR0c54xHTq/4dfLpa4vM3kLlpUm9xcLmtpCOiwR0SIoZ\nKNxNpQgaB9JQOpn4BM3Qp/fCTpLD8ViTERf6vWfe763V2dUNzaSS2SKsaRxS\nV4zumrS3LfKjC0udDguWOoTh60misovNlTu+IdfONGPkSSLB8snP4zZ6S14P\n7nuX7qIcpCnzgELYprRU8vlH5hHZD1HUqPsnmuAiowt3HkY2fgvHLEq0M0ug\nofDP+6CtpUUTj+bBJ4sL8B9TY5XDfiBkvm3bs60Ws/Y5G2We52vA0CbUugEU\nyDefT00QKHV+aUd2kF1TiMndovo0UJyUZBIBAsZhFxwpInaSRKDIg/489lvx\njHHahJe5TMjAHZRRFx/YIb4fRgZzFRMoYO99VqRLE6O9bHT0FjrQhb3zd8UL\n62F8iNOhmafvXW76+pU+Mkr//B+IIQRwiLyS5gZCHjcxvxKinRsniRmBww98\nV0rT09aaRYGj8XDbIH17uzkkyn/rKatRbEC3ttPVsnva5SByeVyd2OK/ScZO\nycUP\r\n=u5tG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHBG4JdxU4bou6pJT5uw22yYGuhk1HTflHIg+MghNyEgAiEA65goC4t3eqznbsbTy7fwe3KMCifU7NzJgb0ozvy6Xrk="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-alpha16_1589723544231_0.226661535168027"},"_hasShrinkwrap":false},"0.1.0-alpha17":{"name":"style-composer","version":"0.1.0-alpha17","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","react-native-web":"0.11.7"},"gitHead":"2bc684e79894cebdec25e6f116dad7a4b54e82c5","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-alpha17","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-QHrErbF+YxBVpl0KKvn3dPbPpemktAGmu5b1NQu7o7Pe9Sm+xC+BlPXxIKnLSUoOgno228JnR2t2oqyi4X1a5A==","shasum":"660172f942f5d8ef5d6b5e4e1e5dd0b8e021d350","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-alpha17.tgz","fileCount":159,"unpackedSize":164131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewjMGCRA9TVsSAnZWagAAxJsP/RsLsitn3rp5ohllbp4O\ng78kfIaxDT5MhckgSTDSyk6WtXFg9l1Zpx04w0Vn9IiZHhh3tsLxTSpFfTJz\ncb9j50Cf6/LaJUgAo1fRUuhuNIq09IzuAdBrqRd93Bb34HBciDojpEpNFLEu\nRzOsTBqC6SabLUffHSD0sj86OiH5PogJpnkyLORPFpr/ziuYpe/vc6bs0yhT\nu8rrdoZyroWwnCa0uYrXMdvPs7UY229Mj1fu/M7IsPKtEJTKEJOniYXoa27a\nJFhjxpS9/vN8M7s/2F0W6boPYxPNEb4sn9cbWcjcqqa2qlfO0VFOezuHm54Z\nVmAaqpHUFofkgudykYEsOzS+pIHSXPDqZtyQFB939yDlotWYYwgl9cx5sDGX\nm1p2KzjWG/IFoFjUbqDmn480BzjMcTfKrO9HJVQ6Wre3Tcgro7gpxs22myiP\nRvL/SDFmdq5fAVHI2dUdPEWCbAzN351H7NSBTFu6v4oCdudOOfuVn6J2pHOg\nAlLjDOqit1iRiSy8/kG8UxoX2ri53C8DtR+aXtlRYCyoWdmDgaKzMISeRR1X\nLodeoCHEKbSHOLb4aEzDQG26O/zyUiM6JT85J6WELs33OafqkzZETOHaZQlg\nm+v0FWlR0+/aV0xdErGxT4XRYhaIBfR0CAvOGBPtSNOwYb2PjHPVh19mjKp9\n8dK6\r\n=L8r7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7x9tjS8UFX7pGqOXcN2tGBfp+DnpJjmQeP1lepjggyAIhAKPI9ughEXNtICselMw6HBX1ipDuKuiNHsMcqTy3kfac"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-alpha17_1589785349620_0.44671275895672813"},"_hasShrinkwrap":false},"0.1.0-alpha18":{"name":"style-composer","version":"0.1.0-alpha18","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","react-native-web":"0.11.7"},"gitHead":"902fce45711951a37d572777d49c979c9672eb12","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-alpha18","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-qim7ebLQicRKawTnQlwgGIYS4yjiyzZRHUDU2U/r92a/zSHlW9hSso6nGvlI+Eju/2xuqU5AFfQpLF3QR3Xljg==","shasum":"53f7676b48af1e4790a92c0ae2b50ba47bfa0a76","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-alpha18.tgz","fileCount":159,"unpackedSize":164267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewjQ/CRA9TVsSAnZWagAAyBAP/j6micu/vUCJstLJWcsg\ni/6qCQVdlmZuTT3Y8m6qNo2S0rlB4G/UFqpGjwlxRg/1IRMHeiEZqCON9oNr\nz+Rk5Bly4ceMr9CsqAg1UKVCe0xNSREdVhguk2hsNJpxMCb4paMvrg2xcbLo\nVAFJuX0Vp3nhY6l/hjJu5p+FyNx73FENpUa76qZwaXugMbLBYYCZutM9gunk\nM+qcE7QnEqRiRa7THeIDZvYwdDBfKh6duWEXdRYc305/F68tM6QrFosBgYF8\nH56qb0CQ1zQfoGxCVAMdS4R7JkU9Xkp4+0/0rFeyWohcudM9CB5XjNXgyDzh\n0JaiA3Fi1STJvRXApa6NbH4WZzJTyB8aWs9ZIRPF37UFg3XnyBtUhdJ1fQbR\ndv/u2RGgP3vHxsFtlRwRl8nkHV6r9cvGlC1PHcIaRH01MulloZXkvFACSQO1\nqhQr/SBylwJbyvaexEiKHzAEu0p3brC9YA0/WwHa2u3dlDuvEjfTDmg32Nuh\n+tSKmojn7F7Xy4EcUGrfb/9G+MqaQG1tVPKGz7WhYs3E8gwrIbg4DoygX60S\nH0/hN0A+jCVZWzD9uHus4z505g7iFx+jQLVkOT2II3WKrjtQa1j389/Djo4r\nZDbPG2ToW65ZDMkmk6dQB5br355VEj0JQK11vG/bf+Hj3PiQXv/Oqe8OPuEp\nJoUG\r\n=3bbl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBIFSmc23p0Yo47K+R1iU36g23B57se3x53nsnOXx1GmAiBVoRo+Gc4V3uLr3GzA113LSeNJJoOvjzByEegKSVaZJA=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-alpha18_1589785662989_0.7489302998258829"},"_hasShrinkwrap":false},"0.1.0-beta1":{"name":"style-composer","version":"0.1.0-beta1","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","react-native-web":"0.11.7"},"gitHead":"17ab7ab3015cef366713689b84d347b0ab1a3318","description":"Universal cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-beta1","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-U7ndFh/4ubdZJ4lgyg7/yRNtwS+5vVc4Jp/iw3ramDD8jBafqE+LltPvHE2XnAD0use7aInlnYtYG5ynmgodtA==","shasum":"52c9cece61c6e29c98f59b734a2548dc631c612a","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-beta1.tgz","fileCount":163,"unpackedSize":167384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewnRWCRA9TVsSAnZWagAAoawQAISJbgPCILr5Ys/5a3en\nwDqqrvRjGAUguVL16ian5qYO9vZvGN5GDdPECAM/YS/iEf3zoAJylL5nBWFu\nhDGdUXha84jetYHOy/O6v1SCuLQKhhFrcxSuEPqUQF/vAc6b8bYrQowFkhcq\n9y59o1celgf/D1kCZwPFfNUDqf8DzJLJlT/pyNJG4mLAfxJ5MFxtMLLukjjN\n9sGBWFgUxQ+38qDqYNLzF74sc0H1Zhg90r+NGhrOEbNVCjcP/y5vfBq5q6kD\nx7Dt9Ug8jkdiYp5tQ4KcYTVoT0SnoCCa5QJtTGq4SMFruGPewSgucCe8lheQ\n4pvDYv14kh6guIeklE2xhUl7uz4H0nD/g07pOLmVfyjX4PJjO1tAVjUYwxgR\nTGS+yGmU9S690Iptbh60HHr4LbUIc7jWbXcJXhrSM8WZNpDuILNvcYCqDUyJ\ngIEGgslohTe0s9tTNm/USLIg4QnkrpO+CwQNIsBM64uSg1OF09ZWtutRW+2I\neVNwjQotEnmOGLOHfQip3ymfOQH9nQtXt/Nz4HcNT/hNk2FZcdQh+Q/ijtnP\nIqlnRxTLm/p49MjW1WbK+7MGMX/wfLQx41SeEtyc6UiC5Y/gp/OCq4FG0BKa\nspE9WGdIIYoUTapco/gX58Pw8KD3QZy6tTF2M7EArWu/Pl+XJG1PRza9gGmA\nF0uv\r\n=vOgZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFPc2G2qmmXUkbmPtkU90wFfmqIzJ1VuISHUGmnZI4XjAiAiBF4tzOKF+jdlf0i2+FyjivQCyoDADwp24ISxU2RwaQ=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-beta1_1589802069768_0.25575501140012924"},"_hasShrinkwrap":false},"0.1.0-beta2":{"name":"style-composer","version":"0.1.0-beta2","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward cross platform styling for React Native and the web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Descending styles\n- Theming\n- Native & web support\n- Media queries\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n})).build();\n```\n\nWe can now use this style with the following snippet which automatically descend the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n})).build();\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    })).build();\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n","readmeFilename":"README.md","gitHead":"55a66fd824156b6ea622ddc824bdb0d5ed1561b3","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-beta2","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-pjBJdpqbWUFFj+pz8Xz9AiMadkKiPYWbv3XAICOXAQGBbXgPJRJ4M8pAAWjtWsrlppT7kR4s3o3tuiIr7MZSdw==","shasum":"781d802977d6490d9d6cdb627ee780eb97edd60a","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-beta2.tgz","fileCount":175,"unpackedSize":176525,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexWbNCRA9TVsSAnZWagAAb34QAKTUvA4gQLNQF8V1kMSh\ncL2SPPeQqyeOkkD/xt/LkMNov/zkwXEIivdJJA2o40H8eaxBW8unp114UKtK\nqGtMDtvyklRHO0h+zgBg1y4bH7TKH6qgLN8T0qvuutr9ODEBUN0RxcKSIIvG\nbwODD9GCmSpOoqV32FOwb/+wwT9u6k5hWmgPZ2LVVITZ932lJkHTpauTURiK\nQkTU2W5plU8FYxqM+y+jaJl/l2IYF2+PonW1dulHJeOTZrFUFheDd0DxVsuq\n9tWKRt5XkxuLacIIUldKqkjAtC3xdvZX++NKg9fIeTxKrS1Rd3hzt2ntvhxs\nJsML5Ue8ZGLGKktaG0KXB+Eq+fjpiHCYEK3dxw2Y6E/jdxgbvuJqfHJc7LCI\nxSgXUPxseAUIj/evNWy8DtPRGY3NbmU5C8mdAC6pXGrhL4RSjszpiOl9xtFf\nwmw8cNwDnpG3CgJBGwKM9f1fhrzfBvej0kCxFfcadHzBDLL2qldxjpBNDvOZ\ndyWrhrPTYzv3CpvxZxqinBoy/TBRDvE8L5c6MK5K9el53b8VczJHwzVkpbVJ\n+CZXjUdzEuEkssFecp8s73LOF9Qxek2VU7SzLUb3IX98uZw9TOpNnDj5p3k7\nQbsbSW/WEQyKjQu35qKPBMCBAdPl7Gobe6Km4TkS9DEpMydjZf1vz+bQxY9a\nDHKm\r\n=vMuJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG8Tb67eB+qiZuPOZrIGw+9LOjAQzsOn6HEc6TvHCXOaAiEAzXEwp18eWrX6+rnn7hOx6HzmMzyJV4FmdcjEecXCZ1A="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-beta2_1589995213052_0.8769281585148647"},"_hasShrinkwrap":false},"0.1.0-beta3":{"name":"style-composer","version":"0.1.0-beta3","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward cross platform styling for React Native and the web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Descending styles\n- Theming\n- Native & web support\n- Media queries\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n})).build();\n```\n\nWe can now use this style with the following snippet which automatically descend the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n})).build();\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    })).build();\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n","readmeFilename":"README.md","gitHead":"55a66fd824156b6ea622ddc824bdb0d5ed1561b3","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-beta3","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-GW2a4tKatONov+4g0mqTM9sADnf4l4R0PdBeNYSaxfUugSFMkrZQQ2Nz9oXvyJXRPpx2yLogPwV5hRFAZTcnGA==","shasum":"b2adb94c4a78e6aca5d4bb3afcc17fd20f5d438c","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-beta3.tgz","fileCount":175,"unpackedSize":178189,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexWndCRA9TVsSAnZWagAAyMsQAIXFTlkynQgt9W//UKYS\ndBon/3/Ib34e0ghExhoBD9CPkc4ovN0sqeNThNQrBu4/Zet4dZwCXc2D24/Y\nn987q4deCcU38sQu7hCnjKRwy1JgNup5HPs69HPH0CjY6pdE98C3ay7752WW\nVd5DjARF4c6G09giIq29tqOJ06+YspGAyug651w91W9qrkF7nYSV1wJmrnet\nswfMwOOQLmCDy/glTHXJFE9knlo4c+3K2vjhNBwfUSKEKUTmOUFqiGdGDn7k\n+I6JdnVhhUtuV+EfC7wmrpJ5SLrwpxchbFYhq9f8e1Y0k06QXrrolAkQUyBg\nTGFi429xSgNSiiJshfw98pT+5ESDtYwlA6WkOEHbQVTKC+9l5n1ZkkHCdKEZ\nAUt+0FwzGAgnvV0UNiQE0bIo5l5pGVZnexB3uJ3Z6OHcxCtx3rnQiFX1gBuW\nPMJVSp4iCf2+iSxvoXDOs7qA9WnLrxhjGgrThRHoTDU7mYwHpkbBuHkKJBMX\njgq4yo0efMaFNDdzS0aB61rFRpHjylrnytxqobbuRjSEIgGvU4zgl0sMFg3A\nkwcJrFzWNPOo5+O/+erqIYnNZyQJo6i2wTKqBtKfusMH816TSbwLor9QxKvA\njQZLnA2QiWcxVPXtghguNey/oXMZ49UxaZpWA+QYGPwxNTYQTPthokFNp88/\ndAbY\r\n=tJnB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDaY+OOBKlNVRNwiPt2KUImSNaTme7hEi4XnGnukIpB4AiEA434nGqWl/k88mEuywP1A+dvk5APNktKvVYrP3VpkTjs="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-beta3_1589995997010_0.18456943966906425"},"_hasShrinkwrap":false},"0.1.0-beta4":{"name":"style-composer","version":"0.1.0-beta4","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward cross platform styling for React Native and the web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Descending styles\n- Theming\n- Native & web support\n- Media queries\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n})).build();\n```\n\nWe can now use this style with the following snippet which automatically descend the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n})).build();\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    })).build();\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n","readmeFilename":"README.md","gitHead":"0ae548e0cbaf30e2c90624aa755d97f707391bee","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-beta4","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-8p4lDSsA4YZ1r0AW13uzE/yt7NaisfUHnJF+KpNet6CyhYJm16qYyjgigBFwljZhlpM67Sd2VKftvtRwZj639Q==","shasum":"f57542be8bc612155a9bcae0167b2b004afde134","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-beta4.tgz","fileCount":183,"unpackedSize":191227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexXdKCRA9TVsSAnZWagAA9u8QAKRaT0s+ZPYDPVizy+ML\n4OlPem/3qRxMXWX+RCGXXGSgAzZiCp0UfXVDjPe1mltL3Q7l8qoANkbE3ffa\n4ltHByC86xbSfQwdqtQAd3UMEJ7w16R1xB27Das5aRxioXcD7NKvc3lKPk73\nFxqFW168S1kk95sH+EFC0M+CAMgX4IdOZ/56IR2qjGjvJnxE1p0wonEAsCcn\nbREvPZ7j8Q65pX1kIKqIE3xLUWzgiqxtYAJKJ3cXOYlWDTa0+Nv9NR/IuXPU\nhVaC0tpZHhT3fTCQnbE92u8tb+zUG75fRWAKA3KVYAvEuLCnDRVHuIYLGfww\nmXaCT+0JsCb0DVelgsol2LX5waJ8mUO09I28j3YVrqkXyPeriit/94iTlkgj\ny9PBJzU+CiTLxc/N8Fl6igysLj98MKnizL9tbQ83uvbETIaZDHxj/OpSAXhZ\nlXYQtEUF27zMZgUlxRXfBR6Z6n6OBSQd0bt267jM0k4phlD4rQFMIMUI5SVL\nD8n4RnsDnsL+2iZvr8hE61DH80149O0yOkqDACh9LGX2RI7Y8hw2WxQGc9mY\npXnWDnrXBjWOBAg+jXmVVbxKbTKe2uZiqHZk8l/W8Rt7bnmTkqaJtj1g+yfA\nYdLseRjdGNqa3OnJoL30M0IZl7r3/ps5mJFHILD9DuHlUBHJ7Vi8s8ODFGn/\nU/rB\r\n=7MEC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXVFwAcaBA5P69PvrLDABikCkVVUWjMyNy2ise3rIoTQIhAL8/tzEC/fbnznZwRlrpuEtm2R4Pv/42L69yCSFlLToj"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-beta4_1589999434029_0.48841200490270853"},"_hasShrinkwrap":false},"0.1.0-beta5":{"name":"style-composer","version":"0.1.0-beta5","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward cross platform styling for React Native and the web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Descending styles\n- Theming\n- Native & web support\n- Media queries\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n})).build();\n```\n\nWe can now use this style with the following snippet which automatically descend the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n})).build();\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    })).build();\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n","readmeFilename":"README.md","gitHead":"0ae548e0cbaf30e2c90624aa755d97f707391bee","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-beta5","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-PYgE9/P3PCuNoSjiRBQRXVt8O+RTEDid/WdkVy+Fz2QQZyM0tAYUKelvWZ22AIpiRHpuHQAXspyO2n0sNgUafg==","shasum":"dca049aa011a2d34f9db6f6ac424ec4895b1fb0c","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-beta5.tgz","fileCount":183,"unpackedSize":196394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexanMCRA9TVsSAnZWagAAeQYQAJU8CjxlFlbqfNLp2Yay\n/+YavafuiC5CBLi6+Yg6E9JOu5cdkXpe1kvHNeRS/9VJAqbG65KGDWrotuqV\nKnRUYPGLPw8ywMeZD7aFznN3Byx01mhhP9ig0EG8ZphgkJ8KL69j0HhxL2te\niGcmX1cnLsnCIcFtSBS2EYBeK/igSqXr1QZA8BSHa79xmkF6ednO0qVDcZ21\ng3NZ4/+05/A+XOf6exf50vILyVgdhFlRRNryueDXN377WOW2eeEtvH8z7iXn\nGbdvVFiMZjvoN/rwKCEpqzQRsfygKOYOMmq34yX2Od230301PLjikOIsUihy\nW5ck+89FVC+jKJEnC4CaGAMmAkD8kJfhU5WARlC6bB3t4tQiGnfkJ4gtWa6N\ngtHcJT630rlKuVq7X4ZUWLZLXPAIt6ojzrqwGZoFE2zspwFwYEkkynqHzKsP\n6p4kc2GLuTNMjQaZjqXsMMDaV7XMrkar/elZ7TKePnl7Bj0boor3+62IhLA8\nADEVgPvfR+ChMYNLm1OX7Y1lUbu2pqMcy8uu27xMrORzBmO6M1dUVLSUrsq3\nNtxkMPjH1gkW+cDHK3R4xycoM3JUpPQYttytxrVCHsUd5E2xqjxKKkNDHJMK\nyh/ym9Wlshy/M0S3odojGgulYDM+ZazC/NppMKsj7YLoL0GT/VcGxVSqpDE3\nQzbH\r\n=1doA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDuusSlts6aOBUHun+D1G5d0nv/q847tZwb4VPt5jlhjAiEA1uU5cxmMLO38RgWC2kW+yWMa1vJu821zE35Z1QIS8v0="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-beta5_1590012363521_0.3990367066780063"},"_hasShrinkwrap":false},"0.1.0-beta6":{"name":"style-composer","version":"0.1.0-beta6","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"3126429dcc498daed878ffb836245dda1d4d1027","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-beta6","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Q8u3Tis23ehvYq6PGSoKxBdY6F0CBhdYWr4ZF0Hu59mV0ZWTLHsEOYpWvsCkJm2TtdWDPz0bCaD6YSk3iV+m7g==","shasum":"1f288c445ea2289ff4af987cee5452e4d550faa8","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-beta6.tgz","fileCount":107,"unpackedSize":136190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJey8xKCRA9TVsSAnZWagAAMXEP/1Ia71isktpOyjX4XMQ7\neWpBiOwxqMndiNISUQIxx7ip+zX861s7m/iB5rPCnwJU981XXY2Eh6K8xdPc\nChnZrAB4Upq+POKs+NZyLl6AbbDybjqVBwzAE+g+QCroQenoE7JmGk4QIXV5\nrWnJp4m4+OxPDsjMD2ObUAYFAfLqKvKRz9k5Pv2U6DAB/Uve+VccJ58sv2Cv\noe6r66wZMxbP28LLhe/o4CPt1kldo2S9h4FYVrv1D8hVzONecWBsWGQd3B3Z\nRopBTqCimBBB/uqXopl1VXr4z7xdKaF3POjso1aOzjCTKwgjqIZR/CHQrsDu\nUYsY5LUWvnhu0umKJmcKHdvLkUxGxzm4+wdjFhBD/ICfD27B1f8Xgy6PZDbF\n38e7JQQzcn/M+jMnG4DKTwXBwdLO4bIUVmLRwPff2r9rXvOmlcBXEyRgRXDU\nY5h2N+1NPgpad7gyqD0mAMDUre+/fLFWGaEqkBSv2PIJnMyLO3t8SaHGSgdL\nRX+k/Zk77GHM9zbrHsc0GaPq/Kxz9SRiSJzRlqL62cfA2N/7fFiOmncC8AvZ\ntPNe4and0yrI3/EQMFYPE1ZdsgJXY7/1tZMzFpyEGFDnlukCUE3gY3dhqY55\n7BzViSNMtPueYrzeGVVSN2rhoh36EYgdszgFJslBKwI8v6yPA4G7gwsMt+PA\nrKwm\r\n=keat\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIHB5LyW3Efg0z6RIB7X6ZYs26L2dqzAvA5N2yUPaFagIgUq8l3l2TOmQ2QzIMM5X66WEQ40BjvItcmwdiBznD6yU="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-beta6_1590414410249_0.27595658924224553"},"_hasShrinkwrap":false},"0.1.0-beta8":{"name":"style-composer","version":"0.1.0-beta8","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"3126429dcc498daed878ffb836245dda1d4d1027","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-beta8","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-OZnwf14aJynLrpnR8CYHa2JGmDTBdf+uNWNAFYgisOcxa1D/eYBSOZiVnO+UHRttOSvsLFT3ULZJYtMUMllvFw==","shasum":"85b2726688ceb1b46734a47545120bee4b9b9240","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-beta8.tgz","fileCount":107,"unpackedSize":141757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezA50CRA9TVsSAnZWagAAi60P/ji5mkFSgyTXsuNxdk1i\nWGABx881D+4cwDNb+vSJ0QFhHCmFcW9Tu+wl4sFjDTZ9YyFnGGsMFAQ/cdRI\n2XBI1jbB34qGSnuGNRebZAwcMjS2XbrCFVDYRIcQPStr0MtRlw4CV5zuN6LT\nccYozjTWYNiQdkGoPcoHmV9ZjerFErHybUzIThwJ1TAd5tcudNuDA9/fnal9\nuazdDvp0HV8POXTrDPU709XSMdP7LcvGQ8XESdR5Z64HhfEyjB1WoGnjjxdE\nmUKU8AcDo3wx9RiE4F2tntttWzQDUqM4l/MdwoKn3GELHUYRhU/PQiHO6jNS\ncsZd1o8VGbq/7pTWY+DfKL3xJ7IIRLcXqDqT+kDf3hf+jc3CTdpsWEAHRsY/\nP+npncX9Hpwb9Vw8Bci3Q/ej1t1SN1MZXFC840l7E9MztnrZXx/WYVJdT/oa\nD31bH5rb1v5jAHCI7WZ6sYMluHGXZcKsKi5eo+jlkp7kCskma2zR1xlduG0b\nqwk+wxnfJI2RoPsxt9Kb+Pk7eJafyrRVMDQZzjRKG6MZ2jvmwt9yDRUJJzIg\nuTDJSDRko7+on7CzFIBBoIOUowMRUfyTJ8poHfEqg21xrQL+RaeoZP41MLEU\npdHUE4MaFJnoxmP6yDE6HRBJ1xKEuMlg6ZJ7FjNtuDsBzzamztImovyZDcJ/\nu3zY\r\n=lgjZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCv8jiBALCwx+FzPnw0DLgYwdqq32SghB6oblP5Go4Y+AIga1Mtmlt9clp6yUmL/TGY+hMLMcDYvamo1z1QaflrfWI="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-beta8_1590431348316_0.25003367867374715"},"_hasShrinkwrap":false},"0.1.0-beta9":{"name":"style-composer","version":"0.1.0-beta9","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"3126429dcc498daed878ffb836245dda1d4d1027","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-beta9","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-gJVBEhJ3+ecIeNFjwAxbhqDtQ/hnxqpovIE8bWp2mp8ufa8Pu4/LRyyKtrCupDN6aec07Q6ZVIDqY+oUKyfvjQ==","shasum":"935ab024e7c53650d5889432d36a2f302d229eb4","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-beta9.tgz","fileCount":107,"unpackedSize":141789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezBD2CRA9TVsSAnZWagAAmz4P/3Yq70u9pTDdr/U22+Ef\nfBeDdfCkxBWQdsk4JLcuMHs/MLVtxqsEJfA4kd9O69fxgCiqYzQlV7z5cqYB\nw504tMBsS47aWzSpaxBy1BIwkcdMXBig1x/12kpawKbhLMgMKj0p5FE+JZ8j\n7TXow7Akxie1YMk52GJyeXWCUJjsTOov/fn9ofxhsh790oJ3GkvZuraHXpIO\nVQZZqAFcLQgq6PpSPJ4gxvAiwVblVEquT7oI9s229zGG50FVvAaGE6Orh1T9\njAW2odtKOJtBMIFQG7n3UmCuFOXTZsQz2CyIsqr4w7JMUb31/8tYY200IJus\nfOV4pBT47hGpoS8/vxhjeJbyKMVcLa3GIXj7uEDqYVemE+mNsSecjfO4AqbF\n+E+o1eFU82jvHUXhbgzFpMnvvlQ6FBolrPnJFHpGsMQwN2VcAFdwop/DzC/3\ntp0+hkzncdrs2fdW/rcP1RgY6JaAR6De09BxGq1s9L6yu7ksr8K1h1t8fKP0\nNsRToC8mHGu520U7Nf0ZZgMePE0gMrDMtGCj5HlLHZl+KFKLwfhGSETAt3FO\nefJPcFBQo9ylahaPMUcd7312aQ9ZkWemRmuAA8HEfzIRlGFJ7Z4JHBmZPXi1\nZ6s5cKFUKsyULKD67YmozAiP4Hq7fgbUVnE/jxMZEUtuTMQgoafHDbI7mLi3\nyrSf\r\n=M/kE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHhvSuZQoPwR2IYzJqz4+V7ayI24F8CpqZlaj+9r7hF1AiBZSWbgzfgl4USJwFq9M+IT2s8ryEglUMEPiHZQzZkXow=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-beta9_1590431989808_0.6988534069298389"},"_hasShrinkwrap":false},"0.1.0-beta10":{"name":"style-composer","version":"0.1.0-beta10","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"b3144f442cce833c632e431d3ee7bfab0faf8ef0","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-beta10","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-LSivn9oZ4DZ74tUtKRfrgOB5zzUZsUTEN2ljMA6e8Ggtx6jUFFx4alWELgfXET23XpHHFkvuwg9oTBFHxgnLFQ==","shasum":"f91db71a1490d638b8ed0798ca30184d1b3b20ee","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-beta10.tgz","fileCount":107,"unpackedSize":141850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezBfRCRA9TVsSAnZWagAAyOcQAImJSDW/olm/WZDEJUnK\nimGU99OPNeNyj3NfdoaoZhVoLM92tvAtRa1/Tye9Op+2bs3WSwNU32q6o66K\n2rBOe7kthI6DTd/RAbX9zWCxPIlRljGBR0tla579nCw+BKixb2LzryLCkdZN\nnn2CxYUEXYyLVZLUKBrQPh4fjlL5JmVqT0ZMmfNilbIW6dWAFPyCDezm7O3C\niFcYBn8IHaBHjju5PIiQPRNw1S2Kb0qKSC1rM8vDsmS25Yq3wKh9eQr358Yl\naqqYJTFda30uLUd4gpeMW3M31ZDhlbMvsbcJMlzBiiFa84PNGaihZsBiN+9a\ndF0re2l2lytcKXcmFtnRcE7ghSvtujYVyBzy03PsGG73D+c0yVtk+1T1Aj3S\nTms8X65lXau3nH651GqEzpkiV5EBQn5HnRmJDqxUizvuuh2Ooy0WyKwe6auS\nJG0sp38lbhBbTIDtIvlpI6AYI5GzeLBJDbu8dUa9QFX1IPPPEb7IEqVb5gi8\ndoo9MLn98C1Ko3pbggDGvJ6OEy+bFQiqAGRU6MLbAtTBLjmR+GsU8qi42dNH\nZQy5H7dOd1iZAHi6lcnDRRFwGtlIqP5KrrST3rnzSPcWsYsO99x2djDSGBw6\nS/5QA3bBeZqjg6ZQVfGSfiISEdti54uidqy+P2NRVYQJUrL2d/g960wPx20Z\n6azk\r\n=X8KP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvL0qIhfGdfxgR8QER+k8blsHC7z7+dHcmLkCJ0X7o7gIhALpht9s7HMWkWyGoEqGkbO5UTgZORjwbSBA77IE6tmEy"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-beta10_1590433744740_0.9941988563799156"},"_hasShrinkwrap":false},"0.1.0-beta11":{"name":"style-composer","version":"0.1.0-beta11","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"1ea9734de1430d513d443490a71ddb7f72a9ea52","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-beta11","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-HYYo1qPwg8mv8PnXnWv+sEq17MQrCyEGhx7pmAyublAueUenkJQbTohwPRb8lhYX99bvyhDXbVb8KcQiipAVRA==","shasum":"6b9c2f8006d87ee876098ebc495c47d60063d95b","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-beta11.tgz","fileCount":107,"unpackedSize":142122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezCFtCRA9TVsSAnZWagAAclIQAIwMXysxOwLIogHXG7nw\nq39Uf9cPdezmlGuxtEO5plo+FmG7QkueZRPOsht/a/cH7umjlPw4ToQQWyQl\nItVrSxumR+q6aXyiwO2G3Asf8DdICiJE+lb+nJoerAhlo/i6IKPHKUzIxADW\nKhaGv05Lp5+gOExp04qN2oQMg41JzrlL84gMZu/RyIhS5JMXTe2fQDCmiyav\nvsJysvuKym/vjE970Y0OZjr91rGwxRBZHpFsyMo+X0RcBn4wJOnmFOrwiYVd\n1Z97iXPRruGD/gnTlJd4jobqPMOzWyb+XyjplXPP3gTlWpk8chJPtbYseZBo\nuN5nTtrYhcML5Can7fqyWp1NzIRPTGwKpJ81r3wCtfpVG09xQYLDOId0BCUo\nBgAIAVMGS9vnpiGNxS78Y+NDHQBH1fGNc7kC7EK2YgmCHDVR6M9/zI6aMh+v\nXgre7jrB3ZAiq5lWyXvCQ/6NM0eP+91kwwFMmulRbC6NGzDX1dDRENw5zQ0X\nVvT3TVizWn5way/M8Cx0q7XzxzP/mBg7C/tnhTPWbCwvPZWDBf9EZM7ZSETx\nuClv9vLpefw8YlHKkv02uP+LX8K7dFjpAFKa56A6OhiwD6eLjnIjCDXipelO\nT3fSojwGxMZ9Ixljkfx31hR+L43KwK5AcrcimEwV1B5Lr/sfdXjc8jW6WFHe\nIpdG\r\n=SbAl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEtHCZ7Fp8WJB+8sdturUszESTNjBWbbKsY6Xep6f093AiEA6DO3PhxHsP258gu7jtcNidZBdLqy/jZSVCR0hTp2kEk="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-beta11_1590436204652_0.25830191031765537"},"_hasShrinkwrap":false},"0.1.0-beta12":{"name":"style-composer","version":"0.1.0-beta12","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"60f0f4342a271235414f1d4187347b68ed6a1e21","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-beta12","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-J39fPVGH0it3oNMiU1+WSkCJEuIPoha2Yvgqmw2xM+St6Srew0KgQTKbeDO/WT/FCl+FU+j5UNrXgq/yeE5z5w==","shasum":"84d3cd0c17a54651d34a0c3f4544e7b4a9f09f73","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-beta12.tgz","fileCount":103,"unpackedSize":140302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezChUCRA9TVsSAnZWagAAZW0P/0lzupVE4Dy9z0HhiI57\nXlobVCqhPXxOJheKOHLQOtoLWJTGiKJepvAbP93CJ/R2uE2y5/Z+GldP/B0n\nMBO1jd+LMScBcxG6fgkK8UxPeFOfQLIG7Dx48OnFlkXLudlNTgW9lnZSdnrV\nm9W1um2XAZSicFdw/5rRpAU1/nlZBZ5dHDdl08uI/Me3zz/jSTKP2qbaqoeP\nv+UNHwJLprpB1FiRtIxW8zVH7PZ2/ZGN6B8untAlBtU3zWVyJ55cJkW2M17x\nnVdvCxPIhIGF9vdQPw51UiDJjPMxVDK2wfrJLl7tdHkrN3v8zp/6nXyIquRt\nsEdrTld/DDFtrgK6s8rH47Ugk4ilt8q/Ch5R+ewrqzxEewwcWc1YowclI2wM\n0pUNIiHx1ClmFyCEM7W6FGAkoTwIqY/xnaPPcNL+128qI4bqcY27g0Pq7itL\nX9fDmwBt4+6krWIETAWHvkuCeFyWnhWuY5/aIwNh6VMCYMlF+BLzzlxj23v3\n1TSWZq1Nal3PBMuZyj9CMgYfXaAHvpi2rsZ5mQ4j485NNphCIusNz1/YQD+u\nvTirIk7OR7+tOrGJ/8RMLBD7PNeQPEbwKRT9wz66PDg0H2oKeVJvazbha4Ww\nFiD26eLKaCQVWo5t9qeYtuf0y+lJbmb4FtRJesZ45Q5xzFZuTYhY5bYWKfh8\no4Wv\r\n=V3yX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF6QeMbCwFPH9B79fYO86bhgIaCt11kOj0AETIt2uONwAiA41dI8bSXXK70z7pgO7ucpmvAgXFPbjea3LjQRq4uQUw=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-beta12_1590437971542_0.7287859004405113"},"_hasShrinkwrap":false},"0.1.0-beta13":{"name":"style-composer","version":"0.1.0-beta13","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"60f0f4342a271235414f1d4187347b68ed6a1e21","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-beta13","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-PfBoxaWlWX1tMHZs62SaDB6V0DdQaA0MC5dVNn/Drh8s5fkgfpxQFmWhDjW/1JLYzTqAEh9y9Q9MlKnjJDFE/A==","shasum":"631b33f9c4c50ce5ee9d26360785cbfb33eb7a40","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-beta13.tgz","fileCount":103,"unpackedSize":140280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezDDDCRA9TVsSAnZWagAAyTgQAICNRt3gi023SHvKOakN\nA57/LVY+aSZXiwcxr8IkPGdXW9EDFEZkizEuyNPNCQkya5rBCXSSszwa3zRW\nB+pmQFn0kbEqZ2Ies14OhtBAvxqbu9tLY/DkWs25XhivMkA//aysKVHfPOto\nRGoNaBnzevrx3EedN3Wd8MIVm8ruMY0n/NHttAlNOlAX5gq96zoN+wWbGizk\nl4XNo7Itsr4Nh1gZJkR5sTMQwtEJ6UFFef1bu0uq7GWIrY/OiBhco3l3c37k\n1aXMH4Lr9YG8WjfbAQguQIoCgQyM7WpqD3UYahffyZCJ0DX4h9w+Z1y8wtwu\n/J3cPF7p343tx5Sx+miA8ByIr9uPbmJ0xfbmD08ZrlNKsTU6+5C+yZEqoWi4\nvEwVKBKZpgLqhBee465IHBS3WlDooXVQz6XT/sdKMhm7MyBygM96S1gZgW3s\nhGP5j5/ddvxUPX3R+OcC6WP2kNL6N6TOIiA9596OXfZ/OVdSeb+BN7c6cyxk\nzj4cBb/5ewZDGvPLW3VyDIkbYqIDZTYBcUDKzVsMbOCy2rKc8v4gKPmRD/cw\n4Mo8nKmatomCfQw3xBEYRPddGAT+dsESGlGkN7ns11o5gAs8Lie/aHXpxg+a\nef5e6PQnc6P+Zi8VKtXWiq3s0exEPl4gHoQTjOhxAHpMK8NJ2tlhHQR5+qTl\nC8Hz\r\n=G5LO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICGTxT75Oj9xabHl3wQoLRuv7YxY9MhvbHK7V8O5IDiEAiEAk04+UHIbGpdp0xBskdyHXleoSBrNbUJJPLc+SNaYTTw="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-beta13_1590440130675_0.6790028120277685"},"_hasShrinkwrap":false},"0.1.0-beta14":{"name":"style-composer","version":"0.1.0-beta14","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"60f0f4342a271235414f1d4187347b68ed6a1e21","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-beta14","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-epWni1S/Lf4j98+Wk6E+6DEyVhsSsYFl6AP+UtpLZNIsOp7GGqo1EJejj/NOso0SeVLpMQ6pFeVRtEuyYtusdw==","shasum":"5c27decff9e061b7addb696a6118d704da4b6d02","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-beta14.tgz","fileCount":103,"unpackedSize":143563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezD0YCRA9TVsSAnZWagAApEQP/0gjN6Bi7Ix+eLOTpQAn\n19ZnA4NT1BWsiAVxa8pvgTQBWaoRk8tyO1YlNKccv/+w2MFAtqyY2YtmJHTR\nWcHmvFNYlokjSp7yz4G6QjlTfz7Boz3T4UkTe1hbkdRRqOJfYeRMFktysnVT\nGDn+FoTE/beb/dyY/Va50IhZXyitNw8O2nyJWQT+ClCLO0m3Eyy5V2NLFNK6\n6pd4ao0avh5q/YJNuWHjytg+1m7uQTgQYDp0rbPrLqysp3dLiFoTGAlOUF+E\nc6czupp4gvx1rcrjsGHn+gQJAwKileGRJOMWoD3x9+LVrFnfTutfERBy2wRV\naGELc1i7G7ChuRV7cItQzWVsVL6/bnY/CCvDKVhW+yWRVsNyBfXaZOyIOEd4\nia6IVa4Yei7FrGev7t5SAtliRdbrERaWlVxvIwFAqLxvfDPled+XJ7aLFR0t\n4VoBv49ZMfGUX3PIiWotMBho3KvhAoBL4EZ7A93P6qWRAGXsJLzXATXU3/yq\nKsTtlk3ROE/pfZi2aLwqP9uHM+ZKiobQ2y3hVoCSvIDzWAbfvIe7kY4LYZOK\nTbfxptVDViZaXpEexQ7uc7uI/X+qk0r3u6fGz3WL95HUktscHvG6GRVQh7tm\nVD5TnwYrhdpTyn77r1N3AKRn9npWeYtLWqs0ITdU2iQDXkQG+tM16ofBb5i6\nEI7M\r\n=Hl+P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIExz2t4DhqjLua9p04jQNxrmOQVL0JobsnRC3kaJYtmMAiBXCBBmo6sp8sAt4C70Kj6qay20Fhs3TIM2u1q4FBpR1Q=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-beta14_1590443287897_0.05902370299812798"},"_hasShrinkwrap":false},"0.1.0-beta15":{"name":"style-composer","version":"0.1.0-beta15","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"013602844a640822b5d60c2abfbad22bffc0d138","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-beta15","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-VqT6L0F+TooDk6nhTt9t7LdrNhzsw7gASGqEYVDREQkwF51Fl0vNijhqPfFAtNxPNjgj5IWKmCJ6cXFo/7ZSBA==","shasum":"5d9620c1bb9d8834cbcf5f30cc27f322f4167607","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-beta15.tgz","fileCount":103,"unpackedSize":149679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezD6CCRA9TVsSAnZWagAAfXcQAJtFRGkb2n8/e7w/+ckk\nOXh50Ieo4h7qZBQriZYDH2D7i9to9rtpEuDwldwr4uUq8CRXkJtBIvT5i18J\nVO+IjQ6Mt60rFevic6INc7Y6C9ZkVJetEAnH1vw4fEua+bSoLqY+7Pe9L+wC\n1EEN6lISXJW9X0mvjfWa5qUuk/r7AihKOD3hIPHg0d8vDGqA3U0wu/0k+vzJ\nnLVRpA8TC/HSoAWXGPg0/G+7wuMPbLsdaGtRMJHpjXjpUyXP62G1qOyCtYfD\n1UpeSsJ80x7Y6LZleg9Nxr/D1hF5GAawkqS+HxwpPqi2fMiDECJGqMZky8UG\nanlTmHQIj0Smof0EWxlFGaUM58DYi4iQ0hRTp+2Hxw04SMOFHtGBjLZZTGFj\nZk4C6TBF0WQ4YIEiWG5NtCeehPV07s4LLs0VGCDLuuTHBnIsAJb6yxJsQlPl\nhcH82T+0AMuGH61CVZYSLK8abyoaDH5rQ78Lt0ZOx0XyKyO041Y34MHQa494\nZuSdFw64j7uI9/Nun4YQr9oc1Fi3ghGGP0tDEFkJmAoxkHQqAnp4p35S5Qra\n/G9N1yog6mYnzRmOB7VZwBH93/IhPPcyWFo7j27l4RlD+RK9+NUTaRDBLbg6\nFd9jEjaEvx6ioFX14pju4+X0ChFl81thFQoPHOhpQfetJ/vXqSB7wFY3svR4\nB0Pe\r\n=JREd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBKKm+KxlszUr0vxXTP6rY8Nlz2lHtUGeYJvTFrlXcSeAiEA0qkw8wToZXzJnotuXQJqO6dxsknLMIYFrzsj6SPVbHU="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-beta15_1590443650508_0.976506483290779"},"_hasShrinkwrap":false},"0.1.0-beta16":{"name":"style-composer","version":"0.1.0-beta16","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"8b174ddc9811d57490fa1e0d9a7449067a29e203","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-beta16","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-mwVQta3ZQDjWOCbbFkNkpM3cxJVq9LIS8nv0UOiDK7mclNyAH+98LP5MNGR0uDnfRCSZIQk7iMKNQoLKcDD5cw==","shasum":"bc480175cd7161fc428943b9f6c8acf7028af359","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-beta16.tgz","fileCount":103,"unpackedSize":143369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezEHHCRA9TVsSAnZWagAAlTwQAITSROo/fVmsIQfMfzFs\nmhPLUxS44H+nT6EmenMkw7FVkgmxztCn/ceo738WjLQtVpPfsHff7snAPuqi\nsNpOLdcYqwElAnHqt9/i33SJs7bBFL9r8RMNq2LnzHfS8unx/SBmMOqaMELo\n81jqWNR42Q4mwy+bGHYaLTlcD9w8xVQ03gttnu64GKZHp+umi2RvDSPb798E\nmW+N98AQ4bEK9qllyI9QuSyHoN6PoQvW0400+gJD3Yx0x8Ol0tjRCl/vEMI0\nMqh9xRE8RohKl1WBA+eEPB5IpjPsZnsDmZ8JePvdSSmMXfK4m/xLr7pTiGqK\nFISnjb6BYUQM8NmHsw1Hx5NclKDV8AYl9FqtjxQN/mG23gIPgwRL6tpnUtzx\nTCKj47U46qRHvSOmOiwLyTZRdsIycDqPv43T8OpTN2DzlpuSJpg0mtZ9UJki\nRqlk7JjLVSujsb1xXIKJUtHFZFtw0U73pVm/XFvaR8XUy44q828gx3bmj2Jg\nhjF04ARYVOcwEweKeI7FESlHTYsYwl8g6H1viMQEttZgLXJEnoBaliS4IXA5\nUmPyAsUJtTqJiaF5uMtZUMveqFYhgBdL7TDpyvowv1KwinglN19D1PP/pNu0\nDztjQNBPCsSnW+23x7RX8GMaR8E174DayAYNs8AU9qTw/Qp0HhlvMxmfVDh2\noMgQ\r\n=nr42\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDT4K30Q+fIptX79wUWMpKh1So57+aPji+6D5Nc+1AFIAiBd6P7zf8D+/vnZKaAaYSlDMxYEy0NrwvheyQE+Qlaf3A=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-beta16_1590444486783_0.38001335951416504"},"_hasShrinkwrap":false},"0.1.0-beta17":{"name":"style-composer","version":"0.1.0-beta17","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"8b174ddc9811d57490fa1e0d9a7449067a29e203","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0-beta17","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-CqHouicFOau2WyvTOH/4K7ddIoiuoYQrf2CkzMWaYBKY44dvXPX20aibYu4vhD8Oi8sIx4awZ8UA6C/bxGODtQ==","shasum":"142efa8ec405e4832d5e89b25dd927508aa04f3c","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0-beta17.tgz","fileCount":103,"unpackedSize":143363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezO4/CRA9TVsSAnZWagAAJA8P/26BLKnRy8srs9g5pKx5\nsvx98FO19x4fRDhhv88VK3Ri0W0qURlr+OdyCs+O8jPSWd29FkQuanw3o0jI\nbuQBl35557nIVTBMt6YWwryNzA/sWB3j6pYl09pYnTfrf4hRoGzLyB4D1/Lz\n3Ee2PhHL9RDtO3pqiYLlfgNuhdH2TOeZrHYbAzKVcRd0q783xJb7sGHfihw3\n5dbNMVsCF/t84iMS+GSJ+yMAeG3a+ObhA9M6plA922I+zprB44YVnpcLtiJ/\nFHLJwud7z5Zfx6Q/7PaBr56frdW6gWi1Tt48DH4BcKTTDiIoXGjK+DMhb4yg\nN2r30kUO2PFAOg9JLIkagtojjtn33VRlhNRI0Ru47PQXz/WXZdMWli9a9H3f\nsDd7lkQi9b+xEPEFAKu+tWEXRT5StdYPveTkdZ4WQIpZCstMwR0cWf23PypK\nt1E0MHuj4koC0BpjV4hBXN2ig1aU2UTM6c+kKoedBL9YTPufDwK3bR85rBzJ\nlxl26OnebPtWGUTRYTvEy2K9KGoimxM4iGFzEW1slJUdsuUBzXDbX84PkcyH\nl/0sn2dVzjbk2jJQHeNbeINnv9y1nCnnPDQiDhr7VozRsEAh2/YUKQz+moxx\nNjpgz8EEBS25bdkFnhKWHcrKthZUoLPToTYB98G4phRyvVvbqHmJpBOYzH9e\n78WG\r\n=tJwL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDk6gGFDVcZ0YOPbQY+Nt9jocxqGpKLSJXjpc7Dm0D9QAIgJwLUc+K3rc8IqFWAmjJQZwqkLVHDXGKvtZ+24vMglvw="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0-beta17_1590488639121_0.2232616905218059"},"_hasShrinkwrap":false},"0.1.0":{"name":"style-composer","version":"0.1.0","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"6958291b3e411b764eb025595c006d1f53d1a015","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.0","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-cjD0wVWyfrHOCGAh7RApGtvFelw2hDgwGrb+afifV/wRGAHq4q6mzdlnNZERskSbaOyZpgXfRtVYrWmdmYOUHQ==","shasum":"41b8b6f04ba5eadea13e643b68bf1fc9cc15c44f","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.0.tgz","fileCount":103,"unpackedSize":144055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezR+DCRA9TVsSAnZWagAAu94P/04TBGMWjXMtHMbWVVQ7\nZ/LmIjeGRP/R3oaF8KBv6Fc+Pkhx9RLTCTUP8dpIJaYenTfhV2DJ4vJoUzM1\njJPrU9VGVKbvIWFVQtXLvo5c7cYXO3/g3AIpWAVWwjTg20VEWRXVaIKBdUVJ\noTx4lcq7d213tuCeNa5l0y2cWBKkm9ywBTVEDNfChcOdrIfBnNNJNrQ9VB6E\n+FmSekQ4nAJ69sT60ChYndpDW33e/6LSGIQEJml2/X6V60RrpoGe91GHnL7P\nG5dR7n7/ZxsmBtcBLmwCq6ptlnBj4mABnUqnfdFzEaRDwxRgd0nL3n3REjXk\ncOkyU9rXBcw6ww1AU9OCBRAfVlyO8Hcl9+tqsvCD9VDNxqcBhAp02LL2V/iA\nQ3hopoMuGz0eclDZdO4LcWhzJgRm8ksnlJf34SXceg1k233TverkEABWrNE/\n7grQuzoCJ2PTN/mXYzrErZzrVD3gFN9WZHYj5+kEMO7x57tijalZt5Z/GMKI\n4cx2yvaHWv203mY9/H5GZQpV2Mb5qrkcJdzH04dUDevwryONkV+I6JkXgHO/\n7zFyjNkje7yMBsqIgMsm30ctJ9tvKS9xtpj7SjhH792/WfsGybdgHb3nkRYf\nTAc8AYEPF3dwga3c6IHB8iPiP0CPvITeZEA3tC8tcvyMARXWbXuLaV2LXqFR\nF3p8\r\n=GN7Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxcgw3hiVQk0NIcayBakyTPpME1fB14bU7CJ/z8aa1iwIhAM6VctVzphBqC3xjQ0YxOwM+bq3jzldOk6jNaLV59luQ"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.0_1590501251234_0.3177102838942911"},"_hasShrinkwrap":false},"0.1.1":{"name":"style-composer","version":"0.1.1","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"6958291b3e411b764eb025595c006d1f53d1a015","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.1","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-azLDD64vmryoiKHxjExt9pCnZEAFX00qWnePyrWLAAPZckMuFlU5FGEBSVH2uQU2HfFsy4Tcqkud9M6kWVQ23g==","shasum":"522c6247551b3453422c5d1dbec380f8be596b15","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.1.tgz","fileCount":103,"unpackedSize":144091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezTM2CRA9TVsSAnZWagAAaI0P/1R2dRGM30RdHNvyg2wk\nTo2E1PPWG32qI1AYTCACwVsoCEMqz8pxDabdFW6xBIdMBGxXxJuCjK3Xuuqm\nOAid8IrnaCayx9BDcaJgyuZhIOS/SHN0koRa0Fq149EcvcnjaMJF5d8uZJZa\ncdjz1q/xWIbj27P2OOD29zdpHXD0XQIV/5gIiAs3WnhcwgJIoEybTsNZ9gqV\ng/L2vZ9hEPo5AelOSqzqKRdQp0rT7+Exihx/UdtOF5sqOtB9dJ/c2rVK22i+\nI5i0yWF25TPr7e1QouklFjNKTBP8j8QeErKykSECoOZSUT2mxjIFC85Nv+9B\nduhHKsF+Weu4Y4Uu68r/78R3Mc4qGRkTR8cdAvOMybPeKfW1DgFTL9n7usL2\n3cuB6vGQ2WbspA4cPTPsWzCP8aw1BOjbn9NF1eCwfVwmWUVF11rc6Z8Vr/m/\nKXgkr8C5lKA8KQwIc4GL86g+f+8wEHuYAlqe2k+YluvKRTisoiduD36F4LuT\n4Ot7MOOaDT/f9SLcX1sVXNX2JYjhAElA2akdP8/raGYOaXvy61XDODOUBr4S\n85valBhyHPfGjwYWmqm591R52FSF8zBU5nFPd0SGxL1yFRqyJDdmNKNP/Kt0\nlFL6QIH/4uKhMIuBdyq/9XsPalMBD4GSale3m9ls2vDmyJYQWjH/RpOoHmKP\nb3ea\r\n=GsLF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlKaICndfJPFQW1af0r5Ay2iWZUqclldbTd5meCS+5WwIhAP3ozB4yJ9jcVfKNf1ZX9IkK60xjDF1C/oNoygDetZgO"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.1_1590506293525_0.8279541903922953"},"_hasShrinkwrap":false},"0.1.2":{"name":"style-composer","version":"0.1.2","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"6958291b3e411b764eb025595c006d1f53d1a015","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.2","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-/AdawCtcbLDq6tJFehl03bQYl9WfdXzNqHiNPOkTS3eXeIcDGG02QENapIzfv3wuGargEhsuxsz+Z5sKCdEYAw==","shasum":"5d8aa476e461759a09d638603abb5b0f08ebaae9","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.2.tgz","fileCount":103,"unpackedSize":150489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezkxSCRA9TVsSAnZWagAAFq4P/3+5aU13Cr+/ZC5oCHZ9\n9dibkqeEcqiOwkogV3UBSTQ6VutB4r2GHHPr7ulpbF/RmzALxzf5q0Cvk9+9\n/HVc4EkUf9km1S/qtEXjA3NBKQ1zgZVqw+NWUgFGqC4L8AN9Lwn8YFN5jTYc\nvGg1dUkfWw9bjg0AuRHFicRIqXiMfPjSzb+x66Ej1nCQJUNDuXg945H/w7fP\nElBNH9iEiCeG7C5LktI65zR43EFVyck2vxtzuAajxU0WNdPXLAhtBG7dZAHt\nPDQrKHUMRnPxxxLPn7H3yaOqzsMfCBlbquPEhQo1jtF+DehLYQcTGjXVs4WP\netim8XcF3Kwo5+fWBMOW0yOs8l6Hfstsiy6rIqsq+Um6wqnbpNDST5vRwj78\nczwf/N5lbqYnuSggB0j4/Z0waghnfNSV5BbJThrS6a7mi0HiWJvH4fmQ/FHv\nKCQ8k5NvpKQV9IVdFOlDi68xDHUMxGu9X5VgEheF0T0p9wibaIxAc8VsHvGc\nLNrMZw+DqbAFLhuEn2Lm6oI7n0ERZe6tpjiLdIFXJHu0KpQDIMKKcvingziQ\nzWovJ057G6X3zk3wvs460xDy0raa1oi0y2FzMfvDalCeq85oCVWG5KJj+1vD\nlRceeTELUqGckWM/Lk/A0il8kj/P4l9WFz07uo4ypzGwyToNYyPKNn09NLwe\nUMEr\r\n=sI7+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGQdQD071IVZFv9WLIb3J7/e3fz5srK50G5oZePYqx0VAiEAhzMEv7BbPuuRnre6VoQII3dCO0XZ2oM/XJDZbUW50c0="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.2_1590578257489_0.6245790122884332"},"_hasShrinkwrap":false},"0.1.3":{"name":"style-composer","version":"0.1.3","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"6958291b3e411b764eb025595c006d1f53d1a015","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.3","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-gPA6kc28ewiOpt/dKIkWER9gAqzVN6K4uqX++iaQfStTlXqr6DscgPoTRgmQsgZExIDdlb+Nayfg50i9/erXng==","shasum":"7b1b37a91688c5c247d0e614f1f9ba51967d3662","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.3.tgz","fileCount":103,"unpackedSize":150613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezk+hCRA9TVsSAnZWagAA+boP/j4cZwV9z+kexPzoykUB\n+OHAfhA6vVO0oS/2ir0oXHPrxetZPvNoZZjhEyQCER6Uq32YYgG7CcqtkHly\nJ8C5Vfri92pAaDmf+T6nGKnZmQ/mCYQnoMm1W/eox7/UZ1XAvNIXxYTZ291Y\nOkXvzmoJstDKllUelA812IpmGGW04wOuTTq9/aUZNQcvQERTcso3AFHHeeAL\nWThN9Lzhi3nPo7zY4UqLCgX5w0d4TCBMG33aJLnLfBo5TMRAfjEV7NhjGjHc\n5fxogl1JhpzJoBizxK93lWdUwVnsNkGGSyNpGc0qWrbpy8VpzwdVbkYH1l0V\nQZWOtfmmwuD9oGtLyHFyBrT2AbFNqLpyKcChHz8eKUdAwbXQV+8e+G9v7u+G\nzXE6po0PS0wAptpp2Pfj5bipyOTTvfgMCxHStBXImaRqxviJOV7zb/4CfQgq\nB2YspPwDvawxMQmvZYKEyeI0YwxBBMgKnvWoCv57HTwgnEDQ71d1NH60pos7\nxyAX/5KIqO3QjqYn6bdu59RnF2KtVgmizuriNlwYuH/OiVytvx6U6ydkky6/\n69EmIvmr96C17i0tMuy+2i1nGJfTOisdxWSdVYdOluacAtuCRRSxTx5eUQ0c\nWQubkU6ye8sy8oBFVEPyq4weoFXfwgh6UaRZ/qjPvf4RcgvnWlsXIf80uuVE\nLra8\r\n=3aAp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEPBGumv0ALvO8zJ6ZqD8afuYLIffC1cZi2PgevKWIFqAiEAmKkCGMWdxnfMZ1DiQovjE3Msx8D4HjMqnkb+IjXJR8A="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.3_1590579105295_0.4452676895824459"},"_hasShrinkwrap":false},"0.1.5":{"name":"style-composer","version":"0.1.5","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"6958291b3e411b764eb025595c006d1f53d1a015","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.5","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-BcYEZEFdYLKkYHesRuluP7DdSLXYJhdEWhhyZgUX1KritWiDX76lZU04gGFg5UAEDURuCMZkcOtDDNqk+yU23Q==","shasum":"fc9759094f9aef27063b785ea09c5e8b5d3da473","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.5.tgz","fileCount":103,"unpackedSize":143658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezlOhCRA9TVsSAnZWagAA5ioP+wWCOUI81QGHHlLSHgsc\nIhEV6U4eTDGdFSaPmkqqSsQDIiwIAJn4EouJD36vu1BK7ZE8nXA/MExINVxV\n2dbwnZEAHvEATyPuhY/BTofdVBslJrJZzbcVS3J3KjYSzXbAhkCoPmpTlsvp\n+kSSrUVrWwcRqHjxtV3PXesATBCZqn7T+34SGH7WUxXZkYooAjdmJPsK2Q09\nYen9BxV2m8hz0Mx0w7ljYxrRZAh7IjvB9V0jdELvuGqjkh15de1W6iPBsBiw\nUKZ9mFv5/1AoV+fG9XYXQSO9F0gzQjqdXQOJLRvftxsj+Ev3WEVskz8Z1Lhi\nMhMECPVMudWbiiAQ9HByPrxFZ2xkiMAEL3bxcEuMH5Dg8W0I9SvpMaXneBOG\n5gEQUa1vD9sdt7jip2oP2xYgF7hQjouFe0wrzuJBBEw2vgDLzENCQCkFFkVe\nNzVemM09AgM/uCyaI9w0LUL98FDY0+zdTq5aZOdXf8WLFnPquG6SxRJ5EuHn\nDow36vecTI2MD6Fhn6AWp+gQ1abBh5L5DWCBlyBApmdt5mXxf2ouDppdT2IY\nTuivQWpPHHh88YjfkXh/qKAIo3FO9uX9bj5IsyoIK5iImV5oAhNE4no+ePOu\nyW+lgk+XsPBXF2hz2rjATkXcQj1mE7YePASPH3QFQEwSCCE+DLP21nkZj1Ur\nzF6q\r\n=rAyy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVmMYTYBIkRrS02Nw1Yxt0uhz+PW++X01NhbuuEXPngQIgfJFX+1AWJdZQXmyymOwRUu/NGIx1fiYoBBpcKB+AS6M="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.5_1590580129429_0.2763093898644513"},"_hasShrinkwrap":false},"0.1.6":{"name":"style-composer","version":"0.1.6","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"6958291b3e411b764eb025595c006d1f53d1a015","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.6","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Zps3c7DWvWhRU/F0uWqIupa2e2Mr4pCJe5vZyz3wkSdHAP1GIsXOQFKFw0XQiU7fd62s9hz6RQ1q3rBwioOV4A==","shasum":"020bc84dc070d8768c3d8109dbd24288d73a2c61","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.6.tgz","fileCount":103,"unpackedSize":143622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezlQ+CRA9TVsSAnZWagAAC6wP/1Y00tpSTMfZStEDAs/h\nDpRfcHrd+lrrQ9y6tt+zQxd8/YT8UbrtxSpAT/dKttKgRQXcFKQqueLAsnz/\nuO3UgdttkL7yXkjymtIKs+Ct/Luntky+V68R1J/JWfrCVI8okkXIPni97P1t\nBtDAAK0+ztUDwxsp8lE18l2x/NE0jEe9puYHzoXtKUyyymPY2F4kKZ5QAzz7\nvAILoF1hmDdRWGDMV1bErMZ4R5wRjrj58j8H4S5NSVM6Q9ifQeaKSJBdJqsv\ncf59kokHNAqhR15EJ/OYuyd3kLwBiN5NynKa7rplX2oPRonrBwmaBlMRIT1e\nSvzaI9Bx2u3eiPmSe9Rf49FO9WxVLjElH7VOW8oQtRdZdo/fTwKjXRmEfI9s\noBcEyb5RdNg7WXtyT4MUydaBdSY7N3RXmRNuhNfTJj2382WX7LRQTGbhblTE\nil8YLoH813v+7zkSexSLnVO2qkbNC+nlyi/JFMeznzEmlK/R2h4U4gK6jSdJ\ng94cKk4TgWUbIjXZDz5PdDe4ibFTGSXsw11KH9EFqxA2vnmAkptLPXLyoZt2\n9cP8L1bjjef4C2Bp/Qdw4Q03t4luYekj5oGbni5yAPQ/8jiOLn9Ydu/8AriV\nU2LhrqcAcfpEDQtv3+Q6oxU4gTP/zGbOhMnNGwUB7p4JsicUKtEEkdMvGrzH\nuO00\r\n=ZKgz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAFqSekkFQxmIcWKwjW8ZHRgH8Z7yq2ci5vCJMbeprjOAiEAi6NJPVBtELOvmadLgOeyHhcZoGuRZ3KPvox2Mw1kUI4="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.6_1590580285800_0.1856447961072356"},"_hasShrinkwrap":false},"0.1.7":{"name":"style-composer","version":"0.1.7","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"5c5034e0cf4dcb55e1a8591191557a7a06395f81","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.7","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-nLU6DY5xDyGJUSjkywtzZwWCHU0cb9aynAA2F1VSL2nT0qviys+a6uFv1imUTQnfdXg+WXkVgUVE63MuhxFAXA==","shasum":"d391e49413349482921fe4af89476cda52439ce0","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.7.tgz","fileCount":103,"unpackedSize":144879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezlVpCRA9TVsSAnZWagAALUwQAI079S6ED628kkn8RqgG\nDArCL2KT5DBuQGJ/SsNDChFOWmZhkjwIr3B+xBTnVVx729+EabIdk2Gs9ZqA\nrlfKG55funai9k7TuEYSIZJdpOP8MaPLCXVkQ2HqDdF583QTEq23qdTTPiRG\nXwnr3KoFiVzhsfodTTrLFB+EiCzZv9tojLAqndIcWTSERvxJUMxjlP83ZR9J\nMoWtbSS0fHuqXTNhOm7pbfnGTtgTyFXsBmPx1fb5s3tgAWMNLQA5BMWH0PTe\n+7ebtcsMERZUtrrMQyPK5FIcsJ5xz0yfsr5TlHwj+K96egGq5uAtf//7uufi\nXU/+clMZVYN0/u1qNKpG2gQzurYci2hLyQCKVAGcGWYZ0uh5R8f/mAEBOPU/\n5JGpF2bSTVQ56bOuJ5CpcC4vnrGDUEzTCR+UR/Kv60hAAJOLvAAlnYJFmJGJ\nseupK6VGI1QO27cl4Y8DNNWoqWZCf9DopX1FZo/jHr+0sCELvik6JI9L+l1o\nEuvCivDuFZcnQfBJ+dTL+gpUQ0ag5Q6YoGaMgRkWAVRFqHxQs8gVEGSpdXCi\nQ68/CvpQYBVLcVc1deZIuBzXytalnXIqaWQTEdLM1MadezMPF+2q5xjPAyER\nytZe9Q7rnbCC+bUYbg34eMDQolMVe/HLGfFSHe6yFFRxDjAXm84xusXskNWo\nGOIv\r\n=rsFH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFVyldSr5mCyd93f27vybsqJWrgAhSzg/O7BFQpevRVRAiEAu/8bwkUTjaDAZQkBTZsTx+UyA0K/dRGiRVDU8vL5JIo="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.7_1590580584634_0.3058166507002975"},"_hasShrinkwrap":false},"0.1.8":{"name":"style-composer","version":"0.1.8","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"f9f95bff52c3f37b8bf3c04aaac0086daef70298","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.8","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-qXseHKWUQ7EiiltMsKyiHgUPgThVza3B+if8d4Z7A3kx3L2gkZxQbWqO4lpdRzwOwEopQJTDLu8FDr9D8KLW+g==","shasum":"f49258eda5c47b737e467f458f6f328b176afa14","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.8.tgz","fileCount":107,"unpackedSize":149632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0VZ/CRA9TVsSAnZWagAAuLQP/3lGekZwKhSdiAk2RNKu\nwvxaKuoqxzvQ7SawzfNFTbzh73ctmEZxZwJe+tEPhO16CHwPU9mngWkIH9kV\neELxaryx4ni1VZaYXe/69s/owmvY26zoVVR8cFYnMM0MtZx7tnFxUWLUeotp\nAE5eBZu6qiwzdopaY8goqWxfsfKXbfgUr6Ry0IgXtNCPKbX/k0udM6voyrF7\nvC1e9aGCpuwPnKfpnkRCuDI8h72lNcL9aUK90e0y5Lq3SLizB9+b7fdwOgJW\nG0K9/OiJlE56E1So9QSBtuqrIZXa8+zhViEo9LbcDJKK0ODoSbxmCAJx4mm4\nLOMHKXOz3Zp8Id4fS5aWX/SM8zi9vAPXupPh/fhP2asGbgXeTyHnMUVt6BLQ\nXEOZzM4h33QST3gc3ApANdc/qT23aLNheC2HDb0rQqpWlGwDU1mK50cvjCKd\nwIm1eXAG1ynB862UPzJBC9Fosi9CxaIj7fsMryUNTBCz0gzYUdGpv8+gb0ZD\naTA4SpIZebBbudtER4QiK5PkSSrjY9S2TOkfeV37FdyNmfytmp400N7DxsSm\n1GoNNkwXPeUxGFVrLMPdz/tAVBPvDY6ehVzeo5aDgIOepKuJQcGyNtsTsYmH\nt4lSp/eCeWZv6x9pj12lWctjRYB3FeuDbISO5mTGeYWtLbnvRd2hGjs5/P2n\noVzc\r\n=a5Hy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzBqfXje1/z9FUo4Wecfvkor8cjrQYet/2/aHjf2EiXgIgA6gWRH9gKevUCnE4mvgH+eleP04EVq2LfRyli7p8MjY="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.8_1590777470861_0.12344471250975597"},"_hasShrinkwrap":false},"0.1.9":{"name":"style-composer","version":"0.1.9","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"be35065535624b87f96ee7790063076cfad56a12","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.9","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-xZIoGV9jBaHmzaKRAsi4xxzqTnFxeVqwwBb/mo2CQNlsCgwr1dmCUIduYZozb5S2OBOEhVaDhsj9EHGjE+iy1g==","shasum":"84bfd30048a3c30283e73058421be4875ed47a50","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.9.tgz","fileCount":3,"unpackedSize":7665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1OxGCRA9TVsSAnZWagAACaMP/RxBPKpRsC+g89qo73y7\n2qNoemjbhC0Xmq/Q21A9YTV1gmDn4QVm32DO3rh3BgYBNPTFrohBsAUfAJOK\nv4e2ttHrrKrBXKBiuk8+4Ie3F9ahC4kFXA899HLKUqgzLdVFmOEt/mALf+At\n+Z1aFqK8ibaXoerabPU+SLVDTupmxAyPVRXBwGnfm3otDUFNcs8zzu6G3hW9\nSvQ0Q/MZmgxc4ncQKbSCRbKyTELVUyvaOI36ScoWaq16N3kZShm2/EnIu+Ew\nYfLai4x1/5odSVTpoSN2Sq59V+wB5ji1xB/XxB37zIWeBWfJw/VCrz1ffGAB\nT8a1VHxIUjXk946kqSR2c21BaOSUYGyqBJ07lUsZYkAfjDXZ9hKbTMJORcsJ\necX72n6WVDrKDbaskWbEytrHpwzN8M6LTppVTcu4/1UxNaU22eBPexrhbi+u\n51+0vbPWG37djBzq7SKqwKz6YzJW4Cr97OSaVolIIgbno8N7tNBVGJC31dHF\n9I0ijF6uAqKNSFK6zhiEwZJDqpUrH/sHIDcrcKLASS4vafSwGpATGmKanSda\nBiDOK3HSTIjnlVnzj7YAPOXex8FwoXFfq+mDlbXW20OcLFFoQrkxTAZAIPol\nlWK2/nawPwmUqKoXZBoqa+34+SkQEOCmP/x7NGHD4K/IVuKNethabRYK5vrF\nC2+r\r\n=1YSb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAh+VcMap7rLBiQqgMFB5TlXM3Z0/B1ngGe+9fQcRkVfAiBT1eN5BMEkt0FmB0fPEWMNIcAWKKVgXIAbzKowL8GbYw=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.9_1591012422298_0.6721907609267488"},"_hasShrinkwrap":false},"0.1.10":{"name":"style-composer","version":"0.1.10","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"dependencies":{"expo":"^37.0.10","expo-asset":"^8.1.5","expo-font":"^8.1.1","lodash":"^4.17.15","lodash.debounce":"^4.0.8","react-native-web":"0.11.7"},"gitHead":"be35065535624b87f96ee7790063076cfad56a12","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.1.10","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-+5r69wVKK2+5WgFFQ630ZDbO6vFzU+Vd1EVOSpFad7jaZs3V5b0f7YBQ9MtPQoElnjKb7TrK7lk4KUXG/jn8Mw==","shasum":"84c4392a13170211fdd47d6da0af65b02525ece9","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.1.10.tgz","fileCount":107,"unpackedSize":149723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1OxdCRA9TVsSAnZWagAAfTcQAJzJgISYQvW3JBRQ1vNI\naRbNcK23dCe6FuOLACxqJggmyxt+IvXpVTN0Bq3AaZV7MSmMUtxau9fVDzPm\ntxJWodWiuBiARyNHyc3QC68yVQgJ1o6dMgbNtvNoZcUeq7TtNauTzREKS8LE\nWFm104dz7FYXqbWEulkHJGA5rcfXBhGFS5NPvFvLijROJr1+F/DUQ8yTh7JA\n3dqw/gjdcGH+r/etfjyhKIf5w4lhtT2xke2iaemfVHXbF0URvWcSQsn5+VyR\nLCsR73bIcG4Ti8gzYk8a/Y8sw/g1ihbDhHy8k3BCNIMLo2o9fKwUzsRIeaJV\nc6/aBjxumWM7zKGdq50grYW58+lwBiBDZGnj+nD9kvrG4Qipkg49veIBwetf\nI/742chMry1ZsufH0d783OkotMiF2ws5ANtkDLbua/ATAz4+9JnwGLKkccj1\nnybNaUIjniPnGujWfQY/j9RIqY104ux9Gy9jmUlStdSru7UKbVdgdqqE7rK1\nw54YsNNzr3KD/2aSE9gUTabgwQRGW7tbzw42+D04gLzMUqKCfcIEQyvEIRd6\nUEv3JYuXAUD900ogQuKX6ZcNM5OU95lHgqNpsAKIEglgusxL9S7/H25wTPus\nZHfMJCXmfPfrdq6DpzoEJWBT2bWE0ovku8Z4cXCNYcMFxeVXyaMPPb/DMXMb\nE82z\r\n=nWCM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID7J4b0IjJwRcgn6uzP23O/eFGsywempPCuN0u4je2lNAiBxdcriFTHN2RzVq8o4gBt60zwEq0SuwaIjaDkABwIjVw=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.1.10_1591012445086_0.0005663890815190697"},"_hasShrinkwrap":false},"0.2.0-alpha1":{"name":"style-composer","version":"0.2.0-alpha1","author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"lodash":"^4.17.15","lodash.debounce":"^4.0.8","expo-asset":"^8.1.5","expo-font":"^8.1.1"},"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward cross platform styling for React Native and the web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Dynamic fonts](#fonts)\n- [Theming](#theming)\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use platform queries in combination with operator rules to create continence functions:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object.\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst Raleway = createFontFamily(\"Raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default Raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: Raleway.regular(),\n}));\n```\n\nThis also supports cascading to elements further in the tree as well as `fontWeight`.\n","readmeFilename":"README.md","gitHead":"b4f20ada0f0cb4d9ad78471f36da1b6fdbd084ab","description":"Straightforward cross platform styling for React Native and the web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.2.0-alpha1","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-4wz9gI4/tiPEWAJkUmkAUHMm26s7l0BYzTQTRe0mpjhF/zG4x/iezPsDX3ZJmVu4+t4f2HntiO2D7c54/M4fhQ==","shasum":"b930bc99c2e899cb5de1cae7792a54abbd9f9cc8","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.2.0-alpha1.tgz","fileCount":91,"unpackedSize":133026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18JwCRA9TVsSAnZWagAAXDAP/109/MfhdNtsXNRHG6Wj\nIUJv2KniZnY9WqhrxibFt1hmyARps95VK8x6em7lvN2icfNarRjIBDIyqugG\n+TT0XR5f98d2myYTiNuVmJwRFjNGpsmPlOMQvwBkBzUGdpnSzg6Wf8ZfQnEg\n1I5xFeI667VCr7kWPJH9Pbl5w9NMbOd2gtukh7+SI937Hq71PXVQ6GsvzLZB\nn6vh7CATycK2PmKEaDpm5yxM/Wfi9qg6TkR1smJhWPctCftwLkQfF7BfDtsI\n9rHaJ1PwhW7M+SrIp8W4QJkAP9vdCNWug12M073f0tG+AxykKE8YzvsMbFqb\n/GhKTJvcMtXg0xypEKx50W6X+FCd037F+JrswMC72HrqrCCB9bqhcOeB+7wQ\n8SX4WXkdp6Zt5sEaj384t7Rxz105k942yyCihDdUzV3PinEI8kYdOIcIdNg+\nZh9shdC8pgoWkkrti7U8O7of3UnOzIx1BoGs6zg15cw+HqnGAfsuUVK+I1Ls\nXG2BHNvYav4urq8BF+OMRqsI1qm239/6cxTwUF6PVqsH663hG0HC/gjdUU5J\nRlZJS0YzUv+TSc1ffaS1lxA1EJWvwjLO+X//7nRCAlD8ty4PgobU6QW5Mjc8\nlGn/6YfRYpvoNCiqdaf49rHH+jWSX518KuSnz56ZUFyh2kwuAEBsSCdJffsb\nz0P9\r\n=dxPh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDZgy8arEb4bZPv661FW+u063zsM7SC3h0b1aKhz+KbGAiA2PC5L6bbfMuxOHgXgV+oWPlFcsTvFKbQ/9WTgXU2vuw=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.2.0-alpha1_1591198320185_0.5498758251996871"},"_hasShrinkwrap":false},"0.2.0-alpha2":{"name":"style-composer","version":"0.2.0-alpha2","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Dynamic fonts](#fonts)\n- [Theming](#theming)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```","readmeFilename":"README.md","gitHead":"e0912c7139f1b2d2699a6254e36ecb73ebbe63a7","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.2.0-alpha2","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-YHZ7i3oBL6Q+n0kR2tNuAya5QLNCoKFHvcRkz9wd4M0LEKO+FqZgNj4N7NMrtSoQ0zxtxymiqlqFU5CrDHQuCA==","shasum":"7c162a661905dd60e6cb105c0069a8ef0a504a50","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.2.0-alpha2.tgz","fileCount":92,"unpackedSize":137585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2p/PCRA9TVsSAnZWagAA188QAJL/1OQbqmlocC0K4WhE\n1nsCJezNcGwICnqfTjH1IxOrjTT4n/svfUl1fQyLlsB2vqct4P30mNa1PEjN\nGK9S03/U0kv6P/f8W1jjhCUc7vYn4veXQ21Zf9SabVhs2JLCP4cgEvdOnnBX\n0Cp2EuJvVJOlzPe11zDCpBqnJagEewGPRkXAiaoC+fvcc3W+dCPsh3xXST7y\neHReCqGKeROzbFZqY2izBrlPTu5FLFQQmpxqM5SXQHlvcKCzJ5OIB58mUVCX\niyo1RJjAbvpH32hYQm2uJlnJYUH5quKG8JQEkAwxPpspxGWx+pQdkys98Y5g\na5tH7omU8sr9zMmkAiweMmjvLeykB6cRZNQp2Y+PUS0jqSgygNGj2H32bLST\n24uLQxpHXO/LSF6DgQLyG4rybKYE64flT3Nwe4kLk0L3Mtfj8A1eb/pubWc7\nMqy79OyvAN4KzirVdGfuDTla37Ec7Zn+U9shDyDdGOD1RGw11AegRI57whB2\nuxXQSZFWrbNUbhcIHq7/wuW1Nj4g+eoaAC7kSz4adjXlnAGjPpjELhdhIJre\nf0MPx8eSeA9lSyjfyRhAq2csU9G3fgIYcYN0icI9MQm4q4EjT56nb2PKLxyB\nusymJoPuikQpnyoVEkf4XsjWREbz3tZ3yDYYe2KKpk9BiB8ClVKftnQ2+OQY\nxDrT\r\n=rLSh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEWWwAq6yb7ckIJnIF+HRxsdlqdkr9PRCBrzWdi6OMwMAiBBNxOIr95M4o84eDyRdpEi8eaz1UMj9O6y04h3R+xmeA=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.2.0-alpha2_1591386062855_0.5485346353539164"},"_hasShrinkwrap":false},"0.2.0-alpha4":{"name":"style-composer","version":"0.2.0-alpha4","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Dynamic fonts](#fonts)\n- [Theming](#theming)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```","readmeFilename":"README.md","gitHead":"e0912c7139f1b2d2699a6254e36ecb73ebbe63a7","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.2.0-alpha4","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-K78jarjhU7lWqPMf6dYDe2D5sftmTnbnXyW+16/Tp08eBQpZAsEgwcYBrYtUeK4wHepe7opyE960WqaNQHnw+w==","shasum":"821bf1a8f8dba945ef95cd83297e2a7197ad2024","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.2.0-alpha4.tgz","fileCount":92,"unpackedSize":137828,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe260LCRA9TVsSAnZWagAAwDMP/3QF1hdzQLEuPw6c6BiX\nIrHeH2zaS6lk590OnnpmCS32I8i0yVOi7GouR4xTykMFIdUeLpkZqGeNVuNm\nrizNk0qm550DGqRFegcu9DwuaFExqN85UsE+AmOxJCRKs1F5mOd0ZmeOHtr1\nTGBAPY/zzj8YPDla0V+JlRluXIa+SCQdcoAut/s4eqr+pe1Gw7fmvwXtef05\niYGSiCcCVPXlM6pU7ZwaxLXWZTLC1JYVT2llYBf8i4Wg8ovn2x9DomHinzjY\npomoM6Ge5Z0Vs0M4xKaQ0mm4unW7jqxv0yQo+ADMWqb4zGpiWPJ+TGnbyUGI\nqWgCwlyyKkdGMqoGOv7FbBlM/wI+BhcMq5QDorklsBLusSeAa69S9WI7hA6z\ngN99k6HaYSPddXZJEGGf/GobdEeZqM9gY6JoCv6S2jFB1lnhETxi2B/UlEVD\nWQw9FGylfWC2cy1zKsdZNC9p1TpEO5++ccrEefaHzfU4r+Wn9VB+gZepPz20\npWPDS8/fTLwQrXPvXirNx2ourbwzBRTtoQ0D0OSP7H1nt3XjVDgkwmSR5n2L\njY51m648sLtYFhRJalBGaD0iuFf+EbLRRAM65qNgqF0JEtzUpg9tvsKJRfuZ\nMusNysPx+JkRTU1R6DUdxkvNsTUkRRsvwqD+guejW7rLxvmFZmhgcYKc/Kry\n7w63\r\n=4vO8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEJp/tm/7ybWQnlhDN1u+8tMV3z5lIHk1eS6StW8ajhzAiEAgZPBz0UDkhBewWcJsmjWH6NJvVvRL+Em9lftw/bgUPg="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.2.0-alpha4_1591454987399_0.7434787788597479"},"_hasShrinkwrap":false},"0.2.0-alpha5":{"name":"style-composer","version":"0.2.0-alpha5","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Dynamic fonts](#fonts)\n- [Theming](#theming)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```","readmeFilename":"README.md","gitHead":"c0911fba0b296be104f43d21b34f2455427f6c82","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.2.0-alpha5","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-w6WLrVcUdrtMNzk9oTJWfR40XfdVH3jlGlylekdkMXTu67DxGBJPup6kmkIPoak9odu8x1jSZKaqPZx0tQibQg==","shasum":"dfd7578b5f2c98e3792856424b3a2b42e3fcb0bd","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.2.0-alpha5.tgz","fileCount":92,"unpackedSize":138658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe27NTCRA9TVsSAnZWagAAuk0QAJ+DCSTxdkNYQVCVqUZo\nw4jmlocWQyTZMNY0Uz8ZKnblvCQHUsPgCOZwn3N0IWlxEy5ub0cs2wjLgt88\ndXL6VAJ7JR+6JaQxpjUDw0iUaLrmlUDkuP5gbAxgoGVjW9SlxGwMv7/NPQ0I\nS+qpj/5p6qvt3gNV6g1S5uP5NhRcXLe9BrGngUOXve146WNNGWCbKtRdbcmN\n52RBqqYPruFTH/IHQ+yfqekGsMcm3sqbnLH/GQbT3gsUHd17q8Ov+B5kUvle\nSjw0hB/or6hXab+Xtj6T+tuPfYo7Jvt8Ylna6UX1WXzflLc8bEwpi2T2FcRa\nJBJpm41s/TcUpPLSm+UgzcboT14iWzR7tlbIKTQhXQ9fOdkku28yGU39n+u6\nrRl+S+HCYo8gCCJG9y30jxk9WV4LtvpFt3n2Su3xRXSYX1Vx7KX6N5FxKLzT\niIpQWPzrnqZ/xShe4KbOMFG+8TydoF8WTFQvHwn0Jj/fIO3D5QCWCCQiMZAX\nYJyMIN/bPZxZKJ71PVOwldY7z+9695aRfOJAxEugpNp4gLrTVRL7PyF5/D9s\nr4zAHNwjoPjzgY3yNIDamIPXUy5rYebMVp3ml4LaIfPm5FP0/oHhyXnK7f/4\nnBNnFcdmYZR9Or+9o9fEchAnG59P4O1llxt+mG8csOEDLXmaxAUesSJQZTwz\n9bRI\r\n=nxzC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAFHorPvy6VDu7exZ6CnXRcNc7q4vsqqvmkVq85Ai3hgAiAL2aZzew7EfPvHvzMza2CjjwkRzSnbt04fdjgscjP9Dg=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.2.0-alpha5_1591456595233_0.4392004489125967"},"_hasShrinkwrap":false},"0.2.0-alpha6":{"name":"style-composer","version":"0.2.0-alpha6","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Dynamic fonts](#fonts)\n- [Theming](#theming)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```","readmeFilename":"README.md","gitHead":"c0911fba0b296be104f43d21b34f2455427f6c82","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.2.0-alpha6","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Jlq8iSiNuuLwg7qYJbNPyjfhlMfC6bUQjFN6PYFaan1JfSA06Z1f5OPGyeYWpCoMuUwpyrrcUUmziwz711lPNQ==","shasum":"2bd51ebb7474b90ab1d1357254773540eaf65bf9","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.2.0-alpha6.tgz","fileCount":92,"unpackedSize":139070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe27PsCRA9TVsSAnZWagAAXgEP/0VI+Wg37iloYvHN47Tm\ncFutuxGbCMwIVfDegUnojSSTrAYVxH35ojNV2+DHphJgwuhwlma/EYimGXPr\n+g7BakMc/5VMOW8mx4BnKizGeC6M1oDPkFqZV7bEebMoRQ3xHnGUpxetsl5Q\nJKCOeNAvcFUH79HbOZ2xARpdFEdGHO/rpvjDVHhCUiyEIyQaPhameiU4rtLv\nzyEV92M3aWWwFG3KIowbX8UmddnNDdNDxKD1h4bBqGE0DeF5VF248ZIpnArp\nJQejNH5TYOymPKGnNzPyCpyxaaLORBmesH418mI4sUXjzxGzSldCmx3mjO49\n3uvFuIxwoLgSzqbk2wz7lOG+QG6VCkvDaBnTk22DfVYR3tbH2Fdelt5aYXmz\nSaeIXhLwS99eQeoGs9htJPx6mxi0vi5JmmG7JmYRQex230quueAnasgNsSSI\n77fi13TKxaGEQtb9yQURfhzAsrTnHw86Hu+6OetxworFgnukBYAKtsWQjH1E\n3d9Wyn08IPMd7AhNB+X5KNGsT2Bpimb+vAzgK8TR4sR8ImvCB6zkjY7xgCgW\ncvAOUNLx4n8eOBZAX7XACzf3nACPk8yYGhI9c2ykWp/7ymUUSQp0i5LxoW2p\nHaZSEO1TqYaHUf3+NjaaLxRyP5ANGNNgJcpwYZgFqeoyC/+/PJ6uAGhSm4Kr\naxS+\r\n=bLfN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5v3BfWFeO/2VU7TcosL2em7N8QZtsOOJWr+kIjp7L5gIhAOceiT/UKLPSNfC5V3lUt3y+1uYubRDx1E7q5lB2W/HX"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.2.0-alpha6_1591456748182_0.48604415286562297"},"_hasShrinkwrap":false},"0.2.0-beta1":{"name":"style-composer","version":"0.2.0-beta1","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Dynamic fonts](#fonts)\n- [Theming](#theming)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```","readmeFilename":"README.md","gitHead":"c0911fba0b296be104f43d21b34f2455427f6c82","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.2.0-beta1","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-XVyXDMLp/P24arw2HvyC/uyGzw8BaHdACBsLIc+PgqweIPGY/0EV1Cd2QfxsPCxKO7/NuODb8IShVSfO5lj1+A==","shasum":"38ac5e82d1b53315377ba7e12f0bf886db238688","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.2.0-beta1.tgz","fileCount":92,"unpackedSize":142883,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3uGmCRA9TVsSAnZWagAAoZAQAI8jWCgW+JrpQJ15Ekbe\n4kEULCD1qxAOlgiT7IGgUwsZxHcLf9ZberhV6QRy+RtpeeYqBanlFc2yX2S/\nKn00j+0B4hdNxLGiu0dlF1OTV3+Z14aR/nLyRM7mNX8Y2n6nohwEqXCEBUFB\nFB6VqQ9AWcu7ftLxJwvdont8MmAKDbVw9GCCx8JjYLF1cdU5lqKsKCBeoHZI\nAQaKdpRZ3vsRys6Y3y/0Ir9uxNbpmKPxoiwpKz3Uvlh2PiiMJrJn02fSJDHl\nxMsy9FAW+H3X2ZCXwBEMUFtGcpz4D6stuT1vJAnGvMrQNQagfEHqrtv/NmKI\nay8YvpRermzW7CwqCpQn7DL12AEu6m/jeX8iRZs7rfLIUeWWgPEqpPNfDx+y\nCgXOrwvvcQkXDLGWm2TVgRxIxXIZTO1QaGYQ/z/ezjtGtlnVSygbJf9B5Mct\napuMgt94jp7glv8JYoAwulCZnOvAhn37gRGXJlb5Vckn/4HiO+LLa05HIyT6\nOFWSO/4LBjUpkE+cX/uzpLsqxvq+dMIpKh42wpNDZUYzHfiQHeslnz013V7B\nRqPni4kpSKvJhxWFgniRmyaFfmFtI+m6PBS1RDqTaHvkdzF/+hSIMSSJ+eFF\nddk9BYPZr8BQ+FWTdXqpIBc5PlBPlp0h/ryqHb8H30M/G1mE/L5nT70zdWDc\na7EU\r\n=phHy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAdGaXAfmUFNgxzUPRd6Pvkh4DkN5HSN4EACD6eyG6vaAiBE55p7c+yJu+mnZ2I8eZpZbWyCdX0tSwSY6T4K7ZJUxg=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.2.0-beta1_1591665062175_0.6457151161466042"},"_hasShrinkwrap":false},"0.2.0-beta2":{"name":"style-composer","version":"0.2.0-beta2","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Dynamic fonts](#fonts)\n- [Theming](#theming)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```","readmeFilename":"README.md","gitHead":"c0911fba0b296be104f43d21b34f2455427f6c82","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.2.0-beta2","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-vbDiLU1RfUwAOHuigKbONwY2rrrzUNnVGyjpvvNs4/+PGLBhTtSdy5uTJYIHMXpUACyxTQltOc8Kyq+0L1GRaQ==","shasum":"4648f640ff03110a3a23d8a5ae7ea3c9f0fbcfe3","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.2.0-beta2.tgz","fileCount":92,"unpackedSize":145613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5Al9CRA9TVsSAnZWagAATOMP/2Xo+zHEXUPH3aYuFVjA\nMqjf8xIfFG+Wo31tqaUhtjadeW3SKaBFY9N/AdeagLC28bGSb8vd6cVvtden\nyYLzdnfoqaQJBkwfBzPv1Bi8VzcUuQ7x+Io7D29092nfuPdZ/dUl0yyB62jM\nGiy+4nAvV5OCpRIPkYKTsyRiNLayjOXlVy4Tw4wNo5wI5R0CScbHzu7hDB+h\nzDnxgMoZHRnTjmCRbLoSTvLjfhIYkDfPclQE1JPvhMKon3GrLCnew7vBjqYh\nAfbZ5YD0+H/URSAyAJAlu/EVCLoOWo4LdaWfSPIrE/6NTtmz1xrrEzdMRIHF\nHbjG5RHgeL5LUohxK6nnM+8fj7JghorCz+ORgRK5mr7gWvWnt+uPpTaHSkHD\n/hwsYpua1t7atw5CyZMQKR0Zah3dGt5I26U9Yl7S2GG1y4LfudAi9mjx33D0\nD8gGjm+OwjGVJWiEKXMvwKQx6mca5l50zFrKYng7X3mbq238F0Q3VArsrMqg\n/NaZErTYPJsBjz3hOEfglHpvYu0tR6/YKFMEC+4E8wx7M+zBk7odX5FUGXW5\nlA3UfjPhAWIBCkiZMG13fS9T1dRcHRATpq4o7wZi+lXNZMrG9vac78Lwut20\neRICtZngZUksHfiYQXdz1dwoCaxk76uctFUbJUpgdrqcIgzQkYYx6nwPIxvm\nXpo2\r\n=OOZQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkijU6GfAWK+ZvzSLfz9lZ9FlfPgI+ObcIP9Q84p41EAIhAL+SmsrccQeu7BCAKBbX+LfCEb6ZwssVxAueXYQL3qx0"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.2.0-beta2_1592002941073_0.9409422016364088"},"_hasShrinkwrap":false},"0.2.0-beta3":{"name":"style-composer","version":"0.2.0-beta3","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Dynamic fonts](#fonts)\n- [Theming](#theming)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```","readmeFilename":"README.md","gitHead":"c0911fba0b296be104f43d21b34f2455427f6c82","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.2.0-beta3","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-17Ua2SmLnDGjR0G5Z46XgNEMIwWHsaPlOa5CgJWeaDjWi84vy5Z/gpx5GN5ZBI+fkkrfackDGBt1NC9hqLDQhQ==","shasum":"07699993a0915ae2383f573152d47f20600a25d0","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.2.0-beta3.tgz","fileCount":92,"unpackedSize":145001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5A9fCRA9TVsSAnZWagAAnPcP/3IEA5KPY4KPmHGKIUbs\nwuCEKODE5GuzHUOgIpJWY1TCFTl00HO0Mem3xfrQk7LeLxKXCVHfAcYTs846\nzUuoaBB6blus1CBDKH7pTBUJ7qzNnF3bs+PNEyOHIecwxEuGpim+s5aTWRSQ\n8nm1o8knYxbiEb0SUOIb6LpGEluxrFtF2FNjH8EShJ/0NOMNN3b0KDSLARrj\naIvr+aCvkB2JUPT3vltxniTsC4W0kGhhxCffROuqJVB2Cz8qSHCiTl/XE2Ph\nviB0CRu75+c/q1ThuZ+EFPG4tY9vwKQ4doNEvrBiHRcXcvCAH3DVRa8K/CbF\nw/cXG2M/3oud1M28zEMkZnTX4AIC3IfpO0ahzcRbLrOKTnxOlAmT0avsZ9Pq\ngj3JjC+ln6SzTzvM995ptZydgC8Wj4mJArEbOATNSudFGNaKenfwnAKIgf+f\npFJuTwKAUDI5mxiDqJ6z+BFvaZL04UYPIXpMXb+8GzJOxHZCABKsPX2Mn8Q9\nc5GyyapIjDHEqPGRhiyXYEUq6D27xXC322epw3rZrpyPbGZxJ5eVJb9DxxiX\nyr4CHekk/+8N8KKdtP40Mvktc1e0ePnOFxMrw8+2YwUUeeOaogsN5NUAncBe\nVWBrMH5Wa/CqaE1b58g03Z1eVk4oTWRpk65QIkTuPoSaxNrcg92RSDsJc7/P\nPQ/D\r\n=/lAH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfms0lGveKsYV6LcyW3yfBVxGpbVisijxldVeZ/nnnrgIhAOSFpFhA0++NjLt2EYePhCW0ck0YYlwzr2PEOWA8n4vS"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.2.0-beta3_1592004446794_0.9966043037768157"},"_hasShrinkwrap":false},"0.2.0-beta4":{"name":"style-composer","version":"0.2.0-beta4","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Dynamic fonts](#fonts)\n- [Theming](#theming)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```","readmeFilename":"README.md","gitHead":"c0911fba0b296be104f43d21b34f2455427f6c82","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.2.0-beta4","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-kF3InefnE7Pm7SmAvmURvwfU1MCq4ou/k75igfEt3ZPykK1rrSueZRGisukdKeJ71xi7INAhEfy7uY+eit0RZg==","shasum":"adc6c4f680768a63f520a5cd29bae11a084492b4","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.2.0-beta4.tgz","fileCount":92,"unpackedSize":145181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5A/sCRA9TVsSAnZWagAA9XYP/1/DKCkDfc++m65DviEt\nj1cMJBI90s87EZzw7KMAK4BRY4Gnr8aGO4/wzyKLcraDM8gQ0ZJiMweb30/O\n3HJ4v/03t2bSpZzHSouzke17uEI0WoNp3CCpjxL48SiRAgRNqveBu9glxY5J\nPSAgKr7U0yP5RHg1UCsAiiA5/14RM0+ANJvsZBgXljSVb2ZW3TbswFxwy743\nVN1DVSMyPBzMGsKvnhG99EHb7geVFeKqyHyoiv/2ZwC4EWnxG+D208Zvd6wS\nY150k03Xx7dXQ3EFdrwW+SwAHOfeanej5C9/TAswDzJW1d6QPpu6q2008ZYk\nxpMZtdoAYtgUDgUcB0yiCM1YGnSu32dGqe8M6IYparBdTZlOJ65Y/MO5y8cG\nTXzm/pB0q9HPsf6YTHpG31K1Q0SwH+ukG44RYi4jOzvDumuPiCQUjkoOHAZu\ngzT2AkCq3NCE7+Js6exgErBCQ9Aw8OYcbsESH29lt8pHJbOS03Bn2KDwxErl\nlgOv3rgxx2CWb9GtXSZXbDzYWALdsnVQMFmPT7cqY+oyUjTNICk5jmROIZnJ\n6u/UBQ8Cr/xRHvlo0fGf/CyV/Vd3LBnTBXD9t0Xy03jwLHJKUXLVKXDIaEln\noLGKtZuS/0rSEZ8JamzEKsY8cNBySn3WY1hH7747YMgp0UOqKuLqOI8W5YKr\nsNF1\r\n=Gkeq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrRSW4ZjLQIpgNLb/IbuPJQ9J7rdgcOYqd+yOJXY6NUQIhAML+J+F+ThEBs48xzj4EbLztyBp/dseIgW1sF6ddRpCq"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.2.0-beta4_1592004588337_0.6263042721334751"},"_hasShrinkwrap":false},"0.2.0-beta5":{"name":"style-composer","version":"0.2.0-beta5","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Dynamic fonts](#fonts)\n- [Theming](#theming)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### Style Ordering and important()\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n#### Important values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values that would\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n","readmeFilename":"README.md","gitHead":"01a49c0d6451764fa32c1334eb187225c789bd87","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.2.0-beta5","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-wytSyhhcw0pdyBCj8NPI+IVKUmQAyI3jGy910J91NfIU20H72Uxn4TUB49j5CBkcQTCe4Hc4XILGV2Dq/ZVsQg==","shasum":"380955c8beb960801e70e2964ab4046fc756841e","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.2.0-beta5.tgz","fileCount":96,"unpackedSize":155483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5SDqCRA9TVsSAnZWagAAL44QAIHek9r5ezT5O3utflSF\nJHRap1ebO9nfnn6WIuUL9FQAgDk3Ro1qXlMbj0amCncBtNARbFpP4yciPfTg\n+dDQQm7ZOpNVaVgSTZB7NUPcK9OljLvOOR+5ZYmg9ztHPcXbAXwcHss7zuQn\nENbfGBivLzEHXfaDIjqaosB/ZajHu35MtJRlG4pgc/cpoZ/EW0EJHDhr8Qmb\nMbXYCJTE2eTQh3FGXddYISDfiiSm14T1Y2bd626FjCwMxKdsWmDHL0OsLw7u\nDxygXnqqp3PkctImniIivBG0aB4FEtKkqKe/0TZkRAfDIelePJhS62nvecOS\nUdYBMSHZ683Q4ppChwoKMG9yF8GmsANf6fG0zeHHjn9ju3VQlL1W0hLA4/Oi\nHwLSXy1a1MfuWpiBFtZ0DDRJexyioj6+5mSVc3VfyVPNnccT2Sns5QKBQNLq\nLj/TGOdZrsymaxvTNv4nVu+/kS1GZdu9z33FoJ9gayhTEFg+atBoK1RLf9qI\nZ9UM4aiB+OxOaQSmj7Kjd2yU4arN7Q1acXcnW0pJt8OVIoKfuTs9LUqSlQa4\nLreVVpLesMV08uy2UcufjhbnLDG6OdOXaZKvugKesbK8nmbNm/EvVa2/Sm3I\nSNwUC5tclOcRGjCQHf9EiD4HVOYC5RoxuJ9nxTuF3L/LZLGa+Bu9sgE10rR3\ngLfZ\r\n=B//7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJMi4QIZYsZ+/YvHxQPzXlEBXPaYttvB8jrYG36xyOyAiAG4MLcGRyAu6KVurmxPGDXCCzPsqzxAXjHrv7U+nBxPQ=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.2.0-beta5_1592074473806_0.6446400381088568"},"_hasShrinkwrap":false},"0.2.0":{"name":"style-composer","version":"0.2.0","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"19c3acfe58d23de3617f20e19bf423a23ca2bb55","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.2.0","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-+21rVVl/svaxlkdNM66lk6lqXtRBebjli3yzjpi9VNbkQNaOI2VaKYgtxxxkZi7iV9TdHmOsxysBz4Fc4dqG3g==","shasum":"8d5b7bf4aed74ac3e80f29d7210d47d7ebfa0bb8","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.2.0.tgz","fileCount":96,"unpackedSize":156589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5g+pCRA9TVsSAnZWagAAuZgP+QGdGj16URhiW4x0ro27\nQl2yVczkudqihXEI+bl3tJiyRca6f5bd2EFyO0JZenmGpQCk4l1ufYigd6B1\nFNZVOUtaWzlEjte0GxAQ3PRjbnCoZwmYoklTwbiDpJJ5prFWq1lBdest2ujB\nJZq2/xvtWNWPoSWtQGgPy+LSWYIQdm3D+qZbWY7BjvW+CWWq1lw0iVKON8eT\nuDgO2/WL3FLrTZRFZJZVHOypGFR/Epawp4iuL5pwmUXbVLs5teR1FfqSKd02\n63jHUpLqWe3fh9Fxvs6PO8Hq7hHjv9d0R/t/egguSuMYX8JveVTytiSQscnr\n9vJ5O6WqfaMbhaJffAAG05NZ+banclOV2WqFEYuAwdXUaDpxzO3R/m1aFtsx\nvgHxyLXI4l+Cw5YioKLIulLMjgKV6UXpxw/g84P8DAUyCFyfSmsUy0wOz1i3\n+s3tfHoVl49q6EWWNUxyDJTsiIiFmzjTtqbe740dS8C+B+90mdK1Djeeo/06\nGHcKcgfoSrWOkjhE1wMFdvDHoio+AsoVHmtBm164+wDkCSb1iqkYffagsglO\n0SLUEvgH74YbSieQgsqr3vDzBM7hW0sXdNcdiXB3jk2HkBwjkeTYwS4i5zYg\ncHrB9R0gRJzWBp/LbuLmUf0lUr4GelYO1By4jkCYlRvyeQGIe1q82zhG87wh\nN0pt\r\n=F3i1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCI3rDwyzOX/31tExF/iXyFmxT8SG5FRMl7Qm9ryBdCuwIgMDpOYX4VvQwYe2NVN2IlquAZUn/wI8go4h4VFPicXgE="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.2.0_1592135592589_0.6297843242374677"},"_hasShrinkwrap":false},"0.3.0-alpha1":{"name":"style-composer","version":"0.3.0-alpha1","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```","readmeFilename":"README.md","gitHead":"c1c2510a92cb9335c0d37b7c8d2be7b3ccaa3c3b","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.3.0-alpha1","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-OM3RUX4Jmsxo1Hveawry4CSNd9JkEfDEngyG9unErSz3bE2vX1mv8zil064VL4vW6tShFW4Dblg2QKkxJpBzgQ==","shasum":"8d1bec42b63a47b5dd0b58da5b68e87de0a288de","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.3.0-alpha1.tgz","fileCount":108,"unpackedSize":179544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfII2yCRA9TVsSAnZWagAAalgP/AzInGshDLkUFq/nVr7I\nJGF0j8b7L76zLHrx1qp1eBSLJm+7wZ/DfZs+UZ4ex3FKQ+fiaFABcM6VVsCJ\nUbM64gM24bPbRdTXivl8g/NwEqlKNz0sG+UqjjbzDp7psDvPokCex1xS/HkZ\n1bBoIOoT1BokEeXcFJg67/hwXBEHBYBDcVce5TgY/Uo8iXlhyCVtIYBN7eNZ\ndqTOnqymSqHKgsWV8Y+m4RqAHCVdI19r1ZYZOoNxBWRIjrRYCeyzvsvXE6Wg\nboYS99g4XANEZmfakE5gs47y3ETM+qT0ueNDE6uynrXzPcd+GNKCIT2GPGgq\nIeRd7l4ReNNEeTAAGzaZc1ixx8EhKwJdneInEmMCKwRGpvqWEwU5uQVrB47k\nxlQvMeYjCqVXNz38FI1Z2h0BNz8Q1ZcCuv9iSSI0q5/vW8SUzdGFr5yOJcyx\nI00LCJjy2kjN1OppY1m6hX4fz4E7rgnGFYLjbvFSVj3L5CdzLNGMus1yrASV\nlnYoa62HoPsMFKU1b+mxEn21RtMRshVJCKbSPTTQd5olEFO6SYRUZz7VM2DH\nReE0lrXvkwmF46OOHUuQMedRRNqTsBIcDLqjM1kxbE31sZC0QuumwiFDAEL2\nUEhy4a4F6/5eniAiSq3ek6kaXj8gfTTZga/TkU11BuXbYDG6aIdW0MmYlGfk\njrFt\r\n=MCVA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKMGVIgi3+dYxArriK/J6fCJtTBlhJe2bCrtLr+JPvSgIgYLypxbnG9SjFbtXQa2Kvuz0kAYpnoTJIVVN+GeVZ1vM="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.3.0-alpha1_1595968945998_0.5228993858647732"},"_hasShrinkwrap":false},"0.3.0-alpha2":{"name":"style-composer","version":"0.3.0-alpha2","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```","readmeFilename":"README.md","gitHead":"140d2831428ccb0fa6894187c3caa1402314787e","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.3.0-alpha2","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-DXf+3pMBsDlfH8xvVgtljQ/VVHUEi7ZWOEqW60zwPkSl+U33gd5Wq/exFZ3mPTRP+JKGFHXVYEDSAaCNLxJQaA==","shasum":"1d5d49beb47dc02757cfc3659fc193f1acdab8ea","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.3.0-alpha2.tgz","fileCount":100,"unpackedSize":170592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwwhCRA9TVsSAnZWagAAMcQQAJoHBSZbROlAO82u5FM2\nfas5OtCnYp7Oc45AbHSWOwuuLs5hHCeGcN2sBsHShNNGk6T6/R0qBwGqOtG6\nt2BVeENVzPRzqwlN2zmaJyPhPqEBHZSbhjb/E0tLWtAGLoE1EbqnERttdZQG\n3liqBbTKbgEGACzI5cc+tUTag6cMAp+HuHDkBOWiQkSyivtTngCKB615XhYX\nha0IVAkLkTwfU+ocFFSeDBMYZOdmXYTxlXdiUPb7VdE/8TouX1flq1S6gpwm\nyj8qkh4D7gVNMhazfLeRXvkRWrdKMusnllSTMuyMZHzwveNLl3nAFrYo14wJ\n1WVB+Zbplt3kjdyCvZtxdWLDsVCAHf+o5+VJ8wuGP+Z2G/svvXYcEWH9t2Mh\nyJjYDhcSJf5vQ1JQ/Y3c1mrXq9V14IyKJitNbDUWCv0LpWHNl1cTz7G9ashl\n3yDzbejFbEqQCV3AeQGP/N2XULzpfeFCQM+4CIJmUb8zwLsid9AJEDtNKued\ngMgLQQdBfoHkAqWezz4TfeNZVN4Avs6a66U+Vm0EGU0hOIjQ2rRssgvtzRJo\nK8fNRvVsH7dJ8iSPHqpGSjBSk+nSTP0s0QSPA0IHtL7j1kOrkF4ApF2IX2td\n0lWWAMf6SOKGTDfrKirkcYo1qNMaVWLReGiBpaEOCZrBp3mudht135/9fp+M\nZ81O\r\n=9lOC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHGfuKalnTPd9jtNyBhqdCcsxC4iPYl7Zjl2uHdmOjTaAiBJf5e3/vV7iuZbUiWjN7ATg7dWrxTjE1dpkd3cTrMhfQ=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.3.0-alpha2_1596132384692_0.5992530001406264"},"_hasShrinkwrap":false},"0.3.0-alpha3":{"name":"style-composer","version":"0.3.0-alpha3","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```","readmeFilename":"README.md","gitHead":"6d3011865b5a671eee1e3423ac11efa71f4cadd9","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.3.0-alpha3","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-I0BUzPFBTvhYqayOLEOWV2jQ8uG9Uj/PWRVCd08X3UCfGdxdaOd+TTxguVNpxfAT3H4u9nABT0mKjuK3cJcKQA==","shasum":"1e672b1fea5623535e40cfc365f8aa10954a7e74","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.3.0-alpha3.tgz","fileCount":100,"unpackedSize":172604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxV2CRA9TVsSAnZWagAAyl0P/j/GlMjN2Jd3eMfX2sIu\nEj1SOGG1mqHjA1dbCYb2ZcWZRY0GGKspt6XUM9v5UiNen2dog5Q6wpXaLPLC\n7sCSDtvdspb63RlyGDSl+LAQrb6rS+Zm+6uZ4beXYWy3NsttwH3MGVJ/Sxcb\nPTd1j+vDwIhF/YIUek0eRsoBJaYfvkDWfV46bEepqYQ3rw70hPuCCLIj9VlF\nxvv7uZmdpM01ho/7V6sPG99Tev27bFZ2Ee+sTawX9+tfqXE0HeDRkoc5UEmF\nrJGYZPQ/eMxqfxWMBNQm7F7vRgyFi1GTRxFR7dwcGsDeXTrLgeS8w36KakG4\nAFblMtyKrwtx7EeVBSQ9NGvt6IRBWXFAHRnSObXtdYwxbq/vCw16aeylSxUh\n9eSueWzHbAOgZwAlSVEP1XKGjyhVLf6f+qggdbQOERChgI1kVAr8WGfvg6pg\nfh4KoxmTpq5hE5VzUh5QmY0RyQquzlfF4fa37sx5YUMATtNZpWqcf63zE0rL\n5TEwCqtolN9rtqrSQtCImCp51Npreh+LqoONuPqOZMEBJ1BA8dGkti/rNIIg\ntWWARhhr3OEmqhDRl8jjNPO5xsNvxW6FTmP5mybKNcuYHV+IC23mZGIJ3CKO\n5QY6uOR19EOWBCNrt2CI6fcmUsLJXvW7U2uL16Q9Ye2QvGfkyaO+BUItZQW0\nnYo7\r\n=6Dl7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEL7KraCuFwX6VlawPnleWYx3OihtCF7/n9wiwOz6zEZAiB7V1x0VHdfDUkY0L7npTK7pSF+Jr6IMx4vP3fc9f8T4A=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.3.0-alpha3_1596134773530_0.474059295978398"},"_hasShrinkwrap":false},"0.3.0-alpha4":{"name":"style-composer","version":"0.3.0-alpha4","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```","readmeFilename":"README.md","gitHead":"edb2dd22f9f0798e36975d8616ce24cfe309f173","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.3.0-alpha4","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-HvqENla084a+iwUO787PDxognYfgYUvae3wQZDKPu+nDfiYI/3oEx7n+R/l0fhxZ3kIe9OkN9kRN5oLyl3KkdQ==","shasum":"b3618871ac8d0f86a1872e4fa2dcecaef182946f","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.3.0-alpha4.tgz","fileCount":100,"unpackedSize":173410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI+S9CRA9TVsSAnZWagAAxvEP/Ar8TS6N68Z1TRjF8WdI\nJNHjfun8IhPHzmNmksri1TNmIFLmGODNdSG4Y8ZYD5ueocaptXeqn0smmPL+\nFO+cmIqFtPIyL7WTiBxHzSR6QVrw6+1hvlJ2DC15BGmHaTE4Nz/rFiboL0Tl\nYDxGTFbX4uMeEwHYUSgmJDRTmrOQBk9zTyPpNE0Uw4BF3SFBADPlcEWO74P1\nCM/HdCGHy4wbmYUtl+JCuMA1tHy7QLLaiaX6CLj91QyqwbijMcaUoi9ks8pn\nnEwSrq8qNMoi5QgGrX27KplFB8GZHCuWNlQB1N4LWHmFYdl8N+PZ1ardPoCR\n2XfIENtqLi6CRNSSOdCRGYMJxrmVxx3XssrvRqFHTvfan3ubjsKwEUA81DYE\n7ajIT1Lw4P5dg3sFctXAZZ76NC8KJdyno7aJ+g+ESY5GYbFwGqAL1S6IsT95\nPJVLShir6a8CAOccESCSRn5H0h8dBaeXIXH7C7Y2IgZ/C0PiUJJPWTQd9TxT\nBWP7jlQc5wZatCLEl1SId/A1B7hbVcAemB+kP5QaSD3hmYoeR9hDADwoQ4mB\nTkKr6uNO5ndNpP33DPKKFwEbGkJ5d0E3eLVV0sqyDMMlDBVxWfjOjnLU+qaX\nthhuEHOUvD1oJXdTbcnsAx6q2LCfF+wHknoK5s4H5z9haeXUBIoE5QUEqh0H\nD7Ew\r\n=z2eQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDKl2ynXj3kyS6juAl7UTdTmnJj9O5t8B0zpPf2meN4JAiEAg1fTwhwn2rvbchbaoByAoU1p5BD163vDGFEETI1HA1A="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.3.0-alpha4_1596187837425_0.16939239617685775"},"_hasShrinkwrap":false},"0.3.0-alpha5":{"name":"style-composer","version":"0.3.0-alpha5","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={classList([$Card, $BigMargin], disabled && $CardDisabled)}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```","readmeFilename":"README.md","gitHead":"edb2dd22f9f0798e36975d8616ce24cfe309f173","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.3.0-alpha5","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Gy6xZUa+jFasCBOZW68AWDr/YrrWdTTRpeD3PRqOs4/RT2vCh6fHXRU+aL/MnPMp+KK0I07MdLQhYWiAVP6jWw==","shasum":"0da8c04e93a9ecc0968dd41e6ed71ce4e0b90b9b","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.3.0-alpha5.tgz","fileCount":100,"unpackedSize":173423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI+VHCRA9TVsSAnZWagAAwMUQAI7SYzLRvae37HlR9TCt\nfHxblLiY8o0fG3PlslcBdbi/QNoZd2GMngAh1ERdhVsbY1xsKcbXgC1Li4OM\nCzmDz8166mQFFeQzVQ5WEfrltRjql6bFS7kIiDyzyAI8Nj8zZbWUpiLpmGc/\nYWb00BUW3Ciw+8i5J8Rbruqbl3ZZH9r8f5hajyKIeY+I4zxgoAce1rO1WGpi\nCHCD7itgWmjQMrZANg5SU404d30OB15y7Wwl46t1BqZgKViftWwvucIriwbX\n2Z1JYRNM1cBhASRcr8Ilmwm9O6iYXrsCik36SvW2TW04kG3YnIpGEapqIlmQ\niF5IMzd/NEVqITNU2beK4GuWMYQNwH4U8rq/NahyBN2hQqtxrL5CgwqWKe0M\nojiUKsOOcvxbxUUBVxBp1GxZgA8fLYYi1JJT+TWwx4BEIlTZkxBZNYr08IFF\ngff5WoWdDB8h+hQpMEGkzS9/YiLvnD6irFQUO0z+n4rMsHlkiqjv4P2ohRE7\n+EHnNsIg6aoyT+4Ac74C8nzkv5KhWdxJky/EFa+POiOYhC1+yiepnBzXw8xr\n8AcTgfE0IyCoWeEc4HzZNl6GVRt+cyAy6OThkVe/TIbfcnHC2TAT7xssMvyD\nkAJVniYwNanIeFbrCfvh2D7ikzeLPlmdCcKbiPIzSJ0sHermWhJ5pWeMksqO\nPZHA\r\n=LN3Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDc+1ndWiY5hcps5U49GRakG3VJyBeu7+wHizylrglS5AiEAp5OPm2bKzYtMQ+Dgm2uA+g8l2KaUJDbVbh8PQVB18aw="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.3.0-alpha5_1596187975538_0.07330831969585883"},"_hasShrinkwrap":false},"0.3.0-alpha6":{"name":"style-composer","version":"0.3.0-alpha6","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"a588918c766dfc7539a43a0c4dcd17803276e097","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.3.0-alpha6","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-riXKpwBeSaVqFhRKn2W/WTbYcQvnIlgPCXWYWjkhGXhBfE3DCuM9vANLqiXHaR4n1fKcBdjNEyQVKqOXg8U5Dg==","shasum":"d535da16811906e796e6af41a42ee53845fd63f1","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.3.0-alpha6.tgz","fileCount":100,"unpackedSize":173519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFkyCRA9TVsSAnZWagAAglwQAJuXsF6VyDhMBQJVmSvH\nFrVFnI0/we0sL0Kn3BO+LXQrzkud4hAV6iZJyc7bbnEkznnPgygS5dDLtKbV\nb6Y4oMSvS0xCA2wO76kgsKyv6Z1xbGQxDKRQdCiTjoxhZF2M4hEvG7R03Mum\n8fP4gqmBMzEZX8WNP2hIw2kUar84QFCjJjOBIwoB9BMK5dTkwcOMbuueRCkP\nFR2QC7Bdoai/vuBASsBS5lt25W1d43XqizbPexDse0TGLUQA7nbjD7U6NHRh\nsVeTqA+exa9v5uVe6jgRoNK1IiIfkAeG5BccYSweWZvjlUa6rpTdX3OvjQcz\nd6BG9QhIgGMLP8jZeikBDyD89xOrz23eWFKb6s9BgWK16UKP4t0BSOTxjU+e\nRWS+JKYODPI1JoieOOhkIUt9Ae5cuMtNmDpJdhc9XA/iKSRSRyNwQJnCJsDW\nSVVDfZIdqGh0up3bmwK1eZZDJc7ZlwL8+75hgjCC5wq7xRUoHI6XFvyXq9Il\nKOaOouFZiNU9pxEwxbSPS/DGKbWdk1eWsEWxd7HdXG8Arkz9WGUErAQ1yiq5\ndAFmdwovSlfPHG3zHb3u/BTM+vqs5iG7mH+6DrioGbB/rrMRkNRTI+sPzQND\nG1z9WsS1/BjdIlc8ufhPVlhdgM3ulgrZ+V7EZPd2/ANleN/U2092ZzMQYGjx\nNXRx\r\n=HAOK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAPw7i+0kSnDrIsKE2vdeurVVDI5up4vmrijnVYnsQdlAiB/r++RLOc6fsSomqi6RUSt1P+8EoJIwEWhvPiTgqjlDw=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.3.0-alpha6_1596217650319_0.20010338121570315"},"_hasShrinkwrap":false},"0.3.0-alpha7":{"name":"style-composer","version":"0.3.0-alpha7","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"ab113063666615464d675d054f177d77dc2e812c","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.3.0-alpha7","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-e5d1k9q2GLXhK1GsyWb4WAukKjMoDUKKSs+neLNcGFKyl3Df/0k1XjlQHpl31gpowXoauc3xmacDxvQeXtO6XA==","shasum":"8cb8d36e0671ba706b0b8fe12dcc457a26b66bfe","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.3.0-alpha7.tgz","fileCount":100,"unpackedSize":174352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJZ6ICRA9TVsSAnZWagAABegP/0f2zVv+EaOHui81XZny\npfDOhMxzincNCKXPI4RGvQgrv7Aes4w5VV4AAcJ3n6a8AUXESwc14ix/kMwL\nbDB3pp8wzJ7ZjBdBmE9/1mpm7DpLqO5f5oq3XhfXetIp8yA3SsSjaIMpc3en\nf/FhEnHzyq77eLN+uMKuld8xMtDDjUcWBdNEIALawkRX96rNbnjPoNHnfdE4\nXaqqpwfM0etZTEsgnRwFJbzIGOmibvQLT0ez6XCdBDrPSaLge6Jq1BoIdV4i\n0+r22HtfdKcypFOtBe0o8oboHXw0bTt2y4q17kfuoBQiAEhmKEsUFB2EKC+X\nmAkS2+QQwbEZoKdSu9IqwUU2S63gtXZyV7HXYHtjms+795zVg8HyDqLi4DzS\nrUMOgk6FLPqEfHWh10zvw+CB8kdRlidg3ZIkxKE6Skoa6EIo2Ctwdvf4QJ2o\nlv/ZykaZpqkP7h9rpZh8ILTUPP+uaR8KiCyZe8H1SFh1fPy1GcBUXQeYu29Q\ncJdxjeGEeGBnjWDCtkKfM9TVYN1qFneGqhVIiEe/PWNm0PGn0urmRddDrG6t\nkbJ2D/0j1VYZRWSbjTCJXbsIf6cOjXvaXMxkjMUCEhagefg7mWWEOzUOQxK7\npZlUSOSrL0XVqKCdCd7TfAJxCD1O2VihaN/RmkRqKZlRd9hqyZLJ0r1HsuOc\noHte\r\n=s1kV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCr5Vj4WxIJrogGIoslBTm9qSQXm4CwRglFS3L8BO3iiQIgXm0D+k3fEC21sn7Xj6vyS2LXtrlcUNfYJSv1prwSkHw="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.3.0-alpha7_1596300936348_0.23765881665384048"},"_hasShrinkwrap":false},"0.3.0-alpha8":{"name":"style-composer","version":"0.3.0-alpha8","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"f3c95c704d01118f5b8b7c0ce92747eef76db638","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.3.0-alpha8","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-+lfih9QVB2/INA7Xp1zyzKiWvEnRQBLcH7/GefDnT9vog0zzbrq+0K3YE2qDWs0sXjRsgt1fJZZ0bhwGARPU2A==","shasum":"b03e0302bb18c402021ca6942c8f37aec07cde9d","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.3.0-alpha8.tgz","fileCount":100,"unpackedSize":174603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJanzCRA9TVsSAnZWagAAM+gP/1QRKFnHlW9ctPk3auhX\nZzRite0GfAVTcV6qHvEWzhEja2TO5J2Tmc64glk+TThtu7USCqEk6pIeNZub\neHTZbq5sSPQlmi6weCDtZshFe9O+/zae5vDwepLdrjxZIkJPm7zxHcrNF1gT\nI/L8W4ZDis6yxwbZ1MUW3y3DHO6grHmcmOapwhTny2FYRWoOP4rBafjGYO3P\nxKQTeVAybnEuUsOzxHOeA/0FgWP0k7Hjg37IhyQiGZW/+jDWms6t1W75zr0M\n282RI1ltpWbDodP8L0aZ/sFiQYmLfL1NhWhBHJW2ihjGEYW3DotoFt05ce88\nl4z5jc8vDcgg38/oHN/q/SBmQ7Mf5ktiVT0ppOeBrqReGMXopID100BKsXQ3\nQyoO0bFoc2GHDcVTcFlLr6Oy8SEUvBBcYWwHUxiiU8XM8OW6zcRsJMn8zc8L\nbVUoaBtrxoMsEX9usRhBLLfo1HE7bn3C/z059cLt6d3LpvEx5Fxr9IZwElnu\nyrsTHWJGme2yFFICjeQ3xD7rZpJz5ExOJrMEKFzAzo3OwBP57aWvY438RoQl\n54KJSlq4Nyc+hPFsgF5zEunWpLvysnOtzrh1/gRgrBTWItQcHaqhGbChr1Xv\nhQu1ceyyPf3n+Ue/xBSDCOAIF1VTMWcQq1l4zcf3dHzPLz6Vj1fPFmCBoUjA\n1W4H\r\n=fHPJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDbCEBW7YesfTAh35sx4xPgUUpltTmPB8IFirxexS7mXAiBEe6LCYkdpqCnTnapb/GQBcNktSLrrZyiLqgG6kbM6oQ=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.3.0-alpha8_1596303859439_0.8254624502742409"},"_hasShrinkwrap":false},"0.3.0":{"name":"style-composer","version":"0.3.0","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"62654062245aa4e1bb46cfd802b955b0def62065","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.3.0","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-3yWytJ4R8oiKyg+TpT5YpnjJLSk7oylQ6n1UURBtf8BA7VUV8OX0BaFWTh0PDhY/WK+3O8+/eq5GJUktULS0qA==","shasum":"df2ab875d2650d8f920356f3b1eefa78755118e1","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.3.0.tgz","fileCount":104,"unpackedSize":175577,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPBnbCRA9TVsSAnZWagAARqsP/RmMpQ20EhvyFcX7B2Dy\nCPbC24QNrAefZHELnRh1GCQc8TY6WNHLd5WE+fvWxRd3xNzs5DQywWyMAC18\nlLJxuuDWW3HdWURgySl7PTwNGCgf5FBf6czBZAzbzqFUWTwX1TptZo8nxDT9\naLNHnYh4bDUOwvlnrb41isUmj8Y8ZkjzVYij+Bg3aU6hXzO3L79UQ3SRN0SG\n3LsTk9LkoJQsnX28L+D0IeX3zYCVPKceWvdH9p/S/RVXtcFrwlqagDuXek7s\nUf0vSkzHn2qLAEkx1WgLH6rgCKY6q9S7MTR4XV234SWb+AX35Sei+9bR/zxY\nqNn8/U+DMXAXDnFenWa89xycEj2kDmV45zeJKPaMImTIB4eCLjut376LCFoJ\nv3gBWWNX2OCAmC+Xe+zZvNZmbUZGByOGtfru3LfgvhdZamoZXhxdGuL5cVYX\nLVrixZsrCsHKO46HPnUxEFeKgDp6Z1s1Jq3DkQ0zT86FmuxEhml6Lk3Alg3m\n/ShpnvrBggFNe3Uw+bKXnLZrUJfsIrLjiZw6TqWPfPQhoTynvnykYfluTqCr\nUNsofGf2Wk+m9dxLo8A5/bzZ9YBROBqwhf6+aDEmptexS45QYS9pysXlb5s7\n3vC1vz9Ltt+u2i0rPhTb4kemy95BqYjM26io8kttdphLrq0PnViXg4AlWVdR\nP8UN\r\n=WrHE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUI8A26eeFtK7oG5sAdwFhkE3PX/c7+h5qNt8//wONcgIgTGqN7vtsrxeTPqdOy9uNatI3esaazk1AKDsfshxzsOQ="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.3.0_1597774299006_0.5345072275298004"},"_hasShrinkwrap":false},"0.4.0-alpha1":{"name":"style-composer","version":"0.4.0-alpha1","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"eafd71d05f4bfafae44e63db673336a96223bd46","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-alpha1","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-DEa2dYG025yUfsdh1iVxsp1A3qHJZFLrQy3NSHqtOVFv6uN4s/ydcTaQE+otmr6s8W737cYG+jfUMgc/1G8/hg==","shasum":"3e60d30472852c3ca8d5d84c78c1a1a43294b73a","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-alpha1.tgz","fileCount":112,"unpackedSize":190465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPC3pCRA9TVsSAnZWagAAZfUP/j85129cQ3bjLWqtH2O+\nqOlbemrivgiv3Jd2uy8HooHZXh6D2uHdRZSCEopCEOW1fTeNCNRVqbc5RleH\nXmexyqVyrU2fyCKwtjYr0HIVWCKiiVF22KF0U0RsSplNBMf3Dh/7XI0L4bhV\n0RCaxGH+9LAChFYdYwlThAV0sU4/0VkGzSJqi3f2xxFBDji3bVloBHEMfqoQ\npLdS9EiEmY1i2p2ukUHIdRm9h2bLfhvlpAgSoG+KSosgN2SDv3ao4VvumjwL\nbxW88TERBk8oQuj2kdoXPAMtB03m9BV+7L3GO57Hy6xExlLj3sS7UG85h+zf\nhy24+FpxYAt2qQbvzqxRUYAq08UsSypU6c828gQJQ8GvxXLK8pBblfi6KoXh\n8P6H9StjOlMPtUXXybLqZ+OnlVxBBozg3M82PrPvE9SOsV9WzIZBO/NIAvEr\napdh7xxBG2uGDPX59Ston4D+DS5sM00zAEXFH3YrPagMJGKkdOPYumTlJet+\nox+bV7J+ipSs/Hz7ihkVyzo1NL9jiBulTiQWej7Nz6Qv24y5wFrs55q/RjYN\nUYw+FoO1NdY882tzow9Jmnr5JBUQrDWSqhPmN64o8I7P/YI3inSuocDPMPG5\nMy6tRUrykHp/S6YxUwR9z8jDXYZulp5DmjaURQOvkpwLaV3C0cLmle65ar4K\nDED/\r\n=I92l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsMEf9I8EBqnPIlHe47k9PmcxFGBh4rLo8IqmZ9w/vIQIhANa59FMZ3TDshSQXddPVWoOgSCKwbqdR53cenynuTWuv"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-alpha1_1597779433076_0.12658836457370404"},"_hasShrinkwrap":false},"0.4.0-alpha2":{"name":"style-composer","version":"0.4.0-alpha2","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-native":"^0.62.18","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"870713feadff0fd56484f0a465feb4def29755d7","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-alpha2","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-9RXthgsnvs4YXp6z6FQCZn5SLHlC9YzQ4tF4eicazt7/XfftrrjXp4sjowG6S4xnbXxPi6HB2JJeAN9Y4EG/TQ==","shasum":"dc1b91ef7a19130ab7d8d701bc21a839dba1f26d","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-alpha2.tgz","fileCount":128,"unpackedSize":212646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTu6QCRA9TVsSAnZWagAAyoIP/20nrgtrnZ9HOCuLlxog\n7BGy3Tt7SpEsJfKjdX2o7BreEyherSnY8AzKrRzOEDacsPiCPq3/9BrJHnee\naMI3zcIR+nin5k9Iih78jRDRxBF5kCVT+iSDj5erX+lx1hFz0eQpayW2Fano\n9+xQh3i+XIMCCHo5iwiD7jIL4uNF0YitCA1WJAX9FsjK0L1XwxQetKECkNhx\n8gtbruJocsOZLg8ONNzHXSKzjWa1vV43Pnb/nwaAVQzTypkQCVSztyHOZmN9\nuOM7hH8xmUiPFtxircO7z2De1YAUL6fG4NuAPsJnwCZMEvVstqLbDwq7W7ts\nx0RLwN3X7GUkKbm/iibYDR9ob7u2um99wIJWyhtAVfEOWok+jU7Vo0W3FlYd\nGNkoeEO/+6AT0wUjdBrEjjwBR/sslZQxT+z1eM5wAg2Hg03ZSfaOufhSyY+f\nAB5BUKWHbdtp2yyzlp+/LktslOk5Cnag3wFdvGnD2+t9A4N/vb5KuUH/p+Kt\nHSeltj5cA7BT2ZATzICmRLUsgmI2WfgUme/tko4UG9Dc6mWgD2jEl4TFJOwH\n8hSQd7Fxnyixhlr6OIsh4P3V1CBqmLr1vuJMMWhtgh6auKKabe4E/OPqup6h\nTD27CD0T5aNu1oPssXfvDsIWexDcx5Nm3Y8+mY3S+i5XdBTcb9JpKSQK5w71\nAkpi\r\n=moon\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA28qQvM8Wci09EFCkbUX6HcTkzu0iRQeoBd5R2u6dJ0AiEAwdAjAHAaiaCSjvwLev2ZAfzDzi/jlGK9oE1dW7uFI20="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-alpha2_1599008400129_0.9614273832757618"},"_hasShrinkwrap":false},"0.4.0-alpha3":{"name":"style-composer","version":"0.4.0-alpha3","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-native":"^0.62.18","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"25ec226c9ecf4204c2e9a26f1f8d6369a37f44d3","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-alpha3","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-r9SPmZVjszrHgdZJ3u2KoGvovqbuAz6C6Wgdls7OjFNIJHvQQMLL1ktCBjAyF/K7HEH8lgPtnBPYMVFQFAsRBw==","shasum":"1cee8fd319fc57f4947b3ec39e0ecf1ba1972c8c","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-alpha3.tgz","fileCount":128,"unpackedSize":212871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUjtCCRA9TVsSAnZWagAA1TIP/3qTAYJdyf1BMjors5DS\nUPFfdjRO0iiE1DGePXJ2y+Qi24j+DYahHlQEGHfzgLPC8TJ47Y/eBj7SSrIz\nZA+ZLoXCnNYsIRrNJUgOZofNW24n9Q8M+Isqev31l8DPRRv9tDRNJMRbXDTY\nr153qC8k5MZizS3ZstoQ2zXnwLr7zuguBU/z6kxzlS9M+d5eTa6CkVfnlnV7\nwToN0cZcqTHseWykjSne3LKqpvMta5amnHPMENutjtdMNmj00n9Fz8REd9FA\nIY09UGVr920oFgPVt5mz4ohyyPOVQ9XrGRGeWEiqqoyX0Xl8c8MC2NdicUWX\nSq/vsuiA/zwgFINKKRC2IwKZNDFDmzjhffNgWhSlLA8WlhsEWcFSG77Cdr7X\n+i4SGDR8PoJjEYRce36e94VYDjWab7dNStybrqbmqnz1nkL1tiUtxh2BFoX4\nj225f8ymTyfVM6/M2liC7pN1jxAoUPbNoGOTk1vkiKLi+f5xA1iXuj2CuFV1\nvl9x30GLgz08CzVUXtLdOEQEdxDuzP3Mx62IZYndXKvDfRgDJ+nfeTxianmr\nJmLVL1qAmpQfL2ZCJp4tNFKtg1mgt7kyUTfEvHYzVAcujTWQ/d6JX1i4h/Ij\nA1ezqpmQy7JHRp4t99nVBxRBOo0d08XQHPJDRGdg3NhBNcWsvek3vaSINr8f\nJ8+C\r\n=GxaT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDW5gnJ+6RM0rg0gz1g8EAoJRAQWZH7ylkQBeZeaLHJpQIgFtOxrmwxG7N66GhKOb4WyvjGteZEGC1WsHEsgo+JTfE="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-alpha3_1599224642124_0.8398489333101333"},"_hasShrinkwrap":false},"0.4.0-alpha4":{"name":"style-composer","version":"0.4.0-alpha4","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-native":"^0.62.18","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"25ec226c9ecf4204c2e9a26f1f8d6369a37f44d3","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-alpha4","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-N0U8DfWQUy3ultn0LEIoHDH0GWBl7Ah7EkwzguwmtAHcVPSyATrhXRo9WkaEJsCtvRxxICfU2MeJoY9L8wfpTQ==","shasum":"2ee2bc610fd64f742522ae2db3bd2d34f3edbcf4","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-alpha4.tgz","fileCount":128,"unpackedSize":213021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUjvUCRA9TVsSAnZWagAAUhUP/ApbaOB1Of3+roqo2Pu8\nCb/S5r8J2KQ34zWcFZ+zVFXgWrzON58rmUfZCpFc5rH5xYg0jlioGw1RjrKX\npmjBxg660vXc5nybvTjNWME8RG6JAsWzw9jb7PW3ENSQTgfr8zp9DM80oPPo\nOfYk4yofH8c++z9uK9HhWhR7TFQjNdTj4oR8+kH7xoJOTCviwu3ItLFkSmjP\n5knJK4ASun74WrwjW/yYF+v9fbLqfdj/cRDJwFoIVh04Axh64pOwdsrUwFzI\n/lNsmPIum/MIdHBcXSiTw/hnuPVQtI608BRrH/0m/5BxfdPxruAAVKjNZ9WV\nQ2JSAgUJAUnwb/E4n/STiaY0LWsWHpsPusQVlucjvFU5EGZOtSsdy1PgZP6B\nLNnh2aFDUeNmiF19spPpKimfFjFhdCOhuU5OvF34YCMUIM08m3btZlWHOl2U\nhkoI8ttTUZOwO6EuwL7fcCIj5WNT2D6FAxkobM5qaLs+Vbo1yYaPfnfo2Fz/\nFsDIp44pjjWWZHv6jCHI/DbXAv9tOai2rRtQhtGfJbQ12obA8XZhkYeJbml7\nYFHf+Qbd43nEJr0IIk7u2t0ULhF0JhH/ozC9upPvWcgHYgtRvWaeK3ozD6sP\nnLbtYRHCqTQD7Vnny16sbDvQANFTb+u36ArfJlzYINh8CDKzHYsX4YKR1O4A\nbX9m\r\n=BXqF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBH9uc4GQwL4cJuzA19Bvr6sQ2kZr1CcX9k7R1K3r60vAiEAiWJHCeq8MJ1hf7rnGcIhxpa2o6jMorp/K4oOg9qSsiw="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-alpha4_1599224787918_0.18967554910196793"},"_hasShrinkwrap":false},"0.4.0-alpha5":{"name":"style-composer","version":"0.4.0-alpha5","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.62.18","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"09adc95794f204b4282a858d48ee8a088a745513","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-alpha5","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-J4GoQ+RK0QpAqxt/259YCS8RszthFgudJOPDuTbjk5r591sYPEJi9/O316EiULt65sR1qTfUXNUTyHJFqPsHfg==","shasum":"d896af4282a3539e5bd4bfb181e5c65c934e7b4e","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-alpha5.tgz","fileCount":144,"unpackedSize":233737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWBhsCRA9TVsSAnZWagAAob8QAIKxou2X8JOwGpoM13fc\ngNzCq7ESG/XNlayLtE8865uMkFc2F/UsgsnKhpyBje/wl7AzNrGL90zFh2Ph\nCrgQ0CCCoLUsBGJEVykRKLgb3d0uzgHHL1hem/sBOUqWuP+AhSeATCsVMKeW\n5x9hYS656llf9hCgeYWpOE46gtkFaW2iaqE34B9dWAcpCxk7P8iSxcPnmpJd\nMB4bXv1gTfgP6V+rxr14imEoIXCvpZvuIevHU53o8WiKpqlvyhN8Fzl7YYcS\nhfawfRWGebKVGZelpWMRw03p/nktd4qW27Ruru915EveD2oRR1tI6ZUSe3s6\ni3FtPkq0trGc926PlQ/S/TcLSo73UPMscGbFh8tzCCJ26ER5IPs6k8FHNXQk\nhiBTqA3WxM2wgl/iRqHHxtp8FcaMgofHMOWV7sa/86hN3cOhbEpwOiRi+VsZ\nEBLHewKJ1u7kQbFz+LmNoA6GTYwDq0DAX9iXRM0tga0S0N/qneDeVZD88s+e\nGPMC1xUzR0AHtieS9HFl139o/HYbwTkXNROGQBT9wTwKC+4ucu5S1/z2/1Ee\nm7OaOkLYevYVekjLgZnmGkNCIUSE3eH09BW8XhlsEbapY6KdIhjHTIc/ySCh\n/uTfkCz4SKn5xC5f/Mcb736auuBFjJkc3UIqZSKvAa1MhSzXKbNh3h1Hdgr7\nYYl7\r\n=6PIQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBtsW5pnCZ4s6oNJ9WD5g0YoSheb8KiF+69EJv8rx0U3AiBhxJQolKGiyXT5QS8oKc2kaCBS7gCH+Cdz3aGJ+4NHvQ=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-alpha5_1599608939779_0.6596024418525754"},"_hasShrinkwrap":false},"0.4.0-alpha6":{"name":"style-composer","version":"0.4.0-alpha6","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.62.18","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"8d589e8e51aed4f74ce361f45a46e58c280a6057","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-alpha6","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-OLn8kOEfhgKXTVK/j98WXJe6n10apNoK2E0BlpdRR/2AMRtoUqeUuwvu5o/EmObe+s/0nK+S0BGjAU4nWGjP/g==","shasum":"484151974aca87a1dc7ef6703641b2ae282d2a1d","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-alpha6.tgz","fileCount":144,"unpackedSize":235071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZ6PMCRA9TVsSAnZWagAAkEgP/2taqZZPtUo6G1V6odlt\n5+d5ABfqqRMIleIb5he3dQpfN6GmA8V+B1kMJd1Ik+lkD5B7KpfwVxNXqqcz\ni0F90Y43Chfl1Whq00BPvuUHVrGtN7xkXhChzh70Z0PPAE75PBufZM3DxckE\nCLP3Fdx4UNysrxALC7fjEZ5Zc+/DiCfxWZgl2WtfrovLzyk6gIs6o76X1TzY\nwHFDfcAkmVB3w/pXQ/YdxjCMAQLsYlf01r0es856Hf/9Erybgxa2XoPWPmn4\nT9k2k9ZQk8dtuYNHDRqtErZjkUkhzZ/836ucDuPFh85BV3m7Ezfud7eiBp39\nn/BWt2nCx0NivQ+Y67STNcDltYrD/VgBsgRcOMd6ZXpAJGoe8ChTA65kOtrr\nnZf2pS+fzxsf5gVpBvB1VDqJrIn92m36+v04Qz1OJ4cG9FOreDRUXEE6Mpki\nzHeWUTdka1N4r7gGCRzv398/hkxs4uyp/rgWME+/hv6pA3kELGT4jjrxjXAC\nrAVSklh5Si1RyjrZfPeP6jLFiI94IOU5XhG6YmVJ93k6uMjUOdUnl/XIhDZP\nSDT3fNY+mxVZ3hm+AtIJoq6G8FMeXnlWjtSQnpoAn/Ixg8gtpm/pD63XHbAx\nv6Feya+3NSl7gyhHstrIFsr60eCGUmUx8CiJJJmYdoeezK9ntXgNWcAgB9Yl\nw7Dy\r\n=9Y2v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMmf+HePawWkCi4bjjFqvjyGwk1B54DbiX51AsMmiIvQIhAPL1MKtg88hSQw3/Yk5yozHKt3+IlE5aU87Ov2AM/ych"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-alpha6_1600627659715_0.211913838149548"},"_hasShrinkwrap":false},"0.4.0-alpha7":{"name":"style-composer","version":"0.4.0-alpha7","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.19","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"dbc7fda411b10f7ba9df1fa94e8ea32c3c36163c","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-alpha7","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-tFhvVCRSzvrlqrbljbtyVtm2KUgb6JLwfaDuDeNU/yTQQM8Auvc3amNEFvRyA4Up2nPi5mY/twnq30Oh6B+o3Q==","shasum":"8ba1f7a6f295764430909f36dca6199c4d4f0155","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-alpha7.tgz","fileCount":144,"unpackedSize":234730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZ6XICRA9TVsSAnZWagAAiYAP/1SV6WXUqlS3xj6a/AEN\nblZxyQNOf8eED7U0SWcM/P8094dOFAraKz5yR9MJ74t3RYyaVJgWp1sY75GG\nOYdtRdkNS67IRtp3rn0ZgvnBZJOvWY6Sz8nREZxSHQ/oBxACb4TJFLbVX1La\n1ByOxMaX8WcULypWEkFj41TpKPeF1CS1rWuWptMkoXRwxfIRKIcp4cEmwZVc\n/bAynOfqhpta3epw5CftGRHsEYkb0MutooMsJdGXxIgl6Hqdw+ckPZsXQyPX\ndnZbsS6YcwbijwThyJW88I/EmkF2Pw6t2XVr9Oifpy77u4JSNijEB2jgNMOL\nWL0pJ0yz179dBxr201IZ7nmrUU8/LJyy4XU+sKwFWMGsLhNuD6GcsWSar874\nBcNYoF8SUT+w1kHUjmhfVu9/KGpYAYfhaht79VHelCVByBoYMFWzmU4KrRqg\nwxXFSc6xSSthsPMlRiZmUf2mBA9wd1oOlPKGjntElZVTWIl0+cQgSqBAsf/G\nhtRFfCAdwiaC/fQtT6yCk1JAiWrj4Raf6rtlyupZM3yVwrkTBRe3vViA7SC4\nj7/CDaxCeBlMfo3R7+StDpNdvPY/AFwPCm/QU/dDz8sy1TD828yvfT/6LE+T\nrraRQRiRbRQqY38HphgJI0vWgl2+C+E81BPOnCGgEGSTfe20aMS/FHIgFuhv\nZbDd\r\n=EBcH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEaB63i67o0OSii1zybA8ujKSk0oxegNguYVlyKSmXjwIgRWlDJ885LFCfSiocMQpJbsBTqrhPZjhJo7NofIO1ZEk="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-alpha7_1600628167840_0.10137515735838765"},"_hasShrinkwrap":false},"0.4.0-alpha8":{"name":"style-composer","version":"0.4.0-alpha8","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.19","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"da689de9b8ace166c82a109fc787a5bd4d3aeed7","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-alpha8","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-0jWc6RraWYuBDyYsokRagc6d8SURQJ0Ahrv89i7Af1b7NgdKMmwzAzCn93z5HjXyMXlAH6TURK+Ftwyut+SZGw==","shasum":"c9bc56218fcef2424eb663a978474315f892ad60","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-alpha8.tgz","fileCount":144,"unpackedSize":250468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa1IhCRA9TVsSAnZWagAAsVEQAJNS4yaKNfITR+lt5Aqq\nwIy4in0Q1BJ1/tPHu7JHPORdG+M2rwNdSwzrZLf6S2BEaUzsri0+pRobWn/u\n7rReEsw1ulNI4C9GfN3wq9ZcAaNVjl939GbU+Cl79thAwzh/+zytMuHNgZLo\nj/eqniZ6PzDzovQSi7XPur4z8DHIGV04gco1rJ4z1SPGu6kYMs8N8pYYlUD0\n6iQlPF9Xq4hcYgy/Le3Iy5R+JZGcH2eVpWO+gENuGTskE7r0dq5CScKmHyru\nC3FrqQS9T+FGB4ylpKAarnEYRLMj2m8iN/qGQopGWCVvjlgBMJm9OicyqwVq\nX5v3P9GAbusvXwJCBDGQYBRQDle0cJHGTri14ZP1Zb+GlN9DJZcbNAXoMz0I\nnoIIlXtaPaclFYBmWK6iRigKJr4ROceqT6pyuHJHKCq2yExGYYmTyK5wJH11\nuJhdTm+pnzzZL1QNxln/uDa+IKfhlGWAhP2Y+acX0no3P+M8SsZ4m8O+D69X\nTSvPZHfEdn4s3LClRXfYnajG1c7uH1qR2EougH4Y8w7ZyFNQd/rtJ3f8AqX/\n1UTz/pxQHiPl/c3Z/V6T5nk2SRD7FXFodrzaApwl+a0+aPequAqslZF2Z8OV\nLZzsLelpzqnO9c9a37xoC3OPGvyiaKeXgQlCoObzwIHvtJIsz/xEkvT6k6Y1\nSq2r\r\n=lk2C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE6e+xNLxnqMW8rK59mtCzaWsUWI+9QvUVbob8iKxZwYAiATl12sAps40sbBVnAITOGt74UoIr3+be+YRt64OKo9RA=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-alpha8_1600868896566_0.221751496157641"},"_hasShrinkwrap":false},"0.4.0-alpha9":{"name":"style-composer","version":"0.4.0-alpha9","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.19","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"da689de9b8ace166c82a109fc787a5bd4d3aeed7","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-alpha9","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-lAAkMBkprkY61KXtlqaj0dlZEwGF6aJw/411QuMW5Ibjjj/EYZGZeilBBJWfrVJLfNakM1c6rOWgktDk5trOoA==","shasum":"690325f52003929f4bfd68d488967b2254f699d6","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-alpha9.tgz","fileCount":144,"unpackedSize":250729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa5IjCRA9TVsSAnZWagAAl80P/jGOW2umt/b6dvHP5gp9\nSBB+p/eCTQ8mF24rXO54MDGChqg+y7Xmhb8Y4QWTqIOBnVFQeUND80kzHOp3\nK6EPb9atwmDpq1ls8+kyKmx1T2CyLGnT4vrFBX4BKq1cswzusJvjMGGGk4MP\n91olSLim42LTjIaYCsnwF61L3OSA+i5iOufKdSdxcD1TCzMdIeb2pmx6T0Rl\nUELqQfkMkve6mxno4+aZvoZZ1UwAD/URGuUowuzymY/8S6B9bxy0/L+8YJBc\ndAxQBOfRV36QLpzmQpy63cwkS7D/wdY4ffuH08vUM02+0wyVHpTjrMEVXQKS\njmdogbnnZSPv2nhRDIY8+FexAZk1U9H4Fv4jckUfNZvqE4VhuAkLdwdjm+1E\nwbsbOdGKO1T1JtTu6koUzIve4NMyDlweB20JCk2aA7mY7qAe7iMWgQSNrPj/\nt6fOnNuBCKBJsQ3snNVlg5oXXfPvewt5XRa08KH5WE03ICCQy9NASsCwd0hN\n2dJAp7x9Up4LNwLK99Pzfz1k/3Av0/2wb5RTwH8PyTH2jzu44qi+IozliCMM\nFp+z0V1ZNMqnnuOh2zln2IRFUQ5WOeHcZ+SN1s3mqE9z7ofRyOuwI4Wl7hVK\nCDlTW0jCGJ4obe2EgKlIWW1J5omaH13orcJA7aruhtX0Zp4hWZUzLA215VU6\nwc28\r\n=51X8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmQkhnyV2LkeP/zuROfYQ8FSqSKvnSyOx93lN0IJW+8AIgWWG4b441ABHMjVnBQK7OFSMO0DK1Np9I1co9E4H+rdM="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-alpha9_1600885282925_0.6206606658348488"},"_hasShrinkwrap":false},"0.4.0-alpha10":{"name":"style-composer","version":"0.4.0-alpha10","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.19","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"ec6b6f7689dd56981db4e4c2673cbd2d3fc3e664","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-alpha10","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-/jNJg6pjIs2xCvL8gKI1uzJFy3/v8dr5+m6rwKesJPSOqL4PBYNVdkyvkveVl8aEp9NnRLGaqbWZ7mOvtmVMHw==","shasum":"1c6e5e098cde4c5ac43a1c3d1be5aa108c1529bd","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-alpha10.tgz","fileCount":144,"unpackedSize":250774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa5hSCRA9TVsSAnZWagAA9hwP/3Ud/bEUoWoyI0CrsBgD\naJksDF1J8hvHA7AMvZTwc0AUxEoJakzp4/ZNbLoRfx6t+LZeJB0E1rtmFkyS\n/VRqZwv1sVo5wC2uEhobOSHjaGd8I2RscyoGLDi+FOEK4QjVo9SRa8uFKGMh\nG8svU3Wn/5yLFTfuy8dEpua7iqWx7WmLwcr/Dve6NhnPlvSg4Rp/sRyLVG31\nhko+71BEP9zNS5HbYzbE94TBEm3WMduaJngu7PStNl7u0qq5CnPMMlE2MOtP\naxk+04TVLw71Guu4pG5ASdRFUsnvk0fQuvCjuUw+rIghe947GiO5fyGp9Owz\nz+hFrJKBC07q27aVEiXESMIV85NkSDS9uH3iZZ5K3KPjzgzQmOMYMti9SINz\nvManJrx8ln3nT7hnsDSQiyxLdGCTHFvsFnyMbj/NO1JSVLwraWH3+CSp4S3q\nm3ChOtelTDAMiMpxVswV3N9i71NM4ef0owb9jNo++a+ji0Z31RSTZhsXWXhJ\nS7Iu1H5FFG2N2eJu9C8A4VWZF1VsI8reWI+twvRDBtranxAfzQRoLSTfphdj\nr1Pwp3o4ryAP2pIZ7U8qyxU+WDo1rN5ghBsC0+ILDFo5PIQPaekJLRd6dfP6\n1mRehseDPfAgcSuoVznsMyt1bBs5eUy5c8TEPdP8nPLNPbwar5On7JSaFqJU\n4e90\r\n=wRUp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzgKbluyEPWZtUCQCFh2ae+Kr4aYiKFlQmY77TGi4IpwIgOFhjmCAGPQDqmrphjQ4jWDMhY4EJoginqQuq13kR/Us="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-alpha10_1600886866051_0.6891357040060453"},"_hasShrinkwrap":false},"0.4.0-alpha11":{"name":"style-composer","version":"0.4.0-alpha11","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.19","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"ec6b6f7689dd56981db4e4c2673cbd2d3fc3e664","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-alpha11","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Q4yy4z+MB6k1u0pn4sBvSVyRUcpH+sD8IJ6tszyINXrarmCTWDJ820a7TLGQQYLlwiQpd+cDImVVH26oencztA==","shasum":"71bb91152bbc6c3946aecfd374a872aa8f835c2e","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-alpha11.tgz","fileCount":144,"unpackedSize":250644,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa5ztCRA9TVsSAnZWagAAlucP/iDdiki4jSHb6p10g+iJ\n4wbzS24/+bMHs+ck3sL9Xnf0ootiwQO2zP2pVoSAyjtXCUhufswBomENBlrw\nQkD9KGsz5sYrY/obHu1FPbR0c/rwI4wQHXt8HMJrOwTuMyXGA8c9DLu7tkN3\nWuekSESq9TiDXdkn0OAkheVvMmeF9jJ6QzkPLBH07fnmbBZ4IyE5YvJuaw7N\nYyDsrnrYHuC8SG/oGhjd5tPXbsEcmetnfI0TuFHIID2B7WlhV82Y4DmofixI\ndTTfb7WVE/2EfLmoB+unVBFVBQ06VSLBCcnXGOANIyt5pgnvFiG6oCglqAXK\nCY9w5u5DZcv9eVwG99sa3VHpgP90qWcclR85E5+fwR8Z+us9uqDOLUOY/zWP\nZbqX1+fEGSjOT5L4N/6x1vaafwdtqBZPEgFRaquoXawn3AVbS1vEvXnS6RKv\nPceR+ef60HkDgHwQd5zItFqpF4QkibuW/vTnbt2SvodpOGS/oZKQ6BkJyYzg\nTbXEH+iK7agn3YUKmnQKwCVoh/Dfy7EE7B+CASPFjcuyUIByss1RRgGRg9dt\n+4oDtfaZPWH2P0MVa7IxhJHmQDr5JbcotPaWdTXvCQXJpi2ndQwSAAT8KtXo\nSLoOOQbrzID+6EzRG76QGhG/Tief1UCcGakXz9FjKAFl/VpaA2wE/hofZXTk\nCUAc\r\n=Xq5B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC4b2038DsjGngrDLH/NYzZpJ8tgsW1gTSrqJBREltp0AiBDxTsOefLFNJ5ly4e/QdZwB7TvJOH+hDt72Wgayl0IWA=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-alpha11_1600888045323_0.09101991034597945"},"_hasShrinkwrap":false},"0.4.0-alpha12":{"name":"style-composer","version":"0.4.0-alpha12","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"ec6b6f7689dd56981db4e4c2673cbd2d3fc3e664","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-alpha12","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-RuwE+wNE7/e4NL1uqQrnqezX4KnWpL+extqxxA3L+ZaqC4gDTIKwKIQiYT1o5V2XKHTRFuGmYEfnm35ayYrxww==","shasum":"85c5e895eb88991360eca268d39b956d4e85b0bb","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-alpha12.tgz","fileCount":144,"unpackedSize":250470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6ekCRA9TVsSAnZWagAAEPgP/0+JJX9zasZop8PCrXKN\nxRqecqR8y1YUSIB5CNIbc0UPt13GvLHkrkWPhh+p4XempaNmrCjpb1lbfPJ6\nvRilHtAspmfuWHIjfizwU1urcjqHF5ToMDcZro6qtLPy+MEfqBQIvPjZorK0\ny06Hv1y83KdxyiqmubyazuPhCI9p+XlGdN4ckF9/fTmfvixnRALBQuujNWzz\ngqhtfv4FA1UiRhdhuFL1vr0pd1Yf1zjD/Glmkg//CwkKzaD9OXfA74t1kdQb\nIKuOQXpKElq+QwBvUiFeYRdFLFMVpgWxKnjtL6MrpWnNEwbmgU8xrgZgJp2K\nHMq5evP6lVbCT1OmvPjOqDJvJqm92AM3r7GVGtpTzlnyZlhXn/68F1DBhMX6\nb3s9n18+RBOBi6yAiJULD/oM4eVDZv0kVfR6jVgVb+mZ8Hg26JQ9xKjXp+dB\nZOXvdg9PyMHO1IpESbz0Ms/AE8B++KLUSN/uLMPOrH0MlQYtUqQqZbrGMyeo\nj3a4Qx452XAyV5KH4gLzy4yCsixWFn/HIbVzMaeePapAeMgAOJPwYIejbBW7\n5g16XJjvSJydCJFpNtPYk25bry9cGvA64weTjg1OX4okcO3wezBxw/gYwI32\nJTVM3KQDHsI7lTwhPo/rIlzjPT7gTqn9H24+YJGHqtJvpVhtDfhvOluVw7z8\nLeyv\r\n=IfER\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAqpTmLlXGozT1Buz3oON2bc6UAmVbO9/Qil2INkeM5wIhAMAV8t1DtvQoExAZnCmH70Ym7k/feBlHA+2KlD2ARXi+"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-alpha12_1600890788455_0.28932006683736966"},"_hasShrinkwrap":false},"0.4.0-alpha13":{"name":"style-composer","version":"0.4.0-alpha13","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"99992014463077202c67e9fbb7884e6f00cdf702","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-alpha13","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-bc77nsfkW5F3Xc0gWBldtT7vVKyckMEFXvgxiFOGGRsTo1nJJFb50Zp3eFkTRPlNsxeznw5LCxPq42FgFNRIdg==","shasum":"ee621991b824565963794420fba28d2cd01f788d","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-alpha13.tgz","fileCount":144,"unpackedSize":226194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa7WjCRA9TVsSAnZWagAA8nYP/0N90cyc8rfKqvQLYPk1\nmEFFFfVQH/U+/GPq/OvYzDoPcpUsXO0YwZ6AkCVy8fdVRAiNR0/kZ5rMuoLs\nWQfJWMtLdolErILuQUTuHv5y41B4vW/n/nqq+xU2ZVhxUPQOJ0xf7gUW1mCS\naQZQuTTtiyvunaPsFHd1+MhgC4FGHwlJ/mwNCRyjp9zyCcpOHeDE+QHS7z3n\nQ3nB7IBuFoZ510Ci/hQs+NjlKU4TS/fn5zbF/eP82Pcc9qhpp9mUtL5frKkk\n5kZhNqdb7DxpUR/gsFvQauI9kB/jjrndXD/x9UYQtKbsnZJKw1ezpZAXiUJP\ntedct9wHteA6B9VEL91vy05iI8Qwuwq4ebha2iYB7TTnhjoR36tI9CeDl2SB\nSxb1k+ryxoEFE6mHrx3DyanP/YS9GTKYY3hBTnFewJFfEgVBvkah/sPX2jKd\nR3QlheL/9YHQ7xXqJPKipK4ejzhKWUdKpBiZ6ZcH1r6VXfZE9LnzF6P0+wul\njhEfY/ThbKk3mzXYWqLQSbhwtSCor4T3+pXIPv+50ZyXJ7eyA/HYQpsACo43\nNNIQB9XcKpxBFYnbdyGRLMVrHAGAG8nyH/jyiJQab5sVMey380nXD5UJitTM\nNPHWNu01GM96K1LiSbdyKahUHGT5sYEjVqyQQTsg9A0ruyVgVvr0eo7bJ0AU\n7xYR\r\n=nJmv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9BCJPrKuSH9KSJa1FBWyjRo9PAzstVYwBngmsQmZUHwIgFDbcIWOMxm2hJjVCosG8c4rTR97roSygeBdjZIQ8/kI="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-alpha13_1600894370831_0.012745326155434444"},"_hasShrinkwrap":false},"0.4.0-alpha15":{"name":"style-composer","version":"0.4.0-alpha15","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"b19880d46cc04b15151117f96abd2b09dcffd07f","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-alpha15","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-3C4upbWGxjI9aCZfE/yFqTfABTwUXv+gTrXNqwPy2vVXiLszIVVKQOPkwI3OncSr9WCSAbwhSG1LtdqTiWMX8w==","shasum":"8638f56a3e74a1839694934144271ee00ed6d2b8","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-alpha15.tgz","fileCount":144,"unpackedSize":217455,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa8tlCRA9TVsSAnZWagAAIzAP/iYRaek2/ie5vhvVtm9F\ngQBSmVDo86uRTDnQRk0/b8S/TESfSQWFkfhTnz/HC7CiLLNfUfpZz053OYPW\nAg/CQZUEQXpFuKgkAWjbXnKuf8I2MvSTyKWceBvxmkN3HApKpMwCrtzTvCNI\nqeqvkAMta83VTL50UcZHpqH76HnGRpd/yDlnLR5kySEY1f6yeusVmllvIaCm\nD/KS79ZRUnJ0sRYrHJEpjlptaYIkPgTl5V7v5hpPW5sZvvi/iEtHG1Gag5sN\nEkbsfjEbh2b3w6RfEG/DwjDNAfygM43rCi8FyGfP2zGyEVZ34wXfIlISJkZj\npvBmp/DE1zUTotPZ3bEWYT3b5mMfsOgfBzJ/xe4H0argy4HSPbPydmhyExCL\nVy/0rtf5sLKJUAnY2XWYDRO3qYRBtEUfvo7QWjvjBQqP14736hzz2MWRBIKJ\nx/0DkRVfjJgy1tk7jbqQ7J599bGsoh4SDgl5ycrNia6MMEBWNa02ONAp4fpL\nL96s/5y/aasLLNVAMcT/OsR9LTkjxt+du2WfyIFAOgPQ+H1prj4dctHtB8jk\n0jgpJnLrML+g8GQP0FRFy5XpbBEB8bcIJ3lTNvh2pBQCkLw5b5huGoKH4PIU\nGurL6FoHR/PAfNheLugPOUl6c0Wd5TT2F3eIlWmUn+IKq1r8+XPusR6TFOjw\nQ98X\r\n=QwWl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+cIXkFAhMYIOJ2AtbY+6QHMrMcwPDODBWegWssqvMDAiEAuwO0tovm160b4+R3vbzGuoW1eJzPGSVBNRtEHvEIuAM="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-alpha15_1600899940745_0.30890794317327774"},"_hasShrinkwrap":false},"0.4.0-beta1":{"name":"style-composer","version":"0.4.0-beta1","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"5eb416944b37bd27a76943af0e6e097d7aca6b03","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta1","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-HBypGRrS57h6cUyggxB2a19th87Jw5oP/A2+4me1CKkVhaVOWHySdiRsvWUofPXwIY2JbKutan3EjOY4FOPT3w==","shasum":"ae14a89fc929033aacf3daba5da51f65bb1672b9","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta1.tgz","fileCount":144,"unpackedSize":219169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfb9PqCRA9TVsSAnZWagAAQ+QP/1JNUhEFzxevWGYzw/1c\nZsEC49KHLFlLrwlQfGFAgQsxqvLbknpE7ZACgyak+vyH3rMmB3skU+qKErtB\np4Nv7faCvu7mKmxU2cv9/1YRKOkaIbhb+prpQvzS/8ds7DOuQYnCPuULvYiQ\nwm4DEqt/AOnXt4vHVNrMEErDCuTij5GI6HHS/3gkd1IqhTCH3O2NRZJ09XKu\n02WDLbV6LTvcE6iEcAk2NhnEU6Bs1MfWWNtHBOLMm7NlUnq/4Nm2m5E1ssSC\nGqqseVPecnKghNBjRaNmu4O3RsiJUb+oeUo8hqqcK8EPWZ9DS0cKKgIRMWUZ\nSkEFZnHeMyKgJoSX2O4zVJd92kDRILILUVQN7rYOWHAKMvlhjFdDfzjIVPEx\nr/yMGvcVBQ7Sl37FepTs5W+ewLfQiiDJixehsZUrfJNXTNmENIlPO3VfUIGc\nZR7ZrK2wjb+aCL6+h73H9kBq+ZlG4B+xmrMTLS/viMyxyd1tNZ69uAIaMWVs\nbFIeHOPf++Sbe2FNU/6NPQrvFgOjUK7iVMz2SVsisCQAwBlRpEnFcp5YSzyu\nn1PDhJ/sctIgL1J3Orb/Zr/2lWKyF1FHDl17aOoyDaKHzO0FS4eZb/2WL351\nfNLKXjyofkYf4rMzlWA/ojO1SQqmE5abzAfCiE4zCcz6wyGMO+yLhvdR8jXM\nCp9W\r\n=smCk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAcUbW4T8rcBSC+4YnV558qZKDJxYhGR5NUlFd4RgpM/AiEA2ndLsUVvCYQtlly49Y9L+XVk5j90G9kp47kJw/tDbVc="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta1_1601164266404_0.74816203232273"},"_hasShrinkwrap":false},"0.4.0-beta2":{"name":"style-composer","version":"0.4.0-beta2","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"5eb416944b37bd27a76943af0e6e097d7aca6b03","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta2","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-KDk0XokHIiGEvFc2HPq9KgEyUCE3Rp3zqCKz1LEmFKLrfErvFTkcHWzE42dHLiK5LLR/exowJvtmv7eCzGiR4g==","shasum":"f43ebce9f70d55a04b022b98e37e9e8ab14bd50d","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta2.tgz","fileCount":144,"unpackedSize":219169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfb9RsCRA9TVsSAnZWagAAoj0P/2m1PW3PQA+ejDCVLMe7\nKf2nYYzszue0srVEku1WzvcXTz6PrCxPcNYu/HMft+FA5ZAfdcD+VajK7GqH\nGbOv8soA3UtNVwgp7cHdEJSfwqaYWaQxXGCGpGyz58mtBaifapIfQml1AWTV\nyGIE1e71nCqcPsNVgNXvl8cFGM7muUFEZZ+Tamo6iBr9wP4hOWs27vQZ5PGl\nYGu0Ha43gWr4d2KCc+gW4CvbUuP/n1wna9fnjGo2EFgFafSmiAobE92UFqW/\n9eT2E3E406bnsFM5QRJT+Dwfa9a/pHMX3JoYaUPsd0SgOT/V1bivj0CTT07s\nRD28dspiUNr0g527cPD1JFAju305SVH36p7yo9Mw5spcLqACjWjTTIYkBwzW\nWcFJDwgObuWNzW/a1rlFLqHzdVa2t4y3kNBNY7EQcH4+1Ajwl3YzX7Mk9meV\nZdv4EkEn+n7B2Ys/BYspKzPmR1pTH0ZBtlzRSa/oEAhXP/jYE4p5mS1ySHj4\nF9O+vZU9tZeJ0VwmK21vAao1085o/H1DxL3WBufr2qth6N9x3JSpPxCICFD9\n3L1UXWzMI/zmxUddEh2cvn+mIGcWeYlsmuGyEykTHdo876fDGMdKJqxZxjw8\nJMvBESJOjZVI9oqsuSPygNknYkvPhMKUglD+Q40Tc9iaPfjg93etsBqnM11N\nJ9iC\r\n=16xE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBkIxu0cwMeqAzMYSew7gKhmiE4gbf8OMmS834mY8VIpAiEA9ZtdmfnDlEnWKxWYYo28bPdmneg7nwu4LWrqs67GemM="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta2_1601164395960_0.18271374245421357"},"_hasShrinkwrap":false},"0.4.0-beta3":{"name":"style-composer","version":"0.4.0-beta3","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"5eb416944b37bd27a76943af0e6e097d7aca6b03","readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw() * 0.5,\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta3","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-4Z+vTMtgI/TaSa+vBnl5UydEfPmu5AlSWQJZAL9URjv/iLGTn0/sqKPQti67LZRnzCxrsCUyBnYIiMZXEkwsxg==","shasum":"8bfe942bf7dd11d65fdd9fff58bc35478c5a81b2","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta3.tgz","fileCount":144,"unpackedSize":220391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcMPsCRA9TVsSAnZWagAA9XoQAIbZcn6petNfDx9W9oVP\nkRH23L+3ANzCVBXKVWVDq7pPsdgiL6emJ6asi0bNxhl9QRWGBcX8l8BUQqnn\nAbRvY7+/AzH2gYLqLpO60KaH5rwxvexUFqYCTlO0aZGDylzqkTMWh2aFvRiB\n30KiO0/sAQ1OyqJYwHCTny7JNDXo9frv1o3DNgy5/QmgSLSI2T1SgEGcRpgX\nDBaiiC/8vKuH/aX5zIituDIqAi8kEs9X8NbOfAA5b/+JOahBd9qBrdkzDcoQ\n8Kd5uVv7mFCopxpOSAaY7xjmLGuNqwfyP0sQS54mhbap7ZhEzGq7AFLDurJh\nSac3DC06+W17285ztNcVpGEb2x3lqp39q47BdUORc3c20ZbJfCYxUveoZssn\n67dMgY/x6DAkxVHsFfgsTCaLX/IBon14pPlZ30bXzoAI11dNV12GRYSzkhNp\n0BX2O5RHRRIz0fCAfApcSGNjIm2kL2ZwkKWBbKmLQmC5U5MxpkTgISc3maNG\nU49TKPqPSTZkPUC/LHILi3B9uJnhyqgyqhx0CQqhtU3JyvIP2pprJgVfjZ5X\n+OCLzgqkJfhITsxfbrXdDOFMbfZR1Rg9XZ6vKKU0+p5KPI3Mrx31rgsPSlIM\nu+Y15nfsSiSrfXkzbzC6V6WL8vfh5OVbyVCMrdCTYjDbCwGZUKLt0aOa61LT\nmgJ9\r\n=rcYg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0J28cHpnK13z91zpd3pDtjEwdYnXcrRggoZH+17wunAIhAPE61QqecmZVCABNRrn6IKUgzG/4schtNWI2/cznkCCz"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta3_1601225707944_0.1953725972029785"},"_hasShrinkwrap":false},"0.4.0-beta4":{"name":"style-composer","version":"0.4.0-beta4","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw(50),\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"5eb416944b37bd27a76943af0e6e097d7aca6b03","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta4","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-5fhdP/Z9puvyMRQFBrawz6C0mgDAS7x+sD3x0uuLXRNAKqhjcgA2uSoILKMEKp5wBt/VbtWVqpmP2yU6Ds9qbQ==","shasum":"3a64007b3ab668cb52c3eee6dc851d214b8bf685","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta4.tgz","fileCount":148,"unpackedSize":226319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcQbECRA9TVsSAnZWagAAgiAP/iKJHvmmrGOF0jU+0yY+\nEmQArfL+/SlyTF6sHExA5mT8ispKz3Rfo/KBD3ayujEnKPICbrsfQEDz/zX1\n2l/H3KYRTynJ6hUEwXvIriGKIuOcNxC/d1JEZfF1DwqYE3eZm3Hlcn3qz/CO\nyEBRNad9olOmB0sRAChejNwHjvvZZdORRnwQoUlDgRBgSwWhggRCE1wXaAk9\nj9kaYfsfiZgL4YPdqwh8bPN95xMnGXVDvBRItQTKulXKMVQoXgmCIVcQsaKp\nk5jMiyk7D+vsqwc6aojizP3eaoYkV8qcP0NVDr5EPZhoyRgk79Yz7+mxuWcJ\nzTzpdY/Fb23ml+crqVyCXkrA8sJsSooWA40ZgH+Fp5uwkJVls+Xb82mrxH9v\n6YxSBbtF8Lh3R/ZvnFJB9/ytzqJqN4GvTNcoF3nIEVImQCbCoL115hVasDsQ\nw0t6AMUhefju9+k0C+NKLYam1EF2RggctdJcKNZOA8tpUS+EGho1DulCzJZL\n7SIEJ0VBJKe0CLOMfUNFFMMDHBlVrcFbYsl7LcYSuA88Xaw4PQ7W4NebtkLo\ndbZ3kwSTug14lcuA95HzwPhUAJ/GS/gwAnRq4WrkTQTXKTRCKsFl3zClyBVQ\nBLZaSXE4qeQUhJFHqNqyp4ZA2zV3KpwwZQWqFoZIlQQL6o+L7bwiKG0PCpBr\nfqOn\r\n=prdY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH3AY+9fakLjkyOJTwLAFMSm6vwOTSX+KFD1phGwo/B4AiAdup1Azuan46Vxjc8Uii2dnpUmE5u6r7B+UXcFBmlzow=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta4_1601242820151_0.9475488448379095"},"_hasShrinkwrap":false},"0.4.0-beta5":{"name":"style-composer","version":"0.4.0-beta5","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw(50),\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"7498b7ae024babb58aad634f7477e64b5ef7d1e2","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta5","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-4rRTvIgRD8xavHwrwFpnb0B/f6QYH6LTeAIEdb9thF7y3+HoohKtuebX9Fe54dSFIqtnwe9w1Ew7sESezY+r9Q==","shasum":"15130bb3f982ed4c3b1b48789576210717f14af2","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta5.tgz","fileCount":148,"unpackedSize":227744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcRg/CRA9TVsSAnZWagAA7fgP/RE4FiGDSP5mIbMq9BSl\nl9efw/mTVhL/eiScdHLIiRFU0dzYcZV84PCR0lq9cXRQTmMd9u8zYByG64AE\nOFkAFqJhT8MI9sv9yK5FkPdqSuhlp/hU7FKYlUYaMGIZmHojMTdnc3cutFmO\n+s8VWT3DFIREtl97OVK3sr6jCC+dCmaapLfUnMI/LF9GvGDbTAlikKvvKh0c\nph3QRBqoqKFJCEz8j8cmCwyrsonThMG3KyOhd8LTxvLvKAxAkb9ImfVMWAY6\nrHb8f9mBBgWdq7rBcAS0vb0miMzy3Yh9D9V3ktfjbAJrw6kkCuIqt9Y8zIP0\nKM5qErC8PfycuSvaD4e8stFoyHuO6GH1811BaVo7Wvc3J2tJA4g8aeNtvIgy\nU5EkB3Ty4h4jQnHUsv5U77MgN5yQ2mBh0wsw7TVP9dVleBb86q83q/32Sjj2\ndWWGPqcUBvRLu3nKrjcPNhByJQ9iAMjwCPny9QptwtuWxwp5v8uKscvHIDfg\nTe8FPEJA8ncSat2ts2Ivmxx2NmMzWTJTmSF5IgJ+EWTY2zM1846NzcY4+7wA\n9KFa+4YN8rkrw/dfLPgY+Ek+GZcU0mMRbqbzutDvimCLeAdnde8YXSQdeJZa\n2ZXOC/ARy7waGrwA5fd6T5inuBB+Gb5eEiN1+h3tgG44yy8hUmT0ImoyBt08\n8DZj\r\n=/fJk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICRkWyS3Su8F8Q3apa4uCdFLUHBbRhUw1nhaCoq8waA8AiEA6FZpuGiv3sL+5bnU1YvRSALZPnHBxmXwnD7cdkC0gp8="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta5_1601247294682_0.05421367363614071"},"_hasShrinkwrap":false},"0.4.0-beta6":{"name":"style-composer","version":"0.4.0-beta6","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw(50),\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"7dabd19ec1ffc8e56d1609cd49f04e4c9e71a9a2","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta6","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-id1Rz3m3YHbaKrETJbBqCyd6AW2ixKk1xnDt/HFwvt9crpP2Weecx8/O8Ji3CqBAVGRh05q2BzVYL3dVAccSiA==","shasum":"2afe648c2a8ab8a109c5d092fc324ef362bc7a88","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta6.tgz","fileCount":148,"unpackedSize":228706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcSLsCRA9TVsSAnZWagAAwvAP/AuZkOsi/P4DQyeHfSIC\nD0hYHrpQUZGx1clnK86Uns9oQPP44Wh40kMA3tGNqeT0FobzOTCx+GyzuKN3\ny2XLhkLd10ui6uwJXt5yWxa6NbSaztn3aw1phYyxFwBg99G+TVxbK/S1nXlo\n5EJoS7YyrgqXrtJAMLRhyJxWZjegkeinIXu0ZtYyVZJt5LpxFTv+b3PyAx5Z\nD2Mg2PTFtaMxPiS6I7z6MA7WksKqYQgVlp6tJJSWFJcoT6/nO8VksRc9VczQ\nB1HmERMtWMeZuK4nkH7JNzw8ZVQPhEZ4K0fnyPA9CCllBCQvf2BQ0VgqkQZk\n5iw6JzjDDC1zui0uRk1bsmg95FVdVNYeaBuySKE82PCKFMfdpsjyLPNUoNAF\nS9FkcqcGF0Neg0N+22qeHWAxWvkFaV8X0Di+Qe9vnDNRSwghgbmX01qbgdwC\nMK6bzGGP01TLLQGurQwmdWW1JqLJMB4rbCEJHwy7SWmh04KHe0jjNMXAErw6\nuowbHSIH8Z7aQ50h4fJk7Bxq93mfCZ/I+ksbecFg4X0r6QGpVmfqgjlVOv9i\nFFXp4SOAtl1nd513lVFF8yZjvZEM3hEPltvJGTLwPAAFcdQQWrrBcBkbLIU+\n0y+NTVpI1TTqhqmpGCmajFidALUlfJrrbLpg+Mf/ZvDXp6Z4GL00cngF2EbO\nKZ7q\r\n=R06G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGln7ra64uQQz3lEiTRI9pa7BJYnSjEMVzBmiKXf/hXOAiEApmePYAZNNST3cx5E1g/4+kKODm622ksEDGyDmJlTZfc="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta6_1601250027709_0.18510837935254654"},"_hasShrinkwrap":false},"0.4.0-beta7":{"name":"style-composer","version":"0.4.0-beta7","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw(50),\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"7dabd19ec1ffc8e56d1609cd49f04e4c9e71a9a2","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta7","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-unqwckdUsqys6kGPQDnQI1nN7l9V4nSMbRkSPYBZdZ88JxDVvT/pUYtU0+Qcq8WKKmebfWNWPz4sF8esX+efcg==","shasum":"e278bcca5190faf9febbbf566ef384860f3be8bf","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta7.tgz","fileCount":148,"unpackedSize":230224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcSUzCRA9TVsSAnZWagAA22oQAIbU/Pkz0ZxzwVrD8YBm\nM6z/OozeiY1mn06h2xtECvTS/XpINc5enM1rldBnXOHA7zeKLW8TtLvKLr1O\nOHYKyPZHW4hlCLs4DGm3+sg9lfleSPhYGaHTn3QJfbJ201vAfTbe+Jb3g1l/\n+MchWWUjf/W6Pp7yHszj2aw7Mm8EBKBvUgClAo97+LsR4kkt6D39OPrNzzeK\nVdOKeQwU2ru5hTHzKWc5tThlNIe3SMoBANfql2VVV+Opcu8evSWVJOUFgCIC\nbLLpCK8YUYSh8cdsGImcZ05mVFWw7g8/OseBeUtuA0vb6Mc90uriIreA10so\nzxjEwDf6SX4e7eb4QrHUSvh9iX/AEQs7ba8a5rIzYYRIiiSNljPeQ7hnnes3\nXNwtBSDTEIbtsBrD//JKy/cv7ISx9MsF4kyoqa83+MMNjQ1n9CUx4plnaFKN\npHOq0X99whWNJAGWnPxYrgTxWl/+UBBIX/xPzJsp1RhrZfJkKygX9+HC+qxP\nkAo2JcasyC3uJU76t/mMOhGUue+TVDoRZ0PQkv4YEAuzqf7AjZ4AgMz2IJdG\nmvrm+G11VGQnOJ91ed/7+4Ze/tiWuUVZR05e4aCCwGqTiMdG4E1ONLd4s4G1\nEMGQm1U2TbvoY7yQOM5hOeZ8jceCfMoIq4qS8hU4rRTDKYmqCV2zHGEVJ6kp\ngAxN\r\n=6uX0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmf+/tKsT78vhVERr2pf5SiqFb8WatL9AvjIxGVhO3vgIhAIbIjoT7yQTO0+kYdOzRkdHp5cP+RmpIlA+mOKAdYAfc"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta7_1601250610524_0.8630385824337465"},"_hasShrinkwrap":false},"0.4.0-beta8":{"name":"style-composer","version":"0.4.0-beta8","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw(50),\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"e4762d183a35ccdfaa96f0c996a458d6dd96076f","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta8","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-DEWuCLpIeJnkF4yVroNiVQU+dh2keP6RuLvyAQh5lXE+n7858JCsx/Mmvx7trrjWMFijIg+tHJxAQrbApBDc3w==","shasum":"085649aa8502af85e937d9e6ce8838c421676a3b","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta8.tgz","fileCount":148,"unpackedSize":230234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfc3TuCRA9TVsSAnZWagAAsOsP+wSxGahEewVcKAvuyVSp\ncNzx43IlEBKwWJavn3vYtIu2zHQ4HNjVMmz0O7/4vzhB3+NiqF5Wu2ZaQk7r\nq1GfclANORgjSr88xldPKPkSfSOWceKRhgKowxOFtex2NSk2aXYS0fMx28gl\nyOAfx1cGlc7TpqZPDWlBXygny1+AXggxf74K8xmB5Po7OC6yaAsg+pELn3wJ\nw8RrbzMZWQ3LGbwdF/ix35D+znDhT45IoGlyk/w7om8fvTSWLPInAkcYWEjG\n7rDHEAxPhtwl97TJ0oMvO5WcJUAjNMn81D2udQQ94/WGsPJX4CmLP33dnulL\nQXbwGcI5S7a1VAOuKMDn/GtITD1J/f1g9a2Z+grWQJ3bfZHoDef/i7JtTmI+\nX9/r7fU32kDKmzjsINoJd+Cg8NgY2YoAXsbZuE9atdFyOyDVQd5r7VTtbUbN\nWYmcqKns5ldh9V/6jAUdl4M7nWMid8g7Dl+joGM8ciUxKaAGygglAusRbe6c\nH2B42gU06k2cyiCLcxSA8kkRoz6gJIZajEWiJoX2D65nlssvR6FSH35LA+U7\nb3BnxK6odmxTlhVvwdU1893yQYivcTuS5Zkq6tNdsORKRpdBqQGpl3gxHu8s\nfVVdmF/e7B99W7QHRNm6wZ3eKATb2e2lj65hqRAF4PrmP/WJ6BODuNG/uvY6\n93tR\r\n=zHsf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIOeoqnS5reQ8DiYl5i4qeyzvPyVa/UljoeMZ33FWz0wIhAMesNouE1Me/HzdiI5A0pkuZDcqIOaQF3VJQ6y8StCe2"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta8_1601402093761_0.8777668201531854"},"_hasShrinkwrap":false},"0.4.0-beta9":{"name":"style-composer","version":"0.4.0-beta9","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw(50),\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"e4762d183a35ccdfaa96f0c996a458d6dd96076f","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta9","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-5iOJC5BGYnPQMGdBeN6vNAGaL5z8M14eFA8gEu9HeLeoShYXvY9F5Wx8oahZyFdUuDnycI9S+c3pwYCe1iU5TA==","shasum":"aa8236403e2356ac761defbf24419e0c3dcceefd","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta9.tgz","fileCount":148,"unpackedSize":231182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdbwbCRA9TVsSAnZWagAAV9IP/1lpIXWyziXZ972GEHFw\neXZayQQTKLYQW1Xu2it2wT9QoZyAsZLolcldXUJuBY0yDk4wh9tdhi4gNf6P\n9ne1AAUDfN2Rzq6v6mPmKU1HnSu0Pal3P/eDkcoo5rPgE6lP7TmiXKkCd4yN\nSIy+VY1dIMpqN9nvu4/Yom6tJ9qgHBC/oO5q+M/ie32V6ijVJX1bdoHIZrTr\nkArOBDaBcYyZvEe7FVngX5OmH+sh9Zxj0YJcedyTiLbf2AtRellLWM5p9uP6\nnMjEku3UJvBqsm6orvP9bQDGAECfSHRPmLgmN1XbJxqtOjObZV2KngYP4oNZ\n6MdlohBfwUHrC98pdgSIFOrdlQdsO1C8zjsEWgUh+CqM940HHS2I8IMxh1pp\n/xL0QDOtroFAmGz2mCYoR4bteei17EeCF3LF8QcU2Z5O1D/UG/MK6B+q0DsD\nQdp13F35ncm6tDn43j0RHsCE7JnRroe/urQX6rQANfDPLjtSI+DTuT8qzhnA\n8JfVmq1qlwKwperTMNM0w762C/TfKk73xc10lsqUi1Dx0PfnnvHICyD5SR/e\noQjaHfQhPBM1E2U/DCHrvnX8MkHNyRA1Nwhwy/nNPxzvohGW8w+gvsVVKjaA\noIQgIe3kkQxR0SC2NieEHKnkbLisdkE0Z2ywqOrKHZ5cZp5dM4bWQm2XHc1A\nTMIX\r\n=Rwjp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHHK7vJ3b88YE972Nr/4Hz4joC9glZqBEmpJkwG3hDVaAiBszjO9TfpclpkpFnT8Td0tqPGPgliEJNDa7rBK4T40/A=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta9_1601551387413_0.7582891516304102"},"_hasShrinkwrap":false},"0.4.0-beta10":{"name":"style-composer","version":"0.4.0-beta10","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw(50),\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"0068c05aa73350772735c261062e7aecde039e79","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta10","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-dg5iklAF1QqPDC+bnfKmiO+E2QVqW3/F8e2ZOxONi3RuCi/AukZp/B0d4g+ws95/ju8QHvm5mlNc5nx7UysL9g==","shasum":"ac4981717d9ddc91d699b89e5eb93760dda01418","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta10.tgz","fileCount":148,"unpackedSize":231183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdluQCRA9TVsSAnZWagAABGAP/3+DeQcimNzsDCK/Jufu\nd1bjZQzNImuxe7IjlgaBmOHKCbjHHMBhq8aCHX9TFMwsDx0MCrDQcQMjDz0s\nlgopZY9nVf0QoAdpfJHlPMNFoNtFHN3OIR+f6jKzTlroGjr/5SHuV96m57Hn\nXcDla0H7dVi5O+9DnFpsVXVIhIp9pXePXfp1ZiHv0k03nFLnZr8lWf+lVqwi\nEklQDHZNb6ov4hHN+MPPEGairAzMD3QPiE37vPBKfXcABHjPtCIz80PahZOK\n3ZodIqJ0MA/zno+8C+2ytqEP5ToBYOno7fX+p3SfIud8AEKYMtov7XQM+h7s\nEXsoTddPCDKONThyfaKahEBKmGMcxrVOkisgBnJDAVLUpaIBvn+jvrrfvlzg\n7aZJkbHYFm4inoeNAJ1G35jDSML8fKUV+KEIM69Knfr12kTMdCxUrnn6m09y\nCfYSKVwCMSvHsJizjvQ4RGrMZeYnEe7td7aesimsvxLChJvnALBJStF7HDvC\nzGxQeBS6AFvGqAkkpfop2yr1JBvzSO5Sceh4+4MuWV8FZUk16JsPawKmKw/f\nMEa1r/EoDkmfT4aNUKcz1SPsuW9zKMDkAbrDzuDxiVAsgm/tFn9NIlg5sW3E\nNcZ9laPzT8AmYoOy8nJzCTQ37eMhDm4iTkgKNxZOmYYznu0X7bC6EPnBx4YC\nB3Qv\r\n=vuag\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDvytWyhKBGCRyjqfUIN4VJRxi7Q2j3niFxG1g0aBhRQAiBdpQLbyQk9bhGXE1s0AcLPL5hP3VWmsgtJFqguSWaW5w=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta10_1601592207568_0.961787019877915"},"_hasShrinkwrap":false},"0.4.0-beta11":{"name":"style-composer","version":"0.4.0-beta11","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw(50),\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"0068c05aa73350772735c261062e7aecde039e79","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta11","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-eGAzYUAhmDrwC87COIrglXY2Ir5ZXwte2WyskkKhZVV9rPzXXf+pfDb4q/Gc0EBtd/tH84zLV0Gn+JD4xyFk5w==","shasum":"02c2470c4d50618a30d8a07165024871a5268619","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta11.tgz","fileCount":148,"unpackedSize":234246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfeJG9CRA9TVsSAnZWagAAc9oP/3WwII9580Jvbm1GAJ+0\nfzrD+BVBOGZu9bGnxG2cHhsLZVYPYqo5gmabqv7UL5mb2nV8QL6BCpEo1vtw\n1VFigOFuoBKD+DXsoNKjtXqN3wNSqT3yq4/v/W8VTYIvwid7E4709LM5Wa70\nn1HE4a2769Wtx0tb4zdKAmQiXxhEi+ExXobUypaXQS/HDhmChBXUZWSaDgQH\nNNQKkgyiH3IpvnlVWkqocuQt0IRPUE53x4Y51aV7QS43oDIA9go5I3Pe2PW/\nkB/vOh1F5IveL3XcLzmzQRlSWyeUhZnRVNjpqAZ7yhUP3D64PnROblCTbvTB\nnfPItDv0dPpzDvwTCDCxKXsmGhKxo/0yI8dynIEYwdc2rfSABc00cf9ANONx\nEd11N0JfHhqM2M9e3+qQfKrhN7lPA3dDt53la6D67gEGZPlUkq3QbNI2vzgn\nLOlHf0Km1MPiH4aNOLZjne7r5/GafFlj6yqujQrLN91GtoWKURkVTep4oMn3\ne5OXBU2JA2CB+CTctYOALUUoSoq97IZAi/j0zJ0cbLIt/uHNmVjod94So4n1\npTj4uCdGw2Hu02VGH8C6sz8YtEMDTFe2zNooNIPE6Ou56GvMrj7qP+JFrNnK\n2iFCJQyX/731kS5qpVqs6DG/e09muutaAykI8suJDFC6uqOc8rik+vaT+J6j\n/Ek1\r\n=BKo1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB9bfxBrLfG30OofUbo0Bg2AxibvjWzMrGMqB2qMsB/VAiEAnJgrTceL/CUzwiyIcJ9mJMYLuYcYi3AyOk0/Td1JZm0="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta11_1601737149177_0.6288118750684581"},"_hasShrinkwrap":false},"0.4.0-beta12":{"name":"style-composer","version":"0.4.0-beta12","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw(50),\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"0068c05aa73350772735c261062e7aecde039e79","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta12","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-KB3aJUHBQ2dn0onfdXfjxt/IpS+dsXm57+r44MTuuiDei/6MXGD/L+aTk+rZJxuL+p1sXqm8iLAmMqDWgjxmdw==","shasum":"1dc940c2ae796fa3cdcb3425c33bc52e25e0820f","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta12.tgz","fileCount":148,"unpackedSize":236980,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfelsNCRA9TVsSAnZWagAAtN0QAJy6N2lKKoG5pcWm3feo\nXOJ6M/dFsFv3qSkRli0k9ch95IugQUJPgTsD9r5u38F568tzXu8XUuSI1k0P\nN22pBkFm6rFfp7E0QAm3vC8halSEho+IpncpJCu3dmrWEGGkWIEwN1Y+DHrZ\nBCB5VPMuBY6/GGMhEE4INoaGJ8NMJ/ZxbuNwMsIRLjf/nFx/j4IH6VHQILzN\nlaLhjMKRoS62VQjWkRo6VjAx565CwyGq/xzcbItLb3Azt/pjyJ1/HvSV67tz\nHaJsfE06c4k0dXO+wePZELTwtlOpczw6J2OTE7UuaTJLUQKwqC1rsQ6ICdRJ\nGrjjzqD/GqIPTnSoRSMUl+77zRxIz/v9Ilt/3ujTEqzJVgreaIqU44dLmLOx\n2RScdjCJxs9FYTFaZLOzx7TwehRigVN7hsLPXgb/dU8AgqX0ALlXoHOIkXY9\naV//QNML8k+OwTb14/Af3QsrQWUAx3WvzEsNPkkb3m3qvPJYmX7wXeV8khkw\nxhIIt336AfmEKDtD+3rXTTKufAXQGuPQ/3x3Mf92KqjxNbZfMu5hMzpCssz9\n6JeUUYRLjPaABL+2bQTHQoFn/gAIJ25lhIzs7k/wR+3RsTGArKw+Zp14zr7A\nhb8TKS5KsEIp60XIfUkptiobQbB5Mt5g7GG7nJXD4xCkp8EHaSoGmWtcnCi0\nG+op\r\n=YVaQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtZyqmhs5mus5xv3oliqd089Atwv33bAmrXJqAsenJMgIhAIpM/ikkrbZimA1WXX+LB5oO43YhqsYplUrjRgst/2Ud"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta12_1601854221088_0.3497658572627784"},"_hasShrinkwrap":false},"0.4.0-beta13":{"name":"style-composer","version":"0.4.0-beta13","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw(50),\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"b919947a49cec00625adb97cdb71a8fbeed40f67","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta13","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-PDtFxCi311btKq6aN/aYDruDa6B1P1YEE/WCukHkdD9QWSYQeu+SRaLIVB30oMi18hA7mxHbqOWrvG6g0CzIjw==","shasum":"60d92cafffe26c08ae97640fe575e286b2dc9a62","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta13.tgz","fileCount":248,"unpackedSize":285811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfeu4TCRA9TVsSAnZWagAA4nMP/jeCe7I/KfopuyJW5ijb\n5SDA1GDUo2g+NPCpdpdQ3pT/6gNr2pCYWG7eAq97bLAvemBSVZNgomMaVoaU\nazy4ZHSw/+L9I+P0tpAbLFeM9wwN/Kt3p8mozx4jBjYY36w3umBJ6NHuvnRD\nArv92aKHAimJOUISW00LBUmPQh4C547+rOOtBMy5eRyo2U4MmzNg/hIMd05r\nO4YRBimkJRFCuAytGMywpdsQO6BHb26t0julM+FWTrDcvbhDP82/LFrmVrdK\njCZA7pMrOSWvHrBoh7ebLYYQiQdJZaH40s5q8QHN6OXybCTb5KOeqki5MxRB\nMkSm0Srsl3vD54FguuQlYCA5NrB/rksHo5C3aLvu7P99ruP+gE9jr0iJI4rz\nRt+KvsPmadsv8n1FmJmHQ6qRYVcHhHOJM/sEzYgPoAEjkmsB3L3ZiF8jlzC1\nduYZCsNGugJqLvlXrjQBBmwpUjpAZPiXRjAPh39/J4xsPvvC+N0OGU2aDF3f\njZr8bnjkWWpXL1V6gp9P0B6Nds6V6UE1LaOgUgI+F2EBoLC4bK1fxiMIIqrb\nsLYtUsHOYscRk8M0mffUAyH+Qkbyl8XxCxdTS2LcbMp3F8/Rgqwr9xfXoB15\np8ml3Pw0wGpMC4WnarfOoxlWiBfOaMYQtz6X2lUq1tKPoIfNFZwjfBgiXp4u\nR4Jw\r\n=3/4I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPVFKLrYqgZAYLKM/g5Zqc+Qfg7vjssGHIpXXKuTYbqwIhALtbEnw9m37pWeOinVGRk5KF8t8Zhi8alNSTJBPAKIUJ"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta13_1601891859148_0.10127555662630927"},"_hasShrinkwrap":false},"0.4.0-beta14":{"name":"style-composer","version":"0.4.0-beta14","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw(50),\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"b919947a49cec00625adb97cdb71a8fbeed40f67","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta14","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-nFzFtr8nMMNdik23yCl2MMdeDLB5H1sxWHII94lK8Dpaqr3FKuAkgZjAbfJLOViuKM0hCJS5yUhyaQbaLQB/IQ==","shasum":"6bcc401510b397e823fcc1945a73341a80c2fc42","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta14.tgz","fileCount":248,"unpackedSize":285560,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff1i0CRA9TVsSAnZWagAA64sP/2WWr+QrMdOmlizdb6Iy\n1zrGIMtt/Vm74x9prneoEKm6TXzIXIqNR9YEp1xnBLox2zNNOlywNo9uV3tC\nssZucUy7Y4RtxyiInbv/+kliS13IFpbKeyoi5UbaoORroIUqsaEwxQ5ohFSw\nK/P0Ndls85bbpcETVzELUtd2w3cFsq1779lLZr92AOT/rCjrnUdvQi395d8w\nj/FaayOgiUgmKGtd5qKjUl2aJmwAD4QItAxaFSUENpWpAISIkeIJbkJsxtSP\nwsY8oI3nvp4yJwX8a/E2JQDsQg3wwoi3OpLmLm8sS3hj6lmDmJeosvjH625D\ndft04mNCDXpyKfD/TrF5ZJTvOz1EfGUiArswm09xCCVVRoeYkFbjCKjYJKgg\nGm/21qN1HwIgkbumJVn/KwzaXJubK1juUJcEwA2QZEp11pcGaO1JUR9MkRlp\nMc+l6cmrAa09tWrSPnxX+iR9WrXlKWZsZWSn+5fUTr6uLJJ4mQ2ExHUm/inf\nkewUbo4QIQSSLgA6KRTgW4u1BFyLJevJRGwfLbH+UxhutHa+fATpD/f6P38d\nXOthmrrRvqCKRbPQ/FpUuh84A/Bd2NFR0uopXh0/PZ0N3NdpXU1JAgdIiTaS\nCzSwHeKMRv2Qnlyzi7MjG3LOcJb2NRA9Pe1EPmV78JC8hP/fzQ9CQegDvYol\nNB3X\r\n=Yaoz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgJuM3XrvWkc70r2IT9V2/RwL13gy6FUp5vZRJKTA/LAIhAIfB+xotbSqumZQBimfYsfBGtgbPxkzYLLqPObDZQJqQ"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta14_1602181300168_0.712482986700276"},"_hasShrinkwrap":false},"0.4.0-beta15":{"name":"style-composer","version":"0.4.0-beta15","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw(50),\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"b919947a49cec00625adb97cdb71a8fbeed40f67","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta15","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-YVuJARzxJc3yE1K/j8XtuPeiIWDMbaHmZ8JsSxXHaASA8cZjY1SXp8OP3hRa9o0nL0yCBiGJA1ul3s9GDiPyng==","shasum":"446ac70ab8c4aceeb9c1457be895902ef6b69464","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta15.tgz","fileCount":248,"unpackedSize":285604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff1pOCRA9TVsSAnZWagAAvQoQAJvjKuNgUuwKa/Yvpl7l\nPLV1akJ8FJTSiJ/KWirACvc3J1fjrXy08qNpvqBtU2Hh17EGUiFDC9j7KXk2\nblqPXh3/j48hPHvEGS6t2yz1QaZiZAf3HekeOoC/obyM6vrLlmAHMk622UB0\nNoacjRh0mgxag31P/TapIzooLN58pDerqLr2ZFVkBf/dpwewNGvB9WfvCztI\n3665IPM6WaC7Vk4l3kCV207QNKIaLwdxuBFe3/Ff7jOguqKcqYLL8WqAzXUu\ntgU2XGRoklsp8KyJdtnMuUtsmkJfnnOsQvJ+NMfI3GQREM9QyKGaKpLUAY0i\nwdpbGfHYW43+zAdwcgpJ0x8eoTjqdlis6ctjOdJXb8xd9rGNFpD/7cR0O+Gg\nI26mv57uFPi6AFacZoA2bygof5PuWt1eFI4HzMRTAtuQeVMWvga9kwZATkC0\nqfqZXuwfAZkKb08aixzGKHMBHLOAKa4UYcPhozRvqRLYTHTFKuBA8ukEdDpZ\nkOgF+ObytTzzFoNFTWqjsOTiYwYxXPntDgyCklJPVBKlCbPHHdInRbJquFnS\nKQAk+MhWJZksfb5kkbO/tMOZXgyS9ry2yWvnbPP18eNbawSZXgqFGAHgu9d4\np0+TvG3vRc575/beq9P0YMbR+pRJGo8J5dukoS5ykWNLO0Xf8ICr1yH+x2RU\n3xFS\r\n=UqeJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDmHzndlz/O5ZivOP42sR61FG/1BNuTZ14WL0Cjgo78cAiAgUBoaF80SYvF0AMWjYysIlbLZ8pYsaDAuTaOlyg1w+A=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta15_1602181709931_0.05153093128710107"},"_hasShrinkwrap":false},"0.4.0-beta16":{"name":"style-composer","version":"0.4.0-beta16","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^13.13.15","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.20","@typescript-eslint/eslint-plugin":"^4.0.1","@typescript-eslint/parser":"^4.0.1","eslint":"^7.8.1","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n\n## Usage\n\n### Composing Classes\n\n```typescript jsx\n// Card.style.ts\nimport {composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    fontSize: 14,\n    color: \"#333\",\n}));\n```\n\nWe can now use this style with the following snippet which automatically cascade the color and font size down to the styled text:\n\n```typescript jsx\nimport {StyledView, StyledText} from \"style-composer\";\nimport {$Card} from \"./Card.style\";\n\n<StyledView classes={[$Card]}>\n    <StyledText>hi</StyledText>\n</StyledView>\n```\n\n**Note:** when composing classes the function passed to generate your styles should be pure\n\n### Using Classes\n\nClasses can be added to styled components easily, also interacting with the `style` prop just as you would think:\n\n```typescript jsx\n<StyledView classes={$Card} style={{backgroundColor: \"red\"}}/>\n\n<StyledView classes={[$Card, $BigMargin]}/>\n\n// you can use classList to easily compose a deep list of classes\n<StyledView classes={[[$Card, $BigMargin], disabled && $CardDisabled]}/>\n```\n\n### important() values\n\nWhen defining classes you can wrap any value in `important()` which will make it take priority over other values in the same was in which `!important` would work in CSS.\n\nThis can be useful in scenarios such as buttons which have a grey background when disabled. If you were to make a style for your button component you may wish to add a new background colour in the `style` prop like so:\n\n```typescript jsx\n<CustomButton title={\"I am a button\"} style={{background: \"red\"}} disabled={true}/>\n```\n\nThe `CustomButton` component could look like:\n\n```jsx\nexport const CustomButton = (props) => {\n    const {classes, disabled, ...otherProps} = props;\n    return <StyledView classes={[$Button, disabled && $ButtonDisabled, classes]} {...otherProps}/>;\n};\n```\n\nwith the styles:\n\n```jsx\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: \"#888\"\n}));\n```\n\nAs the `style` prop normal takes precedence over any class styling, the disabled style would not apply. We can use `important()` to make the class style override:\n\n```jsx\nimport {important, composeClass} from \"style-composer\";\n\nexport const $ButtonDisabled = composeClass(\"button-disabled\", () => ({\n    backgroundColor: important(\"#888\")\n}));\n```\n\n### Style Ordering\n\nStyles are applied in the following order, with #1 being styles that will have the highest priority:\n\n1. class rule (eg. media queries) values with `important()`\n2. class values with `important()`\n3. `style` prop\n4. class rule (eg. media queries) values\n5. class values\n6. cascading styles (eg. `color`)\n\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these rules\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator rules to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n### Theming\n\n1. Create themable values:\n\n    ```typescript jsx\n    import {themePlan} from \"style-composer\";\n\n    export const THEMING = themePlan({\n        textColor: \"#333\",\n        backgroundColor: \"#fff\",\n    });\n    ```\n\n2. Use them in your classes:\n\n    ```typescript jsx\n    import {composeClass} from \"style-composer\";\n\n    export const $AppContainer = composeClass(\"app-container\", () => ({\n        backgroundColor: THEMING.backgroundColor(),\n        color: THEMING.textColor(),\n    }));\n    ```\n3. Use a ThemeProvider to change these values in your app:\n\n    ```typescript jsx\n   import {ThemeProvider, StyledView, StyledText} from \"style-composer\";\n\n     // dark theme\n    const App = () => {\n        return <ThemeProvider plan={THEMING} value={{\n            textColor: \"rgba(255,255,255,0.97)\",\n            backgroundColor: \"#333\"\n        }}>\n            <StyledView classes={[$AppContainer]}>\n                <StyledText>hi!</StyledText>\n            </StyledView>\n        </ThemeProvider>;\n    };\n    ```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n### Dynamic Units\n\nSometimes we want to use a value in our styles that reflects some value that may change. Eg. the screen size. You can use dynamic units to add these values to your styles and have them update automatically:\n\n```typescript jsx\nimport {vw, composeClass} from \"style-composer\";\n\n// vw and vh resolve to pixel values eg. a screen size of 1920x1080 vh would resolve to the value 1080\n\nconst $Card = composeClass(\"card\", () => ({\n    width: vw(50),\n\n    [media({maxWidth: 500})]: {\n        width: 320,\n    }\n}));\n```\n","readmeFilename":"README.md","gitHead":"b919947a49cec00625adb97cdb71a8fbeed40f67","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta16","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-a25SYLJ1KYxLEajlV1ZRzPx5tDBFAHVVTi7sWMzA2GOTMS+OFrP8H+R3DJF/rvu0n0qRiIP6CfanhbPuq009Qg==","shasum":"b5579e25d2e45f9a65fcdf45ab8c63d0baf8c600","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta16.tgz","fileCount":248,"unpackedSize":285810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff10KCRA9TVsSAnZWagAArB8P/Rl9JTOqz+W8ewzOh9OU\nPpxz+4lNLcoJ4tN+an2x87Es+80rCi56Xt059SFKlcNGxuOU722XhN53xhvY\nqyqWs012LUMgZYZ+Xm1oRA7W1c4dUujZuBCg2JyZgCLQxzEwBxzekqchrAJx\n3pIDhq/Sqg7mPvjvzUOYRKQ1jfGDI19gLGXdkzHh6ZPooz+kFFvvMl790XbJ\n2/2IqRs8Z8+t5myf6UTiQ/U5pbJdjSxtQc73bmbFbT/rndaCaXmwL8+c25iE\n7Jgi8e7mGZJvNYGw+bSx+vPGcL1X09FiUBlwRson9oIj57/032CnY9PW9/hB\nWlo7NzEtMRLEcbtZJvgNxkmU1ZhfE/oDtW2hKopoMVQzrx/znasFBR4kAjz5\nw7MWGDkDWhE3KPFq8Pemwi9Bqc80J6N2SPyBA92uEJK1Rb7rFDVg3gU3eMYW\n9STG36jWQ85Bpm0KQwZf3R0U6QRPkHv75lytZx6LPwMrby3zbDBoInzyee0d\n7kq670KwiL86Eb1KoVykDSyxSR4cYh5rTmd52pWn15D4y/k3Uzc1fTSGTw6P\nErXlfh9wqX5RZbHH7LIr+UCp/Z9zk4c0g76UfbpAF63nZtjjqEViHMRb57g1\nW3Ud7dZJqU31XupOF8lITa781udPr9MQL+BPf8zxV9qgr+//3Gj7VInCL80S\n9ENf\r\n=uq8J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA95jTedQZUsQVsHj6FZ/GNQ7bZJEyKnZ1VOWxt5YYqfAiEA88t+GAhcDG+v8cLRD3iuiB9mzXqVVsxEZuD/rWb1FDM="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta16_1602182410551_0.28983392753679516"},"_hasShrinkwrap":false},"0.3.1":{"name":"style-composer","version":"0.3.1","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/lodash.debounce":"^4.0.6","@types/node":"^13.13.5","@types/react-native":"^0.62.7","@typescript-eslint/eslint-plugin":"^3.1.0","@typescript-eslint/parser":"^3.1.0","eslint":"^7.0.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","sass":"^1.26.5","typescript":"^3.8.3"},"peerDependencies":{"react":"^16.3.0","react-native":"^0.4.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"f40e99c1e29c3e5e6f5012ff055da02ede9f53e9","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.3.1","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-W+n7rarRpWK1pMCwqeTpLfYFblyQ+Q7pmh2GCoaf5u5oWkspNqbrrFxblF7XAWr/kRsidZ6sooBrADUT2X/kvQ==","shasum":"4fdf72706bfcfbabbef8dbecc44675e491abf609","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.3.1.tgz","fileCount":300,"unpackedSize":338792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgdATCRA9TVsSAnZWagAAftoP/2wJ2kNe3xGphYbncIdz\nnV0dFvDFmpzLJPko0fSTJmN95JiDLIi2MasXcten0+9W+LbE2Bvar2HxDhVc\nvsRykZy7Hgt2eLQPHU9wM+wCqr7HE8NCOu75QdLRrNJf7H6s/YmYqp+X4w4B\nhkQDBj4uS/Qg1/Af0feRar3VGugvOKYz4f4qktMPOIuu+m15hY+XaJj4pyED\nSnoqVx/+yPp1JG8ImUXR8sfTHCv3pYWkPgiZLbk3cFPvf3kev8nXp4dX/Y0A\nEOzvBe4FUd6htsZUs4FYjJmgfiToVO6j2mZ4nSSP7czMUk47r1tEtRHFe8TO\nKHDvXOE5zc0qJMTyiEgdPc0APWGrGQtRjGEZhrNGaBc6dccltPxakHsnoQmF\nIoHkHpf5Zl6mOdIEDNWf+s2yR6Bmm7n1rHSEofeM3vxn1WsHm2scfu7WWOX6\nMQcunhc5Tww7jTx1HaFiFZPozJIAhylVJkKH5nPdVPRUyvdXlT5/Tx6CNxbN\n3myqYTtuTV4wZn1pJX7cioaaq/VUnMYA2Q6DC3hSNVvwgDYbNBn1algAMoVf\nsrSJZ1vHZJxSdxTVnsCIOx2TGMDwLgKhpKS4J8h1gIb7GxYSlxvoIRpVp1OA\nIfLOYB7xtEf7OrfyPuvA5707mjqPHT/8EeuByxHFRbZJALsXAfPTpnfqh9qI\n7may\r\n=kEke\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICB4/rIH/zjeJ4Yhe3blO3HaYrFvuQyEC9kdSMNYomrqAiEA3xwVJg1U8PUNKrYmmbF2h+FrU6UjUUQB3k8lSuYEd7I="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.3.1_1602342931200_0.26730828550176255"},"_hasShrinkwrap":false},"0.4.0-beta17":{"name":"style-composer","version":"0.4.0-beta17","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^14.11.8","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.25","@typescript-eslint/eslint-plugin":"^4.4.0","@typescript-eslint/parser":"^4.4.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n## Features\n\n- Cascading styles\n- Native & web support\n- [`!important` like feature](#important-values)\n- [Media queries](#media-queries)\n- [Class variants](#variants)\n- [Theming](#theming)\n- [Dynamic Units (vw, vh)](#dynamic-units)\n\n### Variants\n\nA lot of the time you will need slight variations of the same class. Here is an example:\n\n```typescript jsx\nimport {composeClass} from \"style-composer\";\n\nconst REM = 14;\n\nexport const $Heading = composeClass(\"Heading\", () => ({\n  marginBottom: 0.5 * REM,\n}), {\n  variants: {\n\n    \"h1\": () => ({\n      fontSize: 2.5 * REM,\n    }),\n\n    \"h2\": () => ({\n      fontSize  : 2 * REM,\n      fontWeight: \"bold\",\n    }),\n\n    \"h3\": () => ({\n      fontSize: 1.75 * REM,\n    }),\n\n    \"h4\": () => ({\n      fontSize: 1.5 * REM,\n    }),\n\n    \"h5\": () => ({\n      fontSize: 1.25 * REM,\n    }),\n\n  },\n});\n```\n\nYou can then use those classes with:\n\n```typescript jsx\n<StyledText classes={$Heading.h3}>I am a h3!</StyledText>\n```\n\n### Media Queries\n\n```typescript jsx\nimport {media, composeClass} from \"style-composer\";\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // when screen is smaller than 500px, apply these selectors\n    [media({maxWidth: 500})]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\nYou can also use other queries in combination with operator selectors to create compound queries:\n\n```typescript jsx\nimport {media, platform, and, composeClass} from \"style-composer\";\n\nexport const pixel3 = () => and(\n  platform(\"android\"),\n  media({maxWidth: 412}),\n  media({minWidth: 410})\n);\n\nexport const $Card = composeClass(\"card\", () => ({\n    padding: 10,\n    fontSize: 20,\n\n    // only apply this styling on the pixel 3\n    [pixel3()]: {\n        padding: 5,\n        fontSize: 14\n    }\n}));\n```\n\n<!--\n### Fonts\n\n[Example font](./example/assets/fonts/raleway/index.ts)\n\nYou can dynamically load fonts in your app. First create your font family object:\n\n```typescript jsx\nimport {createFontFamily} from \"style-composer\";\n\nconst raleway = createFontFamily(\"raleway\", {\n  bold            : require(\"./Raleway-Bold.ttf\"),\n  boldItalic      : require(\"./Raleway-BoldItalic.ttf\"),\n  regular         : require(\"./Raleway-Regular.ttf\"),\n  regularItalic   : require(\"./Raleway-Italic.ttf\"),\n});\n\nexport default raleway;\n```\n\nThen use it in your styles:\n\n```typescript jsx\nexport const $AppContainer = composeClass(\"app-container\", () => ({\n    fontFamily: raleway(),\n}));\n```\n\nThis also supports cascading that font family child elements further in the tree.\n\nFonts created using this method can now interact with the `fontWeight` style as well to dynamically load different weights of your font:\n\n```typescript jsx\nconst $Bold = composeClass(\"bold\", () => ({\n    fontWeight: \"700\",\n    // fontWeight: \"bold\"\n}));\n\n<StyledView classes={[$Bold]}>\n    <StyledText>I am going to be brave and bold!</StyledText>\n</StyledView>\n```\n\n-->\n\n","readmeFilename":"README.md","gitHead":"dc0f7117989d2febeeeaa23a78e5514b1938825d","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0-beta17","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-G1rtGNOzTfhWFmgH4Hc18YHM3DjaBR/16vytMHdU3ppFpvn+psPfWnOutKEs2EE+KT6ZQPyHs0/KYzPWTaqsvQ==","shasum":"23d119c7b9b5d09bfa5b20dbfe756fbdc86cfb80","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0-beta17.tgz","fileCount":300,"unpackedSize":338931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgdCGCRA9TVsSAnZWagAAVFkP/3NfeASaXx/i971PhBts\nc7GLBnRefQVWg5MpZquYvbeS3lIiWkSKv3tkKkvd+JE38HV6pbWRhYnbCphd\nu1Q54BFNd8654hkgz/2/8Qwm/SA/ao2ORumtoDsv2eiLXNprWJBJc+wtQ3tA\nsnkJ1u/9/Tensp6HHTZ9F1pDCFm9+SfEKzZvHk7mhW6Z0GrrcTC8tsbNNzvq\n0u/Mg95fIU+J1fgXeKv8VA6YUUkaSS23lJCmeQE95ex3gRcgiwrfJNvvDrkN\nbopsWenqtSN4jyw5Ia1ur/4R7OhyG78ZR5kHiVJiiywmFaIv8uEMg+aHUI6O\nl6gzvlotJa0oZp0Stwe4vpH6uKWod3xDIalH9yRo+WiNrWf8iwkG5TLUmpyT\n7qgCIUQPzwFq7GtlS1fece8kT31bzGeBUz5u1PGMgBOiao735Of46F+AhBxs\nPD82nvev8p5pBFA3097up3GHIXk5+MVC3JQ6bg/ULQlQKhg3hjqwdmMrhUeE\n1pMizX42t7clBun633J/jYUTt1xZeUTz9HFwutGvjbO2N5DHbXvXKl3vAwa+\nlq6Ry47voOdAPLjHBAXvEwKVYRx21LghblVMXZvip7VJYe07Zl7gOC7hzzmW\ntU2PGW2NCa3zF9n8uP2OMtqz/4NxY8ECtXXcaChzHC9c+4y8EpbwLF6GVun8\nRx45\r\n=uZoH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1K5ISwJuHK7LQAGwoON5fvVlYfQwQ3THGOtTaOpSiBwIhAMN4Zvrqg+fWTDh+8ylwxl/XuIq6HhWCqi6RX9yVpn12"}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0-beta17_1602343046298_0.7974468188377808"},"_hasShrinkwrap":false},"0.4.0":{"name":"style-composer","version":"0.4.0","main":"cjs/index.js","types":"esm/index.d.ts","module":"esm/index.js","sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^14.14.0","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.27","@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"96e4c45c1ea3abf64af06bfab332176948f1d2db","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.0","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-0L1g2i2nCYiyhVa7kOdlLfF7UUodGxsKLIVI+lrLELzX9696he0YPjwYch+vz+vhHoWz6ByDmxtmYT+b6wR+rw==","shasum":"77b5f6c34885614f36c3be64a52d871fbac1e5fd","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.0.tgz","fileCount":300,"unpackedSize":337044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfj0WRCRA9TVsSAnZWagAAJXYP+QBrOi7/XdcL5pr/EQZu\njzYQbYNnUWxkDwW2sV7LyXGpjn+yhBJcQ/NI2w64aZGT8lhuRcGEyYZOBr77\n42UX4f/R6LbmvgyPrx40wcd8Q43AAbig2hT5KgiIaq09tOHYSSWzOuFGFXG9\n4wjtMjchp16cGRrku5bHRIuPqVr1NABI0qF59ZSMRQVLhZqB8AG5j04rtQyt\nPtxat3fwt7Q3zUDCL80UId1jNDr5CjEye2L1Y7kHn2L1ZLHYUjk2NjwHqZmT\noENEYPP7XUrxDUNUecz3naZds+jII6WbLNTgqCbKzgZIu506uZm/enZvvZEF\n8d3fp1yE2bA12OVQynvWO5Kfav+1SjWIiRCUZPyzPT7cCsqCy5HTmtPug3/Z\ni2kRyn3ePYThGeYAQlfq4F2Vhr0lQxol0Ihi8lolmoGxPCz0hRZkKS07rQBv\nDqM6IhLWow821nU7kE1g+IgPNVSqFVhSsJXOdMpC8TXWfBUDBX6z4cO2hfdH\nhtGGvGDE2O99aYRcTaZ1phlo43ZwF/ISGuKOsO0SNz8ps5+pJXp0TQL2t3ej\noM8S62kAaKY2/wKjixbsyxksI8WWkS2+sF3w72KfJ4Ryz1+O+girs55cPaMs\nlkh+PUW/CeTb94CDVovUF8YYIL70eYAI2e1IJgfkcODWIEO9dPGzWtFr/W4n\nXSyl\r\n=SiW3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7iNVTS2QW6L+Nx+C9Uq8rMfjrftfXJqGp46NDtPoNnAiAJc6IkSg2FBPmOLzvEPWvucdaZEDFiQoZMQuRAHC5QMw=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.0_1603224977379_0.13837225564002664"},"_hasShrinkwrap":false},"0.4.1-alpha1":{"name":"style-composer","version":"0.4.1-alpha1","type":"module","main":"index.js","types":"esm/index.d.ts","module":"esm/index.js","exports":{".":{"require":"./index.js","default":"./index.mjs"}},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^14.14.0","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.27","@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"1b8c7a563d481d03c2bf5a702538b037fdb6d77d","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.4.1-alpha1","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-WNw54HMYBaWcGgtwJ5J50XQJiykKMs3cAiUsnQhXKcpE8Ols9AP5cNILUO2fgI83swLGfq6Sf7oB6+kTJXQyLA==","shasum":"248e75857c2b2068b7ea8dd02ae9859101e838a2","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.4.1-alpha1.tgz","fileCount":302,"unpackedSize":337217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnpb5CRA9TVsSAnZWagAAo14P/RxxKPDWEWnWgQvDto8y\nxl7du2kWzTlWxhp4vvV6qLm+ors/rp/EpuJPBVptxWXpoBIL5S/j+N4QDO62\n0dfufFd9oinb1FDPsnNjtNnk20RWXarOsW2CAT+JDzw04o84B6x65WcGKkyd\njwTkGd1QuD6hCjUL54tQ2SswikokQewRDC+0eV13ZOSqMmZxACGjUvPj+wK+\nILWbvigxPC/medAmRvmNvzl2S89KHzglnet6hjYsLaOgZpmdvgaezRxH/KMI\nSOKKQMS9V1dAkRHgYG1BVHKEHjOexk/Mg9ZRDsgi7Qwb7RkNxUhybNJhjTrl\nBwmc4D1yDs7mckB4AhhxyqKBL0th84Sa2LZU6GsHsIJ1T27O/nDXL37Wjt90\nkr9Rbca2pMJHPjkA5bwLaN1c8vpsp/WwCM50BZZPq+VdcyVtzGD2q+nQZoLI\nHTt+iHasbJKVnXdxcMprKRxolMYa9MKICy2HHhsGcKWSgPN2wxE6XG/Tc7yp\nEjQ5SuOQpW7ucB7N5Hhe4fRHxOpSw1k3dN3uY/AcopNyNfCztA9ZErQpHQXa\neAfITxLknTCPwMvszq2M2j6+rv+jpLZRGb6BJgSbf4AMsNVW/ebIIlfI5Xcy\nGuqQfgHq3/E/IRqv2L4Z3nXF0a5mny2Xx1nExrKGzodl1Ld29z3UxRVh5g6Q\nF56c\r\n=3il6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICOroS9jBzXP4x78wafyX3DVjkkF04Ol44HY0eyU7DW5AiBPslICx0wHJokaDoZwbzq4jdVA7wGqL3IHHNmwE7J7ZQ=="}]},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.4.1-alpha1_1604228857306_0.04197014708185787"},"_hasShrinkwrap":false},"0.5.0-alpha1":{"name":"style-composer","version":"0.5.0-alpha1","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33","@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"a4856817aac96bd4b0d882d0a13120033773b5e6","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.0-alpha1","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-QYjmvkJm3FuK+HKzZUXrfQCB2fihQtpXEbH27e6a6drcJlc7caGk16q9Jy8D3AnBpIRH/xZFbyHBUisuqdJC/g==","shasum":"aea5c2a61b0dfce91d29d03317cd1163f7d686f6","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.0-alpha1.tgz","fileCount":300,"unpackedSize":339846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpuEcCRA9TVsSAnZWagAAyH8P/3/peb0vEErviCotHg2Z\nunDoFzOilOyWC3yorUVOE9lqsnI+TJs2KZq90KAvGEKwPs6IklfJWIMpJgJZ\n0is2BKOAp8d8PW5Wksm6S+A3P017oPa2WT4b8UFN32L2pP7WBL4x2T41bynu\nEq7jCBW9y9w07Zx4s+8LFzGsVdctmqy0JWNQmd7sxP9/keltxPsxR8lpfnWW\nCL51y9T+nM0d1//4GNtavq5/M0hEvfthfwANBRPBiKyxRolHFyGNG/5cgnxl\n/qziR/vrcQnvj+Cg6ktLQNbW21Fw9cZjspwYP8NAae69TEU5mTdjeqX3eIFS\nU8AGE/i1NB+8rteDjvxC6w6LzlOwIUOSAAV3tYU/4Umz6t6FZ90IejSQ9maO\nKr4558fPs+JLyyy+77uiIdqBBsTIjuAd15lJUnQK7VaPj+t7wO5D4knHGIUJ\nl1dAjqvPlZzJivTYx5mUlOCu17i+kwNl+tYDELv66mAUqxxVHoW22IS6/mmE\nCM0qXjHwxSifETkD01yGN8hXpCbzQaPqJl0HjJOT1EcWlLmr8DKun1wOlLfi\niEUgE01R97U+ufIxLIQTde9U3Fe2hmwOD2eLyPGRcYRksVBslW/0GuTwBIu/\nNTPGSXyG6hPfOpUeRPe21sTphs2+2Sdk1s3lcYe2E00NJrPobndSl7EGow+8\nPapp\r\n=gi+g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE4ztKIoyY8zZN4oSN2WbyTf96iTZbK3D/S+DJSZkU3bAiEAk4AOeCgl/6+Nb7TDgepHiPVd68c5/HLp4Z9pFDM00Rw="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.0-alpha1_1604772124367_0.9486654420534983"},"_hasShrinkwrap":false},"0.5.0-alpha2":{"name":"style-composer","version":"0.5.0-alpha2","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33","expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"a4856817aac96bd4b0d882d0a13120033773b5e6","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.0-alpha2","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Yr0AKWiksegc1QZY5lv6TsKjfxlauqbaSGdQHajcGGxQxAqswg8AT5x6kWwUcZJHYFTAjq2VBE14lDbERGqpZg==","shasum":"fc000042d4035dfc4d3ef83515089e14aeefa958","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.0-alpha2.tgz","fileCount":300,"unpackedSize":339848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpuGWCRA9TVsSAnZWagAAwXcP+QFepUzE3OBMyC8wbwTO\nTQMLsOgsyBBYgaWgHHWnZIzZ9nbbVAOXhqUMW2+PdakYoc1t0qWgRX77Q5nj\n8AjCzl6zC9rfEBsL8io6MfMXjL7eTMOU/xfWC0pZVSJatw/LVdrtQx3ZqhsE\njwJewRc6MhA517SZ3k7szKC+UyG3aqlG4L9r7ll0DvLzAnZ1OEYaY1zxeCoz\n7/vacvcyYMorqWIMlSSDzKkxC/KHgbkxpWASbdzeXcuse2KbR8g+nFCEf3XC\nI3Uy/vBQFrxPf5sBz0ph/Yn36Fh/SQl8AuuC3Zt6OT4gJ6nMEpJS1+lGkJ2q\nWF9UoPymOlEf7pszNyQSlYoOD0IRmSN727BeVqybcblqlYzX9FHf9jQMCIUl\nUIq9oP4HOP9fMq8EYrCOFy1yhc0dApHbLTLdJGU4nIVzeUAMZVFT10X2lcNm\nIcpHVxdTf4fAQKFBXEBukjH6f+2mem9P9Wu+CRGnPPq/zKO+tzo6BZdkrHUa\nQK3B+SQzRr8idkcgq8JYmF2hQ8yC1Gn212EQXEOol1WODa4KXMV8uQus4Vvv\nTKi5y2V4BjLYPTn+YiLQAGBaPk0yXChkx7+QLtS99JP2uHuif++H+FIv06Yk\nlDRT0TJ3xEyttnz6DwZWyoLE6wVeJaYpT26rCiKL2X1rTLrk4hUHU69WOzy6\nqVmT\r\n=8R9s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnHmb0AMEnZ8GBCfEaZDKar8f54ja7M7WmzWZW1PCUqgIgGFJn+wEEYt/57XX3xoM76F9+34gUayPH0kOW7JLmOEw="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.0-alpha2_1604772245922_0.4787976549869055"},"_hasShrinkwrap":false},"0.5.0-alpha3":{"name":"style-composer","version":"0.5.0-alpha3","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"a4856817aac96bd4b0d882d0a13120033773b5e6","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.0-alpha3","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-mUsoFK9CiNQzg5qEm8QnX+GetpgdwMN/CGy8WIgWc9IxK1VQ21uf5zvZl1U0igOykNR2PusGx+H7CUydwEJjyQ==","shasum":"a2c0b5cdfe589a7056a11624dc9f14b385dc550c","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.0-alpha3.tgz","fileCount":300,"unpackedSize":339846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpud7CRA9TVsSAnZWagAAmOsP/2SDg4aDyiPSQc/J776p\nSOHCroAgUhuxoA+j70D6lMufTFtx5S37kxGNUdeFHCYfxIh808sBO0GT6NQ0\nqjDsCmlXgS5xX3T1PT0IgwvDoUEcvxUcfQmIJziRNsTgna3byIouVJRpQjhs\nTp0/d0UFCqenJKEF3nbi2VU2ME/4mta7Bm4eZnxs9FerJAasK2mVpgRYQypF\nzYK5PhQ7KMPBRDpBLqawbyc5/RGUf1Qtu2yveT1SattVl9nVMz5yYClk4cjP\nHcUHcbsVaVE9EAaSo3US5HCgWzv2d2c7etXPQwy1TCHGhXbUFSSHzygtPk4s\nk1y3pJTNnvUukxKJ+wT4RJh7Fm2huCNkwnRYuJ7Iw3b0kDhmHDQyltoy11FB\nzu1KmneHWHHAO1c67GoYZDiP6My5daiOr3XZyedq+LcAXNVmE0VgCEWfJE1F\nidoDAb42hctLG8hMerwn/1OMg0+5llQayhbccsMReUzrHFDcTiHT9b9AWrLi\nUCp0bBKbcLSZbh047umbL4FKmZW2r7enuYB+Am+4eMOvuuAVybcW4f6UW71S\nuhUUB0qHqmD0Bxo7i+40fR8mJEiepXmiPM1cuY6SLqd66Zs+7vv5vyqpYUPn\nSZUguAWDDZHPUfYmCupkmjplpnnceb7Td/IcKDz3NlmaJQO1h0o+E18eT/YN\ncegi\r\n=e7Ex\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoIAiXJT9ufsHTKFLwdcLJn++DxShyb1D/BVbFddGheQIhANECuHKVMGZIIzeH3p28R+PRk73E4rnKI2QY/QNyFFgm"}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.0-alpha3_1604773755051_0.7046890906105603"},"_hasShrinkwrap":false},"0.5.0-alpha5":{"name":"style-composer","version":"0.5.0-alpha5","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"45c783371009bf18c893d6b943d49e0dd5ca3cc4","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.0-alpha5","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-f8ynjiK/9tEjgTNH/XP43Uw9xgLOHpH50ha+qv6VZQA3kJdDRlXZWItrCa/a+kGAOBAh8DpN4ahVCdYdGxxXPg==","shasum":"344eebdb85758ef6779614ab7b2627e3c55eede7","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.0-alpha5.tgz","fileCount":308,"unpackedSize":349156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqFJDCRA9TVsSAnZWagAAy5oP/2ia/oKRVWlL0GDcUX/I\n1bpvqXY11/rP3o5sWoWYZL+jqX97IgvkmjOV2JnmPgnv2lTJfyb6SnuS0Ell\nG6nmrZd6lpOjokBOHVw9t99cZqGnE4APrL+AO17YQ3GaR0zRfUQFIJ80Eogs\ngkvUXbsGGmT+zmnxUoYyP7hPHR2QkL/RzqINb9miU1RzHKi251O+Jn/bP6LX\nKX+rNOIWXf5c+NCHmjET/S1wG7v/YWxXv6dHN1Nqmm+MG7OlhiWO/Hlv3/lF\nYmPLUKkrcko4SAojiZwvZWLcsLt6loMv2d4aF2PWcYQTgQfxCyvZ8lJ6o3bF\nuZbBxLtDtllatRHUunADaprjBFCnRXgpazdmdaJ9c89RANId0yQTNb4mbW/z\nTzbA1qfxYD43sMOwrueFBjYLGsEnp+Xn6a+efT/7mxPGxxid4oBLGKWSEbwk\nktTc6GjHWXfc2222n2UAaoWggFJdFzMaICMceuxOGVD8vriZT7f2/bS/nom4\nzEdjXV2eheUv8MQRd5oQvMQ7GaB0Z2VUWOKBkS6R+Xpwx8XEFqs3yvF09ei0\nplUdERc8YeejrHvR1IgrVtGsC3gmumzAY/mHxc9ES/ieBk8WSIQ/NJAKE+2A\nQOctN7y3nvfiHRMSDcmB4pv+10ubfmB+E1WgN5JZwWOmLOGLez+92QPGonRd\nbJfO\r\n=qLYm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBgnNavcy5+6KZwBY9eiiKxiTEC+hMAwLpQ/9YDirQkzAiEAjfuGGVXFHUk1g2+PfuM0WPEbevqrhTsWjHsFw4gPZLA="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.0-alpha5_1604866626491_0.6013078177357702"},"_hasShrinkwrap":false},"0.5.0-alpha6":{"name":"style-composer","version":"0.5.0-alpha6","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"45c783371009bf18c893d6b943d49e0dd5ca3cc4","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.0-alpha6","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-J0M5c1TZxWiICTev2agYZqSacD1Dgu0ktjdBAggkOuxi+ZJRHIvPHa+kz3YxAGxwRuUx10iMG7/lSB1jaIKzqA==","shasum":"9a62eaf410c03dae368d60ef82e2260ad1909d9b","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.0-alpha6.tgz","fileCount":308,"unpackedSize":345386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqFNkCRA9TVsSAnZWagAAmHUP/22IcGgCd3N4JaOgKMRi\n+I895jsw5X0Tti2Odru7teNMtQS3vc+paLoGxKCuOtR09rYwuEFxKr/b97Ln\nveozQQTrVMnEwZ2Wh+gnjnhf1SxYFu/H5raHPFKtPCIopixzYVA7TQIEfdc8\nxV76RqeiXtY2PIzWl+gwvi0OuHiiHhRNwBW10K4zwBy4qwMsZQnUFTs3kz6o\nMeH/wWauVmq4gYGI5nWeoR2gdKD0xke04t59rrvb6e+iDSDPDWs/FA0PFf37\nB1Xc5cOcKcrfoZnHTmF5XhwvEKhJEuWFY8payAxUvXNUXNk0RRvq7AyVMwu2\nyIzWuvldmkOzFiMGdbaeZuzyj/7ictQQNK/vytl3CFv6byU1Sj5p6KyETRUi\n1XPY9DctK9CF0K/IOHifp3CtSqR+A0/aOETlhaeiB/xaXy21Z/3Z6xgt6nNj\nrMgsNOPAAumqhwzKl7fChrjA77Jjso69O6gix2x/l3yffKCod0dIc7HlxvqM\nGxfEcMeDT6XBunBOuZ27W2bns9/A8R2tlxqPQVQVS82m8oqGrPBYZWcF6u1P\nox4so1FsPwN0r+qSi3mAIcNtnqRq0hJ3JTZ0hvRnu5/juarM2+k4gDQIx9H3\ngX9MxFt0DQGs5arId/K3xgLruDluVpKRFCIuGaQWBJbkeG8x1EGHSQf+GudC\njo8m\r\n=FpQV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsZIfBw6IESFWgRS41ILDNwNzWgd2U44g5xn5OaDLUSQIhAIPvQ7FzwN3B349rYj9rr+24ThjTMy9cz6Qge3+DOHL7"}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.0-alpha6_1604866915575_0.5620153140994051"},"_hasShrinkwrap":false},"0.5.0-alpha7":{"name":"style-composer","version":"0.5.0-alpha7","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"45c783371009bf18c893d6b943d49e0dd5ca3cc4","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.0-alpha7","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-3WKsySO4ACutfuoHeqPHbOeBwZV9IVABCMeuQpBmKM/L1exLV4Rxf8bT9HdW2XgMzj0qr1lkuwf0Z+j9H5+R+w==","shasum":"e16c9b28110dd4a32ae14959f92727f6aacf52c2","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.0-alpha7.tgz","fileCount":308,"unpackedSize":350670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfraUWCRA9TVsSAnZWagAAvngP/2TuL7CGOEDL7xeqtR5z\nnDI0fR/fGboH+YF7iQKtgPXZIzxofgNgTzfRZtgP7erP0Wwhf0H05Pd/bTeL\nw23P1rbf1ApNbA7wMDVMwYRHLjee7+qS8QFE3F7CGZ6NuIJc6Tus9h2N/4dn\nYvmjbNz9vU1/W/r+gRP+m3XspAoDvgVV6M63phxVa//uqtadWXkTq5MDnYef\nWSBkjaYmWhGEfFIO99JIcWSAniVt6QsbOJ967E5aDnHxvJyt7vkFTW2k2w3A\nZyshCJgq39bNT+/SaMcAa8Zkf+MVUFLrPtSrdmjnsso395LD5XP89u+My2Rc\nYM3WXnde8IFW7WSTw1LrNzO3ikwrhDDW4LUyzfbT6zhq5PSwHAYbnxikI0Oq\nekcQ2owyNmQiNjXF9l9qlhPNxoxyuESZM9ssZNiB5/ojzVUxwDQnmDMz3LjV\nmS5Jua2NNaULDPKlcMisM/AZwZi5+SRYi4UIGHIdb5Y48HlAiszDWbAsAVKV\nI4PBU/N+D6XmEHyqNqWf/iVlZ14YqASdYAS6al8ZyiFnmUikCXwUycxPBv4Q\nPr5+Z5FVwKw+PAtsGu6sjSP9/5hNP/eBiLUvAJUVPLGkPc3cVUsdPUA9XtHK\nEalkEoFhWYjfMiEzThJX9YKXpn1Z3/4/oh2S72EHUgiyLMF6BVskA7u6uxY5\noukS\r\n=Rfmc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHXxH4QxtbDevhB+7hB+wEaoX8p152Yx/nFk9SbbUf9AIhAPR2g/tc6YWE3dinrjFLIzIxSZ+aArSYQQejPg4jaXKm"}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.0-alpha7_1605215510298_0.41695717206992366"},"_hasShrinkwrap":false},"0.5.0-alpha8":{"name":"style-composer","version":"0.5.0-alpha8","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"1bf0a7ecd0b93d0d1318b37be1a8ece1d613ffa6","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.0-alpha8","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-2HDVEp6G6F8RvlveURjQFjHo7+QEdRi9/Hd1tNFdqs90y/CZVPcUZoWw31sUILkD1wZ+VFklEPSRgNIX5vwxLQ==","shasum":"281cabddb3ad0aa3f586f8bacd36a0c3fcbce76b","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.0-alpha8.tgz","fileCount":308,"unpackedSize":351246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftvHJCRA9TVsSAnZWagAAEJwP/2iaUTQVmYblNPYGPT6j\nxOy4MhX8ni1aF34idIQ79v5ZAkkLQz3/5zH1mxe9DAqaXNWsaKEITdO7/VoE\nDrtYUQ5ioOhydF01Xsq98zUesxqMhyii+Ruq0K2pAEiVqFNzhqqp0buaJE+L\nZ+Q/TqQaXcgju0yOGzqAbs9t+vuGE3W6zH+PGX0/Ghw3KIU7jE0LsmEoh+rv\n0exenB+t7ww5zNDD3FrXLc/6IWmq6hK49rh965FCJKiEyPX6VsA6KWfT+4ZM\nipoPxb+67tvFj65JgSr9p5MD74zX/6qe5TB6iZog5WGP7bVn9e7lWrQ2J8vD\nyJ9ZYh0QR3pzsoV2iVMtF9bMWlvBxvyA/aUYEcbtosAqE3WfU5X9cVTdvkOV\nVBvAHF0LO2HvDYT2WXVrzySqjmp3Xs0gvvMYsZXt//6qGL7CWtc5+mMarQtj\nTJBtqTJHl5L1d7LiMDY+Athgcs4bMqD0AJTRbV7U6YoFJXtK+AstzfjtL720\nvesSkNhGECzE8iB+B4JBoBug+1jLkxFRe9YkbtFOy1PyVcKoYBToyLlgrDxt\nkbgD5TJQkiIp8tamYUgYcerm7UTQHI6L6WTHw8cwQCTrMlSY+sILdUcNaTqm\nUXkUf0ZSX0n9hB/oFLlQjeL+5gWZoGB3IjQeztK4NNRQeUb6DkSzToBEYhB3\nMGwD\r\n=VWJK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICVtqX3QFetennIOHCpGN60ggogX0VQ7RRl3JQM6+6ALAiEAguJTrPd+VeY88jYWnXb1GB30WfZZ2JHCBLSFqdQWN7U="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.0-alpha8_1605824968094_0.3157502925096505"},"_hasShrinkwrap":false},"0.5.0-alpha9":{"name":"style-composer","version":"0.5.0-alpha9","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"1bf0a7ecd0b93d0d1318b37be1a8ece1d613ffa6","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.0-alpha9","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-lw8yuFN1HXx540FjOM0UTtvvQZYTObHf5Ivot4Q+d2p6IIgxQUGYd7QqfJSVsn3JU+eYZItf3QXAsM3cbsRONQ==","shasum":"12e89fc3607dcecaa3e5df3d074b25d89dc4e997","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.0-alpha9.tgz","fileCount":308,"unpackedSize":351246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftvPLCRA9TVsSAnZWagAAtNQP/RQlqQs3RKf2Jtpvadll\n7ACbvQQ2UUynTVG5l28vEGu3j4Uttu6H2R8exVqJSOTMhMhBkwSGmQUzKGBd\naQKlvZu4qpJH1lywnAAb0yPsjhZSyxSnS9VeLV9ZE+eD4SkIgOtYidH/m4oE\ns6KBoeyMY3R8Dy58Rh81y7Y7sXtKiERLpbtmdEjaURGoKfCOvEai42hNn6Yg\nfGsUGuktIHeysyDSWEY+aHoYbScjhGpzOT6JFLQPjFh6zWQu/NXvV9tp27Ye\nUTTNDizyfPzI2cR1Rg8iJsQ6ctZ/0AYghauxUbMfg1MjOHCgmuw0OeSnX7br\ngeFjHMge+Z8BglXJiWmH/3zmvMMDLNAYuLdQgQpUppT0x6ySCbAXKoH50N5X\neLiwjVSFY3MBoX4uoJipH32HVVje9GNTz9LJLl2BmN/6MMTkJGQEYFD5eooZ\nL1XPYJooG0ag93ec4vSqI9OIH/3BgBDkLm4JJmTkHxsGDdRpnneakrcHWB8I\nbrQwvNj15WTir+SdSHTZnczb4ffkMjNKf4+h8dGopB/naulDbsrNBgF/E5dk\n+qmvizh8A2nkqHFopP+yJ+lHARKNJxqccmpqEGGSAldc1kfYkul865GelE/u\nHhZS+rlsf0O5bgfAtS5Td6sKXsKJGe6I1ytNJbUebC+glNynvDbWidDTxkxD\nL0kA\r\n=b4OY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF0OiMf9YBzBM4LloR14yAzOReFQXAXzT4thZWFJNd9RAiBPaaNvaS0oLrF2mm0sQg9nWvB0yBh0lY6XLVXLE3NvKQ=="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.0-alpha9_1605825482979_0.020768556249366243"},"_hasShrinkwrap":false},"0.5.0-alpha10":{"name":"style-composer","version":"0.5.0-alpha10","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"1bf0a7ecd0b93d0d1318b37be1a8ece1d613ffa6","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.0-alpha10","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-kQP8EqRdVj3GMMoqr8uaLsouVtmD5zIU14WtFD88sgT6JPli8VfzuYCYMm4oLpRcxGCHk9mIHYE+b2gEuG/A/A==","shasum":"ff7c172458a939cf38aa221b751e38edb2d571a3","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.0-alpha10.tgz","fileCount":308,"unpackedSize":351249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftvQrCRA9TVsSAnZWagAAqh4P/2j7a0bX1GPmBnQMHAGp\nA/ELfugoGSwwgb+pX8OJpvb4U60G62pcQ+8W/hXy9Qcu4sFoo4CVwL10SSYb\nDdTSwCGO8gHDg3+VnQf7lfBwYlJXfN/w+y+GZPL5oZR/tEkGgYS00K+ooXl3\nY3tuwvOfeBx8lvCqsJ12pKzV0gE2qAMTZou71PrSHqd0AZsXDxl7TdWqdgW6\nbzjmUrZbWVCamv52/FrrKS3zLe+Wge2ikE4tD+EU5rMFEWD/sPJ6IWsjWPcN\n8hA31Thuz08Ndi1XihqJwhbKsNt2pw2CJ2gMOaa4XcDxLVnUsr1+5ncLSlQX\nhPmaCjXKTBTyzAczUc9qWrJyIGEyow8hW8uKK0sm7+Z7s0HMHZy02Lz0u1zu\n5iAr1Id0y8BHK5y+ZDLqlmGqvugKnO01Xel8j9+X7Dc8dpLrD0HvTizwMrP+\nmWCj5nvuuR37BQdvUCRjdWgZnUxTfQTFDxkwbV0lU731PULI6m6O35zis2PG\n3YQmj6sdQ8Q9KpjNT0jzdAnFlbK//VwXnLjDkTOVIONXJ+7yA65uQaH7Imrr\nhAHs886hp/p8jE/Xv1UrViSP0xOQoAX1m/M8p3GmT3KEhcTkF+eYgNx2/AZM\nOAhAB6O6kPHb97c+jTNQkHfFvvvQN8tepk7/PxCzJ+ffc0xC1o7JZUeP70Pr\nokOw\r\n=SeG6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdK/VM414/hy48WL4awmUVn3JLhgySRsy8tu2+EK/wkAIhALrqi1yHKxkrCPLUBrZykiD8METshO/u0aNKATd9cm68"}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.0-alpha10_1605825579091_0.07520893569075682"},"_hasShrinkwrap":false},"0.5.0-alpha11":{"name":"style-composer","version":"0.5.0-alpha11","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"1bf0a7ecd0b93d0d1318b37be1a8ece1d613ffa6","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.0-alpha11","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-yWdo4mxflIJ+HbgWergUolJp4duYhwb3iHznu4GLtt+72g+A9wcZOAVIfEb8stCPCR3YppZt0lhvuttqN/Z0Ag==","shasum":"68d71065a2b094696c75c7c049a85d48d07ae89d","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.0-alpha11.tgz","fileCount":308,"unpackedSize":351341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1XDGCRA9TVsSAnZWagAAhWAP/0L9KQiTXek1+Q5XUCEB\nsPwvnTq1NjJnKT11pEBLemOLFo34UgBeWbcLN1aZJ9kVzvODxnbge/nljs0m\nfvynXar7R86xYDyy8TjERYOln8LIqCCWNVbCsVHrMMHlZ+8XPqb4IHWDop6T\n5Dee8Sj+FzZn2JHXRDdz/GFG4WzXm+MJAPOtA5TPoj73+QakxuOf8fpxa2GD\nFo2bv/haqUIJSeBQEhPvAeSQX88ggnzCrVc7WiBS/nWlgix92NQ//nOAj9XK\noHOic19wbylzj9qd83SGmLZKGFcOrw45blRqHbSjKRTRkCMGHVDC+/JoRUzE\nFHDyyDjDL7L3HhCESqEoopnLPalosY8ww7FmiwqYbBdNnAG3NVsGloYRcdFj\nAecTn97ceQWbV4zBlWMAY/enb0xclzQAtPvQWencwrYrfwQSGTbtCYtJ1zCZ\nDLeKS9hCLBh4tjb7IC3WkMMbMgnHAeY9zyhxpAuhBRDuR6fXjoPcddL5pvNN\np+jAcmgDiSVN7/TAKUgi+UcyUBtsVUMuf3b+LrkIL3uYgG4rZxYYtDsTZ4wr\n/EC8P5JCBsMCGWm7Z8WfdSDKGRViOa2XI8PtzDjjPAauNzfyyODfZUQXtv3N\n3KD65DxX7j1HIaIMuJ/FeFXUcGsunRfkdsd9ZmkWlhC6LxLthNIcsv2SX6Ff\nWHZv\r\n=it3t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgPfp5exBxg32JML5KHAJYi28PuCJM9teUiNYjrgEX1gIhALBmIssVGljbMpjsp6ynIl6iNrjwZqO7XRIGr9DZ90EE"}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.0-alpha11_1607823558120_0.08545718280651493"},"_hasShrinkwrap":false},"0.5.0-alpha12":{"name":"style-composer","version":"0.5.0-alpha12","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"dbfe1c7b5be20f535092ddcc42f4c14aa1c4f443","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.0-alpha12","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-JBSb5OmDonf+0anUfzksznsCd5u0i8s5RLmUUCDpE534W6XO9vEQxF9U2YXAPx1oCOc3dpdBvaX0pIm0aP7i7Q==","shasum":"2fc48862885c469b6856fd7b7eda847a6282e55b","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.0-alpha12.tgz","fileCount":308,"unpackedSize":351561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1X0LCRA9TVsSAnZWagAA8LEP/3cIFxnnLqY4xF0dWFrb\nJJ80+vshYLE4+hGXgJ98LycoDEShnnar8cJhzkPbQieKZ0cauzaY10WvmZNA\nGtzbxlb6mzJHqMR1wiOhf+67YXhwhQPCzVnq44kXHycHNouOCh1KowjpmliD\nZK68sLjAzaZvDIs0OrdYT3Fzv/OFLMg9NxHMjCvljs5+a3VxV6h/RB6BzFJN\nX1/Lpmj2EAPHujqePCTp61qVvjeQ9TTu78TLvGa3cThpVotFk+uaWO0jPKi3\nBGhtIV42hePPeGb5BQ7hX/RpfEFP5jO9KqR3zwHJFd1VUsuPEtKHKn8RP/IS\n5OAlTSaxJ/Twx5XU60Zbh2wU6SktJr2GWAo5p8IawpmScmMXlplWo2XucutL\n05EVDbIGVlG9EzExAx3cXzEcBKDS5h+VX7Z0rUsndZQL7uSD+FaJQ3o4R4eT\nIjielKu0sI6nMEBritX/aUtxJROtf6sfLxxtjzDDtHLe4s14U0WOnJ9oCZzC\nixaVgzPMNm3ZCfsDlNNuIq1vyeHbqvyP5fqoc5cuBvBVGuyeOMX1i6qT8y0H\nuWvLpRcbZ15M86+J02N0zbjPDOeCWpHLr266J+vz5ozmPaVl9TfGoFiRaigY\nfmTH5B/6cC2Q1h1KJtS7nmesffVqjkLNW7wxZeNUDpnvhCC45grSNqY75Spw\nsw+C\r\n=YzKE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFNIkEq6vjuL66X8uCEMI8aSQiIyshhDO6sPSYVUPFVQIhAM6NieyouJISfbjaK/JuoYRMwUC/ZeWQ+W8/fflP+bZB"}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.0-alpha12_1607826698583_0.021016265892296104"},"_hasShrinkwrap":false},"0.5.0-alpha13":{"name":"style-composer","version":"0.5.0-alpha13","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"dbfe1c7b5be20f535092ddcc42f4c14aa1c4f443","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.0-alpha13","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-3b6bMRxdJVHl2CYzzK3bCdlbL+/ejmqisklIcF6JoSgWeINAZhGB8b+OiE5bYVM34EBBqKzmN2QECydQgTOJ3g==","shasum":"f571078f7b9617087d665b33837e54436e507a0d","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.0-alpha13.tgz","fileCount":308,"unpackedSize":351707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1YDpCRA9TVsSAnZWagAABaoP/2KCyIdWx7WlnFRvuXW6\nQjQ1zwjWo/dkXhZiQBfMrvza6F1y8oFAGNDz8nnuenH1aU3lC0xStm5NuGnQ\n1tATmKDPy0kyaw97BZJUz1RFpg9FGz8KLA1INEKFovqoFRa53SKF/jsxQgWD\nlHsjffhGBOttUZHe+3LWEyGJr5I1HkvC+GOLOirEV/83ejTWa+x1NZ+UIN8P\nGS9fFsUfe71AdP27FniknZl2oG7cIKUpEhnKwBYFOAgIcaUv2MUbBflIO9Iw\nVl6V3s6EsKLEtR7NjwJ37NfoOg4DMCVooBqiWtfHpZuWqg+ipgHMoRx+J9S+\ndmdSR/0o8b4pLF1BQ+UUpi/rB0JzzpxQoBiw0+SR5al41g2CKDGjP6aB0HBs\nWY31EOXTmxU7sR1Zbp9ZdqSgNwiTMaH+l6BWWbVz0ilMXESroc4HraKnJv6Y\nGxxR25gattFGPjkATas/CRvQBtai+QKrn2wE0Qgkf61QEEtUQ8ntzFJxUp/0\n8uoZCVIMPTzGBIXocswi9DQF1lGpJt60CYZmgLuu7D4BfvzKDm0aYi2UF1TO\n70bPudiaVWgt0sgMi7d9I+tEf8tfj1xYt3navU/ed+yH8qAwCDhGhKOnBhwj\nJbn6mF7Pr+WneLWpk5miDoCEfLNffiobAbJIvZTQ3EJORJrwuuhul1Zo/nVe\nTVn0\r\n=UyAf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHamCJpAm/yAUrx0sgnW1V27hWr2YMq1v/ztwIyYOleUAiEArFgvXQjqbSi+DJarSy1IbPTqd63R2yTpoKoY6c8qeRw="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.0-alpha13_1607827689412_0.22108862407038066"},"_hasShrinkwrap":false},"0.5.0-alpha14":{"name":"style-composer","version":"0.5.0-alpha14","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"dbfe1c7b5be20f535092ddcc42f4c14aa1c4f443","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.0-alpha14","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-QeFQChwohmZj6p6Y4lkG5z1j2WQZcPBMvnwvZkKh2wthNPo/fnZODkQK5G40fQEuS0u3Rihm16tqiLzZ6ypvyQ==","shasum":"ce44c4e961ac0d3907a49a82e8a4306889ea6a78","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.0-alpha14.tgz","fileCount":308,"unpackedSize":351901,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1lLgCRA9TVsSAnZWagAAImIQAJyy07Co4qw0WpFrqBhR\n6IFzkWPSmwMcTrWBeuOHL59jZrj1StSkkXyOoiWtW6DFSa7gtAQjvbnBnXwn\nJxdu6EUs38XkixSRrdTjQK6Q1rgrJJ93X6Y7FiazNYFCcjq2bXYUjtu4+AhY\n5Mm9a51azuw+FVv3PeJ3JDLDFGKpuOgmWXweDkSXEeb+4K5hGQt9XNhffZLd\nxHDoDgYqMlVvz0VeWkAvadd5AcIqBPD3Z4HJE4MKN8nFlcBm8y23NRS7gKWB\nOFnerqT/OISUyw3KMosMxcPt15FHojkC9kbzxSK2/noDndguhvaQ9Cu7DGa9\nejAa8RTzVLbY65yF1A8WLexjSZlp0+EIGdocH+hSQcsLyU4feT73eaNnWGKl\nOC10GoQWvRpMoQDwQuOV31EwZr8Tmw8nicDyxi0RUTyA4CS4/3/RHueZOfhC\nXnOWeqR8dU03osT1uPwEZKOEoSJkPIrS562uDHo9RoMNN2qHk0xR35Th/2vU\nbpp/l3raFZrkAMogezdjdppze6Rqvwb4l/CkqpuFvyu0XaDDm+Pn0J44Wxh6\nFea6YItlKyYuZ2IwUpXN15rWuZC4XttvtANwblQaZROjbucQ8LD3B/t8HDxT\n5+sg+hgWiiMOW/Od9RB3CWYgzeH2KNmqz52WT0nSYjGLa7wBtvaLs3tDfWqW\nM/LH\r\n=EX1W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACQeHc94NodALaI23Xf+HCTldDIm5rCEVwauLLmT413AiAk2YVn/V476yGQ88FBUq+9nCY7MyEgl/pNUPxoe2WC2A=="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.0-alpha14_1607881439899_0.4871207640094293"},"_hasShrinkwrap":false},"0.5.0-alpha15":{"name":"style-composer","version":"0.5.0-alpha15","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"dbfe1c7b5be20f535092ddcc42f4c14aa1c4f443","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.0-alpha15","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-wLbjF1Hs/5JKC4PMAEqMgwjreF7/U4BJF9uDUBpu/hxxzM5WkqDydkfxglROi+TOdD+6i0u+pPpvxBtiGLvSHA==","shasum":"d909597b4be9681ffc30307e60be8efd65c3ab4f","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.0-alpha15.tgz","fileCount":308,"unpackedSize":351831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1lSFCRA9TVsSAnZWagAAhZEP/2HxYH4XrD5l4oWBJzI+\nBSc49e9Cr1jkaot188WWlUQG+/xIUJG19l0erEDVAxtKPyWQoos0JwtZRbpW\nMn5WcY+n9wiAmHRwtZbZisnbACsaAnpcrIu9i9QQmlB6OkLhgtb/JXo+63dz\nSDbJSqo5XOw8k5gxlO/OKyvtqvLc3aA8IeWceV+qb4+595VorJxTsen6wwPz\nGelm8/g4mADBQe3ua8ZXioWWzSJcPRjA1ttcs0Jt3faBhfP4njtfCtZ1JkHq\nZqvhzpu7DsEA49nREAokqmtV6hO34r8MeqLGwrCD85xWd+CkIF8Fsh9cQGmh\nsLKn4/4pV1OFml/aKjfiQks4YFETm0km05qMlku3ASRKSQM3zMsGlFUy4fVg\nwsJ8LivlQKefCxAApqi2YBPAor80bbB9fk1PNqaFFujUVdeyUyiVy6okVLmG\nnDrzc38J+F1s3ops0yQEOe7DRUxNkgX5sv0IAVdgsVT1HITVnonzfGgfGHB6\nlUl8hpXsxQqQEFDBLy1XaNXyeeyH5pCW37wGV7uUWrRNYjjYjfFPDsOeUF32\n+E13758mcJ76GFQULkidwZdFqBOBCohXNQRE3RzXTjFVnzKn/SoM0MsraiKK\nSm1fJSQs+qZ9DLHSJevvsehT9DCYDeAatWRO0mnd0/xSbtd4F30M/L3Bo7KX\nWf8W\r\n=BpdL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBe5CpSFtkCfuUCvMNkme3hQYgBRDgHkLukao6cG480cAiBbFoyTQY+l6My+FgOL3nkJdYmuSOUg1bOwiWYhj+cAKQ=="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.0-alpha15_1607881861136_0.9356494063365344"},"_hasShrinkwrap":false},"0.5.0":{"name":"style-composer","version":"0.5.0","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"b543b87855b3e03ac976439b678e1fb028b157e5","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.0","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-khA0aNcTQkPZlLAFAGG8rNU2Y7zmtmghw8TkMMdtICpZ8OUuaFZT6U2LUdulvBJ5C0IXF0Xxdl248ww2nwilxw==","shasum":"efeef0f0afb746ee011f3f69458e5d66cb7f9c1d","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.0.tgz","fileCount":308,"unpackedSize":351863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGoMFCRA9TVsSAnZWagAAbmIP/ifch1j5mAl18vQgieau\nM1joMHoH/4rIPDbuC6utlzgyRqWPLr0j3BKLz7nZgW26h6AArb9y90jzb2gw\nQeDdXxtda7Jdxnt7vmfsEDIuvQilmvg5iYMTPFt8n0yWQg4W5MnK1e+LA4UH\nxA1S359aq7YVP5++Jga/jpSCRFMfb0pF4WJwSV9ndk09T0hc9a92KofqIjNN\n/j9tA63QyCvnOcvBl29uhViBQMm62tZskG7J7iVJgxTiEYy6gx92ayDi5YJg\nAhp3v0/nw5gbVIj/Gty8YsbbkrWoDDjT/PuidvWKVPeAh8Kv6Yjjib+jIdmr\nQQX9GH90Q3VsgoCofSaAlhKaLvo+dZTSqhfoCXzRUynQ9WgUqY/bqWui5s43\n4/YKWb1ecvhTmhyqCdtiVw8M6eSOlRlq3nUEi+wErau8TgKgomUZ1uvbMHrV\nm4LfaBmBcx7GcIi3eE0hwzsmk4P9vh5Kw6p6eADh534iDBvILtI8C2iUAdhd\naFmpOoax0ca4ZyBpVjFPIiI2zbYN84ZHnYopUCIJrQOPVVRSrSODW2/xkjzu\nOyNWBok9cyyOzfAvo7pqR3VAwysk2kD8aADt/KnbItwHos6WFLyiM5E1See1\nvVkYMD+cBt4htnn3hnl1dHHee9Mqzy/x91cqDND9dzdkjmc+wvSdPaOhko8s\nNhf5\r\n=zlRo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAHRwars/1KvYVoq8wqTHGdvh5mT1gZWc3zBuHiJ49iSAiEA/A/K9fXutlkIROJbwaGbxA7uY1p9J3X1EOUlU2oD4YY="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.0_1612350213043_0.22942687801951345"},"_hasShrinkwrap":false},"0.5.1":{"name":"style-composer","version":"0.5.1","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"0cb6ba912f522ae9766e073e2f416480add6ec4a","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.1","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-NcVzJZfVGAXAwFuBuGKkQEELro1sNA5yCztpDyDgw6N+Edx+96T1jUGa1bxnJnm8iTFRt/D+DOlvI7QVDr6eow==","shasum":"a114c907b02db1054883c3b8fb553e4b63f8a1db","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.1.tgz","fileCount":308,"unpackedSize":353952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG0rbCRA9TVsSAnZWagAAkAcP/1JRXJnV8Om/gFv8atA1\n76cNZ0T7lt34lnr5wMvOLQxDism+KJeTQsxJ1BKBgG745qmmHf4JBCfFHI38\n5Vc3Tin4w1g45uSOen6pU14VOyzg53LkWKuSluSrvV0LxYpuGUpUhkGhkn6k\n0+bhU2GsYzsQEuem4xel58Ft1+73jsu4Kol7eHmgdcMdYolD/zsdmY/pUMHI\nQwzSavvw2KX/HVlMlS2Y3LMe/KGA2C9C26msXRi01Cqu1k99WGvMxx+lVy/N\ndvX0cWbKpahxmU0ZTMy7wGeEwpyImArLA862fGgKETHYN8ilFan4cvOGZXdl\nAGOZwzTdv+jaH/XlpemPeBtrdVjsG1qJcNOlCQlImSHangiA8VXvYjAqb/e7\nyc1jg+4zZlyqXlO2l2ca+kopfW7KTxiCOw/vliYChrqBTdXiQsXs3PcjDZwX\ntL/yqgHxNirdr0WKTOXt/Ula5lUyNq1Y8gHM987mmGjzt3faVqUSGFEpbxjV\njMBaInyb79DVTmg/0JWH9FnGKknU5NvYVwoiGn1QhS9z3kr2Jg2Gj2ACafUV\nOKp0QY8eXisRj9bFbYf8nZ8J+RHdac5bo5dE+ZtxIm5y32qOGcCdBWGsL4NK\nCg7KrjE80hnAAm2ILVtiPqvh6EMpoyzpd3CEWKfaqX0V32A9DzgkNrNweEKK\nynqX\r\n=jTc2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA/uylPSGy0QpX6GKlq6JN4AXCR/+XsahGy9deuBQmuCAiAV66HYLompE8ZTlWW7ySjOOWD8QUznE+/5z5BtL5aMmA=="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.1_1612401370697_0.2675706358332264"},"_hasShrinkwrap":false},"0.5.2":{"name":"style-composer","version":"0.5.2","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"457ad880774091fd1e0b93aba62b9bb094efe1d2","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.2","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-i0Iqts5it3JUBbEuZX9vIavXtacaivqECG9y8ObnD8SzeXcaNy+wHj7+QA6k19I03VIPcpiWubfuAkG3deQAJA==","shasum":"2366b707b571b41c4a6024104d2f0077a185d1c2","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.2.tgz","fileCount":308,"unpackedSize":354409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgICcbCRA9TVsSAnZWagAAa7EQAKHQC71Cwo/cFG9zFOBX\nzd+DwcpoNPJc3cEDCgzL6chdxDhf2W7fCg2cT+bVhNXJL8SVwnZKTQAjSWSg\nqrGrPJ2O8+4aGV05reTcuR2c41Ta/Esqdna2IoCmwZtSQ91G5qmGN+I9g9xE\nKV/zG5P0/JX4NGEeOw7NiaqKb/sn6bN8gKDTefcThJ2Kl/0Jd7xy1Cc4xN13\n+JEAxLG6stYHImkqLhaLcUIwjHmTMjEU0fvCGnfbuvoZ5nBynaRbJVxDuTuR\nHYthIQU9TLFebTEsyNBihoFO8+qyHdpUNUbI9EN+XDm4pCi4BDAW9HOtG61u\n1pv/xAtv1j5z8lnb8fvEqq0iX10DKT87D+K6RjLjQ/tZAihgMt21lSPbvymQ\njzbAFhbzySOuUpfOnteRCYq4xaR9pRDuBZkvUu5fMl5P+r3nWySMi78sdPuH\nR8DuhDn50rbusYWOJB7HyFoCuD2tpBBIA55cNV/e84c6KUi2oeAZbVT/2zBi\nznfSsA2P/424tF2mfpKxWT0ILtcOg/HRI3huXh+zNb1HWvM6mYDkHoR0hww8\n798Uvc5s4unLDW7UeyRs1o3SEq7iQrQHY6QG78qCZK5FUtfUNFbbK1zo3qsn\njABpMdoNEJ1MSC1SmlVvApHqCtuK1HWltzzcghTjihhjMsTcOTvJVYrpeOPl\nV3Lk\r\n=Iebo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDh6Ej7SiapUSq1UV72zjN6fyktBu/Hd9uyKee8dESTEAIgT0dK3y7vj1sLCsNGjBxbetgztwXnIHy6F0FzciN8oe0="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.2_1612719899287_0.5009088229582654"},"_hasShrinkwrap":false},"0.5.3":{"name":"style-composer","version":"0.5.3","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"4455e386b72679d0970eb9b82268c88b5640f04e","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.3","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-AnVrSByhB977+SHLrHamh+Z5v4ZsRkv2hY7zbPFZAxPQyT2qproonLJ7VlOJkLOiUYDffbE8V0na6A9UmDClGA==","shasum":"79811a5b8d276e6c1f4cb2f9dab88509a8bb9c88","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.3.tgz","fileCount":308,"unpackedSize":354345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgICezCRA9TVsSAnZWagAAAOcP/0u9YdaVQUgmjsbPrmHI\nFEt2lMpslL0IWBb3LYp0rNvzPBY6tgkj7lam3Q5fWSCg4FfOy9j0D9PHN57b\n6yd0AvlTh6WjdD8yosLODCSKnTPPWdJEsw3YzfjHJfMCVClzJr6uuRLuTsoZ\n3QhI0QdPWmFNTiLUixuqUe/SpISQ4pLMbhyZMJB/8SU0LUY2daNawyH4khg6\n6xkbHlIX8md1k9dt9/kFqvZf1Bu2Ix2Mgbl48AOamuG7U6zJEeYgOlwwGopg\nRAs0L8wN165VPCi4rj3A26r3MpiY207QYx2ZfDhpVH2myQtnGI3mb5EQ1PiL\n2sxO3jvsjdMFOifwDCpQ50RBksjhUPm1fsuP/QiPLkTtIv8m9aeWyvj6R2Tj\n12S+Px5sjlhrSXstaAScJ8Koq2NMxWF9jMFosHrU8nD2F6yjydujYUye3Eh9\nFzK6YpjPVxizDg+ZMcRys92HUXXwNX7/reIL4IFQscCdbVumxrBNTtdtqzfu\nOLHo+Pm16Qw+mhcQffGGvwe2mEBU02b4eDYydNv41L7O3fNd/Fp5sstCBChB\nd8Q0MTk6kUulG2nlGXXqwZbBCUrHK8GmFczxjOMUFkyGef0AYUOvSTHIGEMx\n05xnOSeXctJEuihbZJTZFQloMA/+QMer0NLB6bUr8JrIsA24Ao+ERAMHyAv6\nonJg\r\n=YFLi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFuMNxtIsU5ugpwh8C1QnNwjP955lhfKXZc9ysrSc1AgIhAOeQgfn3wpKjxLE9oZ9aQBtu/amxfg+l5Ytmajkk5T7b"}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.3_1612720051423_0.5525782012301794"},"_hasShrinkwrap":false},"0.5.4":{"name":"style-composer","version":"0.5.4","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"c8a16bf2ea2cf0ff04e1b23bcb0169bee7d009e8","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.4","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-7nqwuLK4H4saEwPV+R0ZVz++zKpydzzP7NXDv4VomQEXg6/ww+0HeiurSJ9rdCdkNQVtrK5FJwBbdJ/LZTrFAw==","shasum":"da2253ecc403ea59bc42a6c42fd55da7b449f1d7","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.4.tgz","fileCount":308,"unpackedSize":363992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJyYLCRA9TVsSAnZWagAAAgwP/3y0eFmAgS3SX7veb1pL\npnGiLNQwDiG+L4B1pceSgXFLpDHpYkJIuee1pD+hkIxHC9Dvouj5/pjyj7K7\nv3PKMBVib9mc7YBRtzJfEJcXFiyqtcgOxqZfc+mJ48qJg9l2QQmgflutm2yd\nmdf9a/PEMJZZgNYmzEQP/HSvpH5EQBN6CvrFRK/3NWAcRiaJTlLlBec/Z1vF\nR/gAYMvh6oW8G+G3NekBLXqMp+87ns4P6UuyK54zTtPhr8sm7DtFk9SEm66D\nOgfv26FViMHDDv9Ht3Xuu3iARUURThZ1LhgO/hUhZGMuQtt+6Y+IAk6Kd6IO\nPrAM/K1WueeP6Iftsvj0KSONeYhTsHUI3yqV76YsEhYAk+2I1CLJs0It8tNO\nVFHi3WD6DmBEK9VEKKwBsi3zRPUChlYEb1s14ISzcb3hBPCupuyQwI61c8yd\n2+Hzj7KP2/7vPQDc1dwobkCsDPL+lwmxOkGnC1FzrV6LqyGI3yaVGgri9SSc\nzdAKtH4Vr5kBD8Gc3UWaxSdzpH47EIBmxv66OXbr4qsot2Xh0rNOBH1BaE1e\nAQrpJskdPOoQz6d8fY9LuZdkOQvVGuVV/KW6GFfEYPfbAAfEwrBuvEKRIRM7\n6Fwcz/SJNN1KbXThrJDLZXr/mi65IzzBLlAITsclKkqmNMZlJfPEx8n/57FI\nbY0Q\r\n=bEXe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrPFZEi0HPnYEKeR6pXeSaF8TqFZKyjj7n0Tj2xd4MLgIhAJ77dlklshiz1CsvNewEb1TSiJN/FnolKLdhm3YRLeUa"}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.4_1613178378639_0.65392190570226"},"_hasShrinkwrap":false},"0.5.5":{"name":"style-composer","version":"0.5.5","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"aefeb85bcf08578fc90ab52a4997e26972903c01","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.5","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-sB/jJqh/55AjDWSJOEE3eYjnlQFUyAAPh2nwUPJuIF7YDQlivuta4GA/ptPcmjRvP17IrAG8KObdMFtLbCQU7A==","shasum":"1b3df7420dcda460b9abcac984a2d6f7002cb911","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.5.tgz","fileCount":320,"unpackedSize":365430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKBuMCRA9TVsSAnZWagAAYt4QAJm2skiwhXD5hJbdM2tX\nrczWR38vMikt0gHiAqnMHDdSODf4A9CkytM+/rH3KoLFV9o5sPKH9kDlvQie\nBmcPfqk5+q0w2TieLHmrY2NhLqkwcggw1tGeZz7elLK0kyJR+1SN94K3D8I8\nI/TAb1x3l+TNSnUn5hgQ0236Lg4XHUNHQ85WXmbLXZVpCZJkr0wNK1fd5+I/\nooqpPqqUb8ltQdnsVw9+lBejeLdcXNqf9LvPCNrjkbAeAvcIZGz4tdCKeatU\nNPaVFubaFB/evZ8Mm1jHhDpRosa2GgrZFz7G4W1kXDgSDrX4FIpXJMaxTq1T\nR6nCy3p4P2WEbgxRNXHhPap6JulCGLvbmwSGQIiDg+wprCkljjLYhs36x/je\nxPh6akAkOB6IyZ/DvNcrjSq46975QFopAEttjh79nQ1NdrocK2QK/84BIWws\nh2iYnxHQUUANu81gAac0pPFXAuESFveL1roTnNhABw8Dt9Blu/R4MSwC+bC0\nEEZe4UdEZZlmKSu6ophcl7aVLd2YDP9LZXoI3aJzlkkiumnFWX978H9vrJM2\nfYUt6ovVluniBqD5Zg1YsPs8UIB0iJ5XqjP5JPLVvRUKf8WPGPGkjS5BLjm4\nMePA9L/p+cAX/RNQRO5YbLpTr6QlGso4tDysBfI0E26UrPhUDGXCoXjZgNVg\nH+94\r\n=NpGO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCv0I7Lxg1EfUIHqSFse8pNu7BpO+vdGTGWZ3XQFYTdQgIhANdsY+wsm8Oi3I+J68yUMlk8tTUAfgL8i3Kg263ciANn"}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.5_1613241228104_0.5052077119255027"},"_hasShrinkwrap":false},"0.5.6-beta1":{"name":"style-composer","version":"0.5.6-beta1","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"aefeb85bcf08578fc90ab52a4997e26972903c01","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.6-beta1","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-jyNbuFCk4uJGXBrR2Grc4tU1/GZzg+wK0436I7uWeeiQUGpCDZpNn0SMVsuDayvl/vLeouoFTm4FbdTZ+WxftA==","shasum":"083383290338ab8817445b0c9d2df18009ce6c28","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.6-beta1.tgz","fileCount":320,"unpackedSize":365500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKVWkCRA9TVsSAnZWagAAWXwP/AoOeHulUzSTkoufpSlF\nMfWaxLq7Aduvee6FY25gFcSbhEpNXl1N+pfkpYAy7ykm3DgPYfZwCMZ211rT\nNfWX14cIxkP3ijrQLYTvIWS0sIqidUWN6+trvmuo6eFSA1sP6+ycdd+ZPc9D\nYwAISifOBfU4h0HjjRvSh1wE06fy+KeyzRB2MGkaVVLSXNO9g5sFyAzVxZd2\n/y8nTIUg2vqqT+guNj/9plB+G+JOtT1evVpqPNCdRS9feYw3YH1IxnOs4civ\n0NXvfqSkP3MmFo32V2/41RUTmlV1Uh3ym+Ojk7HmaeMS9FEiKUpf3x8LBsOL\nQ+5wpzEbrcze9jLt5cqurAZW1ViCPGx0NmX4BkY/PUiQlEwT2BPE704GLkaz\nnWi0BwZ5KkwZhl6tbJOVP+/oZdwqF/SYDKC1J7kjX/u1zQOJoVz2HJpGq9pl\n4s1/puJ4fBGiGFSUk3UWOIuNF52BsabHgMiVlv/2KDLKjBtVOTU2yZ3M/rN1\nFDQylQcvemQXk3ymVY3ak256Tb7SV16hR68/RR7IIhVqDYz7hxR4FDk3ngKg\nbQWPONf1LE87POoXTaxuH/kcBNnnLujMQHK+5vsG783ZQfvf7Z+FO2EIZhtu\nRnMrYVHGy3hh7OqTLuAzQZV1LXLVgkbpTC7VKORWuYYBCljMKHZAI48ygm7z\nB1Km\r\n=CPp4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA/z42zHvziZi+xV+QQwXcTFwphbyw5nQ8jowAzsFHZMAiAV8jjqPw7nmmhuWleEefjdIaL4Pcg7kguG8bOqRe8QnA=="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.6-beta1_1613321635581_0.5151516194108972"},"_hasShrinkwrap":false},"0.5.6-beta2":{"name":"style-composer","version":"0.5.6-beta2","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"aefeb85bcf08578fc90ab52a4997e26972903c01","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.6-beta2","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-+gmlxidx8W+/uWH6uqkY6gzxCaKrjZJjGTFLpJPhrD600ykhCqH1nUozZSu4rOftAyqz3XvgYP2a0olGva5PQA==","shasum":"d98335d3b3fc51f6e48f81cd3f5acc14f4ad7d72","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.6-beta2.tgz","fileCount":320,"unpackedSize":354849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKVv4CRA9TVsSAnZWagAAl3QP/3+1R0TycXqWEqeZsCHP\nJJ+a1odpLdaC5G5bG/r1zR57EtcbDfKZ+HRi/IZCwnJktm2LTSbeQ3sX29dB\n995GW7ZAfoKBUqqiYYsd8hH4R3aSasRZWG9+SMQRwi9kZ1UH77QkXmCoQTp5\nSn+KmJJMatlt+M0ya6fXGc/eUPW7C6QZS/dUBHI/S0UGPVV3qJShMUrWtadY\nbGnLxj/kgJg4ShG4gZFaJv5NvJv+xo5hbsq7v3Ubrc8wAXWvi1Kbz+lvYK9A\njAPKNyJBuMPMguDwguhVqRsAJuk4WmuaPr2mc/u0Scza3zl6t+DbgJ2VJwOe\nbtmqaj8dz0Hut4rmP78e2lPJpy/DPJkHEcur4W0s/e/azqhxvN7exvLeNNHg\nusnkLJohv+paUn4nar7jeCNPZWaWvLgL+HxzNaUTDQudTsxvREE326eI3/C3\noAZWMHnuAjJeZ3CJcVXZwDl4VPnGR/kvijxY7ce6topN7nBEG5XMg0MlgWD1\nKpn6ffPxL0GUx8pvgbrEC3xy39vUA6Ob8J3vacqMQGq80srdzHa6Y5CVS53D\nyTEEX3vXabaSlG1nuTrmuwi0EBqJ7+g5ESGlloG0OSmYOKz7724gmST/PC7T\nsIWulWZsvFqyu7tZFZ9ehWOX+q0L9ZogXrHVn6s5Qbzou/LWhYqnkIDUmLSc\nZIq9\r\n=Z8h6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDhU+MUwjOTf80CsNZnYOCmohPqQl9LhW29vEVnTpufsAiBQvMrI0IgsTHmB/TkFEsf3StI/ZPYXRnO8zLBAXW8DqQ=="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.6-beta2_1613323255792_0.9257516741569538"},"_hasShrinkwrap":false},"0.5.6-beta3":{"name":"style-composer","version":"0.5.6-beta3","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"aefeb85bcf08578fc90ab52a4997e26972903c01","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.6-beta3","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-3Asa5c0HWhE2EAT+whR1vvyrG+TStPQLnp6SukpUTUV0r/bWAsR7akLlX5HiWterVaAl09g/a/L1+bI5qktoGQ==","shasum":"a5d206956abe6cfecc035a1f7bd71b059840f7b9","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.6-beta3.tgz","fileCount":320,"unpackedSize":354984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKV5qCRA9TVsSAnZWagAAL5EQAJm1xJNQ/0Z9u1fj5HDo\n5wobIxcjApivW2DEnxAi5RyVLXajz9T0E4ulXAg32l+YLCg7+jPatcWGI6EY\nWSBdyGNlrDFp6YfiwCs7+dM2rMKJtBG5XRja6SaiWCgmC5IzvciRnnYrdt33\nub8QbXJVsmUlywfv4DpjPctQpP2RNhPRpEHjORwPk8wdsnwAiq86Kata8IYi\nBoGbi23ZelaUTZVYYoqjQE58XUfsnzoBeikDo31cnjEG937Z3+LnOQLjiU0e\n5G67nQBWvA5yZLwg9w+rw4iCjzm3KnhzbObbn+6J8geJofqqJv/cN7/v0XjY\n3SQm/NmtIaQZrB/lEZ+pcGr2CybpMVrcgK7Yaiq5NIk/rcoUQDPIJ7rlKH8r\nLJ7rZ12upRsiqg1lD8rv3sGL8hIp25858jufgJF6inZxFpY+H3aD+ISHQPH9\nYfm8Iqc656qRqrcwqCecR2e+aU5MWnWQxL1Wwlsqn1U/M9qpp/I1kKtyP8Yb\nB/ax9GiEF/ujpUhdlsEljyx44LKDELtufnxhmIUMBmBqj8usWKgDQqXEjixC\nvFDBAu5b1jz1lMF7IQrSlLKtjIgX+iZwZmPraJrR1LyIhj9bQd4Udr6Jte6k\negB0i5IVwDVoLm4tDMWlNHQwmbtTpG8yenyeRWV/nD8Bk2Ql7EtuzQsBTPHd\nSAn/\r\n=iQqu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDltC3AUGVhc8gTXp/XpMwjHx7XL43pboFkSTKL6rcTpQIhAK2qrw2TQ7SFjgG5LyKZ5/mn1hSZqvMOrErmLzgbob8i"}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.6-beta3_1613323882053_0.09983158508230727"},"_hasShrinkwrap":false},"0.5.6-beta4":{"name":"style-composer","version":"0.5.6-beta4","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"aefeb85bcf08578fc90ab52a4997e26972903c01","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.6-beta4","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Vc8//qDqFK5XcEw5okKT3b/LldF+0IXBnyQ60hgypFUiXLDA79mqzrypKXan0F9lXUOmIjgDoshxXUdqwZzd0g==","shasum":"08b3d1845ce3cb463abcbc8ff8fe672c076f654e","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.6-beta4.tgz","fileCount":228,"unpackedSize":247846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKWWRCRA9TVsSAnZWagAABlIP/RhKpGzcFI5eXGsx9HaQ\nKDM3TZ2aE0w6aUgTPymFskVO0FQ9mbtJfFu06/V1MNg8n+eH60tPflWjlv7l\npDJuWCm46psqlf4p6e5i9A7MbVzQSsbGWhXduuunjdyOWhYtIjOMaYsx+fbp\nnY7+aNdzXEvNlqErgf/YKZyeCS5gXa1qfYvJ5FiAYhFnpHwW7NNqBmtVR/h/\nyoyJJA/ncy15RFe/W/Xh/0obUAKARmQzlHqviuhmzrO0uKVhbrSJHYhuSkk/\nR07xyO8xf8CMQl9KjydR/WitJLMBKZPBw2nzGgU/l4E8oRgTYks97krL/KXr\ny4CvT7DBCWzw1QQQcM9ugxDwZtO7UFkSxboLjRQ0TQT6/4rHx70nKCF4a5aw\neLdWmfnQYLJhVe6nb89LP+e5vBR3RiP37WLU/VuyvTfxPwI+iqE91ND/G7A8\nLlyeI9l9liq0my2DE9xsoMc2Va9arNuprofjlEM3NrSwaDGsAjc/BqKB3hw/\nIMLn3M8ZZIzQCUq0jycRmILAGB0RYGE9SNFcmWHcYc+fF85XnkiUDGBCuV5L\nN9S93F1N/tFPvVYItcnxDd0WjNu5wpt4gem++t9deSy/MBbDT5UXm3KzWzmM\nAfDuvmLCzI5uH+lLss+00AWsxZ1h35ArlXyNF8vem0Mm7HIpzwaqMew4QLMf\njUOE\r\n=5jva\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAOWmsYPOskEZTvm9cu6GFLraJS47Y8AgG2qOjWG9mrAIhAKO3+4cC/LY1PBzuwaXmIivP3ARXDboyjOU5d+td7nLU"}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.6-beta4_1613325713343_0.007484244976612153"},"_hasShrinkwrap":false},"0.5.6-beta5":{"name":"style-composer","version":"0.5.6-beta5","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"aefeb85bcf08578fc90ab52a4997e26972903c01","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.6-beta5","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-YHibofNA/YZXxRtLJd/yzlN1qsbLkT8n/ImSvx0jIJE8SQ/0hXoW5rd3MkxSuDbWAthBdvdDX8mqDBY4PHLNRA==","shasum":"6048273e593172e4d2df4132adc4355ec285b7ed","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.6-beta5.tgz","fileCount":228,"unpackedSize":247952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKWbYCRA9TVsSAnZWagAAZCIP+gJecd2oQ9wD4ki6ZScx\neww/bmSmmDBToSWkXl71j479C+bQpX//oTbBSUJWMscb8c7U0WTzFqLUs7CJ\nR0R4pVKVMAURi8FJJij4XFeSkf1W5iDUEzRhiqwkqhthTixDdU2iIFBJ/4Cm\noMhiPFfBFs2jdhb7XmX3oAp7yT1tezKZYI0wm9bpmUQJcS3U1H9K6lDxVABz\nNdxc0H3ngv90U+FMRNo8WWWdyVclVunxbW7naNpSQoPjP5UEObDNKQJ/XXTq\nyRUTGFpHmRMvWEcD/D6eZUPk3To6NTAwH5KQBcDIRRbi5hgbjRbFYLxeytId\nskc4ORmYyl21Zjlo6AE4RJ3BtMa6D0u1y2IN9fCaOxsdvnZNx00to3X5b/cb\nuonOjpHMaiYoPtDlMXfwIuY9AYBcgLvWpljTBDk8GP9RrvoZUgzo3Wqh7li4\n+DYiK8wxPbmsojpQZHdELplhsREriRNRRBJoFOJgtaDK6DLTpjthk1oZQei6\nPxKN3fZLDyrxTAt7jBMKizkmabHOv30UJ+tiC71vV39vm/K65MsuwUWaydfx\ngKF3WBDA+G7+mwVKdhgMXttV5N9UYSo+6K2R0kTr0zVvMQC46W6w2lYEdmUH\nYBWNyWQ/l0Zhj5s8fAy56vyNU0B2aM3w7K58VVaxh4/iMtr72eUTu9CcwBJ5\n2e2j\r\n=cWzD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5Hz6GHhfdtwCi0gShWwXWsUZF+SaFJI4ggimkK8gTeAIhANdDuyRfwcS4v9y0fZN74MbF+LD+rPTKOsUEK8JZrWu7"}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.6-beta5_1613326039574_0.5671649131278249"},"_hasShrinkwrap":false},"0.5.6-beta6":{"name":"style-composer","version":"0.5.6-beta6","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"aefeb85bcf08578fc90ab52a4997e26972903c01","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.6-beta6","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-PjwI0xLw9Ys8pFJxtzeBZyl/sFym/Uy8RvAajpLGyZoQdW+yD7sUd8ISroAoNu2MGHlh6Xaj/pPethc7kd+31Q==","shasum":"a2f56ddec63ec300588a2c567db5b09c4a620e2d","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.6-beta6.tgz","fileCount":228,"unpackedSize":246692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKWrmCRA9TVsSAnZWagAANK8P/1WbXB0YIo7tflTqYI0C\naVJ/26ZxdQ79qRjwjsjNWCnHGAOTBYuzXK0JMQWQHcbJwejHAV9Jkf5Epeg1\nduiy9aJje9NXXcDtJxe69qCSnfda9EPFCHiFAD6pYWyo7adTfSQrBCtNA7Tv\nf4tPwHUW9t3NdSXkU1opJh2uFHSOK+FKMwtJApCkiPrY8uZt0wIdeqPPpM6B\nrbuX1SiZK7PMCXJM220rA44H1q6zZocAoOLPlaOqxXJatwndfFHXAXITnhs6\nJeNy0aiMUV7Eq/L8HZOq9Vf91JMjbv9zkKgpe5XCKd06yQdqjDEn0MKNaixC\nQ30IkClO15s4QbvatgbYTzrpChE8UulkxqYzqpQM9aDkxB+fYNG5qHE+gnNE\nwCIcOaRXmtBsW2k8C6MjR4o77GPr7aDG6sKXk0EEOkhnFkstaPl2GP5Bmf/q\ndc/KQKIBPXSh7HzYu0M8CLASK++kUBBfvYAr7chqDo/8bKo+t96aL8vB9BjB\nHmd74v3Fo90vNuspWAQT62owvOy1wGFyTiCnHytXhop1y3R3HzwHe5QRcByM\n+lcVWuFn6uDWFY2WebH6hRRxmytJvbfipbrdZrRMh57Gk6+4X7ki6kQXQGnJ\n2NFGf8fQDmglZRvCN301VlyYS2uHnKA/sUhOM0bkYqwEKHcxoDjPWGANJUub\noYFq\r\n=/XJY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGhGx5588IgPLt3kjpvPCwO8VY+23iuvCeAFaeSb6wh0AiEApBrdmPBs/IOCNUNQCaoNC6jSK2pggGaHPpwzBOFKYCo="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.6-beta6_1613327078487_0.48453714192662756"},"_hasShrinkwrap":false},"0.5.6-beta7":{"name":"style-composer","version":"0.5.6-beta7","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"aefeb85bcf08578fc90ab52a4997e26972903c01","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.6-beta7","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-a+64Yi0N4ZclyS+pjKoITzU3JMyCXchsi2iVyGVHrqOR+WjLZ4PTKk10aXva62KImgdI0Fkp8zwl5p5JBLhsWQ==","shasum":"6c892233d4e7a5f377028e33a921af873eebec7d","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.6-beta7.tgz","fileCount":228,"unpackedSize":246164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKXCJCRA9TVsSAnZWagAAwkgQAIa61rMKBQEfGm9oibbv\n9ZWK9dR9L7Z9i6PCOb8KZigsGi8ONMSbNfJ45QCJphTSd1RfLnK8VhXRaDJc\nzBisF8AsvYqIeeuZerlcO2qF3qYRmEJIkzS9fGI1+V7+SmBWVK99kX+3Q3fM\na4bTmxjRj0jriUYWwRk1XyrzmFQyiU0ymLoDRVd5mkWGYgQ8POXzKtwwf1p0\nhm3bGGJdm1XCTKkujMv1t+M+f1OmEWV2zjGUSl5LyNpibq7mzOTcqdqOtEr3\nOffWdq3wQNowEpA7aRvYQauFWqNQko8xYw/eumg8S1GQFlU0u96UbAxIHTvN\ng9B4MnRbsbjJi6sPDwZc8l4qoYPrn4QSU8IOsNdmPBqJ4V2VwLF25H5UvgbQ\n+zp7kZlKQDY3rLhrN3ZepNOqTkj9sWUNyzP5tzHwNQNcZPqxZ463VXRiQz3n\nrpOD3C1/3fFv2JkINiPVdvPqiPaibaaT7ZI5aAQ+y/IWXUFCYBDz4yxxhOhk\nwspqtLhKsrklYpCPgro3BOWR23xGJB/5bzLiviRoJzz6CrbZqp0Fw1dN6hDD\nmwMzaJpcsvupjob8V8r1Iw6njf93yiCx68ncs8mtMh67ibOCtJ7FYSEiTyTJ\n5mxjoYBvztFIk52O0HRnCsQX/fOhexfI6WhvmoZb8puemuNWFWI1DbRaLz3E\nt9M/\r\n=qCd0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtHW+dWvF4CCFy5qWuYg8oacNkJ4MYKjp863a8PugFVQIhAOLfynOWDIg7hWbFyMNA2kML6yO/+FKmvGMLG6JteOsg"}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.6-beta7_1613328520645_0.3778817136005215"},"_hasShrinkwrap":false},"0.5.6":{"name":"style-composer","version":"0.5.6","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"07496d3c1e155e9d9e9c0c58c38e81619f6f1beb","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.6","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-g0GXe6VB2ka2tjbq0L1BfVyXXkVWo9dg+gwwpqEpTfjE4otQE9xsurqhfUj+hLuK1jWDmMIIXZKhXRYjTRc65A==","shasum":"8e17780bed95a4dc4e4b3a0b09cf20a81a76785d","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.6.tgz","fileCount":228,"unpackedSize":246158,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKXGjCRA9TVsSAnZWagAANdoP/RMDz8H5UdYLIyRvpTsN\nHHBrFfm6jJ4wQMGPHDyDT8czMRxlfrINeU/wkRlmfbiIIQHz/GEGqkzbGYDk\nqRBOOIACyYDqNACywH24gFguber4NyrDtmB8nnmq8I3gnycJtgl5Ofnzcj27\ng9GT4+Oq8i0m4YKSXYcOWBTb0nRJeXxmLS5bvi0iKlL4nb36LRdmFu0htbhZ\nyH6Fm0EoX/I/x4QlHiKO0Ptq4zBYmDxuGCPn3FKndleIaQkFECPsABt8oL6B\n378m9vIlA1gu0eqFjZnq6vTLDT6RBp5SHjiYiHRQ2HVEhh6XIjLLeUjDszLX\n8N2mIjJlDcBqOmbSoe1IuDjJseVbjVhIdJBDn7IWfTBZXMoZqCwdn3/hymPS\nr7eSDzdBQAhjcYwu/KZac7e2+psuqKP5B0HtUxlaRHyagE5gvSbLIQeRvBgm\nJI1mJ/dupUjLt9uVOaD1KEmoiCY8vh/mcaarjQaY8ZK3AdhulPyUHJ4dDxyZ\nGrwtvyuW19Os4tAGKjcx2vcrfQHvvYQB2Yf6Ty0dFQMlGF+nJAskVz4UP4jq\nell5JShyR7Kw9wtD/orNwW7/d1hCrSP0Ar3KLZPqGEbY0ro9mENxl2mtSfAq\ngyF7Y+EWpHMQB/70Q6EykMKTrXVCnaD1CGOOV9G5Ziuz7Rt8bQk6R0qjlCKc\nBWyw\r\n=B5tx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAqRayAZgQY9PFo+amFH7wGLzdhcqomrnPnHxfSitInsAiAYrJ5g4l91k94wKgLfSRaVEPKpAJ1eTkG7wos3fC3rLQ=="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.6_1613328802880_0.0544137412761152"},"_hasShrinkwrap":false},"0.5.7-beta1":{"name":"style-composer","version":"0.5.7-beta1","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"4a5e326e00282ed522027b0dec36763b1e3e0f36","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.7-beta1","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-8YgKdopXCwcB6JldY41PAP/Fz4H8mcXKGZoBSAmLoDLs/KQAtynXYhWWKplazI1rT/9hs5DMsb+epkzIA3WsCw==","shasum":"410e62ed929b67d334b3215b644d55f1aab2a67c","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.7-beta1.tgz","fileCount":236,"unpackedSize":281307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKXemCRA9TVsSAnZWagAA6hgQAIfJm++QVij3CGJvp+vm\nEqEW7QpjC4aGsfSRvV7fXT3JQXXY/bKdZ8KgadsS9LSLvvsaajhE1Os/jMHd\n5zsuuATwhJheoFPIyMjd+GPU3kvp4i7t08uu6ONfsDME8XJvZGXI0bXfpoDK\nWyzOccVXfib/6ph6TPkrUSzIrOSVt6GoeujJWA3aqzgz60wk1RQI6yz4+osT\nVog713u0rJ11aekW57NSoCDCADzb/1B8k9L3q+JtCQDtygoWZGYDNGbgATws\n17C4LiQ7I/ESXF7FnzZyPqXjl/qka0qgqe4By6FCnuqSUL9K9nv69cxihIfB\nkv5IJeNTyrvXcC2DDwINwXCUKttQmATCeCDqP8zfVR4CGCfJD10cPJbtrksr\nXhNvW68HPf2SNSrrK4JVhSqt22WxloNgkyh8GadVDEhZdQEflxJr7VUJbi5M\novnzlKimi8h67KT9e8TDt4BG8oR6mKWAe505oH3iHCxsq2mddrkPtHr5Bi0a\ny6wpJICtoZxWhieAp7raGz8KabcXeJcZi95B2a99kDBlk7x266htzzYvEj+U\nyi7/p1NolNCOnp5tvVh93pzu+NnVKNOshCs/jYpkxpfNiedFXb5WVyx3+dh/\nR98ZtAHpF0USi3gwRFYKCjF6sTbsNqCL5bNmpDRZt+o2uVg0pybjINdPsGt4\n+EBE\r\n=U1MF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdMlLDe1qkIbSRQoJZ+E+ZxHCo6xeZRuaa2I9UYxESTQIgdQKi52dr0qfjzr/Rmkv1SOsyDyGpJTyt6/3KjCdAIv8="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.7-beta1_1613330341698_0.4607867156279666"},"_hasShrinkwrap":false},"0.5.7-beta2":{"name":"style-composer","version":"0.5.7-beta2","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"177de3481b7a865b14fc175862865966708beb5e","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.7-beta2","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-53ooUglSY4Wx0s2yEyCjEZjX9oQJX7CkS8W1q8iWSh4aTXfohtYApqrYgLKmcw7mRYq8l0RqU/hk3SUxgsHi4g==","shasum":"a49cf14a31cafeda169b48d68f9c7fe1102332ff","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.7-beta2.tgz","fileCount":236,"unpackedSize":281485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKYBYCRA9TVsSAnZWagAA9PAP/2r9pVgPN7frAJdTZTJa\nl1FZZNwlzHTCkntCFYRcioHUa18SU5Rp/TD2/wuPB0IoXboAzWYYqi5Rn6m/\nVSoERLogrtOBFUvP2l1bI6QLx+e+iIKxQu+qXARP/PmOJ2i8pqGfh0kmDQiU\nxttf2XXR4hXaTj7XpYGDZmfPvUxVwtkunNUY2q7AXNFcMDJfuetyf4fBDx/h\n7bIZ6dI7JpKLq9rPhp9LpffmyxHMom8d9MdGxJ2knZdYRNITnfnWI121+/Zh\nZkMWMzCkH3wv3mf+wB8SYTY8zmkV3Jj8jihyOXbqxeSx4ZaE7cEMNkbdPtoH\nZJINVvlL8v8h7r68IIkOm+DPRv/fxcUN4bP3ytdxRqjjoQMPmw+miw8t6+Ie\nKWEZTtmivLVhws+NxMZBKY7cZOGAuKvSSJGST7FBgji8RaNuYqHceS+XkbER\nj8Mwc+h3rv6FLpTtaxhqJuXHhFkNulqhFJetRYmKSWgh3PkVi1SXVqb61M5J\nK3RofnRbJ55RxunubClr3Gd187xxMCuRC5+lKc+3HrBaDH6mghqIQ2IhpdR1\nZcU1uY+X/ddzJqOBbbCLdjgwetKCYTS/qhPZk9hIQOE2tIEXPoSZ5gsGdb3R\npFNTEw0e9OI8DHrjI7ndGrlzexH3Ji+m2tjIiXJgUbUy/BlnAVPv2IOrrk5G\nPVB8\r\n=f3ag\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+XLUBgLhpbDLyRYQ4kdMh3HzgfGbO68QElSUw6Oi1XAiEAlqYeG1vL8/QO7VQzy547FWSZPsA+Iav4H8yVNSe9TIQ="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.7-beta2_1613332567814_0.6003562865015151"},"_hasShrinkwrap":false},"0.5.7-beta3":{"name":"style-composer","version":"0.5.7-beta3","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"177de3481b7a865b14fc175862865966708beb5e","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.7-beta3","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-URqEXSWELsxMGCPK6GLC8We5MiMxiv3mg84uSU4lYK/oQdxHwHQdV7geLDJUgkCZXBr/cndZBGYEmeCzk1G54g==","shasum":"0b9aa253d9e3d6a944e01a7cc4b5e9c6c04508b1","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.7-beta3.tgz","fileCount":236,"unpackedSize":281499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKYD2CRA9TVsSAnZWagAAN00P/0DzcWxsqnfD3TgfDxwE\n2uE85u4EmR6FmxQ8/f+l5Hj7eWzyCzfL+R8hKReELQo6NZgAWnrUt08MJDMl\n75z8sXAjImxlDGDF3/6k0OVseoeU5P/lcvn7lumYsVOd9A0xQZX+g9R1vA3K\nDxkp2aoRkb8Zy8vH1H1oEg4gxGkfomMV3kJaLF2EqH9m8CHO05GJdkpkbsOc\nGadyAVAHFDC66karjlERTLOf6bFX0/XWTqiNNHo18fmVimY1NhmcKkYjEVuQ\n39wu6KYC8xUZeYE3Wve8QOs5ccnxrAUwKG64jrfamMSQImIZdidsoJ9sJ/7N\ncS4TEzOScvsYXG+KExjrpqxuXzspeyazHUO729geYDXgAGWXNA8FhByoocgf\nruBiYDSJd4BU3NK+uHv+M12U0u5n/QbnEk4SRJFjs4lpe/ycqelWEgroiQi0\nHSun9LnzEM0huNPF/hDYs+A6AOUps4fQPVHaXSFuB99BB7PRkQVm5Nh0w0na\nObGWSov0AtRlEQxEViNFafjYgT/Clfbi9Y43f195yrN6zoLBMxhit7ieVY5K\nitW0bbpAQXvaOEXfzvnekMQTebnSGYnklNjSLSvqissqrfXo2Sx+ROxSIy3S\neFX3kP+JO/osk1J+P88BW6aKSvb2Weoo4kWmKeHYFNUBH21wsbjpswhenEop\n1RKd\r\n=i+7E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMp/zrzf5qlu0M7u5VqVm0iMa9duY2PzQVkGrsLf4OAQIhAPfpmzD2gCgEaML0Zj9/ZbIY6lVz+5Em0pkdfblesbu7"}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.7-beta3_1613332726044_0.4348392506579075"},"_hasShrinkwrap":false},"0.5.7":{"name":"style-composer","version":"0.5.7","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"826922e7b11f6b330218beaa0d12e3d693b43a6f","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.7","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-myOGn4jPjtW2CkgyVDpqfLab2D+83oZcMJgTWaH9lqIY9Pnyl7MKquWlvOenT88LTdGW64p2jykgQmSMkumN0g==","shasum":"27550f682d176ffed2b9bbafd67ff441a666f2d6","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.7.tgz","fileCount":236,"unpackedSize":281493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgK9sOCRA9TVsSAnZWagAArd8P/j4BPU42JT5tVFZgidtN\ne12ZdGX09TGr8fsOv30CVXXfpkLxd/NK8J6nWjNxKw4f+Xxr7yw510nNvPwW\nOtnxKZ8S70ckdE1flxVB2SZBpKgR/HvVynoatSCYgVqzZ4q1Ec4HRMyDjNZY\nOLNT4QEDWsaqQlvHWoIBMKeZASWI9Inakdle51iqcLShCVFUQZBqXEH4EhVm\nrzaUF2Cp+Ec2YIBJV0YDFRQ9L0A8c3c9FHRQ0ocUn6UoMSh4Tae4TrbLfimQ\nzLZhzpH5SBbJOF/8sapImWNJEZV2cBMbkgRxxR/g4deZyPmzRUGk+opaQ533\nmKc7iOdPlUjt8drDXuzH5lbWoLnLAmsk0XWb8ZlLoV6iG2X6DKU0zgdAKuqY\nUw1m2W3R2VEk9GPB3I56MlnNCOk2rw2DSypJFPX4/GQ3BSwwrm5qkp+FuKBN\nAXl9uDmjqPFNdgMXYQx/mesO65OKdQj6EpHG0yJldi2HwawwK+nI68b7zoS2\nI3nnDOC4QiuLU+Y7n7u2nW3JI5vgm4977JGl9IBCvcn40I0biM3Nb2wDszjJ\nZrrYXMB8xWjOlINZ9v5ihOn9DZoC6w9yl+treX3NB2Wg//OdRuCgSan2P0gX\nj/jdfH8TUuZLijCiMUyYEThFBVJILft14blwmHy3ywQF2UQw5q5HS9fkMNb5\n1qsV\r\n=f0PU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBo8Ibml+KoHFPKY/YNuUFemHpKF+g767sWP88Qc23QmAiEAkA2gA1DbMV6urI3GatSTQ69XE04IE71Fby5gQOBGO7k="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.7_1613486861755_0.9548086430275691"},"_hasShrinkwrap":false},"0.5.8":{"name":"style-composer","version":"0.5.8","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build:clean":"npm run cleanup && npm run build","build":"npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"826922e7b11f6b330218beaa0d12e3d693b43a6f","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.8","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-T5gAjV9aF0BEUzXtLMU27IgxadbVeyjsllvzADY6z1G3gXVTkrn3wFoBKQfdbYOVZywPlejjMwvXrirg2xg4og==","shasum":"3f2030c6c744c6e20752d86b05491cb80da774c0","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.8.tgz","fileCount":240,"unpackedSize":283067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5StCRA9TVsSAnZWagAAMM0P/jf+QQKJBk3lPm5xKXKI\n2N0tXiKNEcqfG+jkAgzE5fN/0/EXe5yu69gunZazeV8N+4RZ3KtLGntESyVv\nEOxsLzhsG8bMruJ4D3bGIAkM89yCH4SyIiQUplYFhSM2i9XXLDDkIOavJd8K\nhWZs4Xwhc3MH7TMK9MNr803sI8CeK1igUxkZg6BZVaVaVl3JoRY0ZypiPmWq\nBuLG1tzUzsGheXaoyq75l7/MZL70Aj/WFwlKBifvFoF+SE50Qu4z6QrWDZzB\nAkJCDZ4wVmvO82Y+3U7EO8kd5BoZwTTHIZdI2IeqL59NwAYG9TauloTeMwzI\nkK1sC3DhRxUjCnYkwsPAwFAIBA3+CV2YlwKXtBpgCHQRNhRqEd9Jv7j79QJ5\na0iX+Go/cr2axigPEJZLFXgetovvhlA+dLFxe6nz/388TrhSzhrj++u4G4g0\nL809Gcspy1tI9Oq6T0gbTKFlDrHbi8PSkmSSoMc8sM5Bw7IAbxgK19lTa2Vd\nibtvG9uXC4WQkQsNu2PJ86hKHpAjzWBbZa4mRTr91NxFxrZWVuvSL+q7Nks9\nF8PN65FuZk7GLRGcgN12KCX8GuN2wibE0XlKQveX0SgrO5vOLVc0b/VEBhG2\nOjjsvTI4IuwO8cUWpDzqii18Tv8zlR2TXy+3sbLyRvmXS15Irk3em9cEn0oZ\n4A2N\r\n=v9Ht\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDa0Xtdk8aI8brvzAhcjGSmj/1FGz135MeIgB3aPadzTwIhAMouwmXlCYAFcPt5k8XSzveobZ9G+50nFn29FsUWv/pt"}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.8_1617663148761_0.18764299046024013"},"_hasShrinkwrap":false},"0.5.9":{"name":"style-composer","version":"0.5.9","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"38356f099ca63a46019ca4cc0229ce021c2d9846","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.9","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-qiSepdF2gMkpy9lRHsO4E1XOX0yQ6oUNZCTjz6WffV9mOr7QkxXBRL3j3Er1mkfaEpP6aD6tCiTb71x0FM9kkQ==","shasum":"7a41e9a51568e1109ce38e454f2a89a0e4fd08e1","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.9.tgz","fileCount":236,"unpackedSize":249619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfHBrCRA9TVsSAnZWagAA3isP+QA/zDgbzAVY90tOFTr/\n/JZX3WeF66l0/ELbyD5GYolMAZOAGumaC5YZXJ22VgNwvwr2g9qhr5qhOR6x\nUxCoIRlg09U3Qyw4Pypya0qdCGKKV3xR7bY41ZpwaYFdXvUReV4gJDLsAr0Z\nskudyLakbNyx/qrCd0OUVcqjMYT2pCVrb39RiDKnMtz31rRNGg3hEu7DSTeB\nF+S06M8R42Z/Ud+GUHVt/s3DxUi6YcMMVAFfm665OD29kw2zV4Oe+4LZENWs\nykS/vTku2mkQeMWkiHodqBqeagNzNQwnmLwyaRUrIepDis4Q+gfNeOHwADdx\nfGJXt6FnqkQhXCZVZasXELBYUkF5h+SKWW6DVSPfOH9fS7MPI1anmZmDCHZ3\nJBqL/UeT8IWf5tDyoDR5lltG688z2jEsdKBim0FzusJ9b6Mbm9HuF7N71lIR\nhkcj6ZXY+KRI7cF/ORXIDd1++52sf4URUJJyQrZYhFyL3hnnP/tDSCxkQub5\nV3N5pFZDLpYmrvHIzx+hFYmwi2xHsc2fai0coaG0u+9/etQW6R7ACOkqhm3L\ny0KeyFtuVIYC3Nn0d8A+C4NP9CTRa8XQYyoJhjjDI6D23jGmezGqxAeDGJtc\n+utBiKmgkROFnnsI40A63qnYnaK4jiYr8ecen2Gm0Ee1hdRrpoqYqs+oEB1g\nTo4i\r\n=hIC0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlaMfWUZ/3ZdnBywaVxqM37vxGLk/Azn0AWzkH1YzvIQIgAb3GGRQclKdPEvcfsqBvGMAkN/7JfkVcHqUjJm6duM0="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.9_1618767978657_0.7846762344510334"},"_hasShrinkwrap":false},"0.5.10":{"name":"style-composer","version":"0.5.10","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.5.0","@typescript-eslint/parser":"^4.5.0","eslint":"^7.11.0","npm-run-all":"^4.1.5","rimraf":"^3.0.2","typescript":"^4.0.3","@types/node":"^14.14.0","@types/react":"^16.9.56","@types/react-dom":"^16.9.8","@types/react-native":"^0.63.33"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"gitHead":"aa619e87d478e89292ed83b15d0299104df399d3","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.5.10","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Yk/jLS1ietMAA+RF0timwt69rZOQUO1sSP99CR5W9pOxIncSdnkMl4O0f2t1/6m0O51Pic2/+S2TFoPlM+LNvQ==","shasum":"8865065c69c07fa11901d9c4296e3b7da2fc202e","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.5.10.tgz","fileCount":236,"unpackedSize":250485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgha4OCRA9TVsSAnZWagAA+i0P/3TdDlYulYqWPgSoCSyQ\n1+hzIVMa+sjXzBk9rpiLIdHKkPS2jR9RgAMoq13vUVqJAZdvK6c1dcLTBfk0\niChB0F7OdsiowSpE+66mn4L2HA562+OvcE4k95yXhFCNTCahdTXGRO/UnMma\nqocoYQYbuaWVL6kn2sI+Uj7K315v1mKn6ngGwXwiwxqF1TetDQ7k8S1sn8Am\nGRw3uO6JIxJXaNYNU8vkKwXjBH6IzvZ6Va006rNnH0KtB/SJTQoDq970BorF\nxzZ9Pq2mzNwCv6iUcAYJnSJhCABprlzRp8J3r38Uq18WZhmfp/AZ4lkqQ3Gn\nAz4KGbaw1V3m2uIFspi3EbPXiPm6e+ZDD5k+xxia2OnHekMeKZjpHgliTQth\nnF+a015gtLeOPIVH7EgPQBt8Sy9tGTSzSuutTQ9PYs9UOwYjsGsXV9Nwx8mG\n6WFg8BG3j1OXvHA5bODZOVEcJznR4cyu4GCYDLiHBnom2e3PBRQhgheeeJ2R\nAsgm+w0FCpJMXez+7FXN9Ni2YNlf9cQxSRh9XVVWOnRDkvbtMQxt59n55L+Q\nnLqj1PgL1yZGpcLXTKHk0tHDZ7sNB8tvfkpOZv15+yO4QSoy0kiUM9zypjxb\nbhS7UMHDjrPtD2OzXwK+6YizonUPNZs1FZ4p46vpR0YdkCPg1F0eFY1vKn8A\n5r+y\r\n=yT2X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxaq3WJP3ozIXeX1jJsnwrYmlKor8AXr1PptoRAKF2xAIgKxPen2zWlfuhVeLIurGspFS660TH96IL3+yCoKFrX8o="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.5.10_1619373582007_0.44559425075685444"},"_hasShrinkwrap":false},"0.6.0-alpha1":{"name":"style-composer","version":"0.6.0-alpha1","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"4.5.0","@typescript-eslint/parser":"4.5.0","eslint":"7.11.0","npm-run-all":"4.1.5","rimraf":"3.0.2","typescript":"4.0.3","@types/node":"14.14.0","@types/react":"16.9.56","@types/react-dom":"16.9.8","@types/react-native":"0.63.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"cd8083cd631f2355ef0531d9f1ffb45d486026d0","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.6.0-alpha1","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-zKms5xn/X8N3VOGWUxVAomOrvUeJG1bTuJAjPW/fXF+JjRtPb/lmgUfdnGd6pZ2EU/dWXHtEZGUsyg9hqFOVcg==","shasum":"1be786515e143cfb5d5a86812ac7bf8fc5cfd945","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.6.0-alpha1.tgz","fileCount":240,"unpackedSize":312629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7fNWCRA9TVsSAnZWagAAj94P/im5kGQgEpRTi/buQKTB\nQkHOglZrqkNful4OIsy6HZu5oW6nz/0rBhK6m2i5BBxxbzX+nUUOGX4Smo44\np7YGbWw+b2kvHxj023aN1tQj9AQ+f7HXWFHnwIwY2My6K2fb47SHGHxo2WbE\njtsTp4Ep0LWp+FdmU8iv7j1CXS0j5w1wOnD0Zqr9iPR4GE7d2VBhICOpeyiI\nOG+siIaqk8D2gsmY9QsvpFlvGj1BaCWNojr0p9hfjBHY2InJskKwEzIWwoXy\ntgluGsprvFYuAdyI1j7MLVxQwhtXybSvrI1x5KDQYBbqRgHYNc/5GZsTfl2q\nHfXYyVrGldZcNQcrO9Cdh85I36VGRdAmuiodQw1pkTKvFjSsyf2PYZlQOluY\nQGiiXuK5jED/haIh4P/1yOtSQCS399FwgTuHqgRpwhwu8c6K5CUFreEXbdwP\n56J9OZE0Ds+GnGfUZ1t0izjV4Iq4PGwUCQDBL3fZEQ+zE0F8ldi4zZ8a09TS\nFhZklqSj1qfsvVP9lrARmYBsKxfkd6vuydNbGidPTCbaJ+iZcrMmhRA3srfD\nOGMBtyWVu2zz/oJgYlCrGlP7+6EP8Ey4ckL+rTM1NOOFIlY+QDXiT1b7TLHp\n3C72fClApBrR38aTwr+25XUReAm86JFu5cYQhpgmJZHiGAxxUV0Ln8LTkJNr\nUUdC\r\n=f7S/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCm4ELuxFIiuurnB+b9D+3yJsMQnDr0J1p4CDV1lT67SwIgYInAYxlCf7BOno9YfQQXHGyjsMWnwcUd0uR5dagyzAQ="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.6.0-alpha1_1626207062211_0.6543550821875408"},"_hasShrinkwrap":false},"0.6.0-alpha2":{"name":"style-composer","version":"0.6.0-alpha2","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"4.5.0","@typescript-eslint/parser":"4.5.0","eslint":"7.11.0","npm-run-all":"4.1.5","rimraf":"3.0.2","typescript":"4.0.3","@types/node":"14.14.0","@types/react":"16.9.56","@types/react-dom":"16.9.8","@types/react-native":"0.63.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"cd8083cd631f2355ef0531d9f1ffb45d486026d0","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.6.0-alpha2","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-VNHDFTGWNILLhGLrTQWRtVy/bc2OAIePcIcPgtJLIQqfViCohr9JzWwmwDHbY+ujTFOWTmMF7A/pWx4007PrAw==","shasum":"cd6358464839addb9e3d406925b28e1a89a995c3","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.6.0-alpha2.tgz","fileCount":240,"unpackedSize":312753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEHaxCRA9TVsSAnZWagAA52QP/0oCMKO4H1aDmNjgak/K\njA/VXDkcVYuhr8YCaKp2RMxESHxPpF0iZc7RGEEQlBA/fU9zxZ0huelEiEie\njKmvRyZ4pUQ6zgnnTuWMSEH1P5UMwC3AjpftP9PENIEngHLblk+TuamyBoLP\n4aTo2ZOg7xwjGmgYYEIHI07h8m9tBAiwa7gKq3WZL/G9Zc6s3CmH4WaqzcaL\n0yhiKkOHwLAkncEXuEM/j0fW0InujRwqgcWxt7nyYj8K7/jsKBQHevk3allD\nR3H8Pahozv/tbsHwNgbmhkG4Y3U4FyxysblurBcUbYnsDPYlgWBo+MEtNoRQ\ns4NBH8+lmqI3zOLt8qOcFR03hcuKoFpMkn7o2iMk7VE+RCt/lc5V9X5EvMKP\ne+LoSBt7Cwf7t+LuBVMC6EQXTB9U/talyuUiqYSShC9qd6V2cyUWqhaquBqr\n+nNnX4ETmM9Wxh7vNadDb2v+srOjgzmBT+I6Mawztejqao3s0nFgVzeyDL6j\nJwZO4xgOhH+AqmoMnyd0fq9Tj09xd9K7M501RfLhm+n93B8zb+GViQgkfRKx\nHCrByAZ31qhRhSyzyufUtiIGgPQWeI84VU4w8oTmvF06z9tq5Sucym/3xOwN\naBAHfXjrMVq9lnSugPK5vlY5Z+Bt5LJFlaQ+c2ct2ml+B8ALSDozKuzSXYRa\nMYVI\r\n=e6PK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLfa28iOgnTTCPLBuMfsavdfvy03Bxwun9364eFV2yLQIhAPTX3k8u/O0FbRjwBnQNoJsy8+lTSGF8rj5TXsW539OO"}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.6.0-alpha2_1628468913535_0.6584346073775902"},"_hasShrinkwrap":false},"0.6.0-alpha3":{"name":"style-composer","version":"0.6.0-alpha3","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"4.5.0","@typescript-eslint/parser":"4.5.0","eslint":"7.11.0","npm-run-all":"4.1.5","rimraf":"3.0.2","typescript":"4.0.3","@types/node":"14.14.0","@types/react":"16.9.56","@types/react-dom":"16.9.8","@types/react-native":"0.63.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"dependencies":{"expo-asset":"^8.1.5","expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"2e7311e1ea6c566d0d19d7396ff77920d513107d","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.6.0-alpha3","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-G5E8Sgs0cvFQbY5Na0IZWusBTVL1S2qEw9f6de4xAb2LsmlbwJOtyFklgAyM6qTuDyg41IAvbaJ3/Sucy5jTpg==","shasum":"19a23f3b3248dc82e99009c22ce387e485ee30e9","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.6.0-alpha3.tgz","fileCount":240,"unpackedSize":312779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEHkYCRA9TVsSAnZWagAA3AsQAKODJFh2BKj+3ngdQeX2\nqNYGTS0cJV0mY8r4wSE9l9Czl8Kjhw4EfucDcEOrxrbiWS2HuDHqk7DVRYI/\nZ2ktHq3wlR6wxJRVdcrmEh0/3DBnanwPs+RzOEZaesRhvgcS40361HwUa/4N\n1ouGMBJfvibyceOgxmmLWeZK4cmi1+FY4Lg7uvGCoQeOIhwf33SuTzKaQb2u\ngQKfXV/l4W4f5PM0ND/cfpdN5OH2/DIMKL109rQ1wdXCfF1QkGOvGBQHnWNJ\n+k6rYn9HSbs7FPEJd/EGSgcVcrRGPyQZVhCt+Lx3hhqNtchC4vBSo4lR5txJ\nWPhU1S6IYsms4WIF5TaftBbyXVDVIgf1+Z27kNhE2kj0XZpwmQe/M6A+H30e\nGgT6zJz8kg6Jum5kUzMD8+KyMKUMJyvUj2Y4o2BWXJcuKzNu6oXSIvGLGS0D\nRpi2CZYs73BvcZwdNrJzqpsJ8aQaFRnJLYzlxwMQ6JCLSlyxlyjfd+JaXbr9\nEsMJ4M8fuIqB0JFmxsU72r0uzhMZjbFpMdQkyEQe8lbxZ351j52oi/6E3o4Z\nrL4gPrR6NdFV460dU6yHKn3mVgJk0jk0UkttLRqjlw55TLRw3koMgXvApIFM\nGjUcQNPlb9+87bv8G/3XtU5SzLApwTeMkVTQnzo6Koaj5OTh2UnLUMebwTvD\nhEry\r\n=rsJr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGkHxz6FokCYrSfLhRcnY7AXiYPy/HqRv+JHA56u17fjAiAj/O0TMI1JG/iBR364EdTROCZO21xVVxEjXlah3kEU7w=="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.6.0-alpha3_1628469528065_0.8019122301964701"},"_hasShrinkwrap":false},"0.6.0-alpha4":{"name":"style-composer","version":"0.6.0-alpha4","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@typescript-eslint/eslint-plugin":"4.5.0","@typescript-eslint/parser":"4.5.0","eslint":"7.11.0","npm-run-all":"4.1.5","rimraf":"3.0.2","typescript":"4.0.3","@types/node":"14.14.0","@types/react":"16.9.56","@types/react-dom":"16.9.8","@types/react-native":"0.63.2"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-font":"^8.1.1"},"dependencies":{"expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"2e7311e1ea6c566d0d19d7396ff77920d513107d","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.6.0-alpha4","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-zqF2vVWDwy99riFfinNJ7wv3NN+lk2uF5epGERV2pH2il+0LIs618evFZGigv3y1y7EHJF+w3Ez/KJU1hk5xcA==","shasum":"d35f2d3cba8ec6173ac7417d7056a7d4c65fcf1c","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.6.0-alpha4.tgz","fileCount":248,"unpackedSize":329871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhE/82CRA9TVsSAnZWagAAehkQAJl859o/qwfzBH+ccldz\n9Ky+6K6yoPiQ2lvUn4esjleu4AqB6zQpGDbyBx3zZW0JQcT++YVu8xF/gdnM\ntz/2BXYEKapcDt3o3c3ovTfrgP9iyJBZCUyPtas7AI8YmGvEU2C2kSrQvCll\nfqeXZXYdVI69Q4oZl0l0vco3q0ntTxWRNZx7cKFyHmNTwzBT4fx0OdVw6zeD\nQEAUetpTyp+wA6CXtWWXzQP5a6GxERtpvAoXuX7M3k6sjuePfR+VLG5YHuIj\nB8B5V4yZ8JAXQYg/XYgPIoIN4XeDSZpGCvUALg9fQnnTUucziRot+s507Dgn\nwYF7IEP0l8IywC8kcD2wO4x9iDBeDkOg1keR7rTWz7wUAcnX8iqaWErAoUJQ\nAElQqHXEGK2tcF+bfKBiyTAoKfGOceNP+PlV/cOUta58bJ1gxHyhaExD3Ajs\nYOeKhG0AEl44H+1GzMeBHjj39QT0pE816qrLsN5u/ycRK4O5xuRdOW2h87lU\nifjhTa3mkxLJ/YhpQFmc1eOXBZ0NjbiDIh1+RMi8Lt0ccxwTF9xODHMzQqXE\nR7S/EeUtEPGiO8nzsmAGIC8tShNITa58WaVp+Gm97jhUENZDIkJ4vdEL424G\nAsYlUxsCIyhqB3iqzhdUPVdWDR9IZW6Wfovhsz0sC6NVIxY089VzGDM0yYEx\n4Y1m\r\n=TrXG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGgCs9cBlr6eXEtavKLkVy36fYpaEVBoUXtstwm0lTe6AiEA7cTbzK6Fv9hLuCALGms38gdMUHVMNBBhIVWnO/TNP5Q="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.6.0-alpha4_1628700470333_0.2219240110912919"},"_hasShrinkwrap":false},"0.6.0-alpha5":{"name":"style-composer","version":"0.6.0-alpha5","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"14.14.0","@types/react":"16.9.56","@types/react-dom":"16.9.8","@types/react-native":"0.63.2","@typescript-eslint/eslint-plugin":"4.5.0","@typescript-eslint/parser":"4.5.0","eslint":"7.11.0","npm-run-all":"4.1.5","rimraf":"3.0.2","typescript":"4.0.3"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-font":"^8.1.1"},"dependencies":{"expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"ccd06ebf9d11f4df0c1974de34821d8523e725d5","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.6.0-alpha5","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-sjOeNVHO9e00gAXHp/1ZR43ga25IEBsgxeFbR+AWjLZKIvcA5EEkp4lAhTrCNlkZKbIcSY64mtECQSB3SNY6cg==","shasum":"f4954e3c3a76607495ebae2d3bcac0eda60a8c00","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.6.0-alpha5.tgz","fileCount":240,"unpackedSize":318953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFKL9CRA9TVsSAnZWagAA3+QP/0j7PfxKdfVwf274GfoR\nQmA+2q+S6o0lc+xmfOCt74e9g5fAyZSNZR90WvuOK1GCCwKD4QkR7fnhI7Fk\n+YFHlBUpGyQpjFeWggN+i0/B43qItmg/mIvtBxC6cGvOv+KPT2amFY/vK8wV\n/KhtpaU2OWEqtWwz9ESRi2tzCC3fJQN/j6OLMbBzx2dRanafUirCXxoGbF0n\nZ40YOcGlpWWixlfdqNzMAS2oStx8DBC/Mqv+HrU/srzOBtNxmrnwNF15xPu4\n7CJE1v5zhTq9/9c6ssa9/g++QTMBLI21RSE8eUwvhc8GdEwLpWj7vAapkQek\nrJHX0LKmqzngT9K9vuiCPGZn4QAq56Dw5XbvA5QEaPYMlezyzfn1589vARCW\nrJBLz/mpZeyRPEwc7Cjkfkk1ZQwqhYyFBWLjEhT8i55p8Uf1We5hKfcTbTsr\nB30lE1UdghB32or+Sy7NKQRoaJ4e7MxkdLoejeX2dL96ch442zNciAOmxto9\nmUm+hkaSYq6nGQqVjmN5Dcc2n91OgPXB2TpY0FC94e7tokK3mM2qU1rmqwoU\nRoGXRQgQKmKRS5xnQqbmg6G+nJjXpYl5f0vL1bXEbuy7SpLikhZTDRjnSzxh\ncDDvYY0AguqPeNAyNys6JbpbNbt/6iVWN/vgEuvGg1ZAhc+C70JSBhmroQNq\nlLer\r\n=eYOV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtpbrCLYAAYJCzSHl7QZPQK99cjpBMMbk8ZfTZMwLO+AIgMdhHB1ZeeNS9HD0Mnah0MQlcdukePMko2fzL/dW3IhM="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.6.0-alpha5_1628742396979_0.2567571462377847"},"_hasShrinkwrap":false},"0.6.0-alpha6":{"name":"style-composer","version":"0.6.0-alpha6","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"14.14.0","@types/react":"16.9.56","@types/react-dom":"16.9.8","@types/react-native":"0.63.2","@typescript-eslint/eslint-plugin":"4.5.0","@typescript-eslint/parser":"4.5.0","eslint":"7.11.0","npm-run-all":"4.1.5","rimraf":"3.0.2","typescript":"4.0.3"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-font":"^8.1.1"},"dependencies":{"expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"ccd06ebf9d11f4df0c1974de34821d8523e725d5","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.6.0-alpha6","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-LQ97/dLXK8P+kcXsKTLv6PnsksPmQfbQJPBDuVSMSTQFJTNNL2DbCUKMsRfTlYj/Cmii6MkOZ09KZcVaVczL8Q==","shasum":"cb529c23ccc45e95c637728f48b128a41acffeff","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.6.0-alpha6.tgz","fileCount":240,"unpackedSize":318478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFKQGCRA9TVsSAnZWagAAIpQP/3MmWNn6HWD/bpwwXAYK\nxQkYsAOenfrX6ToCC7He7bKIGnpnc9x3TEv3XlyOCgQROLDUtNT5htpcbSy/\nx39GKr87gDcGK4nuTveAU+L8vbI0Ubv6naFe2Vag7okoWAgACmo6EjXJIIIa\nXqC8Pc6XxHHeitHgViXu7gE/9etzeltNCMtKSb+B2FQLCQXjv02XrJ+uTEaL\nDJPCaKEeUWfQGE34eCyWniTA8qnaCNz8mgo0HK3MQ8gaSSoTZ04A+t7Si3vL\n5vrzPIOuhqWFbWSFk0ktadd4IAf5FKJbWfZaa3C+mIaQ41nhfuPvbH10BPdI\nRBy+ytbBf2YhDFs3plwDySwQlsGHYlU3KfplP6ZakvLpO7HNGHnZUJEostsk\nFsEPdLNYql3TjQ/CDlcbN19rwFjgJYwCfhi0Ch95qiMPFFmhUAR+zmvzGBQB\nhI2mGwyU5jPHbgKJANJHF7hjub2r4a+FDJNPs6C1AMNC9Q5UqRwXK34s8hKU\nGtAvIB3FHyI8ikBl5nLfsSk83EOLuJG6NGw5rue3tyF1HJQvOGuA2efUczpb\n4PRiBfs6nUnIN44ShUZyuPLVSZRpKjuKwPBE0s4c/G2eSyOITfpqpRBmPpAe\n7hTuw9pOa/qDFBJaT0igsp6BHfOlqkwIufzjGrrvEDxbPBj0lSj3X9HF2Od6\nxOis\r\n=wqtu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDm1buSs0znG6Pf8DH9J4C+7ZCen+yLhtau5MPROQ9VNgIgWax8oBoLhE/b2uY14IGliOSLPWdFV57cW81c5VRwgQw="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.6.0-alpha6_1628742662771_0.31807971379032085"},"_hasShrinkwrap":false},"0.6.0-alpha7":{"name":"style-composer","version":"0.6.0-alpha7","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"14.14.0","@types/react":"16.9.56","@types/react-dom":"16.9.8","@types/react-native":"0.63.2","@typescript-eslint/eslint-plugin":"4.5.0","@typescript-eslint/parser":"4.5.0","eslint":"7.11.0","npm-run-all":"4.1.5","rimraf":"3.0.2","typescript":"4.0.3"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-font":"^8.1.1"},"dependencies":{"expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"f53b23d5500398b37ee4e7ee8bae8a3be75c407d","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.6.0-alpha7","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-52evRZVE8KWNzkeGLMCI03okeDCaih3LsXVGRkJ1Efg1TAjndWZOZbiZHU6jbIMdk15o9+GIRxBmwKh/TcgSUQ==","shasum":"828bd17c1ba3c757933a370e731feba3425f13a7","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.6.0-alpha7.tgz","fileCount":240,"unpackedSize":327075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhF/7GCRA9TVsSAnZWagAA4z0P/iA9HFqnacgaiE1GJHCl\nrB6MzAGyfTsI7N1lrTilJijRXWXg8o9duBBccv4W/447opxhGkd34sB0YQpJ\nBehBR+dpKOU+P8nkGKsQwbjDvdl3Qs6dYzyC+2+xTXgJOZExBdTARKRXNkqh\nylJlRotqjiIbhhDVrQcMSYuleL1dDQb4qJvH7WNuo8TE34R2dV9k019ogLtY\nknVBAUG/8YjWnQ5TTMUEKGVv6xNWPPDLC4yLSYv9Uf6/qBGM58OGGcvc4akD\nP0PyNy8KV+yarJ1TBifTlRmEMOxl0+XViJi+NEhRfSk4mAhIAfLHFI1dQ3tC\n4+f+QlBAHHPM/vvoGp/DMRW/f+8i4eYbjBeLZaXB1gGgE6xuNA/b+ww8K0nZ\n35PaBN8jvLp2f1wn6ya8ZrTcufDiDPMgEZRP4vtmfSQPBrbbWosLyRKZ9DB1\n0k3laBRXVfVsBVKuXte+wST7mcTw91/Xh+3YAUtevLaVcQ1Itd9rwTIBFdZK\niE4nsPKFRuuhqW4caMVMp7+C9AZa1M+xtZAPhXGDg3uBOnfFi8gQ0rRj2pUR\nLNTyx4kMpw3sJR3pOlNZSUtdVCLzSuL5oBOxYes3m52JpZPqWNQTrbuDgntn\noguB5kbVHXckTK0hsj0K5qHdGAUBZ2Q4Mw3K1evxig4b+IyP096P5rLISb4O\n1AMO\r\n=CnPC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTbp9b486bahYTMrj2sQQZhCXqA/J8BqvXHY2w6T513wIgUtrwgVj5ESPkK79HCCvsMfPAR9Ke2H8L+OtfuggKmsQ="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.6.0-alpha7_1628962502344_0.5007631993813977"},"_hasShrinkwrap":false},"0.6.0-alpha8":{"name":"style-composer","version":"0.6.0-alpha8","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"14.14.0","@types/react":"16.9.56","@types/react-dom":"16.9.8","@types/react-native":"0.63.2","@typescript-eslint/eslint-plugin":"4.5.0","@typescript-eslint/parser":"4.5.0","eslint":"7.11.0","npm-run-all":"4.1.5","rimraf":"3.0.2","typescript":"4.0.3"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-font":"^8.1.1"},"dependencies":{"expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"f9e7c221a2756718ac313c3e8f9707911595d6a7","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.6.0-alpha8","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-spnj9mkHZ7CK5eE/FWFTj2lu4mhMixOoPX94TUUGZvZPyl1QQb1LkHusn1CYM3vVl3M6p7MXKo0LOuGAV67mGQ==","shasum":"9bcf6eb14918ac68bee6cc42e4bbac7819ff755e","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.6.0-alpha8.tgz","fileCount":240,"unpackedSize":331847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGAtqCRA9TVsSAnZWagAAAWwQAIsbdGqI9qW7acwRv+uW\n7kbIqkJOcSJrlkglbirukh30fNL4b2VKNnzmEGzMcExZmIxNAVFMWITu3Nah\nW/TJ0bDcdj/HMtLSaM4lwP+RKm1NBik0wlYRWsadpeNVNL+HnkHOsM6mEKyt\nsP0NOPBOX8Xx6h2UW/KxdwCY3r5aY99wBqa0GDwRcijSCmSsybMatmQXxN8t\ns6gWG7dBOuWtLQHowddu4P/bpxEwc5mrcuYDYnwEBZYStobKgS1tvagrKbw+\n503FTM4AfwiHOg9vRZCoKTlSSWpXopDurcbiwErbwOGXapZtjgAcCo1guNst\nGXRcnm6Jnge7ek9XQUUT+pggiJf1W7ZOO9F+Ki5Mgfpx+SWQJiFSU8ldlHfs\nh0oebTBEV3YeHiIGg9t909Zcw8SLrTs5w3hd2+mAULVyS8wbh7VkQX+q1MbF\nGR1udP6W8GoI041DCLK7hn9aom+td8d/eEHPSOlw0GkbF3W3bCwI+gcea3L7\nSlpZo/gA3/QObfivgG7epdnKerhcOCuC6rgiS4e9KleQV5DcCnE1wMO9rEo7\nMa1F1cPSf440c7WXmDRFp4yvw4ge9RPDqQ/7rZev9mBsTaFd3eAPfvpwFPuy\naVKW2xmSO3WIUigDR4hUc2iRe9RVLBomv0JFQp+cPorxI+uMZMvplfGGLMqL\nhhXL\r\n=RNdp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEsIuk/7WlsltFM48ZzT0yfHRB+faF2DpeGTmHcEckawIgIw+xnpOh1qbSTW5tBwmOJLd3ticVjJvxSWaOpMAQj1g="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.6.0-alpha8_1628965738132_0.663238057961197"},"_hasShrinkwrap":false},"0.6.0-alpha9":{"name":"style-composer","version":"0.6.0-alpha9","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"14.14.0","@types/react":"16.9.56","@types/react-dom":"16.9.8","@types/react-native":"0.63.2","@typescript-eslint/eslint-plugin":"4.5.0","@typescript-eslint/parser":"4.5.0","eslint":"7.11.0","npm-run-all":"4.1.5","rimraf":"3.0.2","typescript":"4.0.3"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-font":"^8.1.1"},"dependencies":{"expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"6810f378de59861c37390fa5d7920619a89ee0d7","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.6.0-alpha9","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-AvtdJ06D9wiy3cJUWXrLzcM2AmrICqcWSkKbDTL5UWsHqordh7rDDkbTE8+l96J8oYg7Bc8c5Ko6ZuO6A9tFRA==","shasum":"3c04da090cbe0dc8f3ee4e5bfe0e016c83de27d2","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.6.0-alpha9.tgz","fileCount":240,"unpackedSize":331974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGCRsCRA9TVsSAnZWagAA+4cP/1zOkcnKEeIuHZGHT3Cq\nJxxGzvFXCVR7p1VAYOmAdVwcY3HHiD88CLkIANq2a6EQ6llnhUQL2FS/irKH\nZkmkn4kXX2FzJ41SyM+O0x31gqo8P5qpYJYRwCziHedUI+viWg/RKATUAq5Z\nXuHgrXFZt1nHq0p6KCjKO7AAEBrI28hjQiR6bfDI1w2Q+EHGlCkZfXciyY1J\nHjLRmNL++eNJr/37bsSMrToL3j3S97wl/VZHauN/Wkk03pzF3YkQ4w4IWEQj\nupVFU8MEjawmofj9d46oXAkjtviPGIPBO+B2BToT7hZBqLqbNkaTI4wv4J3l\nceH2KunPruTSEqU574a2hadPl04EuQGJAvr2pZbWE7+J98QKZwTinXWeLZUC\ns7v3j5vKcvy/tQaDV+XvGpXllVciPkMTODbOpCdHDPACqsojDs3FmU0PjKah\nVX18QnQrY6EqUg08btn8ieoGiixLJdn+OF8nZ32IQi9kIZr+cq8bj9BcmQrW\notsOJN7m6n9i2R1E+FtVovYvIRxIU02EKZ3Agk4YdP8SEamNMzLxunKnKv55\nzIsuQpgqai+49Da0UT1MwkLo5EQ9ekYTDG5wvKyc5ipBR7mljdJ1VR6Ns3M8\nEjZ1K86NV/GaarR5xttnBAnCsxq+1fRJoPpgw2hv5cZJs/RmSDVB2LFi3HtI\nQXRR\r\n=jwGx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAlUfY47eFMWBcyzv3K0Z+4DiWwuoq5oRhz0W/LNsuiHAiBvdxWDMfxyL1AHPmb5+a4L0Xk6gxMNGydob6UaCkeb1A=="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.6.0-alpha9_1628972140778_0.9718711545510639"},"_hasShrinkwrap":false},"0.6.0-alpha10":{"name":"style-composer","version":"0.6.0-alpha10","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"14.14.0","@types/react":"16.9.56","@types/react-dom":"16.9.8","@types/react-native":"0.63.2","@typescript-eslint/eslint-plugin":"4.5.0","@typescript-eslint/parser":"4.5.0","eslint":"7.11.0","npm-run-all":"4.1.5","rimraf":"3.0.2","typescript":"4.0.3"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-font":"^8.1.1"},"dependencies":{"expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"6810f378de59861c37390fa5d7920619a89ee0d7","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.6.0-alpha10","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-mZZ1WMGLys/BSzqRbgI5wULjBoIf5S3j4qM9FjO5V0CGbgrXpUI9ROt3hwJODA7V0/zDMCiF/Hlb6w5XRQFVUg==","shasum":"2e0250e478d4c2c22cfa02be053c91ee88021186","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.6.0-alpha10.tgz","fileCount":240,"unpackedSize":332141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGRKxCRA9TVsSAnZWagAAs7sP/im3ZVtZm0XD4Icm5yzc\n49enSNAXrFY1apMt7mmkgQ/8Rjzi8Bdu18vnAGaW+ulIjtbWsJjEMD+Yy4Lw\naCBkjB0wSlgXe15pjR7NN3V7GZ1vv+S2I17jq4w9Se0cyOCSUd9/38SNz3O9\nbLrjjed2iKxmLIdc9ijtV4ZO2XP8plBAdFau7SnMsagjd9Umqyr7dHiWXZM/\nxRqVta0+RoUHf4ANE0R3IesHwsR+bkjrtUl3XKaBO3rOk+5aW8rZsBD4RcLs\n0uUvCc3XzAF/SLXkLikM7NyzyC+ujnVWTuQ41Qw37sTZtjDb186B0kyqNv0Q\nPKXvcy1M10FxkI642Yau8yQIK7M0F952M1n4i4XUprXKT5X9Eq05tgsRRD3h\nfzgoQHkWI5+yRQSYtWn7+kHjvzDLius1No3l0XZR8zhV4UXqi7k/6BTaEI6J\nGhVous6LM4L89RPIxXI9ifIqL+A7ze824vmeVPZ+lllCDwcF4zcwdClP7qBE\nFqSHf8+KCkcGTh+48p2P5cnU5bxccFyE+UXwf2RKeq0bLZnl7ZqMHvGAnDBd\nIPjCuVT9873lqN3qZVIG5aoVeTejvetkKgSrBYSPGwK+rm4BUaaVR6N41Sfu\nYNvgYWrAcrqxFQXBweYsPeGvyYqzvq226TvytKZcETqKRf4or/z3fCTNZz1Y\nS3QY\r\n=1o3E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGgL8HKRKRS7yQdIMfJW0RGEBtEHb+Z0NbWV7DY9iwH1AiA2EIFWei8hOgfnXmUjsgO54jYJOYNcGJi4oYY3QLP6tg=="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.6.0-alpha10_1629033137069_0.40663392150468436"},"_hasShrinkwrap":false},"0.6.0-alpha11":{"name":"style-composer","version":"0.6.0-alpha11","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"14.14.0","@types/react":"16.9.56","@types/react-dom":"16.9.8","@types/react-native":"0.63.2","@typescript-eslint/eslint-plugin":"4.5.0","@typescript-eslint/parser":"4.5.0","eslint":"7.11.0","npm-run-all":"4.1.5","rimraf":"3.0.2","typescript":"4.0.3"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-font":"^8.1.1"},"dependencies":{"expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"6810f378de59861c37390fa5d7920619a89ee0d7","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.6.0-alpha11","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Lq/WefEW++skQuTI9NmuowsnpdkU5QvfS83pQsUKGEeoMxfhVg2gWXZG1JdaE9w/RNcFfTmOyTeDS9l/cgsa9g==","shasum":"90b1032f415d4904583968b1ea92bf59023012a6","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.6.0-alpha11.tgz","fileCount":240,"unpackedSize":331975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGSa1CRA9TVsSAnZWagAA53gP/3quGSPmQLyJbXuYTvhe\nWk1crcCFHW9r84rbcr4I+Ps+INZXVKOTA+fNiUgEUjRZ4IxuIx86WRgBDbv8\n6gtsUtQFcHRFj74C22b04qgrlSZ4SeOpIreLZQTBW8iUgPxELDZ0h1b1mqoB\nDGsyC8Uz2IqtREZaZ037016poZfrfNml6aMl/gjte8QMtBFhbqaAEh308crG\nvjcXY3dSS+VIrzZqAT3EaYp0nqaEDk0LIHutmy4bKXOT11u65bU3EQpGt4s1\nze+H6D0Qp+hPrQfMnlyDlSZgiZAa729/QclVlNw3mmFFMyH1/UzEsefeWr4G\na61pgCeQuC6KZ6H7ZwRiVT00qSo2o+hNdDTw5+aO10etwPOcoWecOSn7RSAx\nhOq3zVxRZncl6PnYNakR3ZPqiJNtqlIPQJ22QGU9ByCH0pfXOg0PlQ+nyMEx\nusSIlmLnhX24cN4EZqgc6Is58fz4LKm0vwhTlD2pTWGr3aEHF6DA+BTjo85F\nF4g4SV4+HLWpbeEooUTTXi2ZiYrGSZTM/sjUx7K7yzEAsRjdZ+g0SXNQP1qQ\nCDKxxDyvFQe0ayOh0MNmoRY4o0lAnUI9+lNknKqLW235WBfudDzSzWFo3TWV\nxbErCJOtmVHXR4l8HVTDNrPAt/qxkLvLqwF4IuP70DoZTNjuoOakDnXYJWkh\nNq8R\r\n=ErWN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBpYjcfX72nGF+6qbDWadhXZls+fZoklTBL6Y2ZyMrbHAiAi36Yde2c46sE2w+X+E+b++qGLYBScetF2bGbN/ToHPg=="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.6.0-alpha11_1629038261514_0.4350480294129935"},"_hasShrinkwrap":false},"0.6.0-alpha12":{"name":"style-composer","version":"0.6.0-alpha12","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"14.14.0","@types/react":"16.9.56","@types/react-dom":"16.9.8","@types/react-native":"0.63.2","@typescript-eslint/eslint-plugin":"4.5.0","@typescript-eslint/parser":"4.5.0","eslint":"7.11.0","npm-run-all":"4.1.5","rimraf":"3.0.2","typescript":"4.0.3"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-font":"^8.1.1"},"dependencies":{"expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"6810f378de59861c37390fa5d7920619a89ee0d7","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.6.0-alpha12","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Bs87XyTgC+q/4JxRKVuQqHJsHVzpdzq5kK4qGz9OdTEQ+CMU2Ml2CYKAtnpeY/XKBSZDbCeuFX9WWv1o90yfJA==","shasum":"82517db382ba92474ec26fe04f55295b36a94fc7","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.6.0-alpha12.tgz","fileCount":240,"unpackedSize":333023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGS+kCRA9TVsSAnZWagAAXBQP/2lI64cGsRIsgw0eQqr8\nVkYBc74LeBn+ifnkzwCXtNlrBet+JHOvfpRwcP8S5Hw+nhALTtNj8aJS+m6k\n4VVhI4k8/sktFpT5+4DSMXUX+TKDyIifHI3whUFyEt0G9c3TYdlk4G02FF52\n6f8nbLeUiAxRVJVqOe+pltic0sB6xf1QB0ZuYP1p1b7an4woNoXS/N9/zLv6\nN9f2IzgaSsf4FmhFwBVHPWTC8VUtO33q9z6y44VGCSI9H0atI6iBUCohRZL4\nWkUzx6irpWCdoDMMTLBjyTxo0cjXrjJDWPTLuKVJHmnmvmjIY763SWKtjU8M\nQCYagY4vxtVeES96sIwJ7nQgOcXHDKIwAVnvUH4K7q14GpOHIvECPj3S7YxW\nffvTOrABwvvVMiKxIncHHcRQWBpjbht3IX/BI1uHL0OXR0TgHK4D4tHw3Cib\nWDDBqlf1xfT2jgmfSL8SAmeVBBQMZexPepqp+2HRUCkRVlLKvWec+hy2xlE4\n+o756FomJ8r6ddKB9xXweu8Nz0rhayAe4y1MFvB3PZRRna78GNnqpbt7zISH\nNupmh+bOZil2u0YIdTJhr3332/cR4s+6IxVr2AMmIXta1A3t4vRLMFp3dT6g\nKaOnpW+lfmmgNZAVZEPsWa38f2HasgNAdQJs3K0ESKvj2R776tlKmjeYyz5w\no5am\r\n=uCVs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC/NVdCr9Pw4/N/gwOzGh1FEcwJa5wa0Wb4doJSPIhJzAiEA/38RQ2uXiXIeCuLe4yXNweUysV7W3RMdnNi4YJSIkhI="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.6.0-alpha12_1629040548431_0.35583447874223206"},"_hasShrinkwrap":false},"0.6.0-alpha13":{"name":"style-composer","version":"0.6.0-alpha13","main":"./cjs/index.js","types":"./esm/index.d.ts","module":"./esm/index.js","exports":{"module":"./esm/index.js","default":"./cjs/index.js"},"sideEffects":false,"scripts":{"example:start":"cd example && npm run start","example:dev":"cd example && npm run dev","website:dev":"cd website && npm run start","website:deploy":"cd website && npm run deploy","lint":"eslint --ext .tsx,.ts src","lint:fix":"eslint --fix --ext .tsx,.ts src","cleanup":"rimraf esm && rimraf cjs","build":"npm run cleanup && npm run build:esm && npm run build:cjs","build:esm":"tsc --module es2015 --target es5 --outDir esm","build:cjs":"tsc --module commonjs --target es5 --outDir cjs","build:watch":"npm-run-all -p \"build:esm -- -w\" \"build:cjs -- -w\""},"devDependencies":{"@types/node":"14.14.0","@types/react":"16.9.56","@types/react-dom":"16.9.8","@types/react-native":"0.63.2","@typescript-eslint/eslint-plugin":"4.5.0","@typescript-eslint/parser":"4.5.0","eslint":"7.11.0","npm-run-all":"4.1.5","rimraf":"3.0.2","typescript":"4.0.3"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0","react-native":"^0.4.0","react-native-web":"^0.12.0"},"optionalDependencies":{"expo-font":"^8.1.1"},"dependencies":{"expo-font":"^8.1.1"},"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"],"readme":"# [style-composer](https://github.com/Censkh/style-composer/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Censkh/style-composer/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/style-composer.svg?style=flat)](https://www.npmjs.com/package/style-composer)\n\nStraightforward and powerful cross platform styling for React Native supporting Android, iOS and web\n\n``` npm i style-composer ```\n\n**Note:** this package is in early development, use with caution\n\n- [Documentation](https://censkh.github.io/style-composer)\n\n```tsx\nimport {StyledView, StyledText, composeClass, media} from \"style-composer\";\n\nconst $Card = composeClass(\"card\", () => ({\n  padding: 10,\n  fontSize: 12,\n\n  [media({minWidth: 500})]: {\n      fontSize: 14,\n  }\n}));\n\n<StyledView classes={$Card}>\n  <StyledText>It just works!</StyledText>\n</StyledView>\n```\n\n## Features\n\n- [Cascading Styles](https://censkh.github.io/style-composer/cascading)\n- Native & Web Support\n- [`!important` like feature](https://censkh.github.io/style-composer/rule-order-and-important)\n- [Media Queries](https://censkh.github.io/style-composer/style-selectors)\n- [Class Variants](https://censkh.github.io/style-composer/variants)\n- [Theming](https://censkh.github.io/style-composer/theming)\n- [Dynamic Units (vw, vh)](https://censkh.github.io/style-composer/dynamic-units)\n\n## Why?\n\nThe inbuilt styling system for React Native isn't powerful enough to allow for universal styling without the need to add component level logic to adapt to platform or screen size changes.\n\nFor example, currently with RN's inbuilt StyleSheets it is not possible to have media queries or themes without component logic.\n\nTo solve this `style-composer` builds on-top of this system to provide many features it can't.\n","readmeFilename":"README.md","gitHead":"7fe0a149d1abe0fd93f18d503db7b44b46e877dc","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"homepage":"https://github.com/Censkh/style-composer#readme","_id":"style-composer@0.6.0-alpha13","_nodeVersion":"14.14.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-HsM9e4G615XGk5OzUF3kBQC4CelSww8Q3ofR0WNXlhfACN7tdrdNmwcgbTyby0jQfDG9BX5HejxEJiFt/fOQVQ==","shasum":"5877d906b99a5fc5fb238d7b114ee65ddd5f75be","tarball":"https://registry.npmjs.org/style-composer/-/style-composer-0.6.0-alpha13.tgz","fileCount":240,"unpackedSize":332608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHC/TCRA9TVsSAnZWagAAHtMP/jzvHD4jha5NKb0t10qn\nI1aZClHbn0wYnnieyjZkIjHb8FmqHMxluhpBpjdDHdmEpfCFRkqKap6Dfe8b\n4O82l0gh084a+qwEwQSuQmVNTtrMiwC55XDA3hFluaVOxF8ZrWjLZtXTC9XV\nZc4LPH8o8ssRC8z7eWL7xrXmL0RdsKhWSIzKHO1MZMlTeOqHuWerIGD10IKp\nEAq7UYfKtv0LQBcAmyGIA4FOPbDc2ZRZoyw7gTEvj7rvSjPARxNeO1pjMSpc\nry/kqrffju9fgh6qDhPMLc64TrNkiYY8TH7fJ6N6M+uKl3jn99V67Umpd8W9\nOuDhocaJ1XRkrLhdUX+VAt75d7467osiD4LDTafAE0P07Dy2VRUQWmu1Ogpi\nJls0t4FZa93Vvpbe2aTEUMgFDyhx/rZH5UphK1hmFdCwirzwW+oQqMcpvJjc\nbBliQOVoQPHZxAGGQtI6ZzRM5mpKs7YsKp/xJpfLISSdUK79LXHdQSQmAhS8\n5/d+S/oD2qeZOJWltq0JW1Zps1Te+/1hxj+jPH4UmVU8B7t9HqKTVqIlnRXT\nacc/9s6FpZ/U+9V1eDI2+TTEzIchiNOXwTJiUbls9PIHUdRyaRkxhuGByLeb\nYZoIxVmYWRh0rX+UV60Ille9ZKReTMfkbKbLMvorTmc52ZoxSmstrKKQSfn2\nvgBX\r\n=tspZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDrPIdX0zr+JMWGV+Hjk3RSTTttPdtBFfkk5QGeUF+RoAiEApK5+hQadu3pYHzfGh+giRIMLWaAVJdnVJEG5PITf8Gc="}]},"_npmUser":{"name":"censkh","email":"09jwater@gmail.com"},"directories":{},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/style-composer_0.6.0-alpha13_1629237203220_0.3433125413626663"},"_hasShrinkwrap":false}},"time":{"created":"2020-05-11T04:02:29.470Z","0.0.0":"2020-05-11T04:02:29.653Z","modified":"2022-05-18T22:06:44.481Z","0.0.1-alpha1":"2020-05-11T08:07:33.806Z","0.0.1-alpha2":"2020-05-11T08:08:14.028Z","0.0.1-alpha3":"2020-05-12T14:15:01.095Z","0.0.1-alpha4":"2020-05-12T14:18:57.840Z","0.1.0-alpha2":"2020-05-15T06:00:32.432Z","0.1.0-alpha3":"2020-05-15T06:01:08.151Z","0.1.0-alpha4":"2020-05-15T06:07:47.064Z","0.1.0-alpha6":"2020-05-15T10:30:27.712Z","0.1.0-alpha7":"2020-05-15T10:35:27.662Z","0.1.0-alpha8":"2020-05-15T10:40:37.441Z","0.1.0-alpha9":"2020-05-15T11:08:50.308Z","0.1.0-alpha10":"2020-05-15T11:29:21.640Z","0.1.0-alpha11":"2020-05-15T19:41:32.198Z","0.1.0-alpha12":"2020-05-15T19:43:41.473Z","0.1.0-alpha13":"2020-05-17T10:49:03.599Z","0.1.0-alpha14":"2020-05-17T10:51:44.122Z","0.1.0-alpha15":"2020-05-17T10:53:40.896Z","0.1.0-alpha16":"2020-05-17T13:52:24.391Z","0.1.0-alpha17":"2020-05-18T07:02:29.784Z","0.1.0-alpha18":"2020-05-18T07:07:43.116Z","0.1.0-beta1":"2020-05-18T11:41:09.939Z","0.1.0-beta2":"2020-05-20T17:20:13.204Z","0.1.0-beta3":"2020-05-20T17:33:17.103Z","0.1.0-beta4":"2020-05-20T18:30:34.226Z","0.1.0-beta5":"2020-05-20T22:06:03.674Z","0.1.0-beta6":"2020-05-25T13:46:50.456Z","0.1.0-beta8":"2020-05-25T18:29:08.420Z","0.1.0-beta9":"2020-05-25T18:39:50.017Z","0.1.0-beta10":"2020-05-25T19:09:04.881Z","0.1.0-beta11":"2020-05-25T19:50:04.819Z","0.1.0-beta12":"2020-05-25T20:19:31.657Z","0.1.0-beta13":"2020-05-25T20:55:30.822Z","0.1.0-beta14":"2020-05-25T21:48:08.031Z","0.1.0-beta15":"2020-05-25T21:54:10.605Z","0.1.0-beta16":"2020-05-25T22:08:06.891Z","0.1.0-beta17":"2020-05-26T10:23:59.211Z","0.1.0":"2020-05-26T13:54:11.391Z","0.1.1":"2020-05-26T15:18:13.924Z","0.1.2":"2020-05-27T11:17:37.719Z","0.1.3":"2020-05-27T11:31:45.468Z","0.1.5":"2020-05-27T11:48:49.571Z","0.1.6":"2020-05-27T11:51:25.915Z","0.1.7":"2020-05-27T11:56:24.724Z","0.1.8":"2020-05-29T18:37:51.395Z","0.1.9":"2020-06-01T11:53:42.494Z","0.1.10":"2020-06-01T11:54:05.309Z","0.2.0-alpha1":"2020-06-03T15:32:00.316Z","0.2.0-alpha2":"2020-06-05T19:41:02.991Z","0.2.0-alpha3":"2020-06-06T14:47:44.253Z","0.2.0-alpha4":"2020-06-06T14:49:47.529Z","0.2.0-alpha5":"2020-06-06T15:16:35.512Z","0.2.0-alpha6":"2020-06-06T15:19:08.278Z","0.2.0-beta1":"2020-06-09T01:11:02.331Z","0.2.0-beta2":"2020-06-12T23:02:21.226Z","0.2.0-beta3":"2020-06-12T23:27:26.895Z","0.2.0-beta4":"2020-06-12T23:29:48.478Z","0.2.0-beta5":"2020-06-13T18:54:33.995Z","0.2.0":"2020-06-14T11:53:12.832Z","0.3.0-alpha1":"2020-07-28T20:42:26.122Z","0.3.0-alpha2":"2020-07-30T18:06:24.907Z","0.3.0-alpha3":"2020-07-30T18:46:13.670Z","0.3.0-alpha4":"2020-07-31T09:30:37.525Z","0.3.0-alpha5":"2020-07-31T09:32:55.677Z","0.3.0-alpha6":"2020-07-31T17:47:30.454Z","0.3.0-alpha7":"2020-08-01T16:55:36.483Z","0.3.0-alpha8":"2020-08-01T17:44:19.537Z","0.3.0":"2020-08-18T18:11:39.168Z","0.4.0-alpha1":"2020-08-18T19:37:13.254Z","0.4.0-alpha2":"2020-09-02T01:00:00.253Z","0.4.0-alpha3":"2020-09-04T13:04:02.299Z","0.4.0-alpha4":"2020-09-04T13:06:28.015Z","0.4.0-alpha5":"2020-09-08T23:48:59.930Z","0.4.0-alpha6":"2020-09-20T18:47:39.826Z","0.4.0-alpha7":"2020-09-20T18:56:07.929Z","0.4.0-alpha8":"2020-09-23T13:48:16.742Z","0.4.0-alpha9":"2020-09-23T18:21:23.070Z","0.4.0-alpha10":"2020-09-23T18:47:46.203Z","0.4.0-alpha11":"2020-09-23T19:07:25.556Z","0.4.0-alpha12":"2020-09-23T19:53:08.634Z","0.4.0-alpha13":"2020-09-23T20:52:51.051Z","0.4.0-alpha15":"2020-09-23T22:25:40.912Z","0.4.0-beta1":"2020-09-26T23:51:06.628Z","0.4.0-beta2":"2020-09-26T23:53:16.073Z","0.4.0-beta3":"2020-09-27T16:55:08.077Z","0.4.0-beta4":"2020-09-27T21:40:20.285Z","0.4.0-beta5":"2020-09-27T22:54:54.886Z","0.4.0-beta6":"2020-09-27T23:40:27.825Z","0.4.0-beta7":"2020-09-27T23:50:10.680Z","0.4.0-beta8":"2020-09-29T17:54:54.003Z","0.4.0-beta9":"2020-10-01T11:23:07.563Z","0.4.0-beta10":"2020-10-01T22:43:27.773Z","0.4.0-beta11":"2020-10-03T14:59:09.337Z","0.4.0-beta12":"2020-10-04T23:30:21.358Z","0.4.0-beta13":"2020-10-05T09:57:39.308Z","0.4.0-beta14":"2020-10-08T18:21:40.289Z","0.4.0-beta15":"2020-10-08T18:28:30.083Z","0.4.0-beta16":"2020-10-08T18:40:10.694Z","0.3.1":"2020-10-10T15:15:31.411Z","0.4.0-beta17":"2020-10-10T15:17:26.453Z","0.4.0":"2020-10-20T20:16:17.538Z","0.4.1-alpha1":"2020-11-01T11:07:37.446Z","0.5.0-alpha1":"2020-11-07T18:02:04.617Z","0.5.0-alpha2":"2020-11-07T18:04:06.105Z","0.5.0-alpha3":"2020-11-07T18:29:15.247Z","0.5.0-alpha5":"2020-11-08T20:17:06.673Z","0.5.0-alpha6":"2020-11-08T20:21:55.686Z","0.5.0-alpha7":"2020-11-12T21:11:50.432Z","0.5.0-alpha8":"2020-11-19T22:29:28.240Z","0.5.0-alpha9":"2020-11-19T22:38:03.165Z","0.5.0-alpha10":"2020-11-19T22:39:39.293Z","0.5.0-alpha11":"2020-12-13T01:39:18.283Z","0.5.0-alpha12":"2020-12-13T02:31:38.805Z","0.5.0-alpha13":"2020-12-13T02:48:09.580Z","0.5.0-alpha14":"2020-12-13T17:44:00.067Z","0.5.0-alpha15":"2020-12-13T17:51:01.369Z","0.5.0":"2021-02-03T11:03:33.180Z","0.5.1":"2021-02-04T01:16:10.919Z","0.5.2":"2021-02-07T17:44:59.472Z","0.5.3":"2021-02-07T17:47:31.542Z","0.5.4":"2021-02-13T01:06:18.817Z","0.5.5":"2021-02-13T18:33:48.243Z","0.5.6-beta1":"2021-02-14T16:53:55.768Z","0.5.6-beta2":"2021-02-14T17:20:55.984Z","0.5.6-beta3":"2021-02-14T17:31:22.282Z","0.5.6-beta4":"2021-02-14T18:01:53.521Z","0.5.6-beta5":"2021-02-14T18:07:19.714Z","0.5.6-beta6":"2021-02-14T18:24:38.624Z","0.5.6-beta7":"2021-02-14T18:48:40.810Z","0.5.6":"2021-02-14T18:53:23.060Z","0.5.7-beta1":"2021-02-14T19:19:01.869Z","0.5.7-beta2":"2021-02-14T19:56:08.021Z","0.5.7-beta3":"2021-02-14T19:58:46.194Z","0.5.7":"2021-02-16T14:47:41.951Z","0.5.8":"2021-04-05T22:52:28.969Z","0.5.9":"2021-04-18T17:46:18.832Z","0.5.10":"2021-04-25T17:59:42.214Z","0.6.0-alpha1":"2021-07-13T20:11:02.371Z","0.6.0-alpha2":"2021-08-09T00:28:33.668Z","0.6.0-alpha3":"2021-08-09T00:38:48.211Z","0.6.0-alpha4":"2021-08-11T16:47:50.527Z","0.6.0-alpha5":"2021-08-12T04:26:37.203Z","0.6.0-alpha6":"2021-08-12T04:31:02.934Z","0.6.0-alpha7":"2021-08-14T17:35:02.720Z","0.6.0-alpha8":"2021-08-14T18:28:58.362Z","0.6.0-alpha9":"2021-08-14T20:15:40.914Z","0.6.0-alpha10":"2021-08-15T13:12:17.252Z","0.6.0-alpha11":"2021-08-15T14:37:41.692Z","0.6.0-alpha12":"2021-08-15T15:15:48.609Z","0.6.0-alpha13":"2021-08-17T21:53:23.407Z"},"maintainers":[{"name":"censkh","email":"09jwater@gmail.com"}],"author":{"name":"James Waterhouse","email":"09jwater@gmail.com"},"readme":"","readmeFilename":"","description":"Straightforward and powerful cross platform styling for React Native supporting Android, iOS and web","license":"MIT","homepage":"https://github.com/Censkh/style-composer#readme","repository":{"type":"git","url":"git+https://github.com/Censkh/style-composer.git"},"bugs":{"url":"https://github.com/Censkh/style-composer/issues"},"keywords":["typescript","javascript","react","react-native","styling","styling-css-in-js"]}