awesome-typed-css-modules
v7.0.1
TypeScript type definition generator for Stylus/LESS/SASS/SCSS CSS Modules
81/weekUpdated 3 years agoMITUnpacked: 90.9 KB
Published by Dem Ching
npm install awesome-typed-css-modulesawesome-typed-css-modules
This is a fork of typed-scss-modules. Adding the ability to process Stylus, LESS, SASS and SugarSS files. Also, it allows user to provide custom PostCSS plugins and custom parsers to handle extra features on CSS files.
Before using this package, please check if your use case matches these situations:
1. Using only .scss files
2. Not using PostCSS features
3. Not using importer feature of sass
If all the above situations match your use case, use typed-scss-modules instead. This package doesn't provide any extra feature for you.
Requirement
In order to use this package, you may need to install extra package or add extra config.
$3
If you use pure CSS without any PostCSS feature or custom syntax, nothing is required.
If you use PostCSS plugins or external parser, you need to create a configuration file. Check the instruction of how to use plugins and parsers.
$3
You need to install package sugarss in order to use this package.
Also, create a configuration file with parsers options like this.
$3
You need to install package node-sass or sass in order to use this package. No extra config is required.
Please note that this package will fallback to node-sass if you don't specify implementation or sass is not installed.
If you use importer, remember to check this.
$3
You need to install package less in order to use this package. No extra config is required.
$3
You need to install package stylus in order to use this package. No extra config is required.
Modification
The differences between this package and the original are listed here.
$3
It is needed to distinguish between typed-scss-modules and this package as this package is capable to process files other than scss.
You should use yarn awesome-typed-css-modules instead even though most of the README still use typed-scss-modules. Saying so, using yarn typed-scss-modules is still valid.
Similarly, the configuration file should be named as awesome-typed-css-modules.config.js or awesome-typed-css-modules.config.ts.
Guide for migrating from typed-scss-modules can be found here.
$3
#### --crlf
- Type: boolean
- Default: Specify true to use \r\n as EOL, false to use \n. Fallback to system default if not specified.
- Example: typed-scss-modules src --crlf
#### --includeExtensions
- Type: ("css" | "scss" | "sass" | "less" | "sss" | "styl")[]
- Default: If an option is passed, it will always match files with the provided file extensions. If this option and --excludeExtensions are not passed, it will match all extensions. Beware of conflict pattern like typed-scss-modules "src/*/.scss" --includeExtensions less.
- Example: typed-scss-modules src --includeExtensions less
--excludeExtensions will be ignored if specify together with --includeExtensions.
#### --excludeExtensions
- Type: ("css" | "scss" | "sass" | "less" | "sss" | "styl")[]
- Default: If an option is passed, it will always match files without the provided file extensions. If this option and --includeExtensions are not passed, it will match all extensions. Beware of conflict pattern like typed-scss-modules "src/*/.less" --excludeExtensions less.
- Example: typed-scss-modules src --excludeExtensions less
--excludeExtensions will be ignored if specify together with --includeExtensions.
#### --configFile
- Type: string
- Default: _none_
- Example: typed-scss-modules src --configFile custom/path/to/config.js
Explicitly tell the program to find the configuration file in specific location. Using this option in configuration file is pointless. The program will never find it if you do so.
$3
#### importer
- Type: Importer | Importer[]
- Default: _none_
An Importer could be the SyncImporter for node-sass and sass (sass has marked it as LegacySyncImporter) or Importer<'sync'>|FileImporter<'sync'> for the latest version of sass.
This option is modified for those who use the latest version of sass. Since the render function renderSync of sass is marked as legacy and is suggested to use compileString instead, this package tries to adapt that changes. Thus, if you are using sass with the support of compileString, you are suggested to write the importer in the new way. This package will try to convert the legacy importer to the latest one but it is NOT guaranteed to work. If you really want to use the legacy importer, you should use node-sass instead since sass may end the support of legacy code at any time.
Check more for LegacySyncImporter, Importer and FileImporter from Dart SASS.
Check here for original description of importer.
$3
#### plugins
- Type: PostCSS.AcceptedPlugin[]
- Default: _none_
This package use css-modules-loader-core to extract data in CSS files. It allows user to provide PostCSS plugins for extra features. Check here for how to use it.
> :warning::warning::warning: css-modules-loader-core depends on PostCSS v6. Latest plugins for PostCSS v8 are not compatible and will throw error if you try to use them. If you are writing your own plugin or downloading one from NPM, please ensure it is compatible with PostCSS v6 or you can modify postcss option.
#### postcss
- Type: "v6" | "v8"
- Default: "v6"
> :warning::warning::warning: This option only tries to solve the incompatibility when using PostCSS plugins. Error may still happen even if the config is set correctly.
If postcss is set to v8, this package will use @demching113/css-modules-loader-core to extract data. That package is basically the same as css-modules-loader-core but depends on PostCSS v8.
#### parsers
- Type: { [fileExtension: string]: (src: string) => string; }
- Default: _none_
Provide custom parser for specific file extension before extracting type definition. Similar to what plugins does but parsers does not depend on PostCSS. For those using SugarSS, you may want something like this:
``js`
let options = {
// other options
parsers: {
sss: require("sugarss").parse,
},
};
Extra Examples
Here only list the examples of added features. For more, check here
- Basic example
- Parsers example
- PostCSS v6 Plugins example
- PostCSS v8 Plugins example
Original Readme
Below are from the original package. Since most of the options are the same, simplily replace typed-scss-modules to awesome-typed-css-modules to use this package.
🎁 typed-scss-modules
Generate TypeScript definitions (.d.ts) files for CSS Modules that are written in SCSS (.scss). Check out this post to learn more about the rationale and inspiration behind this package.
For example, given the following SCSS:
`scss
@import "variables";
.text {
color: $blue;
&-highlighted {
color: $yellow;
}
}
`
The following type definitions will be generated:
`typescript`
export const text: string;
export const textHighlighted: string;
Basic Usage
Install and run as a devDependency:
`bash`
yarn add -D typed-scss-modules
yarn typed-scss-modules src
Or, install globally:
`bash`
yarn global add typed-scss-modules
typed-scss-modules src
Or, with npm:
`bash`
npm install -D typed-scss-modules
npx typed-scss-modules src
CLI Options
For all possible commands, run typed-scss-modules --help.
The only required argument is the directory where all SCSS files are located. Running typed-scss-modules src will search for all files matching src/*/.scss. This can be overridden by providing a glob pattern instead of a directory. For example, typed-scss-modules src/*.scss
$3
- Type: boolean
- Default:
- Example:
Watch for files that get added or are changed and generate the corresponding type definitions.
$3
- Type: boolean
- Default:
- Example:
Skips the initial build when passing the watch flag. Use this when running concurrently with another watch, but the initial build should happen first. You would run without watch first, then start off the concurrent runs after.
$3
- Type: string[]
- Default:
- Example:
A pattern or an array of glob patterns to exclude files that match and avoid generating type definitions.
$3
- Type: string[]
- Default:
- Example:
An array of paths to look in to attempt to resolve your @import declarations. This example will search the src/core directory when resolving imports.
$3
- Type: "node-sass" | "sass"
- Default: If an option is passed, it will always use the provided package implementation. If an option is not passed, it will first check if is installed. If it is, it will be used. Otherwise, it will then check if sass is installed. If it is, it will be used. Finally, falling back to node-sass if all checks and validations fail.typed-scss-modules src --implementation sass
- Example:
$3
- Type: object
- Default:
- Example:
An object of aliases to map to their corresponding paths. This example will replace any @import '~alias' with @import 'src/core/variables'.
$3
- Type: object
- Default:
- Example:
An object of prefix strings to replace with their corresponding paths. This example will replace any @import '~bootstrap/lib/bootstrap' with @import 'node_modules/bootstrap/lib/bootstrap'.sass-loader
This matches the common use-case for importing scss files from node_modules when will be used with webpack to compile the project.
$3
- Type: "camel" | "kebab" | "param" | "dashes" | "none"
- Default:
- Example:
The class naming format to use when converting the classes to type definitions.
- camel: convert all class names to camel-case, e.g. App-Logo => appLogo.App-Logo
- kebab/param: convert all class names to kebab/param case, e.g. => app-logo (all lower case with '-' separators).App
- dashes: only convert class names containing dashes to camel-case, leave others alone, e.g. => App, App-Logo => appLogo. Matches the webpack css-loader camelCase 'dashesOnly' option.--exportType default
- none: do not modify the given class names (you should use when using --nameFormat none as any classes with a - in them are invalid as normal variable names).--nameFormat none --exportType default
Note: If you are using create-react-app v2.x and have NOT ejected, matches the class names that are generated in CRA's webpack's config.
$3
- Type: boolean
- Default:
- Example:
List any type definition files that are different than those that would be generated. If any are different, exit with a status code 1.
$3
- Type: "named" | "default"
- Default:
- Example:
The export type to use when generating type definitions.
#### named
Given the following SCSS:
`scss
.text {
color: blue;
&-highlighted {
color: yellow;
}
}
`
The following type definitions will be generated:
`typescript`
export const text: string;
export const textHighlighted: string;
#### default
Given the following SCSS:
`scss
.text {
color: blue;
&-highlighted {
color: yellow;
}
}
`
The following type definitions will be generated:
`typescript
export type Styles = {
text: string;
textHighlighted: string;
};
export type ClassNames = keyof Styles;
declare const styles: Styles;
export default styles;
`
This export type is useful when using kebab (param) cased class names since variables with a - are not valid variables and will produce invalid types or when a class name is a TypeScript keyword (eg: while or delete). Additionally, the Styles and ClassNames types are exported which can be useful for properly typing variables, functions, etc. when working with dynamic class names.
$3
- Type: string
- Default:
- Example:
Customize the type name exported in the generated file when --exportType is set to "default".
Only default exports are affected by this command. This example will change the export type line to:
`typescript`
export type ClassesType = keyof Styles;
$3
- Type: string
- Default:
- Example:
Customize the interface name exported in the generated file when --exportType is set to "default".
Only default exports are affected by this command. This example will change the export interface line to:
`typescript`
export type IStyles = {
// ...
};
$3
- Type: "single" | "double"
- Default:
- Example:
Specify a quote type to match your TypeScript configuration. Only default exports are affected by this command. This example will wrap class names with double quotes ("). If Prettier is installed and configured in the project, it will be used and is likely to override the effect of this setting.
$3
- Type: boolean
- Default:
- Example:
Overwrite generated files only if the source file has more recent changes. This can be useful if you want to avoid extraneous file updates, which can cause watcher processes to trigger unnecessarily (e.g. tsc --watch).
Caveat: If a generated type definition file is updated manually, it won't be re-generated until the corresponding scss file is also updated.
$3
- Type: "verbose" | "error" | "info" | "silent"
- Default:
- Example:
Sets verbosity level of console output.
#### verbose
Print all messages
#### error
Print only errors
#### info
Print only some messages
#### silent
Print nothing
$3
- Type: string
- Default:
- Example:
Will prepend a string to the top of your output files
`typescript`
// This is an example banner
export type Styles = {
// ...
};
$3
- Type: string
- Default: _none_
- Example:
Set a relative folder to output the generated type definitions. Instead of writing the type definitions directly next to each SCSS module (sibling file), it will write to the output folder with the same path.
It will use the relative path to the SCSS module from where this tool is executed. This same path (including any directories) will be constructed in the output folder. This is important for this to work properly with TypeScript.
Important: for this to work as expected the tsconfig.json needs to have rootDirs added with the same output folder. This will allow TypeScript to pick up these type definitions and map them to the actual SCSS modules.
`json`
{
"compilerOptions": {
"rootDirs": [".", "__generated__"]
}
}
$3
- Type: string
- Default: _none_
- Example:
Prepend the provided SCSS code before each file. This is useful for injecting globals into every file, such as adding an import to load global variables for each file.
Config options
All options above are also supported as a configuration file in the root of the project. The following configuration file names are supported:
- typed-scss-modules.config.ts
-
The file can provide either a named config export or a default export.
`js
// Example of a named export with some of the options sets.
export const config = {
banner: "// customer banner",
exportType: "default",
exportTypeName: "TheClasses",
logLevel: "error",
};
// Example of a default export with some of the options sets.
export default {
banner: "// customer banner",
exportType: "default",
exportTypeName: "TheClasses",
logLevel: "error",
};
`
> Note: the configuration options are the same as the CLI options without the leading dashes (--). Only the full option name is supported (not aliases) in the configuration file.
CLI options will take precedence over configuration file options.
In addition to all CLI options, the following are options only available with the configuration file:
$3
- Type: Importer | Importer[]
- Default: _none_
Define a single custom SASS importer or an array of SASS importers. This should only be necessary if custom SASS importers are already being used in the build process. This is used internally to implement aliases and aliasPrefixes.
Refer to lib/sass/importer.ts for more details and the node-sass and sass importer type definitions.
Examples
For examples of how this tool can be used and configured, see the examples directory:
- Basic example
- Default export example
- Config file (with custom importer) example
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
Alternatives
This package was heavily influenced on typed-css-modules which generates TypeScript definitions (.d.ts) files for CSS Modules that are written in CSS (.css`).
This package is currently used as a CLI. There are also packages that generate types as a webpack loader.