Welcome to the exciting world of CSS in JS! Here, we aim to improve and benchmark various implementations using React and CSS. This guide will walk you through the steps to create your own benchmarks and contribute to the project effectively.

Understanding the Big Picture

Imagine you have a toolbox filled with various tools for different tasks. Each tool has its strengths, making them suitable for different types of projects. Similarly, CSS in JS libraries like Aphrodite, Glamorous, and Styled Components serve as tools for developers to handle styles within their JavaScript code. This project benchmarks these tools to help developers make informed decisions about which library best fits their needs.

• **React**: The framework we’ll be using for our implementations.
• **Aphrodite, Glamorous, Styled Components, etc.**: Different CSS-in-JS libraries that we’ll benchmark.

Getting Started with Contributions

Ready to roll up your sleeves? Follow these steps to start contributing:

1. Ensure you are using Node version ^7.9 (this means version 7.9 or newer but not as new as 8).
2. Install **Lerna** and **Yarn** (Yarn installation is optional).
3. Run the command lerna bootstrap or lerna bootstrap --npm-client=yarn to install dependencies in packages.
4. Execute npm i to install all dependencies.
5. Run lerna run build to make builds for all packages.

Your First Implementation

Now, let’s set up your CSS in JS implementation:

1. Create an appropriate folder for your new CSS in JS implementation.
2. Use React as an example of boilerplate.
3. Add a description for your CSS in JS in package.json. Refer to this Example for guidance.
4. Add your solution for the Table.js file.
5. Run benchmarks using the command npm run benchmark. To test a specific package, use:
   npm run benchmark -- rockey styled-jss radium

Benchmark Results

Curious about how different implementations are performing? You can check the average results from the results page.

New demos and benchmarks are coming soon, so stay tuned!

Troubleshooting Ideas

If you encounter issues during your contributions, consider the following troubleshooting tips:

• Check your Node version using node -v. Ensure it adheres to the required version.
• If Lerna or Yarn installation fails, consult their respective documentation.
• Run npm install separately if you face dependency issues.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.