fix: import sass file even if not listed in package.json (#3627)

vitejs · Aug 2, 2021 · a5b2b4f · a5b2b4f
1 parent a5d0e8f
commit a5b2b4f
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 9 deletions.
diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts
@@ -240,6 +240,10 @@ test('@import dependency w/ stylus entry', async () => {
   expect(await getColor('.css-dep-stylus')).toBe('red')
 })
 
+test('@import dependency w/out package scss', async () => {
+  expect(await getColor('.sass-dep')).toBe('lavender')
+})
+
 test('async chunk', async () => {
   const el = await page.$('.async')
   expect(await getColor(el)).toBe('teal')

diff --git a/packages/playground/css/index.html b/packages/playground/css/index.html
@@ -28,6 +28,9 @@ <h1>CSS</h1>
   <p class="sass-partial">@import from SASS _partial: This should be orchid</p>
   <p>Imported SASS string:</p>
   <pre class="imported-sass"></pre>
+  <p class="sass-dep">
+    @import dependency w/ no scss entrypoint: this should be lavender
+  </p>
 
   <p class="less">Less: This should be blue</p>
   <p class="less-at-import">

diff --git a/packages/playground/css/pkg-dep/_index.scss b/packages/playground/css/pkg-dep/_index.scss
@@ -0,0 +1,3 @@
+.sass-dep {
+  color: lavender;
+}
diff --git a/packages/playground/css/pkg-dep/index.js b/packages/playground/css/pkg-dep/index.js
diff --git a/packages/playground/css/pkg-dep/package.json b/packages/playground/css/pkg-dep/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "dep",
+  "version": "1.0.0",
+  "main": "index.js"
+}
diff --git a/packages/playground/css/sass.scss b/packages/playground/css/sass.scss
@@ -2,6 +2,7 @@
 @import '@/nested/partial'; // sass convention: omitting leading _ for partials
 @import 'css-dep'; // package w/ sass entry points
 @import 'virtual-dep'; // virtual file added through importer
+@import '@/pkg-dep'; // package w/out sass field
 
 .sass {
   /* injected via vite.config.js */

diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
@@ -59,6 +59,7 @@ export interface InternalResolveOptions extends ResolveOptions {
   asSrc?: boolean
   tryIndex?: boolean
   tryPrefix?: string
+  skipPackageJson?: boolean
   preferRelative?: boolean
   isRequire?: boolean
 }
@@ -286,7 +287,8 @@ function tryFsResolve(
       options,
       false,
       targetWeb,
-      options.tryPrefix
+      options.tryPrefix,
+      options.skipPackageJson
     ))
   ) {
     return res
@@ -300,7 +302,8 @@ function tryFsResolve(
         options,
         false,
         targetWeb,
-        options.tryPrefix
+        options.tryPrefix,
+        options.skipPackageJson
       ))
     ) {
       return res
@@ -314,7 +317,8 @@ function tryFsResolve(
       options,
       tryIndex,
       targetWeb,
-      options.tryPrefix
+      options.tryPrefix,
+      options.skipPackageJson
     ))
   ) {
     return res
@@ -327,7 +331,8 @@ function tryResolveFile(
   options: InternalResolveOptions,
   tryIndex: boolean,
   targetWeb: boolean,
-  tryPrefix?: string
+  tryPrefix?: string,
+  skipPackageJson?: boolean
 ): string | undefined {
   let isReadable = false
   try {
@@ -341,11 +346,13 @@ function tryResolveFile(
     if (!fs.statSync(file).isDirectory()) {
       return normalizePath(ensureVolumeInPath(file)) + postfix
     } else if (tryIndex) {
-      const pkgPath = file + '/package.json'
-      if (fs.existsSync(pkgPath)) {
-        // path points to a node package
-        const pkg = loadPackageData(pkgPath)
-        return resolvePackageEntry(file, pkg, options, targetWeb)
+      if (!skipPackageJson) {
+        const pkgPath = file + '/package.json'
+        if (fs.existsSync(pkgPath)) {
+          // path points to a node package
+          const pkg = loadPackageData(pkgPath)
+          return resolvePackageEntry(file, pkg, options, targetWeb)
+        }
       }
       const index = tryFsResolve(file + '/index', options)
       if (index) return index + postfix
@@ -605,6 +612,15 @@ export function resolvePackageEntry(
 
   entryPoint = entryPoint || data.main || 'index.js'
 
+  // make sure we don't get scripts when looking for sass
+  if (
+    options.mainFields?.[0] === 'sass' &&
+    !options.extensions?.includes(path.extname(entryPoint))
+  ) {
+    entryPoint = ''
+    options.skipPackageJson = true
+  }
+
   // resolve object browser field in package.json
   const { browser: browserField } = data
   if (targetWeb && isObject(browserField)) {