{"id":13438302,"url":"https://github.com/raphamorim/native-css","last_synced_at":"2025-04-05T09:10:04.621Z","repository":{"id":29682402,"uuid":"33224860","full_name":"raphamorim/native-css","owner":"raphamorim","description":"Convert pure CSS to React Style or javascript literal objects.","archived":false,"fork":false,"pushed_at":"2017-10-22T16:09:42.000Z","size":41,"stargazers_count":341,"open_issues_count":4,"forks_count":28,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-03-29T08:11:13.199Z","etag":null,"topics":["css","css-animations","javascript","jsformat","react","react-style","semantic","style"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/native-css","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/raphamorim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-01T03:37:03.000Z","updated_at":"2025-03-19T13:41:40.000Z","dependencies_parsed_at":"2022-09-07T00:20:19.743Z","dependency_job_id":null,"html_url":"https://github.com/raphamorim/native-css","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fnative-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fnative-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fnative-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fnative-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raphamorim","download_url":"https://codeload.github.com/raphamorim/native-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312085,"owners_count":20918344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-animations","javascript","jsformat","react","react-style","semantic","style"],"created_at":"2024-07-31T03:01:04.378Z","updated_at":"2025-04-05T09:10:04.384Z","avatar_url":"https://github.com/raphamorim.png","language":"JavaScript","readme":"# native-css\n\n\u003e Convert pure CSS to javascript literal objects or React Style.\n\n[![NPM Version](https://img.shields.io/npm/v/express.svg?style=flat)](https://www.npmjs.org/package/native-css)\n[![Build Status](https://travis-ci.org/raphamorim/native-css.svg?branch=master)](https://travis-ci.org/raphamorim/native-css)\n\n## Before Anything!\n\nThis tool believes in this semantic for CSS: [HTML semantics and front-end architecture](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/)\n\n'Cause of this, all ids and inheritance relationships are converted to classes.\n\n## Install\n\nVerify if you have [node](http://nodejs.org/) and [npm](https://www.npmjs.org/) installed.\n\n##### As CLI \n\n```sh\n$ npm install -g native-css\n```\n\n##### As Node Module \n\n```sh\n$ npm install native-css\n```\n\n## CLI Usage\n\n**Params:** input (required), output (optional)\n\n```sh\n$ native-css \u003cinput\u003e \u003coutput\u003e\n```\n\n### Example\n\nInput CSS Example:\n\n```css\n.taxi {\n  background-color: #F8F8F8;\n  color: #999;\n}\n\n#car {\n  color: blue;\n}\n```\n\n#### Convert CSS to React Format\n\nUsing:\n\n```sh\n$ native-css \u003cinput\u003e \u003coutput\u003e --react\n```\n\nGenerate this as output (JS format):\n\n```javascript\nvar styles = StyleSheet.create({\n  taxi: {\n    color: '#999',\n    backgroundColor: '#F8F8F8'\n  },\n  car: {\n\tcolor: 'blue';\n  }\n});\n```\n\n#### Convert CSS to Literal JS object\n\nUsing, but **without** react flag:\n\n```sh\n$ native-css \u003cinput\u003e \u003coutput\u003e\n```\n\nGenerate this as output (JS format):\n\n```javascript\nstyles: {\n  taxi: {\n    color: '#999',\n    backgroundColor: '#F8F8F8'\n  },\n  car: {\n\tcolor: 'blue';\n  }\n}\n```\n\n#### Inherent and Parents\n\nAs stated, this tool believes and follows a specific semantic for CSS. Therefore in these cases, exists a change in nomenclature. Example:\n\nInput File (style.css)\n\n```css\n.any.element {\n  color: red;\n}\n\n.parent .child {\n  color: orange;\n}\n\n.parent  .child2 {\n  color: blue;\n}\n```\n\nOutput File (style.js)\n\n```javascript\nany_element: { \n  color: 'red' \n},\nparent__child: { \n  color: 'orange' \n},\nparent__child2: { \n  color: 'blue' \n}\n```\n\n#### Media Queries\n\nInput File (style.css): \n\n```css\n@media screen and (min-width: 1020px){\n  body .container { \n    width: 1020px !important\n  }\n}\n\n@media (min-width: 768px){\n  body .container {\n    width: 748px !important;\n    box-sizing: 'all'\n  }\n}\n```\n\nOutput File (style.js):\n\n```javascript\n'@media screen and (min-width:1020px)': { \n  __expression__: 'screen and (min-width:1020px)',\n  body__container: { \n    width: '1020px !important' \n  } \n},\n'@media (min-width:768px)': { \n  __expression__: '(min-width:768px)',\n  body__container: { \n    width: '748px !important',\n    boxSizing: 'all'\n  } \n}\n```\n\n\n\n## Module Usage\n__supported input types:__ Path, Url, String, Buffer\n```javascript\nvar nativeCSS = require('native-css'),\n\tpathToCssFile = 'somePath/file.css';\n\n// Generate JavaScript Object\nvar cssObject = nativeCSS.convert(pathToCssFile);\n```\n\n__url support with async version:__\n```javascript\nvar nativeCSS = require('native-css'),\n  URL = 'http://raw.githubusercontent.com/raphamorim/native-css/master/test/fixtures/sample.css';\n\n// Generate JavaScript Object\nnativeCSS.convertAsync(URL || Path) // returns Promise\n  .then(function(result) {\n    // convert/validate data\n    // return or throw\n  })\n```\n### webpack usage:  \n[cssobjects-loader](https://www.npmjs.com/package/cssobjects-loader)\n\n## Not supported CSS features\n\nReact Style does not support CSS selectors, pseudo-classes and CSS animation. Mostly because we try to avoid implicit behaviour and want the user to make layout decisions inside the render() function.\n\nCSS selectors introduce implicit behaviour by not having a direct link with the elements on which they're applied. Therefore there is no way of knowing what the consequences are, and this easily leads to refactoring issues. Instead you should be using plain JavaScript variables.\n\nClasses with pseudo-classes have a higher precedence then classes with no pseudo-classes, which results in issues if you want to override styling in \"higher-level\" components. In some cases(:before, after, etc.) a component is easily added, in others (active, focus, hover, etc) plain JavaScript will do the trick. In all, you don't need CSS for this. In some cases though you might want to use pseudo-classes (like styling a scrollbar) - which we do support.\n\nAnimations inside CSS also introduce implicit behaviour, as CSS animations are decoupled from logic. By being decoupled, the state of the component is split between the component and the CSS animation. We however believe state should be contained within a component. An example of solving this using JS is [React Magician](https://github.com/SanderSpies/react-magician).\n\n## Contributing\n\nDon't be shy, send a Pull Request! Here is how:\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -m 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\n## About\n\n**License:** MIT ® [Raphael Amorim](https://github.com/raphamorim)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphamorim%2Fnative-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraphamorim%2Fnative-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphamorim%2Fnative-css/lists"}