CSS Modules arrive to Create React App (CRA) in version 2.0

There are numerous ways of bootstrapping Single Page Apps that user React.js for the UI layer. The Create React App (CRA) is one option, which comes from the Facebook developer team. Now this popular project adds standard CSS Modules support for styling components.

Cascading Style Sheets (CSS) is a standard supported by browsers that allows defining visual properties of hypertext documents. From background colors to layouts to font definitions, all of this is standard CSS. Over the years there has been technologies that compile to CSS.

The LESS and SASS projects, for example, perform a functionality similar to JavaScript transpiling, compiling syntax to standard browser supported CSS versions. LESS and SASS both have custom syntax, but there are more standards compliant ways as well like cssnext, which allows using future CSS specifications today. Also worth mentioning is this online CSS4 to CSS3 converter.

For modular web application development CSS Modules are a boon. Finally there is an official method for modular style definitions with scoping. This approach is perfect for React.js development, which also works with CSS components. Together with Webpack CSS modules integrate naturally to React app development: CSS Modules and React

The combination of CSS Modules and React is a match made in heaven. This has not gone unnoticed by the CRA team, and they have been working on supporting CSS Modules in Create React App boilerplate project since May 2017. Now in January 2018 the work is mature enough that the CSS Module Support is merged into the project.

As stated in the project roadmap, CSS Modules will be a part of the next major version 2.0, and is already available in the first Alpha Release in the next-branch of the CRA repository on GitHub. Also pending is adding official SASS support, since this markup continues to be very popular.

There is no definitive release date for Create React App version 2.0, but it is fair to expect it over the first half of 2018.