Need help with typed-scss-modules?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

skovy
236 Stars 29 Forks MIT License 187 Commits 19 Opened issues

Description

🎁 Generate type definitions (.d.ts) for CSS Modules using SCSS

Services available

!
?

Need anything else?

Contributors list

# 102,961
React N...
i18next
Deno
GraphQL
111 commits
# 366,915
Shell
C#
css-mod...
Sass
5 commits
# 75,397
node
React
CSS
tabular...
3 commits
# 372,787
monkey-...
cil
patcher
Unity
3 commits
# 403,030
CSS
codemod
Sass
github-...
2 commits
# 188,547
Sass
CSS
toolcha...
ESLint
2 commits
# 821
GitHub
rust-la...
wechat-...
query-l...
2 commits
# 210,989
TypeScr...
linting...
tslint
Shell
1 commit

🎁 typed-scss-modules

Build Status npm version

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.

Example

For example, given the following SCSS:

@import "variables";

.text { color: $blue;

&-highlighted { color: $yellow; } }

The following type definitions will be generated:

export const text: string;
export const textHighlighted: string;

Basic Usage

Install and run as a

devDependency
:
yarn add -D typed-scss-modules
yarn tsm src

Or, install globally:

yarn global add typed-scss-modules
tsm src

Or, with npm:

npm install -D typed-scss-modules
./node_modules/.bin/tsm src

Advanced Usage

For all possible commands, run

tsm --help
.

The only required argument is the directory where all SCSS files are located. Running

tsm src
will search for all files matching
src/**/*.scss
. This can be overridden by providing a glob pattern instead of a directory. For example,
tsm src/*.scss

--watch
(
-w
)

  • Type:
    boolean
  • Default:
    false
  • Example:
    tsm src --watch

Watch for files that get added or are changed and generate the corresponding type definitions.

--ignoreInitial

  • Type:
    boolean
  • Default:
    false
  • Example:
    tsm src --watch --ignoreInitial

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.

--ignore

  • Type:
    string[]
  • Default:
    []
  • Example:
    tsm src --watch --ignore "**/secret.scss"

A pattern or an array of glob patterns to exclude files that match and avoid generating type definitions.

--includePaths
(
-i
)

  • Type:
    string[]
  • Default:
    []
  • Example:
    tsm src --includePaths src/core

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.

--implementation

  • 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
    node-sass
    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.
  • Example:
    tsm src --implementation sass

--aliases
(
-a
)

  • Type:
    object
  • Default:
    {}
  • Example:
    tsm src --aliases.~some-alias src/core/variables

An object of aliases to map to their corresponding paths. This example will replace any

@import '~alias'
with
@import 'src/core/variables'
.

--aliasPrefixes
(
-p
)

  • Type:
    object
  • Default:
    {}
  • Example:
    tsm src --aliasPrefixes.~ node_modules/

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'
. This matches the common use-case for importing scss files from node_modules when
sass-loader
will be used with
webpack
to compile the project.

--nameFormat
(
-n
)

  • Type:
    "camel" | "kebab" | "param" | "dashes" | "none"
  • Default:
    "camel"
  • Example:
    tsm src --nameFormat camel

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
    .
  • kebab/param: convert all class names to kebab/param case, e.g.
    App-Logo
    =>
    app-logo
    (all lower case with '-' separators).
  • dashes: only convert class names containing dashes to camel-case, leave others alone, e.g.
    App
    =>
    App
    ,
    App-Logo
    =>
    appLogo
    . Matches the webpack css-loader camelCase 'dashesOnly' option.
  • none: do not modify the given class names (you should use
    --exportType default
    when using
    --nameFormat none
    as any classes with a
    -
    in them are invalid as normal variable names). Note: If you are using create-react-app v2.x and have NOT ejected,
    --nameFormat none --exportType default
    matches the class names that are generated in CRA's webpack's config.

--listDifferent
(
-l
)

  • Type:
    boolean
  • Default:
    false
  • Example:
    tsm src --listDifferent

List any type definition files that are different than those that would be generated. If any are different, exit with a status code

1
.

--exportType
(
-e
)

  • Type:
    "named" | "default"
  • Default:
    "named"
  • Example:
    tsm src --exportType default

The export type to use when generating type definitions.

named

Given the following SCSS:

.text {
  color: blue;

&-highlighted { color: yellow; } }

The following type definitions will be generated:

export const text: string;
export const textHighlighted: string;

default

Given the following SCSS:

.text {
  color: blue;

&-highlighted { color: yellow; } }

The following type definitions will be generated:

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.

--exportTypeName

  • Type:
    string
  • Default:
    "ClassNames"
  • Example:
    tsm src --exportType default --exportTypeName ClassesType

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:
export type ClassesType = keyof Styles;

--exportTypeInterface

  • Type:
    string
  • Default:
    "Styles"
  • Example:
    tsm src --exportType default --exportTypeInterface IStyles

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:
export type IStyles = {
  // ...
};

--quoteType
(
-q
)

  • Type:
    "single" | "double"
  • Default:
    "single"
  • Example:
    tsm src --exportType default --quoteType double

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.

--updateStaleOnly
(
-u
)

  • Type:
    boolean
  • Default:
    false
  • Example:
    tsm src --updateStaleOnly

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.

--logLevel
(
-L
)

  • Type:
    "verbose" | "error" | "info" | "silent"
  • Default:
    "verbose"
  • Example:
    tsm src --logLevel error

Sets verbosity level of console output.

verbose

Print all messages

error

Print only errors

info

Print only some messages

silent

Print nothing

--banner

  • Type:
    string
  • Default:
    undefined
  • Example:
    tsm src --banner '// This is an example banner\n'

Will prepend a string to the top of your output files

// This is an example banner
export type Styles = {
  // ...
};

Examples

For examples, see the

examples
directory:

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Janeene Beeforth

🐛 💻 📖

Eric Ferreira

💻 📖

Luis Lopes

💻

Josh Wedekind

💻 📖 ⚠️

Jared Gesser

🤔

Raphaël L

💻 🤔

Nick Perez

🐛 💻

Even Alander

💻 ⚠️ 🤔

Katie Foster

💻 ⚠️ 📖

Carlos Aguilera

💻

Craig McCown

🤔 💻 ⚠️ 📖

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.