Skip to content

Specifying rootDir with linked module breaks css-modulesify #84

Open
@troyastorino

Description

@troyastorino

In a project, I have some components stored in separate modules, and the main module installs those modules in using npm link (i.e., creating symlinks to them from node_modules). The structure looks like this:

project
  main
    package.json
    node_modules
      componentA -> ../../componentA
      componentB -> ../../componentB
  componentA
    package.json
  componentB
    package.json

main, componentA and componentB all use CSS Modules. I'm running browserify from of the main module, and have css-modulesify configured with global: true

I ran into problems with css-modulesify constructing paths to filenames in componentA and componentB incorrectly. I ultimately traced this down to the rootDir option. Originally, I had rootDir set to /path/to/project/main, since I thought rootDir only controlled formatting of generated classnames. Setting rootDir to /path/to/project fixed the issues.

Is it the intended behavior for rootDir to cause css-modulesify to fail if there are any css files that are relatively 'higher' that rootDir? If it is, I think it would probably be good to change the documentation in the README to be something like:

  • rootDir: absolute path to your project's root directory. This is optional but providing it will result in better generated classnames. If provided, attempting to bundle any css files accessed via a parent of rootDir will fail

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