Skip to content

Commit 3b3260f

Browse files
k-g-amrmckeb
k-g-a
authored and
mrmckeb
committed
Add relative import support (#50)
Resolves #47, #48.
1 parent 8698439 commit 3b3260f

File tree

8 files changed

+165
-52
lines changed

8 files changed

+165
-52
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"@types/sass": "^1.16.0",
6565
"husky": "^2.7.0",
6666
"jest": "^24.8.0",
67+
"postcss-import-sync2": "^1.1.0",
6768
"prettier": "^1.18.2",
6869
"pretty-quick": "^1.11.1",
6970
"ts-jest": "^24.0.2",

‎src/@types/postcss-import-sync2.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare module 'postcss-import-sync2' {
2+
import { Plugin } from 'postcss';
3+
const plugin: Plugin<{}>;
4+
export = plugin;
5+
}

‎src/helpers/DtsSnapshotCreator.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,13 @@ export class DtsSnapshotCreator {
4343
let transformedCss = '';
4444

4545
if (fileType === FileTypes.less) {
46-
less.render(css, { asyncImport: true } as any, (err, output) => {
47-
transformedCss = output.css.toString();
48-
});
46+
less.render(
47+
css,
48+
{ syncImport: true, filename: fileName } as any,
49+
(err, output) => {
50+
transformedCss = output.css.toString();
51+
},
52+
);
4953
} else if (fileType === FileTypes.scss) {
5054
const filePath = getFilePath(fileName);
5155
transformedCss = sass
@@ -58,7 +62,9 @@ export class DtsSnapshotCreator {
5862
transformedCss = css;
5963
}
6064

61-
const processedCss = processor.process(transformedCss);
65+
const processedCss = processor.process(transformedCss, {
66+
from: fileName,
67+
});
6268

6369
return processedCss.root
6470
? extractICSS(processedCss.root).icssExports

‎src/helpers/__tests__/DtsSnapshotCreator.test.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { IICSSExports } from 'icss-utils';
33
import { join } from 'path';
44
import * as postcss from 'postcss';
55
import * as postcssIcssSelectors from 'postcss-icss-selectors';
6+
import * as postcssImportSync from 'postcss-import-sync2';
67
import { DtsSnapshotCreator } from '../DtsSnapshotCreator';
78

89
const testFileNames = [
@@ -11,9 +12,14 @@ const testFileNames = [
1112
'test.module.scss',
1213
'empty.module.less',
1314
'empty.module.scss',
15+
'import.module.css',
16+
'import.module.less',
1417
];
1518

16-
const processor = postcss([postcssIcssSelectors({ mode: 'local' })]);
19+
const processor = postcss([
20+
postcssImportSync(),
21+
postcssIcssSelectors({ mode: 'local' }),
22+
]);
1723

1824
describe('utils / cssSnapshots', () => {
1925
testFileNames.forEach((fileName) => {

‎src/helpers/__tests__/__snapshots__/DtsSnapshotCreator.test.ts.snap‎

Lines changed: 104 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,72 @@ export default classes;
2020

2121
exports[`utils / cssSnapshots with file 'empty.module.scss' getClasses should return an object matching expected CSS 1`] = `Object {}`;
2222

23+
exports[`utils / cssSnapshots with file 'import.module.css' createExports should create an exports file 1`] = `
24+
"declare const classes: {
25+
'classA': string;
26+
'ClassB': string;
27+
'class-c': string;
28+
'class_d': string;
29+
'parent': string;
30+
'childA': string;
31+
'childB': string;
32+
'nestedChild': string;
33+
};
34+
export default classes;
35+
export const classA: string;
36+
export const ClassB: string;
37+
export const parent: string;
38+
export const childA: string;
39+
export const childB: string;
40+
export const nestedChild: string;
41+
"
42+
`;
43+
44+
exports[`utils / cssSnapshots with file 'import.module.css' getClasses should return an object matching expected CSS 1`] = `
45+
Object {
46+
"ClassB": "import-module__ClassB---2LsIz",
47+
"childA": "import-module__childA---2AUKk",
48+
"childB": "import-module__childB---1z-Zh",
49+
"class-c": "import-module__class-c---2JDAJ",
50+
"classA": "import-module__classA---2fO5r",
51+
"class_d": "import-module__class_d---2Dims",
52+
"nestedChild": "import-module__nestedChild---1ZDxw",
53+
"parent": "import-module__parent---2kdvO",
54+
}
55+
`;
56+
57+
exports[`utils / cssSnapshots with file 'import.module.less' createExports should create an exports file 1`] = `
58+
"declare const classes: {
59+
'nested-class-parent': string;
60+
'child-class': string;
61+
'selector-blue': string;
62+
'selector-green': string;
63+
'selector-red': string;
64+
'column-1': string;
65+
'column-2': string;
66+
'column-3': string;
67+
'column-4': string;
68+
'color-set': string;
69+
};
70+
export default classes;
71+
"
72+
`;
73+
74+
exports[`utils / cssSnapshots with file 'import.module.less' getClasses should return an object matching expected CSS 1`] = `
75+
Object {
76+
"child-class": "import-module__child-class---2XACw",
77+
"color-set": "import-module__color-set---9xoPb",
78+
"column-1": "import-module__column-1---3R-BM",
79+
"column-2": "import-module__column-2---J0ZdX",
80+
"column-3": "import-module__column-3---3_589",
81+
"column-4": "import-module__column-4---SlPDz",
82+
"nested-class-parent": "import-module__nested-class-parent---14g9m",
83+
"selector-blue": "import-module__selector-blue---2JSaB",
84+
"selector-green": "import-module__selector-green---1cLL8",
85+
"selector-red": "import-module__selector-red---2T6zy",
86+
}
87+
`;
88+
2389
exports[`utils / cssSnapshots with file 'test.module.css' createExports should create an exports file 1`] = `
2490
"declare const classes: {
2591
'classA': string;
@@ -43,14 +109,14 @@ export const nestedChild: string;
43109

44110
exports[`utils / cssSnapshots with file 'test.module.css' getClasses should return an object matching expected CSS 1`] = `
45111
Object {
46-
"ClassB": "file__ClassB---2bPVi",
47-
"childA": "file__childA---1hjQD",
48-
"childB": "file__childB---pq4Ks",
49-
"class-c": "file__class-c---DZ1TD",
50-
"classA": "file__classA---2xcnJ",
51-
"class_d": "file__class_d---1mwNi",
52-
"nestedChild": "file__nestedChild---2d15b",
53-
"parent": "file__parent---1ATMj",
112+
"ClassB": "test-module__ClassB---G7fhY",
113+
"childA": "test-module__childA---26dwC",
114+
"childB": "test-module__childB---13lLy",
115+
"class-c": "test-module__class-c---3Ouzp",
116+
"classA": "test-module__classA---KAOw8",
117+
"class_d": "test-module__class_d---3pjDe",
118+
"nestedChild": "test-module__nestedChild---v7rOR",
119+
"parent": "test-module__parent---2tsUX",
54120
}
55121
`;
56122

@@ -73,16 +139,16 @@ export default classes;
73139

74140
exports[`utils / cssSnapshots with file 'test.module.less' getClasses should return an object matching expected CSS 1`] = `
75141
Object {
76-
"child-class": "file__child-class---1mwoB",
77-
"color-set": "file__color-set---9sHH_",
78-
"column-1": "file__column-1---vHRb_",
79-
"column-2": "file__column-2---28y1r",
80-
"column-3": "file__column-3---1PsZw",
81-
"column-4": "file__column-4---2qaaI",
82-
"nested-class-parent": "file__nested-class-parent---_ft7G",
83-
"selector-blue": "file__selector-blue---3mslq",
84-
"selector-green": "file__selector-green---143xX",
85-
"selector-red": "file__selector-red---Gckob",
142+
"child-class": "test-module__child-class---1au0d",
143+
"color-set": "test-module__color-set---bEXmh",
144+
"column-1": "test-module__column-1---5hXb3",
145+
"column-2": "test-module__column-2---2ykNv",
146+
"column-3": "test-module__column-3---2JnAp",
147+
"column-4": "test-module__column-4---SG3xj",
148+
"nested-class-parent": "test-module__nested-class-parent---2jIpC",
149+
"selector-blue": "test-module__selector-blue---2kUKa",
150+
"selector-green": "test-module__selector-green---hMr6S",
151+
"selector-red": "test-module__selector-red---2hf4j",
86152
}
87153
`;
88154

@@ -115,25 +181,25 @@ export default classes;
115181

116182
exports[`utils / cssSnapshots with file 'test.module.scss' getClasses should return an object matching expected CSS 1`] = `
117183
Object {
118-
"child-class": "file__child-class---1QWYM",
119-
"class-with-mixin": "file__class-with-mixin---39EVY",
120-
"const": "file__const---MIe_0",
121-
"default": "file__default---2RWlj",
122-
"local-class": "file__local-class---3SW3k",
123-
"local-class-2": "file__local-class-2----c5z7",
124-
"local-class-inside-global": "file__local-class-inside-global---1T0um",
125-
"local-class-inside-local": "file__local-class-inside-local---1Z9pB",
126-
"nested-class-parent": "file__nested-class-parent---3qXdF",
127-
"nested-class-parent--extended": "file__nested-class-parent--extended---qsVau",
128-
"reserved-words": "file__reserved-words---_rrID",
129-
"section-1": "file__section-1---1IHCS",
130-
"section-2": "file__section-2---cLFhf",
131-
"section-3": "file__section-3---1ldKa",
132-
"section-4": "file__section-4---2u0CG",
133-
"section-5": "file__section-5---1lAYL",
134-
"section-6": "file__section-6---2YZ9I",
135-
"section-7": "file__section-7---3w-OF",
136-
"section-8": "file__section-8---3RB8g",
137-
"section-9": "file__section-9---3_Mtj",
184+
"child-class": "test-module__child-class---s-_Mc",
185+
"class-with-mixin": "test-module__class-with-mixin---1JqB_",
186+
"const": "test-module__const---28kKv",
187+
"default": "test-module__default---8gLb1",
188+
"local-class": "test-module__local-class---1Ju3l",
189+
"local-class-2": "test-module__local-class-2---3aSgy",
190+
"local-class-inside-global": "test-module__local-class-inside-global---IVh9J",
191+
"local-class-inside-local": "test-module__local-class-inside-local---1LKIi",
192+
"nested-class-parent": "test-module__nested-class-parent---2LnTV",
193+
"nested-class-parent--extended": "test-module__nested-class-parent--extended---1j85b",
194+
"reserved-words": "test-module__reserved-words---1mM1m",
195+
"section-1": "test-module__section-1---11Ic3",
196+
"section-2": "test-module__section-2---1Uiwc",
197+
"section-3": "test-module__section-3---2eZeM",
198+
"section-4": "test-module__section-4---3m8sf",
199+
"section-5": "test-module__section-5---1MTwN",
200+
"section-6": "test-module__section-6---szUAt",
201+
"section-7": "test-module__section-7---2DOBJ",
202+
"section-8": "test-module__section-8---3qav2",
203+
"section-9": "test-module__section-9---2EMR_",
138204
}
139205
`;

‎src/helpers/__tests__/fixtures/import.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import 'test.module.css';

‎src/helpers/__tests__/fixtures/import.module.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import 'test.module.less';

‎yarn.lock‎

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3138,6 +3138,11 @@ picomatch@^2.0.4:
31383138
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.0.7.tgz#514169d8c7cd0bdbeecc8a2609e34a7163de69f6"
31393139
integrity sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==
31403140

3141+
pify@^2.3.0:
3142+
version "2.3.0"
3143+
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
3144+
integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
3145+
31413146
pify@^3.0.0:
31423147
version "3.0.0"
31433148
resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
@@ -3197,6 +3202,16 @@ postcss-icss-selectors@^2.0.3:
31973202
lodash "^4.17.4"
31983203
postcss "^6.0.2"
31993204

3205+
postcss-import-sync2@^1.1.0:
3206+
version "1.1.0"
3207+
resolved "https://registry.yarnpkg.com/postcss-import-sync2/-/postcss-import-sync2-1.1.0.tgz#768fa23bc7e2248d0560553e42e75e38c841b2d6"
3208+
integrity sha512-wPjRneS2QUqd8eA2lDeZeQMAqk232aha42XFlEY4O3MMOoZ43VWH4npPt0F7GC7WT7oEIjuS2W7CyH8lgHczOw==
3209+
dependencies:
3210+
postcss "^7"
3211+
postcss-value-parser "^3.3.1"
3212+
read-cache "^1.0.0"
3213+
resolve "^1.8.1"
3214+
32003215
postcss-load-config@^2.1.0:
32013216
version "2.1.0"
32023217
resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.0.tgz#c84d692b7bb7b41ddced94ee62e8ab31b417b003"
@@ -3205,6 +3220,11 @@ postcss-load-config@^2.1.0:
32053220
cosmiconfig "^5.0.0"
32063221
import-cwd "^2.0.0"
32073222

3223+
postcss-value-parser@^3.3.1:
3224+
version "3.3.1"
3225+
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
3226+
integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
3227+
32083228
postcss@^6.0.2:
32093229
version "6.0.23"
32103230
resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
@@ -3214,19 +3234,19 @@ postcss@^6.0.2:
32143234
source-map "^0.6.1"
32153235
supports-color "^5.4.0"
32163236

3217-
postcss@^7.0.14:
3218-
version "7.0.17"
3219-
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
3220-
integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==
3237+
postcss@^7, postcss@^7.0.17:
3238+
version "7.0.18"
3239+
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.18.tgz#4b9cda95ae6c069c67a4d933029eddd4838ac233"
3240+
integrity sha512-/7g1QXXgegpF+9GJj4iN7ChGF40sYuGYJ8WZu8DZWnmhQ/G36hfdk3q9LBJmoK+lZ+yzZ5KYpOoxq7LF1BxE8g==
32213241
dependencies:
32223242
chalk "^2.4.2"
32233243
source-map "^0.6.1"
32243244
supports-color "^6.1.0"
32253245

3226-
postcss@^7.0.17:
3227-
version "7.0.18"
3228-
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.18.tgz#4b9cda95ae6c069c67a4d933029eddd4838ac233"
3229-
integrity sha512-/7g1QXXgegpF+9GJj4iN7ChGF40sYuGYJ8WZu8DZWnmhQ/G36hfdk3q9LBJmoK+lZ+yzZ5KYpOoxq7LF1BxE8g==
3246+
postcss@^7.0.14:
3247+
version "7.0.17"
3248+
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
3249+
integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==
32303250
dependencies:
32313251
chalk "^2.4.2"
32323252
source-map "^0.6.1"
@@ -3337,6 +3357,13 @@ react-is@^16.8.4:
33373357
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
33383358
integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
33393359

3360+
read-cache@^1.0.0:
3361+
version "1.0.0"
3362+
resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
3363+
integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=
3364+
dependencies:
3365+
pify "^2.3.0"
3366+
33403367
read-pkg-up@^4.0.0:
33413368
version "4.0.0"
33423369
resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978"
@@ -3519,7 +3546,7 @@ resolve@1.1.7:
35193546
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
35203547
integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
35213548

3522-
resolve@1.x, resolve@^1.3.2:
3549+
resolve@1.x, resolve@^1.3.2, resolve@^1.8.1:
35233550
version "1.12.0"
35243551
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
35253552
integrity sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==

0 commit comments

Comments
 (0)