Skip to content

CSS Modules period in filename #8491

Closed
@evankennedy

Description

@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.

Screenshot from 2020-02-14 21-21-26
Screenshot from 2020-02-14 21-20-38

Reproducible demo

Can create if necessary, but this fix is simple.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions