@nx/dependency-checks fails to find dependency from css-files

[csk-trackunit]

Current Behavior

I'm using @nx/dependency-checks with eslint to make sure that all dependencies used in a publishable lib is included in the package.json of that lib. Recently we had an issue where installing that lib in an external project failed due to a missing dependency. We tracked it down to an import in a css-file, that was not detected by the linter.

Expected Behavior

I would expect all dependencies of a lib to be found by the linter.

GitHub Repo

https://github.com/csk-trackunit/dependency-issue

Steps to Reproduce

1. Execute lint target for publishable lib nx lint PubLi
2. @import "react-image-gallery/styles/css/image-gallery.css"; is not discovered by the linter.

see https://github.com/csk-trackunit/dependency-issue/blob/main/README.md for more details.

Nx Report

NX   Report complete - copy this into the issue template

Node           : 20.17.0
OS             : darwin-arm64
Native Target  : aarch64-macos
npm            : 10.8.2

nx                 : 19.7.3
@nx/js             : 19.7.3
@nx/jest           : 19.7.3
@nx/linter         : 19.7.3
@nx/eslint         : 19.7.3
@nx/workspace      : 19.7.3
@nx/devkit         : 19.7.3
@nx/eslint-plugin  : 19.7.3
@nx/react          : 19.7.3
@nx/rollup         : 19.7.3
@nrwl/tao          : 19.7.3
@nx/web            : 19.7.3
@nx/webpack        : 19.7.3
typescript         : 5.5.4
---------------------------------------
Registered Plugins:
@nx/webpack/plugin
@nx/eslint/plugin
@nx/jest/plugin
@nx/rollup/plugin

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[jaysoo]

@csk-trackunit The imports are only picked up from JS and TS files since we're using SWC to find them.

I'll convert this to a feature request since it is asking for external dependencies to be parsed from CSS files as well.

A workaround to your issue might to add the import to the component file instead.

import 'react-image-gallery/styles/css/image-gallery.css;

That will import the file as a global CSS file, and SWC should be able to find it.

[csk-trackunit]

Thank you for getting back to me on this, @jaysoo. It would be great to have this functionality, but I understand now why it doesn’t work. Perhaps a note in the documentation about this limitation would be helpful?

In my particular case, we have a library that only contains theming, fonts, etc., with no TypeScript files. I’m not sure how common that is, but I’ll try to find a way to utilise your workaround. It just need to also make sense for the next developer coming around :)