feat: import resolving + url rebasing for less

.eslintrc.js

@@ -38,7 +38,7 @@ module.exports = {
     'node/no-extraneous-import': [
       'error',
       {
-        allowModules: ['vite']
+        allowModules: ['vite', 'less', 'sass']
       }
     ],
     'node/no-extraneous-require': [

packages/playground/css/__tests__/css.spec.ts

@@ -72,6 +72,23 @@ test('sass', async () => {
   await untilUpdated(() => getColor(atImport), 'blue')
 })
 
+test('less', async () => {
+  const imported = await page.$('.less')
+  const atImport = await page.$('.less-at-import')
+
+  expect(await getColor(imported)).toBe('blue')
+  expect(await getColor(atImport)).toBe('darkslateblue')
+  expect(await getBg(atImport)).toMatch(isBuild ? /base64/ : '/nested/icon.png')
+
+  editFile('less.less', (code) => code.replace('@color: blue', '@color: red'))
+  await untilUpdated(() => getColor(imported), 'red')
+
+  editFile('nested/index.less', (code) =>
+    code.replace('color: darkslateblue', 'color: blue')
+  )
+  await untilUpdated(() => getColor(atImport), 'blue')
+})
+
 test('css modules', async () => {
   const imported = await page.$('.modules')
   expect(await getColor(imported)).toBe('turquoise')

packages/playground/css/index.html

@@ -17,13 +17,20 @@ <h1>CSS</h1>
     <span class="nesting">PostCSS nesting plugin: this should be pink</span>
   </p>
 
-  <p class="sass">sass: This should be orange</p>
+  <p class="sass">SASS: This should be orange</p>
   <p class="sass-at-import">
     @import from SASS: This should be olive and have bg image
   </p>
   <p>Imported SASS string:</p>
   <pre class="imported-sass"></pre>
 
+  <p class="less">Less: This should be blue</p>
+  <p class="less-at-import">
+    @import from Less: This should be darkslateblue and have bg image
+  </p>
+  <p>Imported Less string:</p>
+  <pre class="imported-less"></pre>
+
   <p class="modules">CSS modules: this should be turquoise</p>
   <p>Imported CSS module:</p>
   <pre class="modules-code"></pre>

packages/playground/css/less.less

@@ -0,0 +1,7 @@
+@import '@/nested'; // alias + index resolving -> /nested/index.less
+
+@color: blue;
+
+.less {
+  color: @color;
+}

packages/playground/css/main.js

@@ -4,6 +4,9 @@ text('.imported-css', css)
 import sass from './sass.scss'
 text('.imported-sass', sass)
 
+import less from './less.less'
+text('.imported-less', less)
+
 import mod from './mod.module.css'
 document.querySelector('.modules').classList.add(mod.applyColor)
 text('.modules-code', JSON.stringify(mod, null, 2))

packages/playground/css/nested/index.less

@@ -0,0 +1,4 @@
+.less-at-import {
+  color: darkslateblue;
+  background: url(./icon.png) 10px no-repeat;
+}

packages/playground/css/package.json

@@ -9,6 +9,8 @@
     "serve": "vite preview"
   },
   "devDependencies": {
-    "postcss-nested": "^5.0.3"
+    "less": "^4.1.0",
+    "postcss-nested": "^5.0.3",
+    "sass": "^1.32.5"
   }
 }

packages/vite/package.json

@@ -66,9 +66,11 @@
     "@types/es-module-lexer": "^0.3.0",
     "@types/estree": "^0.0.45",
     "@types/etag": "^1.8.0",
+    "@types/less": "^3.0.2",
     "@types/mime": "^2.0.3",
     "@types/node": "^14.14.10",
     "@types/resolve": "^1.17.1",
+    "@types/sass": "^1.16.0",
     "@types/ws": "^7.4.0",
     "@vue/compiler-dom": "^3.0.4",
     "acorn": "^8.0.4",