css-to-and-from-react

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
    • using the postcss + postcss-js libraries
  • 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

• This repo is a fork of staxmanade/CssToReact, so definitely kudos to staxmanade
• The reverse transformation from React -> CSS is handled by postcss + postcss-js