nrwl / nx

Smart Monorepos · Fast CI
https://nx.dev
MIT License
23.55k stars 2.35k forks source link

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

Closed csk-trackunit closed 1 month ago

csk-trackunit commented 1 month ago

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

Additional Information

No response

jaysoo commented 1 month ago

@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.