CSS Modules period in filename

[evankennedy]

Same as closed #6910. Will provide a PR (#8492).

Describe the bug

When using CSS modules with an extra period in the class name, it will output the class name as if it has a period in it, which will be parsed as two separate classes and the classes will be unlinked from where they are used. I found this error when writing a CSS module for my story and wrote file.story.module.css.

Did you try recovering your dependencies?

N/A

Which terms did you search for in User Guide?

N/A

Environment

npx: installed 99 in 7.796s

Environment Info:

 current version of create-react-app: 3.4.0
 running from /home/evan/.npm/_npx/15086/lib/node_modules/create-react-app

 System:
 OS: Linux 5.3 Ubuntu 19.10 (Eoan Ermine)
 CPU: (4) x64 Intel(R) Core(TM) i7-6560U CPU @ 2.20GHz
 Binaries:
 Node: 10.15.2 - /usr/bin/node
 Yarn: 1.21.1 - /usr/bin/yarn
 npm: 6.13.0 - /usr/local/bin/npm
 Browsers:
 Chrome: 80.0.3987.100
 Firefox: 72.0.2
 npmPackages:
 react: Not Found
 react-dom: Not Found
 react-scripts: Not Found
 npmGlobalPackages:
 create-react-app: Not Found

Steps to reproduce

1. Add a CSS module file with an extra period.
2. Add one class to the file.
3. Import that file in a react component.
4. Attach the class to an HTML element in the render.

Examples:

test.styles.module.css

.test {
 color: black;
}

Test.jsx

import React from 'react';
import styles from './test.styles.module.css`;
const Test = () => <div className={styles.test}>Test</div>;
export default Test;

Expected behavior

CSS class names are generated that are valid.

Actual behavior

Generates a class name with a period, so the class name will not match.

Reproducible demo

Can create if necessary, but this fix is simple.