how can I resolve this css class issue in JS project?

Question

I am trying to build a single page html app using Javascript. I have the css file in the same folder 'src' along with the index.js file. My webpack.config.js file is as follows:

var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;

// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules; 

var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');

module.exports = {
  entry,
  output: {
    path: outputPath,
    filename: 'MyWebApp.js',
  },
module: {
     rules: [{
         test:  [/\.js$/, /\.jsx$/, /\.es6$/],
         include: [
           path.resolve(__dirname, 'src'),
         ],
         use: {
           loader: "babel-loader"
         },
       }, {
         test: [/\.css/],
         exclude: path.resolve(__dirname, 'src'),
         use: [
           'style-loader',
           {
             loader: 'css-loader',
             options: {
                 modules: true,
                 localIdentName: '[name]__[local]-[hash:base64:5]'
             }
           }
         ]
      }, {
        test: [/\.css/],
        include: path.resolve(__dirname, 'src'),
        use: [
          'style-loader',
          'css-loader'
        ]
      }]
   },

  resolve: {
    modules: [
      path.resolve(__dirname, 'node_modules'),
      sourcePath,
    ],
  },
};

Here is my GeometryViewer.module.css file:

.button {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 1em;
  z-index: 2;
  cursor: pointer;
}

.rootController {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  z-index: 1;
}

.control {
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: center;
}

.fullScreen {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  overflow: hidden;
  background: black;
  margin: 0;
  padding: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fullParentSize {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.bigFileDrop {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  background-image: url('./dropBG.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 10px;
  width: 50px;
  padding: calc(50vh - 2em) calc(50vw - 25px - 2em);
  cursor: pointer;
}

.selector {
  background: transparent;
  border: none;
  margin: 5px;
  z-index: 1;
  max-width: 100px;
  min-width: 100px;
}

label.selector {
  font-size: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
}

select:focus {
  outline: none;
  border: none;
}

.progress {
  flex: none;
  font-size: 50px;
  color: white;
  z-index: 1;
  background: rgba(128,128,128,.5);
  padding: 20px;
  border-radius: 10px;
  user-select: none;
}

.dark {
  composes: selector;
  color: white;
}

.dark option {
  color: black;
}

.light {
  composes: selector;
  color: black;
}

.light option {
  color: white;
}

.fpsMonitor {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  border: solid 1px gray;
}

When I try to build the project using

npm run build

I am getting this error:

ERROR in ./src/GeometryViewer.module.css (./node_modules/css-loader!./src/GeometryViewer.module.css)
Module build failed (from ./node_modules/css-loader/index.js):
Error: composition is only allowed when selector is single :local class name not in ".dark", ".dark" is weird

I would appreciate some help in identifying what I could be doing wrong.

install loader..? npm install --save-dev style-loader or/and npm install style-loader css-loader — Riskbreaker
– Riskbreaker, Commented Nov 20, 2018 at 21:02
I have already tried the installe loader, both npm install --save-dev style-loader and npm install style-loader css-loader. no luck yet.. — Kaushik Mallick
– Kaushik Mallick, Commented Nov 20, 2018 at 21:13

brianespinosa · Accepted Answer · 2018-11-20 21:14:14Z

1

The error is telling you exactly where the issue is. You are not allowed to compose when the selector is a single :local class name. If that component is yours, then you will need to update the styles.

If the component is not yours and part of a node_module (which it appears it is), you may need to change the way you are doing your import in your project. There is a lot of discussion here about how to resolve that.

answered Nov 20, 2018 at 21:14

brianespinosa

2,39114 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kaushik Mallick Over a year ago

Thank you. In full disclosure I am not much of a JS programmer. The component is not mine. How do I import and 'update the styles'?

Kaushik Mallick · Accepted Answer · 2018-11-20 22:56:56Z

0

I was able to solve my own problem. Here is the revised webpack file that worked:

var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;

// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules; 

var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');

module.exports = {
  entry,
  output: {
    path: outputPath,
    filename: 'MyWebApp.js',
  },
module: {
     rules: [
     
     { test: /\.html$/, loader: 'html-loader' },   

     {
         test:  [/\.js$/, /\.jsx$/, /\.es6$/],
         include: [
           path.resolve(__dirname, 'src'),
         ],
         use: {
           loader: "babel-loader",
         },
       }, 
       
       {
      test: /\.(gif|svg|jpg|png)$/,
      loader: "file-loader",
      },
       
       {
         test: [/\.css/],
         include: [
         path.join(__dirname, 'src'),
         path.join(__dirname, 'node_modules'),
         path.join(__dirname, 'node_modules/react-toolbox'),
         ],
         use: [
           'style-loader',
           {
             loader: 'css-loader',
             options: {
                 modules: true,
             }
           }
         ]
      }, 
     ].concat(vtkRules),
   },

  resolve: {
    modules: [
      path.resolve(__dirname, 'node_modules'),
      sourcePath,
    ],
  },
};

answered Nov 20, 2018 at 22:56

Kaushik Mallick

1652 silver badges9 bronze badges

1 Comment

brianespinosa Over a year ago

Sorry I did not see your question on my above answer until now. You should be aware that this loader you have configured will treat ALL .css files as if they are CSS Modules. If you have any plain CSS from any dependency (since I see you are including the node_modules folder) you may run into problems. I'd recommend that you configure a separate rule for .module.css that has modules enabled and exclude .module.css from the other loader with modules disabled.

Collectives™ on Stack Overflow

how can I resolve this css class issue in JS project?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related