Skip to content

Fix resolution of Sass imports #31

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 2 commits into from
Jul 14, 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
22 changes: 11 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,27 +47,27 @@
"trailingComma": "all"
},
"dependencies": {
"icss-utils": "^4.1.0",
"icss-utils": "^4.1.1",
"less": "^3.9.0",
"lodash": "^4.17.11",
"postcss": "^7.0.16",
"lodash": "^4.17.14",
"postcss": "^7.0.17",
"postcss-icss-selectors": "^2.0.3",
"reserved-words": "^0.1.2",
"sass": "^1.20.1"
"sass": "^1.22.4"
},
"devDependencies": {
"@types/jest": "^24.0.13",
"@types/jest": "^24.0.15",
"@types/less": "^3.0.0",
"@types/lodash": "^4.14.132",
"@types/lodash": "^4.14.136",
"@types/node": "^10.0.0",
"@types/sass": "^1.16.0",
"husky": "^2.3.0",
"husky": "^2.7.0",
"jest": "^24.8.0",
"prettier": "^1.17.1",
"pretty-quick": "^1.11.0",
"prettier": "^1.18.2",
"pretty-quick": "^1.11.1",
"ts-jest": "^24.0.2",
"tslint": "^5.16.0",
"typescript": "^3.4.5"
"tslint": "^5.18.0",
"typescript": "^3.5.3"
},
"peerDependencies": {
"typescript": "^3.0.0"
Expand Down
2 changes: 2 additions & 0 deletions src/helpers/__tests__/__snapshots__/cssSnapshots.test.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ exports[`utils / cssSnapshots with file 'test.module.scss' createExports should
'section-7': string;
'section-8': string;
'section-9': string;
'class-with-mixin': string;
};
export default classes;
"
Expand All @@ -115,6 +116,7 @@ export default classes;
exports[`utils / cssSnapshots with file 'test.module.scss' getClasses should return an object matching expected CSS 1`] = `
Object {
"child-class": "file__child-class---1QWYM",
"class-with-mixin": "file__class-with-mixin---39EVY",
"const": "file__const---MIe_0",
"default": "file__default---2RWlj",
"local-class": "file__local-class---3SW3k",
Expand Down
9 changes: 3 additions & 6 deletions src/helpers/__tests__/cssSnapshots.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,11 @@ const testFileNames = [
describe('utils / cssSnapshots', () => {
testFileNames.forEach((fileName) => {
let classes: IICSSExports;
const fileType = getFileType(fileName);
const testFile = readFileSync(
join(__dirname, 'fixtures', fileName),
'utf8',
);
const fullFileName = join(__dirname, 'fixtures', fileName);
const testFile = readFileSync(fullFileName, 'utf8');

beforeAll(() => {
classes = getClasses(testFile, fileType);
classes = getClasses(testFile, fullFileName);
});

describe(`with file '${fileName}'`, () => {
Expand Down
3 changes: 3 additions & 0 deletions src/helpers/__tests__/fixtures/_mixin.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@mixin set-margin($arg) {
margin: $arg;
}
2 changes: 1 addition & 1 deletion src/helpers/__tests__/fixtures/test.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
}

.class_d {
@mixin thisBreaksSass;
@mixin postcss-mixin;
color: rebeccapurple;
}

Expand Down
6 changes: 6 additions & 0 deletions src/helpers/__tests__/fixtures/test.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,12 @@ $color: rebeccapurple !default;
}
}

@import 'mixin';

.class-with-mixin {
@include set-margin(0);
}

// .commented-parent-class {
// .commented-child-class
// }
Expand Down
32 changes: 20 additions & 12 deletions src/helpers/cssSnapshots.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,28 +21,37 @@ const flattenClassNames = (
) => previousValue.concat(currentValue);

export const enum FileTypes {
scss = 'scss',
less = 'less',
css = 'css',
less = 'less',
scss = 'scss',
}

export const getFileType = (fileName: string) =>
fileName.endsWith('.css')
? FileTypes.css
: fileName.endsWith('.less')
? FileTypes.less
: FileTypes.scss;
export const getFileType = (fileName: string) => {
if (fileName.endsWith('.css')) return FileTypes.css;
if (fileName.endsWith('.less')) return FileTypes.less;
return FileTypes.scss;
};

const getFilePath = (fileName: string) =>
fileName.substring(0, fileName.lastIndexOf('/'));

export const getClasses = (css: string, fileType: FileTypes) => {
export const getClasses = (css: string, fileName: string) => {
try {
const fileType = getFileType(fileName);
let transformedCss = '';

if (fileType === FileTypes.less) {
less.render(css, { asyncImport: true } as any, (err, output) => {
transformedCss = output.css.toString();
});
} else if (fileType === FileTypes.scss) {
transformedCss = sass.renderSync({ data: css }).css.toString();
const filePath = getFilePath(fileName);
transformedCss = sass
.renderSync({
data: css,
includePaths: [filePath],
})
.css.toString();
} else {
transformedCss = css;
}
Expand Down Expand Up @@ -88,8 +97,7 @@ export const getDtsSnapshot = (
options: Options,
) => {
const css = scriptSnapshot.getText(0, scriptSnapshot.getLength());
const fileType = getFileType(fileName);
const classes = getClasses(css, fileType);
const classes = getClasses(css, fileName);
const dts = createExports(classes, options);
return ts.ScriptSnapshot.fromString(dts);
};
Loading