feat: 🎸 add support for lang=sugarss & type=text/sugarss

✅ Closes: #250

Author: kaisermann

Diff for: docs/preprocessing.md

@@ -269,7 +269,7 @@ The CoffeeScript processor accepts no extra options and only transpiles CoffeeSc
 
 You can check the [Less API reference](http://lesscss.org/usage/#less-options) for Less specific options.
 
-### PostCSS
+### PostCSS / SugarSS
 
 The PostCSS preprocessor accepts three options:
 
@@ -341,7 +341,7 @@ You can check the [Sass API reference](https://sass-lang.com/documentation/js-ap
 
 ### Stylus
 
-You can check the [Stylus API reference](https://stylus-lang.com/docs/js.html) for specific Stylus options. The `filename` property is overriden.
+You can check the [Stylus API reference](https://stylus-lang.com/docs/js.html) for specific Stylus options. The `filename` property is overridden.
 
 ### TypeScript
 
@@ -361,7 +361,7 @@ As we're only transpiling, it's not possible to import types or interfaces into
 
 ### `globalStyle`
 
-The `globalStyle` preprocessor extends the functionalities of Svelte's `:global` pseudo selector.
+The `globalStyle` preprocessor extends the functionalities of Svelte's `:global` pseudo-selector.
 
 **`global` attribute:**
 

Diff for: src/autoProcess.ts

@@ -13,7 +13,8 @@ import {
   addLanguageAlias,
   getLanguageFromAlias,
   SOURCE_MAP_PROP_MAP,
-  LANG_SPECIFIC_OPTIONS,
+  getLanguage,
+  getLanguageDefaults,
 } from './modules/language';
 import { prepareContent } from './modules/prepareContent';
 import { transformMarkup } from './modules/markup';
@@ -119,7 +120,7 @@ export function sveltePreprocess(
       Object.assign(opts, nameOpts);
     }
 
-    Object.assign(opts, LANG_SPECIFIC_OPTIONS[alias]);
+    Object.assign(opts, getLanguageDefaults(name), getLanguageDefaults(alias));
 
     if (name !== alias && typeof aliasOpts === 'object') {
       Object.assign(opts, aliasOpts);
@@ -250,9 +251,11 @@ export function sveltePreprocess(
     // istanbul ignore else
     if (await hasDepInstalled('postcss')) {
       if (transformers.postcss) {
+        const { alias } = getLanguage(attributes);
+
         const transformed = await transform(
           'postcss',
-          getTransformerOptions('postcss'),
+          getTransformerOptions('postcss', alias),
           { content: code, map, filename, attributes },
         );
 

Diff for: src/modules/language.ts

@@ -3,7 +3,7 @@ import { basename } from 'path';
 import { PreprocessorArgs } from '../types';
 import { isValidLocalPath } from './utils';
 
-export const LANG_SPECIFIC_OPTIONS: Record<string, any> = {
+const LANG_SPECIFIC_OPTIONS: Record<string, any> = {
   sass: {
     indentedSyntax: true,
     stripIndent: true,
@@ -17,8 +17,25 @@ export const LANG_SPECIFIC_OPTIONS: Record<string, any> = {
   stylus: {
     stripIndent: true,
   },
+  // We need to defer this require to make sugarss an optional dependency.
+  sugarss: () => ({
+    stripIndent: true,
+    // eslint-disable-next-line @typescript-eslint/no-require-imports, global-require
+    parser: require('sugarss'),
+  }),
 };
 
+export function getLanguageDefaults(lang: string): null | Record<string, any> {
+  const defaults = LANG_SPECIFIC_OPTIONS[lang];
+
+  if (!defaults) return null;
+  if (typeof defaults === 'function') {
+    return defaults();
+  }
+
+  return defaults;
+}
+
 export const SOURCE_MAP_PROP_MAP: Record<string, [string, any]> = {
   babel: ['sourceMaps', true],
   typescript: ['sourceMap', true],
@@ -33,6 +50,7 @@ export const SOURCE_MAP_PROP_MAP: Record<string, [string, any]> = {
 export const ALIAS_MAP = new Map([
   ['pcss', 'css'],
   ['postcss', 'css'],
+  ['sugarss', 'css'],
   ['sass', 'scss'],
   ['styl', 'stylus'],
   ['js', 'javascript'],

Diff for: test/transformers/postcss.test.ts

@@ -6,7 +6,7 @@ import { resolve } from 'path';
 import sveltePreprocess from '../../src';
 import { preprocess, spyConsole } from '../utils';
 
-spyConsole();
+spyConsole({ silent: true });
 
 describe('transformer - postcss', () => {
   it('should not transform plain css with postcss if { postcss: falsy }', async () => {
@@ -106,8 +106,33 @@ div
 
     const preprocessed = await preprocess(template, opts);
 
-    expect(preprocessed.toString()).toContain(`div {
-  color: red
-}`);
+    expect(preprocessed.toString()).toMatchInlineSnapshot(`
+      "<style>
+      div {
+        color: red
+      }</style>"
+    `);
+  });
+
+  it('should support lang=sugarss without automatic indentation removal', async () => {
+    const template = `<style lang="sugarss">
+      div
+        color: red
+    </style>`;
+
+    const opts = sveltePreprocess({
+      postcss: {
+        plugins: [],
+      },
+    });
+
+    const preprocessed = await preprocess(template, opts);
+
+    expect(preprocessed.toString()).toMatchInlineSnapshot(`
+      "<style lang=\\"sugarss\\">
+      div {
+        color: red
+      }</style>"
+    `);
   });
 });