Skip to content

Commit d68f725

Browse files
valerybugakovvalerybugakov
authored
feat: autoformat modified code with prettier-eslint and stylelint (#22)
1 parent 2297092 commit d68f725

File tree

15 files changed

+1031
-86
lines changed

15 files changed

+1031
-86
lines changed

‎.eslintrc.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
"parserOptions": {
44
"project": "tsconfig.json"
55
},
6+
"settings": {
7+
"react": {
8+
"version": "*"
9+
}
10+
},
611
"rules": {
712
"no-sync": "off"
813
}

‎.stylelintrc.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["@sourcegraph/stylelint-config"]
3+
}

‎package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@
4040
"postcss-nested": "^5.0.6",
4141
"postcss-scss": "^4.0.0",
4242
"postcss-selector-parser": "^6.0.6",
43+
"prettier-eslint": "^13.0.0",
44+
"stylelint": "^13.13.1",
4345
"ts-morph": "^11.0.3",
4446
"ts-node": "^10.1.0",
4547
"typescript": "^4.3.5"
@@ -52,10 +54,13 @@
5254
"@commitlint/config-conventional": "^13.1.0",
5355
"@sourcegraph/eslint-config": "^0.25.1",
5456
"@sourcegraph/prettierrc": "^3.0.3",
57+
"@sourcegraph/stylelint-config": "^1.3.0",
5558
"@sourcegraph/tsconfig": "^4.0.1",
5659
"@types/css-modules-loader-core": "1.1.0",
60+
"@types/eslint": "^7.28.0",
5761
"@types/jest": "27.0.1",
5862
"@types/node": "16.4.1",
63+
"@types/stylelint": "^13.13.2",
5964
"eslint": "^7.32.0",
6065
"husky": "^7.0.1",
6166
"jest": "^27.0.6",

‎src/transforms/globalCssToCssModule/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@ echo "Hello world"
1010

1111
## TODO
1212

13-
[] Handle @import statements in SCSS
14-
[] Run code formatters on the updated files
15-
[] Add interactive CLI support
13+
- [x] Run code formatters on the updated files
14+
- [] Handle @import statements in SCSS
15+
- [] Add interactive CLI support

‎src/transforms/globalCssToCssModule/__tests__/__snapshots__/globalCssToCssModule.test.ts.snap‎

Lines changed: 58 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -3,43 +3,43 @@
33
exports[`globalCssToCssModule transforms correctly 1`] = `
44
"@import './RepositoriesPopover';
55
6-
/* Woah!*/
6+
/* Woah! */
77
.kek {
88
color: red;
99
10-
/* nah*/
10+
/* nah */
1111
&--wow {
1212
color: blue;
1313
}
1414
}
1515
16-
/* Let's see how you handle global top-level classes!*/
16+
/* Let's see how you handle global top-level classes! */
1717
:global(.theme-light) .kek {
1818
color: red;
1919
}
2020
21-
/* .repo-header {*/
21+
/* .repo-header { */
2222
.repo-header {
2323
flex: none;
2424
padding: 0;
2525
align-items: stretch;
2626
border-color: var(--border-color);
2727
border-style: solid;
2828
29-
/* &--alert {*/
29+
/* &--alert { */
3030
&--alert {
3131
border-width: 1px 0;
3232
}
3333
34-
/* .navbar-nav {*/
34+
/* .navbar-nav { */
3535
:global(.navbar-nav) {
3636
white-space: nowrap;
3737
3838
:global(.nav-item) {
3939
display: flex;
4040
align-items: stretch;
4141
42-
/* .nav-link {*/
42+
/* .nav-link { */
4343
:global(.nav-link) {
4444
user-select: none;
4545
}
@@ -57,87 +57,88 @@ exports[`globalCssToCssModule transforms correctly 1`] = `
5757
}
5858
}
5959
.spacer {
60-
flex: 1 1 0;
61-
}
60+
flex: 1 1 0;
61+
}
6262
63-
/* &__icon-chevron {*/
63+
/* &__icon-chevron { */
6464
.icon-chevron {
65-
opacity: 0.6;
66-
margin: auto;
67-
}
65+
opacity: 0.6;
66+
margin: auto;
67+
}
6868
.alert {
69-
margin: 0 0.25rem;
70-
padding: 0.125rem 0.25rem;
71-
cursor: default;
72-
user-select: none;
73-
}
69+
margin: 0 0.25rem;
70+
padding: 0.125rem 0.25rem;
71+
cursor: default;
72+
user-select: none;
73+
}
7474
75-
/* &__action {*/
75+
/* &__action { */
7676
.action {
77-
margin: 0.5rem 0.625rem 0.5rem 0;
78-
padding: 0.25rem;
77+
margin: 0.5rem 0.625rem 0.5rem 0;
78+
padding: 0.25rem;
7979
80-
:global(.theme-light) & {
81-
margin-top: 0;
82-
margin-bottom: 0;
83-
}
80+
:global(.theme-light) & {
81+
margin-top: 0;
82+
margin-bottom: 0;
8483
}
84+
}
8585
86-
/* &__file-action {*/
86+
/* &__file-action { */
8787
.file-action {
88-
display: block;
89-
text-align: left;
88+
display: block;
89+
text-align: left;
9090
91-
/* span {*/
92-
span {
93-
color: var(--body-color);
94-
margin-left: 0.5rem;
95-
}
91+
/* span { */
92+
span {
93+
color: var(--body-color);
94+
margin-left: 0.5rem;
9695
}
96+
}
9797
98-
/* &__action-list-item {*/
98+
/* &__action-list-item { */
9999
.action-list-item {
100-
/* Have a small gap between buttons so they are visually distinct when pressed*/
101-
/* stylelint-disable-next-line declaration-property-unit-whitelist*/
102-
margin-left: 1px;
103-
104-
/* &:hover {*/
105-
&:hover {
106-
/* background: var(--color-bg-1);*/
107-
background: var(--color-bg-1);
108-
109-
/* .theme-light & {*/
110-
:global(.theme-light) & {
111-
background: inherit;
112-
}
100+
/* Have a small gap between buttons so they are visually distinct when pressed */
101+
/* stylelint-disable-next-line declaration-property-unit-whitelist */
102+
margin-left: 1px;
103+
104+
/* &:hover { */
105+
&:hover {
106+
/* background: var(--color-bg-1); */
107+
background: var(--color-bg-1);
108+
109+
/* .theme-light & { */
110+
:global(.theme-light) & {
111+
background: inherit;
113112
}
114113
}
114+
}
115115
116-
/* &__kek-pek {*/
116+
/* &__kek-pek { */
117117
.kek-pek {
118-
color: red;
119-
}
118+
color: red;
119+
}
120120
"
121121
`;
122122
123123
exports[`globalCssToCssModule transforms correctly 2`] = `
124-
"import React from 'react'
125-
import classNames from \\"classnames\\";
126-
import styles from \\"./Kek.module.scss\\";
124+
"import classNames from 'classnames'
125+
import React from 'react'
126+
127+
import styles from './Kek.module.scss'
127128
128129
export const Kek = () => {
129130
const isActive = true
130131
131132
return (
132-
<div className={classNames(\\"d-flex m-1\\", styles.kek, styles.kekWow)}>
133+
<div className={classNames('d-flex m-1', styles.kek, styles.kekWow)}>
133134
<div
134135
className={classNames('m-1', true ? styles.kek : false, 'd-flex', {
135136
[styles.kek]: false,
136-
[classNames(\\"d-flex mr-1\\", styles.kek)]: isActive,
137+
[classNames('d-flex mr-1', styles.kek)]: isActive,
137138
})}
138-
></div>
139+
/>
139140
It's a component<p className={styles.kekWow}>wow</p>
140-
<div className={classNames(\\"m-2 d-flex m-1\\", styles.repoHeader)}>Another one!</div>
141+
<div className={classNames('m-2 d-flex m-1', styles.repoHeader)}>Another one!</div>
141142
</div>
142143
)
143144
}

