Skip to content

Commit bafab60

Browse files
xiaoboostxiaoboost
authored
feat: add Stylus support (#91)
1 parent 961e475 commit bafab60

14 files changed

+308
-10
lines changed

‎README.md

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -198,10 +198,11 @@ The `classes` object represents all the classnames extracted from the CSS Module
198198

199199
#### `rendererOptions`
200200

201-
| Option | Default value | Description |
202-
| ------ | ------------- | ------------------------------------------------------------------------------------ |
203-
| `less` | `{}` | Set [renderer options for Less](http://lesscss.org/usage/#less-options). |
204-
| `sass` | `{}` | Set [renderer options for Sass](https://sass-lang.com/documentation/js-api#options). |
201+
| Option | Default value | Description |
202+
| -------- | ------------- | ------------------------------------------------------------------------------------ |
203+
| `less` | `{}` | Set [renderer options for Less](http://lesscss.org/usage/#less-options). |
204+
| `sass` | `{}` | Set [renderer options for Sass](https://sass-lang.com/documentation/js-api#options). |
205+
| `stylus` | `{}` | Set [renderer options for Stylus](https://stylus.bootcss.com/docs/js.html). |
205206

206207
> For convenience, `includePaths` for Sass are extended, not replaced. The defaults are the path of the current file, and `'node_modules'`.
207208
@@ -253,6 +254,11 @@ declare module '*.module.less' {
253254
const classes: { [key: string]: string };
254255
export default classes;
255256
}
257+
258+
declare module '*.module.styl' {
259+
const classes: { [key: string]: string };
260+
export default classes;
261+
}
256262
```
257263

258264
## Troubleshooting

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"scss",
1616
"sass",
1717
"less",
18+
"stylus",
1819
"modules",
1920
"plugin",
2021
"postcss",
@@ -73,7 +74,8 @@
7374
"postcss-icss-selectors": "^2.0.3",
7475
"postcss-load-config": "^2.1.0",
7576
"reserved-words": "^0.1.2",
76-
"sass": "^1.26.5"
77+
"sass": "^1.26.5",
78+
"stylus": "^0.54.7"
7779
},
7880
"devDependencies": {
7981
"@types/icss-utils": "^4.1.0",
@@ -85,6 +87,7 @@
8587
"@types/postcss-nested": "^4.1.0",
8688
"@types/reserved-words": "^0.1.0",
8789
"@types/sass": "^1.16.0",
90+
"@types/stylus": "^0.48.33",
8891
"@typescript-eslint/eslint-plugin": "^2.29.0",
8992
"@typescript-eslint/parser": "^2.29.0",
9093
"bootstrap": "4.4.1",

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

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,27 @@ export const __cssModule: true;
7272
export type AllClassNames = '';"
7373
`;
7474

75+
exports[`utils / cssSnapshots with file 'empty.module.styl' createExports should create an exports file 1`] = `
76+
"declare const classes: {
77+
78+
};
79+
export default classes;
80+
"
81+
`;
82+
83+
exports[`utils / cssSnapshots with file 'empty.module.styl' getClasses should return an object matching expected CSS 1`] = `Object {}`;
84+
85+
exports[`utils / cssSnapshots with file 'empty.module.styl' with a custom template should transform the generated dts 1`] = `
86+
"/* eslint-disable */
87+
declare const classes: {
88+
89+
};
90+
export default classes;
91+
92+
export const __cssModule: true;
93+
export type AllClassNames = '';"
94+
`;
95+
7596
exports[`utils / cssSnapshots with file 'import.module.css' createExports should create an exports file 1`] = `
7697
"declare const classes: {
7798
'classA': string;
@@ -182,6 +203,64 @@ export const __cssModule: true;
182203
export type AllClassNames = 'nested-class-parent' | 'child-class' | 'selector-blue' | 'selector-green' | 'selector-red' | 'column-1' | 'column-2' | 'column-3' | 'column-4' | 'color-set';"
183204
`;
184205

206+
exports[`utils / cssSnapshots with file 'import.module.styl' createExports should create an exports file 1`] = `
207+
"declare const classes: {
208+
'foo': string;
209+
'bar': string;
210+
'baz': string;
211+
'col-1': string;
212+
'col-2': string;
213+
'col-3': string;
214+
'local-class-1': string;
215+
'inside-local': string;
216+
'inside-1-name-2': string;
217+
'inside-2-name-1': string;
218+
};
219+
export default classes;
220+
export const foo: string;
221+
export const bar: string;
222+
export const baz: string;
223+
"
224+
`;
225+
226+
exports[`utils / cssSnapshots with file 'import.module.styl' getClasses should return an object matching expected CSS 1`] = `
227+
Object {
228+
"bar": "import-module__bar---2N4cR",
229+
"baz": "import-module__baz---6mQbB",
230+
"col-1": "import-module__col-1---2QW7j",
231+
"col-2": "import-module__col-2---2CRRS",
232+
"col-3": "import-module__col-3---17Luq",
233+
"foo": "import-module__foo---FJflO",
234+
"inside-1-name-2": "import-module__inside-1-name-2---wLnoq",
235+
"inside-2-name-1": "import-module__inside-2-name-1---1GRhn",
236+
"inside-local": "import-module__inside-local---1JuOc",
237+
"local-class-1": "import-module__local-class-1---3QupT",
238+
}
239+
`;
240+
241+
exports[`utils / cssSnapshots with file 'import.module.styl' with a custom template should transform the generated dts 1`] = `
242+
"/* eslint-disable */
243+
declare const classes: {
244+
'foo': string;
245+
'bar': string;
246+
'baz': string;
247+
'col-1': string;
248+
'col-2': string;
249+
'col-3': string;
250+
'local-class-1': string;
251+
'inside-local': string;
252+
'inside-1-name-2': string;
253+
'inside-2-name-1': string;
254+
};
255+
export default classes;
256+
export const foo: string;
257+
export const bar: string;
258+
export const baz: string;
259+
260+
export const __cssModule: true;
261+
export type AllClassNames = 'foo' | 'bar' | 'baz' | 'col-1' | 'col-2' | 'col-3' | 'local-class-1' | 'inside-local' | 'inside-1-name-2' | 'inside-2-name-1';"
262+
`;
263+
185264
exports[`utils / cssSnapshots with file 'test.module.css' createExports should create an exports file 1`] = `
186265
"declare const classes: {
187266
'classA': string;
@@ -456,9 +535,74 @@ export const __cssModule: true;
456535
export type AllClassNames = 'local-class-inside-global' | 'local-class' | 'local-class-2' | 'local-class-inside-local' | 'reserved-words' | 'default' | 'const' | 'nested-class-parent' | 'child-class' | 'nested-class-parent--extended' | 'section-1' | 'section-2' | 'section-3' | 'section-4' | 'section-5' | 'section-6' | 'section-7' | 'section-8' | 'section-9' | 'class-with-mixin';"
457536
`;
458537

538+
exports[`utils / cssSnapshots with file 'test.module.styl' createExports should create an exports file 1`] = `
539+
"declare const classes: {
540+
'foo': string;
541+
'bar': string;
542+
'baz': string;
543+
'col-1': string;
544+
'col-2': string;
545+
'col-3': string;
546+
'local-class-1': string;
547+
'inside-local': string;
548+
'inside-1-name-2': string;
549+
'inside-2-name-1': string;
550+
};
551+
export default classes;
552+
export const foo: string;
553+
export const bar: string;
554+
export const baz: string;
555+
"
556+
`;
557+
558+
exports[`utils / cssSnapshots with file 'test.module.styl' getClasses should return an object matching expected CSS 1`] = `
559+
Object {
560+
"bar": "test-module__bar---2WWom",
561+
"baz": "test-module__baz---1Rs9U",
562+
"col-1": "test-module__col-1---1XP3K",
563+
"col-2": "test-module__col-2---2nPwS",
564+
"col-3": "test-module__col-3---3CSSb",
565+
"foo": "test-module__foo---2pGaO",
566+
"inside-1-name-2": "test-module__inside-1-name-2---3Zdgw",
567+
"inside-2-name-1": "test-module__inside-2-name-1---3PYHl",
568+
"inside-local": "test-module__inside-local---2KzUE",
569+
"local-class-1": "test-module__local-class-1---3piX9",
570+
}
571+
`;
572+
573+
exports[`utils / cssSnapshots with file 'test.module.styl' with a custom template should transform the generated dts 1`] = `
574+
"/* eslint-disable */
575+
declare const classes: {
576+
'foo': string;
577+
'bar': string;
578+
'baz': string;
579+
'col-1': string;
580+
'col-2': string;
581+
'col-3': string;
582+
'local-class-1': string;
583+
'inside-local': string;
584+
'inside-1-name-2': string;
585+
'inside-2-name-1': string;
586+
};
587+
export default classes;
588+
export const foo: string;
589+
export const bar: string;
590+
export const baz: string;
591+
592+
export const __cssModule: true;
593+
export type AllClassNames = 'foo' | 'bar' | 'baz' | 'col-1' | 'col-2' | 'col-3' | 'local-class-1' | 'inside-local' | 'inside-1-name-2' | 'inside-2-name-1';"
594+
`;
595+
459596
exports[`utils / cssSnapshots with includePaths in sass options should find external file from includePaths 1`] = `
460597
Object {
461598
"big-font": "include-path-module__big-font---Td7hY",
462599
"class-with-mixin": "include-path-module__class-with-mixin---1u87_",
463600
}
464601
`;
602+
603+
exports[`utils / cssSnapshots with includePaths in stylus options should find external file from includePaths 1`] = `
604+
Object {
605+
"external-class": "include-path-module__external-class---ecH0A",
606+
"include-path": "include-path-module__include-path---2f2uR",
607+
}
608+
`;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,17 @@ describe('utils / cssExtensions', () => {
77
it('should match CSS module extensions', () => {
88
expect(isCSS('./myfile.module.scss')).toBe(true);
99
expect(isCSS('./myfile.module.sass')).toBe(true);
10+
expect(isCSS('./myfile.module.less')).toBe(true);
11+
expect(isCSS('./myfile.module.styl')).toBe(true);
1012
expect(isCSS('./myfile.module.css')).toBe(true);
1113
});
1214

1315
it('should not match non-CSS module extensions', () => {
1416
expect(isCSS('./myfile.module.s')).toBe(false);
1517
expect(isCSS('./myfile.scss')).toBe(false);
1618
expect(isCSS('./myfile.sass')).toBe(false);
19+
expect(isCSS('./myfile.less')).toBe(false);
20+
expect(isCSS('./myfile.styl')).toBe(false);
1721
expect(isCSS('./myfile.css')).toBe(false);
1822
});
1923
});

‎src/helpers/__tests__/external/package/_external.module.styl

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.include-path
2+
display inline
3+
4+
.external-class
5+
display inline

‎src/helpers/__tests__/fixtures/empty.module.styl

Whitespace-only changes.

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

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

‎src/helpers/__tests__/fixtures/include-path.module.styl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import 'package/_external.module.styl';

‎src/helpers/__tests__/fixtures/test.module.styl

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
mySelectors = '.foo,.bar,.baz'
2+
3+
{mySelectors}
4+
background: #000
5+
6+
for row in 1 2 3
7+
.col-{row}
8+
height: 10px * row
9+
10+
:local(.local-class-1)
11+
.inside-local
12+
color rebeccapurple
13+
14+
inside(name1, name2, indent, outside)
15+
.inside-1-{name1}
16+
outside(indent)
17+
18+
.inside-2-{name2}
19+
outside(indent)
20+
21+
inside('name-2', 'name-1', 24px, @(indent) {
22+
margin-left indent
23+
margin-right indent
24+
})

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,16 @@ import { Options } from '../../options';
1313
const testFileNames = [
1414
'test.module.css',
1515
'test.module.less',
16+
'test.module.styl',
1617
'test.module.scss',
1718
'test.module.sass',
1819
'empty.module.less',
1920
'empty.module.sass',
2021
'empty.module.scss',
22+
'empty.module.styl',
2123
'import.module.css',
2224
'import.module.less',
25+
'import.module.styl',
2326
];
2427

2528
const logger: Logger = {
@@ -157,4 +160,30 @@ describe('utils / cssSnapshots', () => {
157160
expect(classes).toMatchSnapshot();
158161
});
159162
});
163+
164+
describe('with includePaths in stylus options', () => {
165+
const fileName = join(__dirname, 'fixtures', 'include-path.module.styl');
166+
const css = readFileSync(fileName, 'utf8');
167+
168+
const options: Options = {
169+
rendererOptions: {
170+
stylus: {
171+
paths: [join(__dirname, 'external')],
172+
},
173+
},
174+
};
175+
176+
it('should find external file from includePaths', () => {
177+
const classes = getClasses({
178+
css,
179+
fileName,
180+
logger,
181+
options,
182+
processor,
183+
compilerOptions,
184+
});
185+
186+
expect(classes).toMatchSnapshot();
187+
});
188+
});
160189
});

0 commit comments

Comments
 (0)