feat: support postcss sugarss

packages/vite/package.json

@@ -124,6 +124,7 @@
     "less": "*",
     "sass": "*",
     "stylus": "*",
+    "sugarss": "*",
     "terser": "^5.4.0"
   },
   "peerDependenciesMeta": {
@@ -136,6 +137,9 @@
     "less": {
       "optional": true
     },
+    "sugarss": {
+      "optional": true
+    },
     "terser": {
       "optional": true
     }

packages/vite/src/node/optimizer/scan.ts

@@ -427,7 +427,7 @@ function esbuildScanPlugin(
       // css & json & wasm
       build.onResolve(
         {
-          filter: /\.(css|less|sass|scss|styl|stylus|pcss|postcss|json|wasm)$/
+          filter: /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss|json|wasm)$/
         },
         externalUnlessEntry
       )

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

@@ -104,7 +104,7 @@ export interface CSSModulesOptions {
     | null
 }
 
-const cssLangs = `\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)`
+const cssLangs = `\\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)($|\\?)`
 const cssLangRE = new RegExp(cssLangs)
 const cssModuleRE = new RegExp(`\\.module${cssLangs}`)
 const directRequestRE = /(\?|&)direct\b/
@@ -127,7 +127,13 @@ const enum PreprocessLang {
 const enum PureCssLang {
   css = 'css'
 }
-type CssLang = keyof typeof PureCssLang | keyof typeof PreprocessLang
+const enum PostCssDialectLang {
+  sss = 'sugarss'
+}
+type CssLang =
+  | keyof typeof PureCssLang
+  | keyof typeof PreprocessLang
+  | keyof typeof PostCssDialectLang
 
 export const isCSSRequest = (request: string): boolean =>
   cssLangRE.test(request)
@@ -827,6 +833,15 @@ async function compileCSS(
 
   // 3. postcss
   const postcssOptions = (postcssConfig && postcssConfig.options) || {}
+
+  // for sugarss change parser
+  if (lang === 'sss') {
+    postcssOptions.parser = loadPreprocessor(
+      PostCssDialectLang.sss,
+      config.root
+    )
+  }
+
   const postcssPlugins =
     postcssConfig && postcssConfig.plugins ? postcssConfig.plugins.slice() : []
 
@@ -1385,19 +1400,28 @@ export interface StylePreprocessorResults {
   deps: string[]
 }
 
-const loadedPreprocessors: Partial<Record<PreprocessLang, any>> = {}
+const loadedPreprocessors: Partial<
+  Record<PreprocessLang | PostCssDialectLang, any>
+> = {}
 
 // TODO: use dynamic import
 const _require = createRequire(import.meta.url)
 
 function loadPreprocessor(lang: PreprocessLang.scss, root: string): typeof Sass
 function loadPreprocessor(lang: PreprocessLang.sass, root: string): typeof Sass
 function loadPreprocessor(lang: PreprocessLang.less, root: string): typeof Less
+function loadPreprocessor(
+  lang: PostCssDialectLang.sss,
+  root: string
+): PostCSS.Parser
 function loadPreprocessor(
   lang: PreprocessLang.stylus,
   root: string
 ): typeof Stylus
-function loadPreprocessor(lang: PreprocessLang, root: string): any {
+function loadPreprocessor(
+  lang: PreprocessLang | PostCssDialectLang,
+  root: string
+): any {
   if (lang in loadedPreprocessors) {
     return loadedPreprocessors[lang]
   }

playground/css/__tests__/css.spec.ts

@@ -455,3 +455,25 @@ test.runIf(isBuild)('warning can be suppressed by esbuild.logOverride', () => {
     expect(log).not.toMatch('unsupported-css-property')
   })
 })
+
+test('sugarss', async () => {
+  const imported = await page.$('.sugarss')
+  const atImport = await page.$('.sugarss-at-import')
+  const atImportAlias = await page.$('.sugarss-at-import-alias')
+
+  expect(await getColor(imported)).toBe('blue')
+  expect(await getColor(atImport)).toBe('darkslateblue')
+  expect(await getBg(atImport)).toMatch(isBuild ? /base64/ : '/nested/icon.png')
+  expect(await getColor(atImportAlias)).toBe('darkslateblue')
+  expect(await getBg(atImportAlias)).toMatch(
+    isBuild ? /base64/ : '/nested/icon.png'
+  )
+
+  editFile('sugarss.sss', (code) => code.replace('color: blue', 'color: coral'))
+  await untilUpdated(() => getColor(imported), 'coral')
+
+  editFile('nested/nested.sss', (code) =>
+    code.replace('color: darkslateblue', 'color: blue')
+  )
+  await untilUpdated(() => getColor(atImport), 'blue')
+})

playground/css/index.html

@@ -73,6 +73,17 @@ <h1>CSS</h1>
   <p>Imported Stylus string:</p>
   <pre class="imported-stylus"></pre>
 
+  <p class="sugarss">SugarSS: This should be blue</p>
+  <p class="sugarss-at-import">
+    @import from SugarSS: This should be darkslateblue and have bg image
+  </p>
+  <p class="sugarss-at-import-alias">
+    @import from SugarSS: This should be darkslateblue and have bg image which
+    url contains alias
+  </p>
+  <p>Imported SugarSS string:</p>
+  <pre class="imported-sugarss"></pre>
+
   <p class="modules">CSS modules: this should be turquoise</p>
   <p>Imported CSS module:</p>
   <pre class="modules-code"></pre>

playground/css/main.js

@@ -12,6 +12,9 @@ text('.imported-less', less)
 import stylus from './stylus.styl'
 text('.imported-stylus', stylus)
 
+import sugarss from './sugarss.sss'
+text('.imported-sugarss', sugarss)
+
 import rawCss from './raw-imported.css?raw'
 text('.raw-imported-css', rawCss)
 

playground/css/nested/nested.sss

@@ -0,0 +1,8 @@
+.sugarss-at-import
+  color: darkslateblue
+  background: url(./icon.png) 10px no-repeat
+
+
+.sugarss-at-import-alias
+  color: darkslateblue
+  background: url(@/nested/icon.png) 10px no-repeat

playground/css/package.json

@@ -18,6 +18,7 @@
     "less": "^4.1.3",
     "postcss-nested": "^5.0.6",
     "sass": "^1.54.8",
-    "stylus": "^0.59.0"
+    "stylus": "^0.59.0",
+    "sugarss": "^4.0.1"
   }
 }

playground/css/sugarss.sss

@@ -0,0 +1,4 @@
+@import '@/nested/nested.sss'
+
+.sugarss
+  color: blue