Update the eslint rules to check for the currently unsupported imports
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3580433. -->
Reported by: [wotnak](https://www.drupal.org/user/3558113)
Related to !768
>>>
<h3 id="overview">Overview</h3>
<p>Update the eslint rules used by the CLI tool for the new commands in @drupal-canvas/eslint-config to add rules for the currently unsupported imports.</p>
<table>
<thead>
<tr>
<th>Import type</th>
<th>Example import statement</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>CSS side-effect import (third party)</td>
<td>import swiper/css<br>import swiper/css/pagination</td>
<td>Not yet supported (needs build command rework and backend work since scoped css needs to get added as libraries)</td>
</tr>
<tr>
<td>CSS side-effect import (first party)</td>
<td>import ‘@/lib/styles/carousel.css’</td>
<td>^ same</td>
</tr>
<tr>
<td>Fonts</td>
<td>import '@fontsource/inter’</td>
<td>Not supported. Fonts will be managed through the Brand kit.</td>
</tr>
<tr>
<td>Importing assets (images, video)</td>
<td>import heroImg from '@/images/hero/hero.jpg'</td>
<td>Not yet supported (needs build command rework)</td>
</tr>
<tr>
<td>Importing SVG</td>
<td>import CartIcon from '@/components/cart/cart.svg</td>
<td>Not yet supported (needs build command rework)</td>
</tr>
<tr>
<td>Local module import that lives inside of a component’s directory</td>
<td>import { formatPrice } from "@/component/pricing-component/helpers"</td>
<td>Not yet supported (helper/utils file seen as an importedJsComponent since the import is under "@/components" [importedJsComponents] The 'importedJsComponents' contains an invalid component name.</td>
</tr>
<tr>
<td>Relative imports</td>
<td></td>
<td>We will not support this</td>
</tr>
<tr>
<td>Third-party import</td>
<td>import { motion } from "motion/react"</td>
<td>Supported</td>
</tr>
<tr>
<td>Local module import from a shared location NOT in a component's directory</td>
<td>import { formatDate } from "@/lib/utils"</td>
<td>Supported</td>
</tr>
</tbody>
</table>
<h3 id="proposed-resolution">Proposed resolution</h3>
<p>Update eslint rules in the @drupal-canvas/eslint-config package.<br>
Update CLI validate command to use new component discovery and eslint rules by default and allow using deprecated rules and component selection through the <code>--deprecated</code> flag.</p>
issue