Generate type definition files for CSS modules to make using TypeScript, CSS Modules, and Gatsby together less tedious.
npm install gatsbycsstypes
To install latest version of gatsbycss types.
npx gct-init
To configure the project before first run.
npx gct-run
To generate .d.ts
files for CSS modules.
npx gct-remove
To remove all previously generated .d.ts
files.
By default, the script must be explicity run with npx gct-run
to generate files. To watch .module.css
files and generate type defintion files after every change:
-
Install nodemon using
npm install nodemon
-
Add
"start:css-types": "nodemon -e .module.css -x \"npx gct-run\"",
to thescripts
section of yourpackage.json
file -
Add
& npm run start:css-types
to the end of the defaultstart
script that comes with Gatsby.
gct-init
Configures the project. Must be run before other scripts.
gct-run
Generates type definition files for CSS modules within the project.
gct-remove
Removes all generated type definition files.
APP_ROOT
The parent directory where the script will begin searching for CSS module files.
IGNORED_FOLDERS
A list of directories that will be ignored when searching for CSS module files.
IS_INITIALIZED
A flag updated automatically by the initialization script. Changing this freely may result in errors throughout the program.
TARGET_FILE_EXT
The targetted file extensions for which type definition files are generated. By default this is set to .css
.
MAX_RECURSION_DEPTH
The maximum depth of the recursive search for CSS files. By default this is set to 25
.
gctconfig.js
This is the projects configuration file which can be changed for more fine grained control over the script's behavior.
gctrecord.js
A record of all generated type definition files and their associated CSS module. If this file is updated manually, there is a risk that the removal script will miss some generated files.