‎src/transforms/globalCssToCssModule/__tests__/fixtures/.eslintrc.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const path = require('path')
2+
3+
module.exports = {
4+
"extends": "../../../../../.eslintrc.json",
5+
"parserOptions": {
6+
"project": path.resolve(__dirname, "./tsconfig.test.json"),
7+
},
8+
}

‎src/transforms/globalCssToCssModule/__tests__/fixtures/tsconfig.test.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"extends": "../../../../../tsconfig.json",
3+
"include": ["./*"],
4+
"exclude": []
5+
}

‎src/transforms/globalCssToCssModule/__tests__/globalCssToCssModule.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,5 @@ describe('globalCssToCssModule', () => {
1414

1515
expect(transformResult.css.source).toMatchSnapshot()
1616
expect(transformResult.ts.source).toMatchSnapshot()
17-
})
17+
}, 15000) // Timeout of 15s (default is 5s). `prettier-eslint` format is slow 😬.
1818
})

‎src/transforms/globalCssToCssModule/globalCssToCssModule.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import path from 'path'
33

44
import { Project } from 'ts-morph'
55

6-
import { isDefined } from '../../utils'
6+
import { formatWithPrettierEslint, formatWithStylelint, isDefined } from '../../utils'
77

88
import { getCssModuleExportNameMap } from './postcss/getCssModuleExportNameMap'
99
import { transformFileToCssModule } from './postcss/transformFileToCssModule'
@@ -71,11 +71,11 @@ export async function globalCssToCssModule(options: GlobalCssToCssModuleOptions)
7171
const parsedTsFilePath = path.parse(tsFilePath)
7272

7373
const sourceCss = readFileSync(cssFilePath, 'utf8')
74+
const exportNameMap = await getCssModuleExportNameMap(sourceCss)
7475
const { css: cssModuleSource, filePath: cssModuleFileName } = await transformFileToCssModule({
7576
sourceCss,
7677
sourceFilePath: cssFilePath,
7778
})
78-
const exportNameMap = await getCssModuleExportNameMap(cssModuleSource)
7979

8080
processNodesWithClassName({
8181
exportNameMap,
@@ -88,6 +88,9 @@ export async function globalCssToCssModule(options: GlobalCssToCssModuleOptions)
8888
moduleSpecifier: `./${path.parse(cssModuleFileName).base}`,
8989
})
9090

91+
formatWithPrettierEslint(tsSourceFile)
92+
const formattedCssModuleSource = await formatWithStylelint(cssModuleSource, cssFilePath)
93+
9194
/**
9295
* If `shouldWriteFiles` is true:
9396
*
@@ -98,15 +101,15 @@ export async function globalCssToCssModule(options: GlobalCssToCssModuleOptions)
98101
const fsWritePromise = shouldWriteFiles
99102
? Promise.all([
100103
tsSourceFile.save(),
101-
fsPromises.writeFile(cssModuleFileName, cssModuleSource, { encoding: 'utf-8' }),
104+
fsPromises.writeFile(cssModuleFileName, formattedCssModuleSource, { encoding: 'utf-8' }),
102105
fsPromises.rm(cssFilePath),
103106
])
104107
: undefined
105108

106109
return {
107110
fsWritePromise,
108111
css: {
109-
source: cssModuleSource,
112+
source: formattedCssModuleSource,
110113
path: path.resolve(parsedTsFilePath.dir, cssModuleFileName),
111114
},
112115
ts: {

0 commit comments

Comments
 (0)