@najemi-software/typed-scss-modules 10.8.0 → 10.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -30
- package/dist/core/list-different.js +1 -1
- package/dist/core/write-file.js +1 -1
- package/dist/implementations/compilers.js +2 -2
- package/dist/implementations/implementations.js +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/load.js +1 -1
- package/dist/main.js +1 -1
- package/dist/prettier/can-resolve.js +1 -1
- package/dist/prettier/index.js +11 -2
- package/dist/sass/file-to-class-names.js +2 -2
- package/dist/sass/importer.js +1 -3
- package/dist/typescript/class-names-to-type-definition.js +2 -5
- package/package.json +108 -109
package/README.md
CHANGED
|
@@ -14,11 +14,11 @@ For example, given the following SCSS:
|
|
|
14
14
|
@use "variables";
|
|
15
15
|
|
|
16
16
|
.text {
|
|
17
|
-
|
|
17
|
+
color: variables.$blue;
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
&-highlighted {
|
|
20
|
+
color: variables.$yellow;
|
|
21
|
+
}
|
|
22
22
|
}
|
|
23
23
|
```
|
|
24
24
|
|
|
@@ -129,8 +129,8 @@ This matches the common use-case for importing scss files from node_modules when
|
|
|
129
129
|
- **Type**: `"all" | "camel" | "kebab" | "param" | "snake" | "dashes" | "none"`
|
|
130
130
|
- **Default**: `"camel"`
|
|
131
131
|
- **Examples**:
|
|
132
|
-
|
|
133
|
-
|
|
132
|
+
- `typed-scss-modules src --nameFormat camel`
|
|
133
|
+
- `typed-scss-modules src --nameFormat kebab --nameFormat dashes --exportType default`. In order to use multiple formatters, you must use `--exportType default`.
|
|
134
134
|
|
|
135
135
|
The class naming format to use when converting the classes to type definitions.
|
|
136
136
|
|
|
@@ -164,11 +164,11 @@ Given the following SCSS:
|
|
|
164
164
|
|
|
165
165
|
```scss
|
|
166
166
|
.text {
|
|
167
|
-
|
|
167
|
+
color: blue;
|
|
168
168
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
169
|
+
&-highlighted {
|
|
170
|
+
color: yellow;
|
|
171
|
+
}
|
|
172
172
|
}
|
|
173
173
|
```
|
|
174
174
|
|
|
@@ -185,11 +185,11 @@ Given the following SCSS:
|
|
|
185
185
|
|
|
186
186
|
```scss
|
|
187
187
|
.text {
|
|
188
|
-
|
|
188
|
+
color: blue;
|
|
189
189
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
190
|
+
&-highlighted {
|
|
191
|
+
color: yellow;
|
|
192
|
+
}
|
|
193
193
|
}
|
|
194
194
|
```
|
|
195
195
|
|
|
@@ -197,8 +197,8 @@ The following type definitions will be generated:
|
|
|
197
197
|
|
|
198
198
|
```typescript
|
|
199
199
|
export type Styles = {
|
|
200
|
-
|
|
201
|
-
|
|
200
|
+
text: string;
|
|
201
|
+
textHighlighted: string;
|
|
202
202
|
};
|
|
203
203
|
|
|
204
204
|
export type ClassNames = keyof Styles;
|
|
@@ -234,7 +234,7 @@ Only default exports are affected by this command. This example will change the
|
|
|
234
234
|
|
|
235
235
|
```typescript
|
|
236
236
|
export type IStyles = {
|
|
237
|
-
|
|
237
|
+
// ...
|
|
238
238
|
};
|
|
239
239
|
```
|
|
240
240
|
|
|
@@ -291,7 +291,7 @@ Will prepend a string to the top of your output files
|
|
|
291
291
|
```typescript
|
|
292
292
|
// This is an example banner
|
|
293
293
|
export type Styles = {
|
|
294
|
-
|
|
294
|
+
// ...
|
|
295
295
|
};
|
|
296
296
|
```
|
|
297
297
|
|
|
@@ -309,9 +309,9 @@ It will use the relative path to the SCSS module from where this tool is execute
|
|
|
309
309
|
|
|
310
310
|
```json
|
|
311
311
|
{
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
312
|
+
"compilerOptions": {
|
|
313
|
+
"rootDirs": [".", "__generated__"]
|
|
314
|
+
}
|
|
315
315
|
}
|
|
316
316
|
```
|
|
317
317
|
|
|
@@ -335,19 +335,19 @@ The file can provide either a named `config` export or a default export.
|
|
|
335
335
|
```js
|
|
336
336
|
// Example of a named export with some of the options sets.
|
|
337
337
|
export const config = {
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
338
|
+
banner: "// customer banner",
|
|
339
|
+
exportType: "default",
|
|
340
|
+
exportTypeName: "TheClasses",
|
|
341
|
+
logLevel: "error",
|
|
342
342
|
};
|
|
343
343
|
|
|
344
344
|
// Example of a default export with some of the options sets.
|
|
345
345
|
export default {
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
346
|
+
banner: "// customer banner",
|
|
347
|
+
exportType: "default",
|
|
348
|
+
exportTypeName: "TheClasses",
|
|
349
|
+
logLevel: "error",
|
|
350
|
+
silenceDeprecations: ["import"],
|
|
351
351
|
};
|
|
352
352
|
```
|
|
353
353
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import fs from "fs";
|
|
2
2
|
import { fileToClassNames } from "../sass/file-to-class-names.js";
|
|
3
|
-
import { classNamesToTypeDefinitions, getTypeDefinitionPath
|
|
3
|
+
import { classNamesToTypeDefinitions, getTypeDefinitionPath } from "../typescript/index.js";
|
|
4
4
|
import { alerts } from "./alerts.js";
|
|
5
5
|
import { listFilesAndPerformSanityChecks } from "./list-files-and-perform-sanity-checks.js";
|
|
6
6
|
export const listDifferent = async (pattern, options) => {
|
package/dist/core/write-file.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import fs from "fs";
|
|
2
2
|
import path from "path";
|
|
3
3
|
import { fileToClassNames } from "../sass/file-to-class-names.js";
|
|
4
|
-
import { classNamesToTypeDefinitions, getTypeDefinitionPath
|
|
4
|
+
import { classNamesToTypeDefinitions, getTypeDefinitionPath } from "../typescript/index.js";
|
|
5
5
|
import { alerts } from "./alerts.js";
|
|
6
6
|
import { removeSCSSTypeDefinitionFile } from "./remove-file.js";
|
|
7
7
|
/**
|
|
@@ -16,7 +16,7 @@ process.on("SIGINT", async () => {
|
|
|
16
16
|
});
|
|
17
17
|
export const getSyncCompiler = ({ root, implementation, }) => {
|
|
18
18
|
/* When calling the compile functions multiple times, using a compiler instance with the sass-embedded npm package
|
|
19
|
-
|
|
19
|
+
is much faster than using the top-level compilation methods or the sass npm package */
|
|
20
20
|
const useCompilerInstance = implementation === "sass-embedded";
|
|
21
21
|
if (!useCompilerInstance) {
|
|
22
22
|
return root;
|
|
@@ -35,7 +35,7 @@ export const getSyncCompiler = ({ root, implementation, }) => {
|
|
|
35
35
|
*/
|
|
36
36
|
export const getAsyncCompiler = ({ root, implementation, }) => {
|
|
37
37
|
/* When calling the compile functions multiple times, using a compiler instance with the sass-embedded npm package
|
|
38
|
-
|
|
38
|
+
is much faster than using the top-level compilation methods or the sass npm package */
|
|
39
39
|
const useCompilerInstance = implementation === "sass-embedded";
|
|
40
40
|
if (!useCompilerInstance) {
|
|
41
41
|
return Promise.resolve(root);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import sass, { AsyncCompiler as SassAsyncCompiler, Compiler as SassCompiler
|
|
1
|
+
import sass, { AsyncCompiler as SassAsyncCompiler, Compiler as SassCompiler } from "sass";
|
|
2
2
|
import sassEmbedded, { AsyncCompiler as SassEmbeddedAsyncCompiler, Compiler as SassEmbeddedCompiler, } from "sass-embedded";
|
|
3
3
|
/**
|
|
4
4
|
* A list of all possible SASS package implementations that can be used to
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export type { ConfigOptions } from "./core/types.js";
|
|
2
|
-
export { IMPLEMENTATIONS, type Implementations
|
|
2
|
+
export { IMPLEMENTATIONS, type Implementations } from "./implementations/implementations.js";
|
|
3
3
|
export { main as default } from "./main.js";
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { IMPLEMENTATIONS
|
|
1
|
+
export { IMPLEMENTATIONS } from "./implementations/implementations.js";
|
|
2
2
|
export { main as default } from "./main.js";
|
package/dist/load.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import path from "path";
|
|
1
2
|
import { bundleRequire } from "bundle-require";
|
|
2
3
|
import JoyCon from "joycon";
|
|
3
|
-
import path from "path";
|
|
4
4
|
import { alerts } from "./core/alerts.js";
|
|
5
5
|
import {} from "./core/types.js";
|
|
6
6
|
import { getDefaultImplementation } from "./implementations/implementations.js";
|
package/dist/main.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import fs from "fs";
|
|
2
2
|
import path from "path";
|
|
3
3
|
import slash from "slash";
|
|
4
|
-
import { generate, listDifferent, setAlertsLogLevel, watch
|
|
4
|
+
import { generate, listDifferent, setAlertsLogLevel, watch } from "./core/index.js";
|
|
5
5
|
import { disposeAllCompilers } from "./implementations/compilers.js";
|
|
6
6
|
import { loadConfig, mergeOptions } from "./load.js";
|
|
7
7
|
export const main = async (pattern, cliOptions) => {
|
package/dist/prettier/index.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { format, resolveConfig } from "prettier";
|
|
2
1
|
import { alerts } from "../core/alerts.js";
|
|
3
2
|
import { canResolvePrettier } from "./can-resolve.js";
|
|
4
3
|
const isPrettier = (t) => !!t &&
|
|
@@ -19,7 +18,17 @@ export const attemptPrettier = async (file, input) => {
|
|
|
19
18
|
if (!canResolvePrettier()) {
|
|
20
19
|
return input;
|
|
21
20
|
}
|
|
22
|
-
|
|
21
|
+
// Non-literal specifier: resolved against the consuming project at
|
|
22
|
+
// runtime; must not become a compile-time dependency of this package.
|
|
23
|
+
const prettierSpecifier = "prettier";
|
|
24
|
+
let prettier;
|
|
25
|
+
try {
|
|
26
|
+
prettier = await import(prettierSpecifier);
|
|
27
|
+
}
|
|
28
|
+
catch (_error) {
|
|
29
|
+
// prettier is not installed in the consuming project
|
|
30
|
+
return input;
|
|
31
|
+
}
|
|
23
32
|
if (!isPrettier(prettier)) {
|
|
24
33
|
// doesn't look like prettier
|
|
25
34
|
return input;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { camelCase, camelCaseTransformMerge, paramCase, snakeCase
|
|
1
|
+
import { camelCase, camelCaseTransformMerge, paramCase, snakeCase } from "change-case";
|
|
2
2
|
import {} from "sass";
|
|
3
3
|
import { getAsyncCompiler, getImplementation, getSyncCompiler, } from "../implementations/index.js";
|
|
4
4
|
import { customImporters, } from "./importer.js";
|
|
5
5
|
import { sourceToClassNames } from "./source-to-class-names.js";
|
|
6
6
|
const transformersMap = {
|
|
7
7
|
camel: (className) => camelCase(className, { transform: camelCaseTransformMerge }),
|
|
8
|
-
dashes: (className) => /-/.test(className) ? camelCase(className) : className,
|
|
8
|
+
dashes: (className) => (/-/.test(className) ? camelCase(className) : className),
|
|
9
9
|
kebab: (className) => transformersMap.param(className),
|
|
10
10
|
none: (className) => className,
|
|
11
11
|
param: (className) => paramCase(className),
|
package/dist/sass/importer.js
CHANGED
|
@@ -30,8 +30,6 @@ export const aliasImporter = ({ aliases, aliasPrefixes, }) => {
|
|
|
30
30
|
* - Given custom SASS importer(s), append to the list of importers.
|
|
31
31
|
*/
|
|
32
32
|
export const customImporters = ({ aliases = {}, aliasPrefixes = {}, importers = [], }) => {
|
|
33
|
-
const bundled = [
|
|
34
|
-
aliasImporter({ aliases, aliasPrefixes }),
|
|
35
|
-
];
|
|
33
|
+
const bundled = [aliasImporter({ aliases, aliasPrefixes })];
|
|
36
34
|
return bundled.concat(importers);
|
|
37
35
|
};
|
|
@@ -13,8 +13,7 @@ const classNameToType = (className, quoteType) => {
|
|
|
13
13
|
const quote = quoteType === "single" ? "'" : '"';
|
|
14
14
|
return ` ${quote}${className}${quote}: string;`;
|
|
15
15
|
};
|
|
16
|
-
const isReservedKeyword = (className) => reserved.check(className, "es5", true) ||
|
|
17
|
-
reserved.check(className, "es6", true);
|
|
16
|
+
const isReservedKeyword = (className) => reserved.check(className, "es5", true) || reserved.check(className, "es6", true);
|
|
18
17
|
const isValidName = (className) => {
|
|
19
18
|
if (isReservedKeyword(className)) {
|
|
20
19
|
alerts.warn(`[SKIPPING] '${className}' is a reserved keyword (consider renaming or using --exportType default).`);
|
|
@@ -44,9 +43,7 @@ export const classNamesToTypeDefinitions = async (options) => {
|
|
|
44
43
|
case "named":
|
|
45
44
|
if (options.banner)
|
|
46
45
|
lines.push(options.banner);
|
|
47
|
-
lines.push(...options.classNames
|
|
48
|
-
.filter(isValidName)
|
|
49
|
-
.map(classNameToNamedTypeDefinition));
|
|
46
|
+
lines.push(...options.classNames.filter(isValidName).map(classNameToNamedTypeDefinition));
|
|
50
47
|
break;
|
|
51
48
|
}
|
|
52
49
|
if (lines.length) {
|
package/package.json
CHANGED
|
@@ -1,114 +1,113 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
2
|
+
"name": "@najemi-software/typed-scss-modules",
|
|
3
|
+
"version": "10.9.0",
|
|
4
|
+
"private": false,
|
|
5
|
+
"description": "TypeScript type definition generator for SCSS CSS Modules",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"cli",
|
|
8
|
+
"css modules",
|
|
9
|
+
"scss",
|
|
10
|
+
"scss modules",
|
|
11
|
+
"type generator",
|
|
12
|
+
"typescript"
|
|
13
|
+
],
|
|
14
|
+
"homepage": "https://github.com/Najemi-Software/typed-scss-modules#readme",
|
|
15
|
+
"license": "MIT",
|
|
16
|
+
"author": "Martin Najemi <martin@najemi.cz>",
|
|
17
|
+
"contributors": [
|
|
18
|
+
{
|
|
19
|
+
"name": "am0wa",
|
|
20
|
+
"email": "am0wa.it@gmail.com"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"name": "Spencer Miskoviak",
|
|
24
|
+
"email": "smiskoviak@gmail.com"
|
|
25
|
+
}
|
|
26
|
+
],
|
|
27
|
+
"repository": {
|
|
28
|
+
"type": "git",
|
|
29
|
+
"url": "git+https://github.com/Najemi-Software/typed-scss-modules.git"
|
|
25
30
|
},
|
|
26
|
-
{
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
"
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
"
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
"
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
"
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
31
|
+
"bin": {
|
|
32
|
+
"typed-scss-modules": "./dist/cli.js"
|
|
33
|
+
},
|
|
34
|
+
"files": [
|
|
35
|
+
"dist"
|
|
36
|
+
],
|
|
37
|
+
"type": "module",
|
|
38
|
+
"main": "dist/index.js",
|
|
39
|
+
"types": "dist/index.d.ts",
|
|
40
|
+
"exports": {
|
|
41
|
+
".": {
|
|
42
|
+
"types": "./dist/index.d.ts",
|
|
43
|
+
"import": "./dist/index.js",
|
|
44
|
+
"require": "./dist/index.js",
|
|
45
|
+
"default": "./dist/index.js"
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
"publishConfig": {
|
|
49
|
+
"access": "public"
|
|
50
|
+
},
|
|
51
|
+
"scripts": {
|
|
52
|
+
"build": "npm run clean && tsc -p tsconfig.build.json && chmod +x dist/cli.js",
|
|
53
|
+
"check:formatting": "oxfmt --check",
|
|
54
|
+
"check:linting": "eslint .",
|
|
55
|
+
"check:types": "tsc --noEmit",
|
|
56
|
+
"clean": "rm -rf ./dist",
|
|
57
|
+
"prepare": "npm run build && husky",
|
|
58
|
+
"test": "vitest run --silent",
|
|
59
|
+
"test:watch": "vitest",
|
|
60
|
+
"typed-scss-modules": "node ./dist/cli.js"
|
|
61
|
+
},
|
|
62
|
+
"dependencies": {
|
|
63
|
+
"bundle-require": "^5.1.0",
|
|
64
|
+
"chalk": "4.1.2",
|
|
65
|
+
"change-case": "^4.1.2",
|
|
66
|
+
"chokidar": "^3.6.0",
|
|
67
|
+
"esbuild": "^0.27.2",
|
|
68
|
+
"glob": "^13.0.0",
|
|
69
|
+
"joycon": "^3.1.1",
|
|
70
|
+
"postcss": "^8.4.49",
|
|
71
|
+
"postcss-modules": "^6.0.1",
|
|
72
|
+
"reserved-words": "^0.1.2",
|
|
73
|
+
"slash": "^3.0.0",
|
|
74
|
+
"yargs": "^17.7.2"
|
|
75
|
+
},
|
|
76
|
+
"devDependencies": {
|
|
77
|
+
"@tsjam/eslint-config-recommended": "^0.2.4",
|
|
78
|
+
"@types/node": "^22.19.3",
|
|
79
|
+
"@types/reserved-words": "^0.1.0",
|
|
80
|
+
"@types/yargs": "^17.0.35",
|
|
81
|
+
"@vitest/eslint-plugin": "^1.6.23",
|
|
82
|
+
"eslint": "^9.34.0",
|
|
83
|
+
"husky": "^9.1.7",
|
|
84
|
+
"lint-staged": "^16.2.7",
|
|
85
|
+
"oxfmt": "^0.52.0",
|
|
86
|
+
"sass": "^1.97.1",
|
|
87
|
+
"sass-embedded": "^1.97.1",
|
|
88
|
+
"ts-node": "^10.9.2",
|
|
89
|
+
"typescript": "^5.8.3",
|
|
90
|
+
"vitest": "^4.1.10"
|
|
91
|
+
},
|
|
92
|
+
"peerDependencies": {
|
|
93
|
+
"sass": "^1.97.1",
|
|
94
|
+
"sass-embedded": "^1.97.1"
|
|
95
|
+
},
|
|
96
|
+
"peerDependenciesMeta": {
|
|
97
|
+
"sass": {
|
|
98
|
+
"optional": true
|
|
99
|
+
},
|
|
100
|
+
"sass-embedded": {
|
|
101
|
+
"optional": true
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
"lint-staged": {
|
|
105
|
+
"*.{js,mjs,cjs,ts,tsx,jsx,json}": [
|
|
106
|
+
"oxfmt"
|
|
107
|
+
]
|
|
90
108
|
},
|
|
91
|
-
"
|
|
92
|
-
|
|
109
|
+
"engines": {
|
|
110
|
+
"node": ">=22.19",
|
|
111
|
+
"npm": ">=10.9"
|
|
93
112
|
}
|
|
94
|
-
},
|
|
95
|
-
"dependencies": {
|
|
96
|
-
"bundle-require": "^5.1.0",
|
|
97
|
-
"chalk": "4.1.2",
|
|
98
|
-
"change-case": "^4.1.2",
|
|
99
|
-
"chokidar": "^3.6.0",
|
|
100
|
-
"esbuild": "^0.27.2",
|
|
101
|
-
"glob": "^13.0.0",
|
|
102
|
-
"joycon": "^3.1.1",
|
|
103
|
-
"postcss": "^8.4.49",
|
|
104
|
-
"postcss-modules": "^6.0.1",
|
|
105
|
-
"reserved-words": "^0.1.2",
|
|
106
|
-
"slash": "^3.0.0",
|
|
107
|
-
"yargs": "^17.7.2"
|
|
108
|
-
},
|
|
109
|
-
"lint-staged": {
|
|
110
|
-
"*.{js,json,css,md,scss,tsx,ts}": [
|
|
111
|
-
"prettier --write"
|
|
112
|
-
]
|
|
113
|
-
}
|
|
114
113
|
}
|