Compatibility with create-react-app

What?

Rename scss files that are designed to work as CSS Modules to _{moduleName}.module.scss

or (maybe, may need more thought) include a second file called _{moduleName}.module.scss that composes _{moduleName}.scss

Why?

Create React App 2 now supports Sass and CSS Modules:

More styling options: you can use Sass and CSS Modules out of the box. https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

Create React App has the convention that if you do:

import styles from "./button.scss";

It will treat button.scss as a normal SCSS file and append the styles to your stylesheet.

However, if you do:

import styles from "./button.module.scss";

It will treat button.module.scss as a CSS module and return an object to JS for class name lookup.

Consider the following:

import React from "react";
import styles from "./button.module.scss"; // works
// import styles from "govuk-frontend/components/button/_button.scss"; // doesn't work
// import styles from "@penx/govuk-frontend/components/button/_button.module.scss"; // works

const Button = props => (
  <button className={styles["govuk-button"]} {...props} />
);

export default Button;

Where button.module.scss is:

@import "~govuk-frontend/components/button/button";

.govuk-button {
  composes: govuk-button;
}

At the moment I have to create a mostly redundant file to make sure that _button.scss is picked up as a CSS module.

Using:

import styles from "govuk-frontend/components/button/_button.scss"; 

Imports the CSS file but does not treat it as CSS module, so this does not work.

I have created a fork of govuk-frontend and renamed _button.scss to _button.module.scss, so if you do the following:

import styles from "@penx/govuk-frontend/components/button/_button.module.scss"; 

This makes govuk-frontend work with create-react-app out of the box.

You can try this out on the following sandbox: https://codesandbox.io/s/w0x8xk5lk

[NickColley]

We’ve spent time going over this with Alasdair and decided we won’t support this directly in GOV.UK Frontend for now, if you’d like to see the details we’ve put together a proposal you can read..

Thanks for all your work on this.

[kr8n3r]

angular-cli has a similar pattern. see https://github.com/igloosi/govuk-frontend-angular-cli-boilerplate/tree/master/src/app/app-button