fix: 🐛 postcss config file support for sugarss

docs/getting-started.md

@@ -24,12 +24,13 @@ $ cd my-svelte-app
 $ npm install -D svelte-preprocess
 ```
 
-`svelte-preprocess` doesn't have any language specific dependency, so it's up to us to install the rest of tools we are going to use:
+`svelte-preprocess` doesn't have any language-specific dependency, so it's up to us to install the rest of tools we are going to use:
 
 - Babel: `npm install -D @babel/core @babel/preset-...`
 - CoffeeScript: `npm install -D coffeescript`
 - TypeScript: `npm install -D typescript`
 - PostCSS: `npm install -D postcss postcss-load-config`
+- SugarSS: `npm install -D postcss sugarss`
 - Less: `npm install -D less`
 - Sass: `npm install -D node-sass` or `npm install -D sass`
 - Pug: `npm install -D pug`

src/transformers/postcss.ts

@@ -2,13 +2,17 @@ import postcss from 'postcss';
 
 import { Transformer, Options } from '../types';
 
-const process = async (
-  { plugins, parser, syntax }: Options.Postcss,
-  content: string,
-  filename: string,
-  sourceMap: string | object,
-  // eslint-disable-next-line max-params
-) => {
+async function process({
+  options: { plugins = [], parser, syntax } = {},
+  content,
+  filename,
+  sourceMap,
+}: {
+  options: Options.Postcss;
+  content: string;
+  filename: string;
+  sourceMap: string | object;
+}) {
   const { css, map, messages } = await postcss(plugins).process(content, {
     from: filename,
     map: { prev: sourceMap },
@@ -25,50 +29,54 @@ const process = async (
   }, []);
 
   return { code: css, map, dependencies };
-};
-
-/** Adapted from https://github.com/TehShrike/svelte-preprocess-postcss */
-const transformer: Transformer<Options.Postcss> = async ({
-  content,
-  filename,
-  options,
-  map,
-}) => {
-  if (options && Array.isArray(options.plugins)) {
-    return process(options, content, filename, map);
-  }
+}
 
+async function getConfigFromFile(
+  options: Options.Postcss,
+): Promise<Options.Postcss | null> {
   try {
     /** If not, look for a postcss config file */
     const { default: postcssLoadConfig } = await import(`postcss-load-config`);
     const loadedConfig = await postcssLoadConfig(
       options,
-      options ? options.configFilePath : undefined,
+      options?.configFilePath,
     );
 
-    options = {
+    return {
       plugins: loadedConfig.plugins,
       // `postcss-load-config` puts all other props in a `options` object
       ...loadedConfig.options,
     };
   } catch (e) {
-    /** Something went wrong, do nothing */
-    // istanbul ignore next
-    if (
-      e.code === 'MODULE_NOT_FOUND' &&
-      e.message.includes(`Cannot find module 'postcss-load-config'`)
-    ) {
-      console.error(
-        `[svelte-preprocess] PostCSS configuration was not passed. If you expect to load it from a file make sure to install "postcss-load-config" and try again.`,
-      );
-    } else {
-      console.error(e);
-    }
+    return null;
+  }
+}
 
-    return { code: content, map, dependencies: [] as any[] };
+/** Adapted from https://github.com/TehShrike/svelte-preprocess-postcss */
+const transformer: Transformer<Options.Postcss> = async ({
+  content,
+  filename,
+  options = {},
+  map,
+}) => {
+  let fileConfig: Options.Postcss;
+
+  if (!options.plugins) {
+    fileConfig = await getConfigFromFile(options);
+    options = { ...options, ...fileConfig };
+  }
+
+  if (options.plugins || options.syntax || options.parser) {
+    return process({ options, content, filename, sourceMap: map });
+  }
+
+  if (fileConfig === null) {
+    console.error(
+      `[svelte-preprocess] PostCSS configuration was not passed. If you expect to load it from a file make sure to install "postcss-load-config" and try again.`,
+    );
   }
 
-  return process(options, content, filename, map);
+  return { code: content, map, dependencies: [] as any[] };
 };
 
 export { transformer };

test/processors/postcss.test.ts

@@ -1,7 +1,7 @@
 import { postcss } from '../../src';
 import { CSS_PATTERN, preprocess, spyConsole } from '../utils';
 
-spyConsole();
+spyConsole({ silent: true });
 
 describe(`processor - postcss`, () => {
   it('should support external src files', async () => {

test/transformers/postcss.test.ts

@@ -114,16 +114,14 @@ div
     `);
   });
 
-  it('should support lang=sugarss without automatic indentation removal', async () => {
+  it('automatically removes indentation for lang=sugarss ', async () => {
     const template = `<style lang="sugarss">
       div
         color: red
     </style>`;
 
     const opts = sveltePreprocess({
-      postcss: {
-        plugins: [],
-      },
+      postcss: true,
     });
 
     const preprocessed = await preprocess(template, opts);

test/transformers/typescript.test.ts

@@ -6,7 +6,7 @@ import sveltePreprocess from '../../src';
 import { Processed } from '../../src/types';
 import { preprocess, getFixtureContent, spyConsole } from '../utils';
 
-spyConsole();
+spyConsole({ silent: true });
 
 const EXPECTED_SCRIPT = getFixtureContent('script.js');