{"_id":"@_nu/react-native-acss","_rev":"5-de25004ae18f9893d75ac55b3102931c","name":"@_nu/react-native-acss","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@_nu/react-native-acss","version":"0.0.1","description":"ACSS react native version","main":"lib/index.js","author":{"name":"yfe-team"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/nu-system/react-native-acss.git"},"bugs":{"url":"https://github.com/nu-system/react-native-acss/issues"},"homepage":"https://nu-system.github.io/react-native/acss/","keywords":["acss","css","atomic","vanilla","mixin","react native"],"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"dependencies":{"styled-components":"^4.2.0","prop-types":"^15.7.2"},"peerDependencies":{"react":"16.5.0","react-native":"^0.57.7"},"gitHead":"f11dbf00c3a97e3bc4590a0577642c7b32efae66","_id":"@_nu/react-native-acss@0.0.1","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-grxNQeiwv3rLFzumJH197RMpG/FuKg9Md8I05F0mQrNVARzZ7l6G2jd9R1rNvkLWbQCFoMOHc1clMZ7uIo+E5w==","shasum":"b2642ac0148b0b27c76e039de9c878c29f5f74f3","tarball":"https://registry.npmjs.org/@_nu/react-native-acss/-/react-native-acss-0.0.1.tgz","fileCount":3,"unpackedSize":17143,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdGI/KCRA9TVsSAnZWagAA4FIP/RaopKmv5WzkZ+lnTkfq\nDcQl+cEiSXRoDULB1Qc9+BmPexgV62iNdeM9pYRa2KVcWcs2JCnHwI7izbqt\n494HYXJgzXdfgRCjsupQoK9ggiQmqd9wfYK0i2tm+cQ/zfl9WKNwLJUryDwe\nYQV6KW2o0jE/9DuFGBhjNsUJ5pBWJW1o1QXP3P1SPMPQyhETPy+L+phuSJQk\nzChpGF6tx6FGVgGGfABV91Q6XmY7k1BjRmxzM2hXc4HBvhFaO/MbauTz0oXu\n1TTFXT3S9ruImOdQzvWWU1bFeA1l2xjSzjVi240ADRlhNSE1OZuvftbigzcu\n1c3ZyrU3krvevCF+DvRg6RSOC2bvR3yBxjZHIp6fN+DUlRlmctF+4sddtuS7\ntYDRRgLqlSrcxQTfo1Uyq5DwoJR7y0+rgeHFQom4JhLOax+++lDMSRs4aXgq\nqLsRXLA/eOnLfATROtbBgogfjml0j09RcSBTfPHTOy97p3eJviIpf5/OWWiT\n4WFKr+6yjlZgQfDsM24gBNjS6qBBlKzpDCbT6J72DGioTvS2tbOMMptBY3WO\neq0NhFTGUqXKWLNxwOPjvvAJ2KOFqYc3ihYbS32mZpPXnJcJMuWrb1tgfIJZ\nfPqUx1riGMGyQ2ZHcXaRkEYHUrLuCvi7YlPShpMbJgWPN7GsgOiKd7NFPpX4\nBgrX\r\n=tseI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICu1hr8wWVMEO9RZ6mrkkfPLbCsJjvUU0amjAj5symCBAiEA88kiUSVW47PfIxFxW7ewukYa6+6Bn7sO+SuGY3DvSUw="}]},"maintainers":[{"name":"ziven27","email":"ziven27@qq.com"}],"_npmUser":{"name":"ziven27","email":"ziven27@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-acss_0.0.1_1561890761948_0.6664422846048337"},"_hasShrinkwrap":false,"deprecated":"please go to @sacss/react-native instead"},"0.0.2":{"name":"@_nu/react-native-acss","version":"0.0.2","description":"ACSS react native version","main":"lib/index.js","author":{"name":"yfe-team"},"license":"MIT","repository":{"type":"git","url":"git+ssh://git@github.com/nu-system/react-native-acss.git"},"bugs":{"url":"https://github.com/nu-system/react-native-acss/issues"},"homepage":"https://nu-system.github.io/react-native/acss/","keywords":["acss","css","atomic","vanilla","mixin","react native"],"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"dependencies":{"styled-components":"^4.2.0","prop-types":"^15.7.2"},"peerDependencies":{"react":"16.5.0","react-native":"^0.57.7"},"gitHead":"afabcb21497d80e630f104e76eae1b7e7dd7ff55","_id":"@_nu/react-native-acss@0.0.2","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-KbJyatcKWUp+Wefqv5zZhpTgn37UgAPgf+z68SW3HVBejxAQkTtOxQ09/92iEWy70ouY9DKHmAPJBLVASFvkOg==","shasum":"72f74963e1a3d19f1150e4fc38b3b8a0e8574f94","tarball":"https://registry.npmjs.org/@_nu/react-native-acss/-/react-native-acss-0.0.2.tgz","fileCount":3,"unpackedSize":17274,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdGJCvCRA9TVsSAnZWagAANFYQAIWTsrsZLvulcnoVmNon\n7FuZeSwDkt+3QsujGVDsUMZNn436xtMpCtmLltZLiEPDEESiiW0q9dlACe3X\nEUm/sjcXhTBQ0YYOPUM21ze+03xZMQHjfmdClq0Oj2AHeCNT6Ux+KV954Yua\nUUvvGjUebnqg6u1PM0VCAzlrhPzUByF2c8MGn9FGBZ/dyOvKGW+QnizIsgwk\nOxbTDRKxkdmVWyZmMKjI3IjjsJFxLa5ZPpemRmTzrEqgMM9zNKwzWhk/ZuZN\nvo9iUcx7ycv/XE541/ezmgloDjMBwqiIo85oWebVCMExcl2arwbb/IJxHVMf\n21I+OydfEEKUyQ1Ei6brIyFj8aQIGW0mQJBGI9oJDgVDco5NH3os8g70cXmS\n/XLt7qP/GeclkqwUjBEpBq0iCqCKhiiRaaJNQ3jKkPbqFRk7HTmnXDMymNzv\nlrq6EzYYgsVuYH2QQoS/0Z9j/KfEBYi6kuH5neX+Ce563DgsyiUniTEJhvii\nA01PDKCHLj13CwNKynTEZPQ+iRSpkZGZj4YhYkLyu0XCXAiPk/gpFDNAYQSx\n2HHcX8sogl1OpjPQ1oWlrW8Ap2yt0sx/qHdau5qbQyUBqkUSFBi09ofRuBjL\ndwqR4CGF8xhPoH6iMxrfXuTYf/+TUCbRwB5P2KLoRpz8kw/wjs9Wtqpe6MZu\nctxf\r\n=54i7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDReJuV5us1lzlrL/HgKfurEjf+iDzNqEJCP6pQ4sUbvAIgGOf2jWyEmARcNTA3TKBKHhzvjVLvCNnXpT1emE7jkYE="}]},"maintainers":[{"name":"ziven27","email":"ziven27@qq.com"}],"_npmUser":{"name":"ziven27","email":"ziven27@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-acss_0.0.2_1561890991184_0.8596319694919274"},"_hasShrinkwrap":false,"deprecated":"please go to @sacss/react-native instead"},"0.0.3":{"name":"@_nu/react-native-acss","version":"0.0.3","description":"ACSS react native version","main":"lib/index.js","author":{"name":"yfe-team"},"license":"MIT","repository":{"type":"git","url":"git@github.com:nu-system/react-native-acss.git"},"bugs":{"url":"https://github.com/nu-system/react-native-acss/issues"},"homepage":"https://nu-system.github.io/react-native/acss/","keywords":["acss","css","atomic","vanilla","mixin","react native"],"scripts":{"build":"cp -r demo/packages/withAcss/ ./lib","prepublishOnly":"npm run build"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"dependencies":{"prop-types":"^15.7.2"},"peerDependencies":{"react":"16.5.0","react-native":"^0.57.7"},"_id":"@_nu/react-native-acss@0.0.3","dist":{"shasum":"dd4b91a687c6e9d92610cc2c20fbe0801da1bc45","integrity":"sha512-AThgJ8QQSNHESqyE9JGeOd/K4tr4h3vFGqJCY65+4/+BoGgjNj4daOXvuWQ0X0a70djWEX8hFt0HSijnUzEo3A==","tarball":"https://registry.npmjs.org/@_nu/react-native-acss/-/react-native-acss-0.0.3.tgz","fileCount":6,"unpackedSize":18311,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNS8TCRA9TVsSAnZWagAAeqIP/ij7nOZ8PjkZ0eZ8AB8A\n/bpmGgt8UxkEx60bD+E+cNk+tKmChz/ul5+NozY4E1i7c6iVVy86d0B1ZttL\nobY2uIjBIN3HKSi9DGstBrbdmvl/ks8mgxFQBEpSn74pobCFUMbQPE82ZYOw\nNdLOy87zuXIpdX6TZV4Y9VQ6oul8P6GStURBS5MTdFwono/MuSAyR28vD/9u\nEMTDRQ8E4QrGzQ/jPIk6wcA2Ntot7dJ18L3ormXkaIkPBR7yyni86MP1KAph\nKCYxulx0iKsGIlCLJTsbcyfptsXlmdwbsuqBRADiBiN+nu7j+yP3FGD4ydAE\nKibUsDpXupK5qED2SPj6gzCOm99G58qQe4wqDMnW03VVke7cvBMBzljLEaPR\nRqjrKW7b2q/19WJwG0Ltkk7dPuonMxH6Gh7XeQCxZTa26252IJAqjTKSSE5y\na9zljIIYo/knWa0LO9zK/qCGsZTX+QWOE6WArSyeTa4dNSOpiL2W05swzSeT\nuv4bD1jfmRYN0ELPn1Prsw3xWtHgeq+mG5zxXakhVQWOKma6vGOfaqXGSWfi\n9Xkl5NCOooQhYh8tm7RycopJoJIuepwxspKTTfW3yD0RFWk+HulNxod/FMqu\nnUw5qLzusXs3ZTjrYZhZsDvHFx8PihuoTklu+Xalcl9iUqJv83yWr0xJg3dv\nUZZA\r\n=CFtV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYDKnh5SV8fpPeE5U+s3dWfTfk8SpPqPssOZsO6YIfegIgcdeTPHVGUE/SOCryNv3NinfWlVGOJCrUa7My7aR0KMc="}]},"maintainers":[{"email":"1128yeye@sina.com","name":"nanasun"},{"email":"ziven27@qq.com","name":"ziven27"}],"_npmUser":{"name":"ziven27","email":"ziven27@qq.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-acss_0.0.3_1563766546931_0.5463892175473084"},"_hasShrinkwrap":false,"deprecated":"please go to @sacss/react-native instead"}},"time":{"created":"2019-06-30T10:32:41.740Z","0.0.1":"2019-06-30T10:32:42.042Z","modified":"2022-04-04T10:51:38.037Z","0.0.2":"2019-06-30T10:36:31.289Z","0.0.3":"2019-07-22T03:35:47.098Z"},"maintainers":[{"email":"1128yeye@sina.com","name":"nanasun"},{"email":"ziven27@qq.com","name":"ziven27"}],"description":"ACSS react native version","homepage":"https://nu-system.github.io/react-native/acss/","keywords":["acss","css","atomic","vanilla","mixin","react native"],"repository":{"type":"git","url":"git@github.com:nu-system/react-native-acss.git"},"author":{"name":"yfe-team"},"bugs":{"url":"https://github.com/nu-system/react-native-acss/issues"},"license":"MIT","readme":"# nu-react-native-acss\n\n[![npm package][npm-badge]][npm]\n\n[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square\n[npm]: https://www.npmjs.org/package/@_nu/react-native-acss\n\nQuick way to write style in react native.\n\nIdea from Atomic CSS Design system.\n\n```\n$ yarn add @_nu/react-native-acss\n```\n\n## How to use?\n\n```JSX\nimport React from 'react';\nimport {Text, View, ImageBackground, Image} from './packages/withAcss';\nimport mImg1 from \"./assets/1.jpg\";\nimport mImg2 from \"./assets/1.jpg\";\n\nexport default function App() {\n    return (\n        <View bc=\"#f5f5f5\" pt={100} ph={30} h=\"100%\">\n            <View mb={16} aic>\n                <Image br={32} w={64} h={64} source={mImg1}/>\n            </View>\n            <Text c=\"#ffffff\" p={16} bc=\"#4c5fe2\" tac mb={16}>Hello world!</Text>\n            <ImageBackground source={mImg2} mb={40}>\n                <View bc=\"rgba(255,255,255,.8)\">\n                    <Text fs={40} lh={100} tac fwb c=\"#4c5fe2\">Hello Again!</Text>\n                </View>\n            </ImageBackground>\n        </View>\n    );\n};\n```\n\n## How to bind to custom component?\n\n```JSX\nimport React from 'react';\nimport {Text, View} from 'react-native';\nimport widthAcss from './packages/withAcss';\n\nconst CusText = widthAcss(Text);\nconst CusView = widthAcss(View);\n\nexport default function App() {\n    return (\n        <CusView bc=\"#4c5fe2\" p={16}>\n            <CusText tac c=\"#ffffff\">Custom text</CusText>\n        </CusView>\n    );\n};\n```\n\n![demo](./demo.png)\n\n## Name rules\n\nIt looks wired in first sight what we use abbreviation instead of the full name. \n\nCause we want user just remember the rules below rather than all the props.\n\n1. Only Initials: `aic` means `alignItems: center`;\n2. Direct digital connection: `fw700` means `fontWidth:700`;\n4. `p` means `percent`: `w100p` means `width:'100%'`;\n\n```JSX\n<View mb={16} bc=\"#4c5fe2\" aic>\n    <Text c=\"#ffffff\" pt={16} pb={16} tac>Hello world!</Text>\n</View>\n```\n\nequal to\n\n```JSX\n<View style={{\n    marginBottom:16,\n    backgroundColor:'#4c5fe2',\n    alignItem:'center'\n}}>\n    <Text style={{\n      color:'#ffffff',\n      paddingTop: 16,\n      paddingBottom: 16,\n      alignItem:'center'\n    }}>Hello world!</Text>\n</View>\n```\n\n## API\n\n```JSX\nconst styleMap = {\n  ac: 'alignContent',\n  acs: ['alignContent', 'stretch'],\n  acc: ['alignContent', 'center'],\n  acfs: ['alignContent', 'flex-start'],\n  acfe: ['alignContent', 'flex-end'],\n  acsb: ['alignContent', 'space-between'],\n  acsa: ['alignContent', 'space-around'],\n  ai: 'align-items',\n  ais: ['alignItems', 'stretch'],\n  aib: ['alignItems', 'baseline'],\n  aic: ['alignItems', 'center'],\n  aifs: ['alignItems', 'flex-start'],\n  aife: ['alignItems', 'flex-end'],\n  as: 'alignSelf',\n  asa: ['alignSelf', 'auto'],\n  ass: ['alignSelf', 'stretch'],\n  asb: ['alignSelf', 'baseline'],\n  asc: ['alignSelf', 'center'],\n  asfs: ['alignSelf', 'flex-start'],\n  asfe: ['alignSelf', 'flex-end'],\n  bc: 'backgroundColor',\n  br: 'borderRadius',\n  bw: 'borderWidth',\n  bs: 'borderStyle',\n  btw: 'borderTopWidth',\n  btc: 'borderTopColor',\n  brw: 'borderRightWidth',\n  brc: 'borderRightColor',\n  bbw: 'borderBottomWidth',\n  bbc: 'borderBottomColor',\n  blw: 'borderLeftWidth',\n  blc: 'borderLeftColor',\n  btrr: 'borderTopRightRadius',\n  btlr: 'borderTopLeftRadius',\n  bbrr: 'borderBottomRightRadius',\n  bblr: 'borderBottomLeftRadius',\n  b: 'bottom',\n  b0: 'bottom',\n  c: 'color',\n  dn: ['display', 'none'],\n  f: 'flex',\n  f1: ['flex', 1],\n  fdr: ['flexDirection', 'row'],\n  fdrr: ['flexDirection', 'row-reverse'],\n  fdc: ['flexDirection', 'column'],\n  fdcr: ['flexDirection', 'column-reverse'],\n  fwn: ['flexWrap', 'nowrap'],\n  fwb: ['fontWeight', 'bold'],\n  fw100: ['fontWeight', 100],\n  fw200: ['fontWeight', 200],\n  fw300: ['fontWeight', 300],\n  fw400: ['fontWeight', 400],\n  fw500: ['fontWeight', 500],\n  fw600: ['fontWeight', 600],\n  fw700: ['fontWeight', 700],\n  fw800: ['fontWeight', 800],\n  fw900: ['fontWeight', 900],\n  fs: 'fontSize',\n  ff: 'fontFamily',\n  fsn: ['fontStyle', 'normal'],\n  fsi: ['fontStyle', 'italic'],\n  h: 'height',\n  h100p: ['height', '100%'],\n  jcc: ['justifyContent', 'center'],\n  jcsb: ['justifyContent', 'space-between'],\n  jcfs: ['justifyContent', 'flex-start'],\n  jcfe: ['justifyContent', 'flex-end'],\n  jcsa: ['justifyContent', 'space-around'],\n  jcse: ['justifyContent', 'space-evenly'],\n  l: 'left',\n  l0: ['left', 0],\n  lh: 'lineHeight',\n  m(value) {\n    return {\n      marginTop: value,\n      marginBottom: value,\n      marginRight: value,\n      marginLeft: value,\n    };\n  },\n  mt: 'marginTop',\n  mr: 'marginRight',\n  mb: 'marginBottom',\n  ml: 'marginLeft',\n  mh: 'marginHorizontal',\n  mv: 'marginVertical',\n  o: 'opacity',\n  oh: ['overflow', 'hidden'],\n  p(value) {\n    return {\n      paddingTop: value,\n      paddingBottom: value,\n      paddingRight: value,\n      paddingLeft: value,\n    };\n  },\n  pa: ['position', 'absolute'],\n  pr(value) {\n    if (value === true) {\n      return {\n        position: 'relative',\n      };\n    }\n    return {\n      paddingRight: value,\n    };\n  },\n  pt: 'paddingTop',\n  pb: 'paddingBottom',\n  pl: 'paddingLeft',\n  ph: 'paddingHorizontal',\n  pv: 'paddingVertical',\n  r: 'right',\n  r0: ['right', 0],\n  t: 'top',\n  t0: ['top', 0],\n  tac: ['textAlign', 'center'],\n  tar: ['textAlign', 'right'],\n  taa: ['textAlign', 'auto'],\n  tal: ['textAlign', 'left'],\n  taj: ['textAlign', 'justify'],\n  ttu: ['textTransform', 'uppercase'],\n  ttc: ['textTransform', 'capitalize'],\n  ttn: ['textTransform', 'none'],\n  ttl: ['textTransform', 'lowercase'],\n  w: 'width',\n  w100p: ['width', '100%'],\n  zi: 'zIndex',\n};\n```\n\nPure, simple, natural. \n\nAs you can see that is all the code we create blew. \n\nWe just did a little but can help you a lot when create style in react native.\n\nhelp up to make it better together [issue](https://github.com/nu-system/acss-react-native/issues).\n","readmeFilename":"README.md"}