Skip to content

htbkoo/CssToAndFromReact

 
 

Repository files navigation

css-to-and-from-react

NPM GitHub Workflow Status Known Vulnerabilities

README

TL;DR

CSS <-> React (in-line style) here: https://htbkoo.github.io/CssToAndFromReact/

What is this repository for?

  • This repo is a fork of staxmanade/CssToReact
  • The idea is great but I believe transformation from React Style back to CSS would also be useful
  • So this repo is an attempt to add bi-directional transformation between React Styles <-> CSS
  • In short these changes are added on top of the original repo
    • updated .gitignore (because IntelliJ IDEA is used so some of the config files should be ignored as well)
    • (Just personal preference) migrated to yarn / npm
    • (Just personal preference) migrated to TypeScript
    • Added automated test coverage
    • Added functionality to transform from React back to CSS
    • Update description in the page
    • Full (at least enough) automated test coverage
    • More refactoring (more related to personal style)
  • An instance would be deployed to GitHub Page: https://htbkoo.github.io/CssToAndFromReact/

How do I get set up?

  • Summary of set up: yarn / npm install to download dependencies and the project is good to go.
  • Configuration: N/A
  • Dependencies: Listed at package.json
  • Database configuration: N/A
  • How to run tests: yarn run test / npm run test
    • run unit tests only: yarn run test:unit / npm run test:unit
  • Deployment instructions:
    • Currently the application is only deployed to GitHub page, with the source sitting in the docs/ folder under master branch
    • To update the GitHub page, do the following:
      1. update the source code under src/ or public/
      2. yarn run ghpages:publish / npm run ghpages:publish
      3. git add everything under docs/
      4. git commit
      5. git push
  • How to start server: yarn run start / npm run start

Contribution guidelines

  • Writing tests:
    • All tests are currently placed under src/test/
      • A small naming convention to 1) make it easier to run only unit tests and 2) allow tests navigation in IntelliJ:
        • Unit tests name pattern: src.test.ts(x)
        • Other tests (e.g. integration, acceptance) name pattern: src.test-type.spec.ts(x)
    • Libraries / Frameworks used: jest (bundled in react-scripts-ts) + chai + enzyme
    • All the tests are currently written in TypeScript but adding JavaScript tests should also work fine
  • Code review: N/A
  • Other guidelines: N/A

Who do I talk to?

  • Repo owner or admin: me (htbkoo)
  • Other community or team contact: N/A

Acknowledgement

About

Quick online tool to transform CSS into and back from React style JSON

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 96.1%
  • JavaScript 3.2%
  • CSS 0.7%