Skip to content

getClasses returns classes which are not exported #34

@jens-duttke

Description

@jens-duttke

I have a couple of Next.js-based projects, which have the problem that dts-css-modules-loader creates d.ts files which contain:

export const publicPath: string;
export const esModule: string;
export const locals: string;

These are no classes, which are used in my CSS modules.

I've now debugged that, and saw that the content parameter of the getClasses() method has this value:

module.exports = {"container":"styles_container__8ydqK"};
    if(module.hot) {
      // 1692631642983
      var cssReload = require("[...]/node_modules/next/dist/compiled/mini-css-extract-plugin/hmr/hotModuleReplacement.js")(module.id, {"publicPath":"/_next/","esModule":false,"locals":true});
      module.hot.dispose(cssReload);
      
    }
  
module.exports.__checksum = "41cda2850f7c

The regular expressions, which are used in getClasses are misinterpreting this code, which then results into the wrong class names.

Is it possible to get that fixed?
Eg. by implementing a to, which defines the end for the content slicing. I guess, that could be a simple content.indexOf('{', from + 1).

Or do you have an idea how to get around this issue?

if I inject esModule: true into the css-loader options I get the following content:

// Exports
export default {
	"loading": "styles_loading__o4T_w",
	"zoomInOut": "styles_zoom-in-out__IAoQk"
};

module.exports.__checksum = "eb7d3be6356a"

export default is not even covered by dts-css-modules-loader, so this results into no class names.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions