gajus / babel-plugin-react-css-modules

Transforms styleName to className using compile time CSS module resolution.
Other
2.05k stars 162 forks source link

babel don't remove [import style] line #267

Closed coloudman closed 4 years ago

coloudman commented 4 years ago

.babelrc

{
    "presets": ["@babel/preset-env","@babel/preset-react"],
    "plugins": [
        ["react-css-modules", {
            "generateScopedName":"[name]_[local]_[hash:base64:5]",
            "filetypes": {
                ".scss": {
                  "syntax": "postcss-scss"
                }
            },
            "attributeNames":{"className":"styleName"}
        }]
    ]
}

App.module.scss

.title {
    color:blue;
    .fuu {
        color:red;
    }
}

App.js

import React from "react";

import style from "./App.module.scss";

function App(props) {
  return (<span className={style.title}>TEST</span>);
}

export default App;

when i run it, it throws error "Cannot find module './App.module.scss'".

Compiled App.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _getClassName2 = _interopRequireDefault(require("babel-plugin-react-css-modules/dist/browser/getClassName"));

var _react = _interopRequireDefault(require("react"));

var _AppModule = _interopRequireDefault(require("./App.module.scss")); // <- ERROR

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var _styleModuleImportMap = {
  "style": {
    "title": "App-module_title_1ukAS",
    "fuu": "App-module_fuu_2w85H"
  }
};

function App(props) {
  return _react["default"].createElement("span", {
    styleName: (0, _getClassName2["default"])(_AppModule["default"].title, _styleModuleImportMap)
  }, "TEST");
}

var _default = App;
exports["default"] = _default;

how can i fix it?