Skip to content

Commit

Permalink
fix: ?inline warning for .css.js file (#11347)
Browse files Browse the repository at this point in the history
  • Loading branch information
patak-dev authored Dec 12, 2022
1 parent 34fec41 commit 729fb1a
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 29 deletions.
58 changes: 29 additions & 29 deletions packages/vite/src/node/plugins/importAnalysis.ts
Original file line number Diff line number Diff line change
Expand Up @@ -438,35 +438,6 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
str().remove(end + 1, expEnd)
}

if (
!isDynamicImport &&
specifier &&
!specifier.includes('?') && // ignore custom queries
isCSSRequest(specifier) &&
!isModuleCSSRequest(specifier)
) {
const sourceExp = source.slice(expStart, start)
if (
sourceExp.includes('from') && // check default and named imports
!sourceExp.includes('__vite_glob_') // glob handles deprecation message itself
) {
const newImport =
sourceExp + specifier + `?inline` + source.slice(end, expEnd)
this.warn(
`\n` +
colors.cyan(importerModule.file) +
`\n` +
colors.reset(generateCodeFrame(source, start)) +
`\n` +
colors.yellow(
`Default and named imports from CSS files are deprecated. ` +
`Use the ?inline query instead. ` +
`For example: ${newImport}`,
),
)
}
}

// static import or valid string in dynamic import
// If resolvable, let's resolve it
if (specifier) {
Expand Down Expand Up @@ -509,6 +480,35 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
// normalize
const [url, resolvedId] = await normalizeUrl(specifier, start)

if (
!isDynamicImport &&
specifier &&
!specifier.includes('?') && // ignore custom queries
isCSSRequest(resolvedId) &&
!isModuleCSSRequest(resolvedId)
) {
const sourceExp = source.slice(expStart, start)
if (
sourceExp.includes('from') && // check default and named imports
!sourceExp.includes('__vite_glob_') // glob handles deprecation message itself
) {
const newImport =
sourceExp + specifier + `?inline` + source.slice(end, expEnd)
this.warn(
`\n` +
colors.cyan(importerModule.file) +
`\n` +
colors.reset(generateCodeFrame(source, start)) +
`\n` +
colors.yellow(
`Default and named imports from CSS files are deprecated. ` +
`Use the ?inline query instead. ` +
`For example: ${newImport}`,
),
)
}
}

// record as safe modules
server?.moduleGraph.safeModulesPath.add(fsPathFromUrl(url))

Expand Down
8 changes: 8 additions & 0 deletions playground/css/__tests__/css.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -451,6 +451,14 @@ test('PostCSS source.input.from includes query', async () => {
)
})

test('js file ending with .css.js', async () => {
const message = await page.textContent('.jsfile-css-js')
expect(message).toMatch('from jsfile.css.js')
serverLogs.forEach((log) => {
expect(log).not.toMatch(/Use the \?inline query instead.+jsfile\.css/)
})
})

test('aliased css has content', async () => {
expect(await getColor('.aliased')).toBe('blue')
// skipped: currently not supported see #8936
Expand Down
3 changes: 3 additions & 0 deletions playground/css/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,9 @@ <h1>CSS</h1>
<p>PostCSS source.input.from. Should include query</p>
<pre class="postcss-source-input"></pre>

<p>Import from jsfile.css.js without the extension</p>
<pre class="jsfile-css-js"></pre>

<p>Aliased</p>
<p class="aliased">import '#alias': this should be blue</p>
<pre class="aliased-content"></pre>
Expand Down
2 changes: 2 additions & 0 deletions playground/css/jsfile.css.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
const message = 'from jsfile.css.js'
export default message
4 changes: 4 additions & 0 deletions playground/css/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,10 @@ text('.imported-css-globEager', JSON.stringify(globEager, null, 2))
import postcssSourceInput from './postcss-source-input.css?query=foo'
text('.postcss-source-input', postcssSourceInput)

// The file is jsfile.css.js, and we should be able to import it without extension
import jsFileMessage from './jsfile.css'
text('.jsfile-css-js', jsFileMessage)

import aliasContent from '#alias'
text('.aliased-content', aliasContent)
import aliasModule from '#alias-module'
Expand Down

0 comments on commit 729fb1a

Please sign in to comment.