ember-css-modules icon indicating copy to clipboard operation
ember-css-modules copied to clipboard

resolveExternalPath does not respect addon's extension

Open jacojoubert opened this issue 6 years ago • 0 comments

We have a consuming app that uses the extension setting to compartmentalize the css while we are doing a rewrite:

cssModules: {
  intermediateOutputPath: 'app/styles/_modules.scss',
  extension: 'module.scss',
  postcssOptions: {
    syntax: require('postcss-scss')
  }
}

We also have a addon that is brand new and does not have an extension on its module files. Unfortunately the resolveExternalPath method

https://github.com/salsify/ember-css-modules/blob/2e75877deb74bae496342854dca4c777ed6ec0bd/lib/resolve-path.js#L14

applies the consuming app's extension to the addon's modules and thus none of the styles are resolving and you get an error like this:

Unable to locate module "addon-name/styles/color" imported from /temp-folder/consuming-app/components/component-name/styles.module.scss

Monkey patching the resolveExternalPath method to strip out the .module suffix fixes it. It seems the issue is with getFileExtension, but I am unsure on how to pull in the addon's extension instead of the consuming app's.

https://github.com/salsify/ember-css-modules/blob/b6f9454414306af3bd8f506460ea73d1e265a5a7/index.js#L120

jacojoubert avatar Apr 16 '19 15:04 jacojoubert