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.

Sign up for GitHub

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

Jump to bottom

Can't use styleName props with css modules + react. #1320

Closed
kawamurakazushi opened this issue May 8, 2018 · 6 comments
Closed

Can't use styleName props with css modules + react. #1320

kawamurakazushi opened this issue May 8, 2018 · 6 comments
Labels
❔ Question Stale Inactive issues

Comments

@kawamurakazushi
Copy link

kawamurakazushi commented May 8, 2018 •
edited
Loading

🐛 bug report

Hi, I'm creating a simple app using typescript + react + css modules.
And the styleName is not compiling in the right way.

Please refer to the code sample below.

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc

{
  "presets": ["react-app"],
  "plugins": [
    [
      "module-resolver",
      { "root": ["./src"] }
    ],
    "transform-class-properties",
    [
      "react-css-modules",
      {
        "generateScopedName": "[path]__[name]__[local]__[hash:base64:5]",
        "handleMissingStyleName": "warn"
      }
    ]
  ]
}

.postcssrc

{
   "modules": true,
   "plugins": {
    "postcss-modules": {
      "generateScopedName": "[path]__[name]__[local]__[hash:base64:5]"
    }
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "jsx": "react",
    "baseUrl": "src",
    "lib": [ "es2015" ]
  }
}

package.json

{
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
  },
  "devDependencies": {
    "@types/react": "^16.3.13",
    "@types/react-css-modules": "^4.6.1",
    "@types/react-dom": "^16.0.5",
    "babel-plugin-module-resolver": "^3.1.0",
    "babel-plugin-react-css-modules": "^3.4.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-react-app": "^3.1.1",
    "parcel-bundler": "^1.7.1",
    "parcel-plugin-typescript": "^0.7.1",
    "postcss-modules": "^1.1.0",
    "react-css-modules": "^4.7.2",
    "typescript": "^2.8.3"
  },
  "scripts": {
    "start": "parcel src/index.html"
  }
}

🤔 Expected Behavior

Compile

😯 Current Behavior

Whenever I run parcel styleName just compiles to stylename.

localhost_1234_

When I try using className instead of styleName it works like a charm using the following solution discussed in this issue.
#616

💁 Possible Solution

🔦 Context

💻 Code Sample

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title> 
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div id="root"></div>
</body>
<script src="index.jsx"></script>
</html>

src/index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import App from 'App';

ReactDOM.render(<App />, document.getElementById('root'));

src/App.tsx

import * as React from 'react';
import  './App.css';

const App = () => {
  return (
      <div>
        <h1 styleName="main">hi</h1>
      </div>
  );
};

export default App;

🌍 Your Environment

Software Version(s)
Parcel 1.7.1
Node v9.11.0
Yarn 1.6.0
Operating System mac
@Hammster
Copy link
Contributor

Hammster commented May 8, 2018 •
edited
Loading

The issue is the normalization of the html to xhtml that is done via post-html. Uppercase attributes are not valid even though they get parsed because the SVG standard allows them. If you change styleName to style-name it should be working for react at least this works in vue.

Maybe we could make some PRs to post-html to allow uppercase attributes though. Since it even lowers them for html5 with specified doctype config

@alexesDev
Copy link

@kawamurakazushi react-css-modules is a babel plugin... nothing to do with ts.

@DeMoorJasper
Copy link
Member

DeMoorJasper commented May 8, 2018 •
edited
Loading

@Hammster probably a good idea, but jsx doesn't get processed by post-html so this is a different issue.

As you have a babel config why let typescript transform the jsx code?
If you use jsx: Preserve it should let the jsx transpiling to babel, which should be able to transform the styleName

@Hammster
Copy link
Contributor

Hammster commented May 8, 2018

Oh didnt know that but least it is a valid explaination for #1123

@DeMoorJasper
Copy link
Member

Has this solution fixed your issue @kawamurakazushi ?

@github-actions
Copy link

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.

@github-actions github-actions bot added the Stale Inactive issues label Jan 17, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
❔ Question Stale Inactive issues
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Hammster @alexesDev @DeMoorJasper @kawamurakazushi