Support Sass indented syntax (#68)

Author: judehunter

src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap

@@ -17,6 +17,16 @@ export default classes;
 
 exports[`utils / cssSnapshots with file 'empty.module.less' getClasses should return an object matching expected CSS 1`] = `Object {}`;
 
+exports[`utils / cssSnapshots with file 'empty.module.sass' createExports should create an exports file 1`] = `
+"declare const classes: {
+
+};
+export default classes;
+"
+`;
+
+exports[`utils / cssSnapshots with file 'empty.module.sass' getClasses should return an object matching expected CSS 1`] = `Object {}`;
+
 exports[`utils / cssSnapshots with file 'empty.module.scss' createExports should create an exports file 1`] = `
 "declare const classes: {
 
@@ -159,6 +169,58 @@ Object {
 }
 `;
 
+exports[`utils / cssSnapshots with file 'test.module.sass' createExports should create an exports file 1`] = `
+"declare const classes: {
+'local-class-inside-global': string;
+  'local-class': string;
+  'local-class-2': string;
+  'local-class-inside-local': string;
+  'reserved-words': string;
+  'default': string;
+  'const': string;
+  'nested-class-parent': string;
+  'child-class': string;
+  'nested-class-parent--extended': string;
+  'section-1': string;
+  'section-2': string;
+  'section-3': string;
+  'section-4': string;
+  'section-5': string;
+  'section-6': string;
+  'section-7': string;
+  'section-8': string;
+  'section-9': string;
+  'class-with-mixin': string;
+};
+export default classes;
+"
+`;
+
+exports[`utils / cssSnapshots with file 'test.module.sass' getClasses should return an object matching expected CSS 1`] = `
+Object {
+  "child-class": "test-module__child-class---2vfhc",
+  "class-with-mixin": "test-module__class-with-mixin---3zUq-",
+  "const": "test-module__const---39o_j",
+  "default": "test-module__default---h-tcC",
+  "local-class": "test-module__local-class---1yStp",
+  "local-class-2": "test-module__local-class-2---3xCgt",
+  "local-class-inside-global": "test-module__local-class-inside-global---Mznd5",
+  "local-class-inside-local": "test-module__local-class-inside-local---1z2Qf",
+  "nested-class-parent": "test-module__nested-class-parent---3oyeq",
+  "nested-class-parent--extended": "test-module__nested-class-parent--extended---cjRbg",
+  "reserved-words": "test-module__reserved-words---3hGie",
+  "section-1": "test-module__section-1---2QkaE",
+  "section-2": "test-module__section-2---23KHs",
+  "section-3": "test-module__section-3---2BttW",
+  "section-4": "test-module__section-4---1TrSo",
+  "section-5": "test-module__section-5---1PIYZ",
+  "section-6": "test-module__section-6---tbEch",
+  "section-7": "test-module__section-7---i7uWX",
+  "section-8": "test-module__section-8---1jfNT",
+  "section-9": "test-module__section-9---1akFT",
+}
+`;
+
 exports[`utils / cssSnapshots with file 'test.module.scss' createExports should create an exports file 1`] = `
 "declare const classes: {
 'local-class-inside-global': string;

src/helpers/__tests__/fixtures/empty.module.sass

@@ -0,0 +1,51 @@
+:global .global-class 
+  color: rebeccapurple
+
+
+:global(.global-class-2) 
+  .local-class-inside-global
+    color: rebeccapurple
+  
+
+
+:local .local-class 
+  color: rebeccapurple
+
+
+:local(.local-class-2)
+  .local-class-inside-local
+    color: rebeccapurple
+  
+
+
+.reserved-words
+  .default
+    color: rebeccapurple
+
+  .const
+    color: rebeccapurple
+
+
+.nested-class-parent
+  .child-class
+    color: rebeccapurple
+
+  &--extended
+    color: rebeccapurple
+
+
+
+$color: rebeccapurple !default
+
+@for $section from 1 to 10
+  .section-#{$section}
+    color: $color
+
+@import 'mixin'
+
+.class-with-mixin
+  @include set-margin(0)
+
+// .commented-parent-class {
+//   .commented-child-class
+// }

src/helpers/__tests__/fixtures/test.module.sass

@@ -13,7 +13,9 @@ const testFileNames = [
   'test.module.css',
   'test.module.less',
   'test.module.scss',
+  'test.module.sass',
   'empty.module.less',
+  'empty.module.sass',
   'empty.module.scss',
   'import.module.css',
   'import.module.less',

src/helpers/__tests__/getDtsSnapshot.test.ts

@@ -9,12 +9,14 @@ import { Options, CustomRenderer } from '../options';
 export const enum FileTypes {
   css = 'css',
   less = 'less',
+  sass = 'sass',
   scss = 'scss',
 }
 
 export const getFileType = (fileName: string) => {
   if (fileName.endsWith('.css')) return FileTypes.css;
   if (fileName.endsWith('.less')) return FileTypes.less;
+  if (fileName.endsWith('.sass')) return FileTypes.sass;
   return FileTypes.scss;
 };
 
@@ -50,13 +52,14 @@ export const getClasses = (
           transformedCss = output.css.toString();
         },
       );
-    } else if (fileType === FileTypes.scss) {
+    } else if (fileType === FileTypes.scss || fileType === FileTypes.sass) {
       const filePath = getFilePath(fileName);
       const { includePaths, ...sassOptions } = rendererOptions.sass || {};
 
       transformedCss = sass
         .renderSync({
           data: css,
+          indentedSyntax: fileType === FileTypes.sass,
           includePaths: [filePath, 'node_modules', ...(includePaths || [])],
           ...sassOptions,
         })