feat: support postcss sugarss

packages/playground/css/index.html

@@ -46,6 +46,8 @@ <h1>CSS</h1>
   <p class="css-dep-sass">
     @import dependency w/ sass enrtrypoints: this should be orange
   </p>
+  <p>Imported SugarSS indent-based CSS syntax for PostCSS:</p>
+  <pre class="imported-sugarss"></pre>
 </div>
 
 <script type="module" src="./main.js"></script>

packages/playground/css/main.js

@@ -17,6 +17,9 @@ text('.modules-sass-code', JSON.stringify(sassMod, null, 2))
 
 import './dep.css'
 
+import sss from './sugarss.sss'
+text('.imported-sugarss', sss)
+
 function text(el, text) {
   document.querySelector(el).textContent = text
 }

packages/playground/css/package.json

@@ -9,9 +9,11 @@
     "serve": "vite preview"
   },
   "devDependencies": {
+    "css-dep": "link:./css-dep",
     "less": "^4.1.0",
     "postcss-nested": "^5.0.3",
+    "postcss-simple-vars": "^6.0.3",
     "sass": "^1.32.5",
-    "css-dep": "link:./css-dep"
+    "sugarss": "^3.0.3"
   }
 }

packages/playground/css/postcss.config.js

@@ -1,3 +1,12 @@
-module.exports = {
-  plugins: [require('postcss-nested')]
+module.exports = (api) => {
+  if (/\.sss$/.test(api.file)) {
+    return {
+      parser: 'sugarss',
+      plugins: [require('postcss-simple-vars'), require('postcss-nested')]
+    }
+  }
+
+  return {
+    plugins: [require('postcss-nested')]
+  }
 }

packages/playground/css/sugarss.sss

@@ -0,0 +1,4 @@
+$black: #000
+
+.sugarss
+  border: thick double $black

packages/vite/src/node/plugins/css.ts

@@ -75,7 +75,7 @@ export interface CSSModulesOptions {
     | null
 }
 
-const cssLangs = `\\.(css|less|sass|scss|styl|stylus|postcss)($|\\?)`
+const cssLangs = `\\.(css|less|sass|scss|styl|stylus|postcss|sss)($|\\?)`
 const cssLangRE = new RegExp(cssLangs)
 const cssModuleRE = new RegExp(`\\.module${cssLangs}`)
 const directRequestRE = /(\?|&)direct\b/
@@ -507,7 +507,7 @@ async function compileCSS(
   // crawl them in order to register watch dependencies.
   const needInlineImport = code.includes('@import')
   const hasUrl = cssUrlRE.test(code) || cssImageSetRE.test(code)
-  const postcssConfig = await resolvePostcssConfig(config)
+  const postcssConfig = await resolvePostcssConfig(id, config)
   const lang = id.match(cssLangRE)?.[1]
 
   // 1. plain css that needs no processing
@@ -666,13 +666,16 @@ interface PostCSSConfigResult {
   plugins: Postcss.Plugin[]
 }
 
-let cachedPostcssConfig: PostCSSConfigResult | null | undefined
+let cachedPostcssConfigs: Map<string, PostCSSConfigResult | null> = new Map()
+let cachedPostcssConfigPath: string | undefined
 
 async function resolvePostcssConfig(
+  file: string,
   config: ResolvedConfig
 ): Promise<PostCSSConfigResult | null> {
-  if (cachedPostcssConfig !== undefined) {
-    return cachedPostcssConfig
+  const cached = cachedPostcssConfigs.get(file)
+  if (cached !== undefined) {
+    return cached
   }
 
   // inline postcss config via vite config
@@ -683,19 +686,30 @@ async function resolvePostcssConfig(
       plugins: inlineOptions.plugins || []
     }
     delete result.options.plugins
-    return (cachedPostcssConfig = result)
+    cachedPostcssConfigs.set(file, result)
+
+    return result
   }
 
   try {
     const searchPath =
-      typeof inlineOptions === 'string' ? inlineOptions : config.root
-    // @ts-ignore
-    return (cachedPostcssConfig = await postcssrc({}, searchPath))
+      cachedPostcssConfigPath ??
+      (typeof inlineOptions === 'string' ? inlineOptions : config.root)
+
+    const result = (await postcssrc(
+      { file } as any,
+      searchPath
+    )) as PostCSSConfigResult & { file: string }
+    cachedPostcssConfigPath = result.file
+    cachedPostcssConfigs.set(file, result)
+
+    return result
   } catch (e) {
     if (!/No PostCSS Config found/.test(e.message)) {
       throw e
     }
-    return (cachedPostcssConfig = null)
+    cachedPostcssConfigs.set(file, null)
+    return null
   }
 }
 

packages/vite/types/shims.d.ts

@@ -54,6 +54,7 @@ declare module 'postcss-load-config' {
   ): Promise<{
     options: ProcessOptions
     plugins: Plugin[]
+    file: string
   }>
   export = load
 }

yarn.lock

@@ -2079,7 +2079,7 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-colorette@^1.2.1:
+colorette@^1.2.1, colorette@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
   integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
@@ -6078,6 +6078,11 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
     uniq "^1.0.1"
     util-deprecate "^1.0.2"
 
+postcss-simple-vars@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-simple-vars/-/postcss-simple-vars-6.0.3.tgz#e66516c7fe980da3498f4a8ad400b9c53861806c"
+  integrity sha512-fkNn4Zio8vN4vIig9IFdb8lVlxWnYR769RgvxCM6YWlFKie/nQaOcaMMMFz/s4gsfHW4/5bJW+i57zD67mQU7g==
+
 postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
@@ -6092,6 +6097,15 @@ postcss@^8.1.10, postcss@^8.2.1:
     nanoid "^3.1.20"
     source-map "^0.6.1"
 
+postcss@^8.1.6:
+  version "8.2.7"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.7.tgz#48ed8d88b4de10afa0dfd1c3f840aa57b55c4d47"
+  integrity sha512-DsVLH3xJzut+VT+rYr0mtvOtpTjSyqDwPf5EZWXcb0uAKfitGpTY9Ec+afi2+TgdN8rWS9Cs88UDYehKo/RvOw==
+  dependencies:
+    colorette "^1.2.2"
+    nanoid "^3.1.20"
+    source-map "^0.6.1"
+
 preact@^10.0.0:
   version "10.5.12"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.12.tgz#6a8ee8bf40a695c505df9abebacd924e4dd37704"
@@ -7363,6 +7377,13 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1, strip-json-comments@~3.1
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+sugarss@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-3.0.3.tgz#bb2489961b98fbd15e4e35d6b9f4f2ee5547a6cb"
+  integrity sha512-uxa2bbuc+w7ov7DyYIhF6bM0qZF3UkFT5/nE8AJgboiVnKsBDbwxs++dehEIe1JNhpMaGJc37wGQ2QrrWey2Sg==
+  dependencies:
+    postcss "^8.1.6"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"