Repository navigation
eslint-plugin-css-modules does not understand :local() #55
Description
Hi all, I am having trouble getting the plugin to work. I have listed my setup below, everything that could maybe be relevant. As for the actual issue, it's almost like the plugin simply isn't doing anything.
I get the following types of errors:
In the jsx file it doesn't recognize any of the exported classNames:
........onlineUsersWidget.jsx
15:25 error Class or exported property 'onlineUsersWidget' not found css-modules/no-undef-class
16:29 error Class or exported property 'onlineUsersHeader' not found css-modules/no-undef-class
19:25 error Class or exported property 'onlineUsersList' not found css-modules/no-undef-class
26:24 error Class or exported property 'onlineUser' not found css-modules/no-undef-class
27:32 error Class or exported property 'selected' not found css-modules/no-undef-class
In the sass file, it doesn't recognize ':local()'
........onlineUsersWidget.scss
1:0 error Parsing error: C:\Users\devbl\Documents\work_a24\projects\chat-inbox-ui\src\app\widgets\onlineUsers\onlineUsersWidget.scss: Unexpected token (1:0)
.eslintrc.json
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:jest/recommended",
"plugin:css-modules/recommended",
"airbnb",
"airbnb/hooks"
],
"plugins": [
"react",
"css-modules"
],
package.json
{
devDependencies: {
"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-decorators": "^7.4.4",
"@babel/plugin-proposal-optional-chaining": "^7.2.0",
"@babel/plugin-proposal-private-methods": "^7.4.4",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@testing-library/jest-dom": "^4.1.0",
"@testing-library/react": "^9.1.3",
"babel-eslint": "^11.0.0-beta.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-runtime": "^6.26.0",
"css-loader": "^2.1.1",
"eslint": "^6.1.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-loader": "^3.0.0",
"eslint-plugin-css-modules": "^2.11.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jest": "^22.16.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.7.0",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.9.0",
"jest-css-modules": "^2.1.0",
"json-loader": "^0.5.7",
"node-sass": "^4.12.0",
"react-test-renderer": "^16.9.0",
"sass-loader": "^7.3.1",
"script-ext-html-webpack-plugin": "^2.1.4",
"source-map-support": "^0.5.13",
"style-loader": "^1.0.0",
"url-loader": "^2.1.0",
.................
}
}
onlineUsersWidget.jsx
import styles from './onlineUsersWidget.scss';
const OnlineUsersWidget = ({ onlineUsers, selectedUserId, onUserSelect }) => (
<div className={styles.onlineUsersWidget}>
<header className={styles.onlineUsersHeader}>
<h3>Currently online ({onlineUsers.size})</h3>
..................
onlineUsersWidget.scss
:local(.onlineUsersWidget) {
height: 100%;
:local(.onlineUsersHeader) > h3 {
line-height: 33px;
color: #424242;
font-size: 16px;
padding: 0 10px;
......................
Pertainant Weback config bits:
...................
entry: ['@babel/polyfill', path.join(baseDir, 'src', 'index.js')],
.....................
{
test: /\.s?css$/i,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]--[hash:base64:5]',
camelCase: true,
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
.............................
.babelrc
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "entry",
"corejs": "3.2.1"
}],
"@babel/preset-react"
],
"plugins": [
["@babel/plugin-proposal-decorators", {"legacy": true}],
["@babel/plugin-proposal-class-properties", {"loose": true}],
["@babel/plugin-proposal-private-methods", { "loose": true }],
"@babel/plugin-proposal-optional-chaining"
]
}
Activity