Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

False positive of ?inline check for styles.css.ts file #11328

Closed
7 tasks done
manucorporat opened this issue Dec 12, 2022 · 1 comment · Fixed by #11347
Closed
7 tasks done

False positive of ?inline check for styles.css.ts file #11328

manucorporat opened this issue Dec 12, 2022 · 1 comment · Fixed by #11347

Comments

@manucorporat
Copy link
Contributor

Describe the bug

Typescript and node-resolution allows to import files dropping the last extension so a file named styles.css.ts can be imported like:

import {export1, export2} from './styles.css';

Leading to a false positive of this warning:

Default and named imports from CSS files are deprecated. Use the ?inline query instead. For example: import { counter } from './styles.css?inline'

The new import analysys in vite 4 is detecting usage of named exports in side-effect imports of .css files, but in order to do so, it's checking the AST values instead of the resolved Id to the file

https://github.com/BuilderIO/vite/blob/dcc0004ceb7a76e6d0cbae8b84a103a15f80049b/packages/vite/src/node/plugins/importAnalysis.ts#L441-L447

This is problematic since it's a false positive of importing some non-css files like the described example

Reproduction

https://stackblitz.com/edit/vitejs-vite-bedqvf?file=file.css.js,main.js&terminal=dev

Steps to reproduce

See warnings in the console:

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    vite: ^4.0.0 => 4.0.0

Used Package Manager

pnpm

Logs

No response

Validations

@manucorporat manucorporat changed the title Regression when importing styles.css.ts file False positive of ?inline check for styles.css.ts file Dec 12, 2022
@nomoon
Copy link

nomoon commented Dec 12, 2022

It might worth noting that .css.ts files are the organizational principle of https://github.com/vanilla-extract-css/vanilla-extract, and TypeScript has longstanding issues (microsoft/TypeScript#27481) with specifying import paths ending in .ts, so switching from e.g. import { appStyle } from './App.css'; to import { appStyle } from './App.css.ts'; isn't necessarily going to work.

@github-actions github-actions bot locked and limited conversation to collaborators Dec 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants