Add support for node_module imports

[stevenbenisek]

At present the imports field only allows for relative file imports.

"imports": ["./some/dir/file.json"]

I'd like to add support for node_module imports so tokens can be separately packaged and distributed.

"imports": ["package-name"]

Would that be something you're interested in adding? If so, I'm happy to submit a PR.

[aputinski]

Yeah, that'd be great! Currently you can do this, correct?

"imports": ["../node_modules/package-name"]

Were you thinking something similar to the sass-loader?

Thus you can import your Sass modules from node_modules. Just prepend them with a ~ to tell webpack that this is not a relative import:

[aputinski]

It'd also be good to have some recommendations for packaging tokens (directory structure, file names, etc.)

[stevenbenisek]

Currently you can do "imports": ["../node_modules/package-name"]?

Correct, but this assumes both packages live in the same node_modules folder. This isn't always the case; e.g. when using lerna

Were you thinking something similar to the sass-loader?

I'd like to take advantage of node's default module resolving mechanism and handle paths much like ES imports. The only reason sass-loader uses ~ is because CSS and Sass files have no special syntax for importing relative files. I'd like to avoid this.

Example package

• node_modules
  • aliases
    • package.json
    • color.yml
    • space.yml
    • index.yml
• package.json
• button.yml
• index.yml

Note: the aliases package has it's main field set to index.yml

The imports field of the root index.yml could look like this:

imports:
  - ./button.yml
  - aliases

or if you only need color aliases:

imports:
  - ./button.yml
  - aliases/color.yml

To conclude, it should handle:

• absolute paths, e.g: /home/me/aliases/index.yml
• relative paths: ./aliases/index.yml or ../aliases/index.yml
• module paths: aliases or aliases/index.yml

@aputinski What do you think?

[aputinski]

Sounds great!

[aputinski]

7.0.0 is now available on npm

[CH-RhyMoore]

Created an issue #157

I've got theo@7.0.1 and have this import configured:

{
  "imports": [
    "@collectivehealth/dls-colors"
  ]
}

I'm getting this error:

💩  Oops, something went wrong: Error: ENOENT: no such file or directory, open '/Users/rachael.moore/Projects/dls/components/dls-button/@collectivehealth/dls-colors'

The error makes this import appear to not be importing as an npm module, but instead as a relative file path. Any thoughts?