Skip to content

Add Sass support #68

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Dec 15, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 62 additions & 0 deletions src/helpers/__tests__/__snapshots__/getDtsSnapshot.test.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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: {

Expand Down Expand Up @@ -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;
Expand Down
Empty file.
51 changes: 51 additions & 0 deletions src/helpers/__tests__/fixtures/test.module.sass
Original file line number Diff line number Diff line change
@@ -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
// }
2 changes: 2 additions & 0 deletions src/helpers/__tests__/getDtsSnapshot.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
5 changes: 4 additions & 1 deletion src/helpers/getClasses.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};

Expand Down Expand Up @@ -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,
})
Expand Down