Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS Modules period in filename #8491

Closed
evankennedy opened this issue Feb 15, 2020 · 0 comments · Fixed by #8492
Closed

CSS Modules period in filename #8491

evankennedy opened this issue Feb 15, 2020 · 0 comments · Fixed by #8492

Comments

@evankennedy
Copy link
Contributor

evankennedy commented Feb 15, 2020

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants