/css-reactify

Convert from Vanilla CSS to React Inline styles

Primary LanguageJavaScriptMIT LicenseMIT

css-reactify

Convert from Vanilla CSS to React Inline styles

##Usage For online use, just go to css-reactify GitHub Pages. Or, for running it offline,

  1. Clone the repo using git clone https://github.com/SuhairZain/css-reactify.git
  2. npm install
  3. npm run serve for a Webpack Dev Server which by default opens at http://localhost:8080/webpack-dev-server OR
  4. npm run prod for a minified version of the app and open index.html in your favourite browser.

##Development I had created a website using React and CSS StyleSheets. When I wanted to move the styles from the css file to inline styles, I found it a bit cumbersome. So, created this app.

##Packages used

  1. Webpack along with Babel for bundling.
  2. CSS for the input CSS Parsing. Seriously, it was a ton of help.
  3. React of course.
  4. Material UI for the UI Components.
  5. camelcase for converting from dash(-) seperated css-property names to camelCased properties.
  6. Stringinfy Object to create the final JS output.