Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: mrmckeb/typescript-plugin-css-modules
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v5.0.2
Choose a base ref
...
head repository: mrmckeb/typescript-plugin-css-modules
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v5.1.0
Choose a head ref
  • 8 commits
  • 18 files changed
  • 4 contributors

Commits on Feb 11, 2024

  1. chore: update dependencies (#255)

    @mrmckeb
    mrmckeb authored Feb 11, 2024
    Copy the full SHA
    8583333 View commit details

  2. feat: add env var to disable plugin (#244)

    @ekilah
    ekilah authored Feb 11, 2024
    Copy the full SHA
    df465eb View commit details

  3. docs: update README regexp (#256)

    @mrmckeb
    mrmckeb authored Feb 11, 2024
    Copy the full SHA
    b546052 View commit details

  4. feat: add support for Sass partials via aliases (#251) 

    Co-authored-by: Brody McKee <mrmckeb@users.noreply.github.com>
    @rmachado-studocu @mrmckeb
    rmachado-studocu and mrmckeb authored Feb 11, 2024
    Copy the full SHA
    1b0cc06 View commit details

  5. feat: add source map support to customRenderer (#249)

    @qyzzzz
    qyzzzz authored Feb 11, 2024
    Copy the full SHA
    86d2c78 View commit details

  6. chore: make post-merge change to customRenderer (#257)

    @mrmckeb
    mrmckeb authored Feb 11, 2024
    Copy the full SHA
    079fa27 View commit details

  7. test: add test for use with Sass partials (#258)

    @mrmckeb
    mrmckeb authored Feb 11, 2024
    Copy the full SHA
    58a19c5 View commit details

  8. chore: bump version

    @mrmckeb
    mrmckeb committed Feb 11, 2024
    Copy the full SHA
    4879b04 View commit details
14 changes: 9 additions & 5 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
@@ -2,14 +2,18 @@
"extends": [
"eslint:recommended",
"prettier",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"plugin:@typescript-eslint/strict"
"plugin:@typescript-eslint/recommended-type-checked",
"plugin:@typescript-eslint/stylistic-type-checked",
"plugin:@typescript-eslint/strict-type-checked",
],
"root": true,
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": ["./tsconfig.json"]
"project": ["./tsconfig.json"],
},
"ignorePatterns": ["dist", "jest.config.js", "src/helpers/__tests__/fixtures"]
"ignorePatterns": [
"dist",
"jest.config.js",
"src/helpers/__tests__/fixtures",
],
}
55 changes: 41 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -97,20 +97,20 @@ const b = styles['my_other-class'];

Please note that no options are required. However, depending on your configuration, you may need to customise these options.

| Option | Default value | Description |
| -------------------------- | ---------------------------------- | ------------------------------------------------------------------------------ |
| `additionalData` | `undefined` | An optional string to append to the top of source files. |
| `allowUnknownClassnames` | `false` | Disables TypeScript warnings on unknown classnames (for default imports only). |
| `classnameTransform` | `"asIs"` | See [`classnameTransform`](#classnameTransform) below. |
| `customMatcher` | `"\\.module\\.(c\|le\|sa\|sc)ss$"` | Changes the file extensions that this plugin processes. |
| `customRenderer` | `false` | See [`customRenderer`](#customRenderer) below. |
| `customTemplate` | `false` | See [`customTemplate`](#customTemplate) below. |
| `goToDefinition` | `false` | Enables jump to definition. See [`goToDefinition`](#goToDefinition) below. |
| `noUncheckedIndexedAccess` | `false` | Enable for compatibility with TypeScript's `noUncheckedIndexedAccess`. |
| `namedExports` | `true` | Enables named exports for compatible classnames. |
| `dotenvOptions` | `{}` | Provides options for [`dotenv`](https://github.com/motdotla/dotenv#options). |
| `postcssOptions` | `{}` | See [`postcssOptions`](#postcssOptions) below. |
| `rendererOptions` | `{}` | See [`rendererOptions`](#rendererOptions) below. |
| Option | Default value | Description |
| -------------------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
| `additionalData` | `undefined` | An optional string to append to the top of source files. |
| `allowUnknownClassnames` | `false` | Disables TypeScript warnings on unknown classnames (for default imports only). |
| `classnameTransform` | `"asIs"` | See [`classnameTransform`](#classnameTransform) below. |
| `customMatcher` | `"\\.module\\.((c\|le\|sa\|sc)ss\|styl)$"` | Changes the file extensions that this plugin processes. |
| `customRenderer` | `false` | See [`customRenderer`](#customRenderer) below. |
| `customTemplate` | `false` | See [`customTemplate`](#customTemplate) below. |
| `goToDefinition` | `false` | Enables jump to definition. See [`goToDefinition`](#goToDefinition) below. |
| `noUncheckedIndexedAccess` | `false` | Enable for compatibility with TypeScript's `noUncheckedIndexedAccess`. |
| `namedExports` | `true` | Enables named exports for compatible classnames. |
| `dotenvOptions` | `{}` | Provides options for [`dotenv`](https://github.com/motdotla/dotenv#options). Note that this plugin only accepts a `string` value for `path`. |
| `postcssOptions` | `{}` | See [`postcssOptions`](#postcssOptions) below. |
| `rendererOptions` | `{}` | See [`rendererOptions`](#rendererOptions) below. |

```json
{
@@ -152,13 +152,34 @@ The custom renderer itself should be a JavaScript file. The function will be cal
module.exports = (css, { fileName, logger }) => {
try {
// ...process your css here.

// `string`
return renderedCss;
} catch (error) {
logger.error(error.message);
}
};
```

If you want to return a a source map, you can return an object from your exported function.

```js
module.exports = (css, { fileName, logger }) => {
try {
// ...process your css here.

return {
// `string`
css: renderedCss,
// `RawSourceMap`
sourceMap: sourceMap,
};
} catch (error) {
logger.error(error.message);
}
};
```

You can find an example custom renderer in our test fixtures ([`customRenderer.js`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/main/src/helpers/__tests__/fixtures/customRenderer.js)).

The [internal `logger`](https://github.com/mrmckeb/typescript-plugin-css-modules/blob/main/src/helpers/logger.ts) is provided for [debugging](#troubleshooting).
@@ -282,6 +303,12 @@ If you're not using Visual Studio Code or are having trouble with the above meth

You can include these logs with any issues you open for this project.

### Disabling the plugin

If you need to temporarily disable this plugin, or disable it for a single user, you can do that by setting the `DISABLE_TS_PLUGIN_CSS_MODULES` environment variable to any value, and then restarting your IDE.

Note that this doesn't actually disable the plugin, but causes it to bail out early. See PR #244 for more information.

## About this project

This project was inspired by a Create React App [issue](https://github.com/facebook/create-react-app/issues/5677)
69 changes: 34 additions & 35 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{
"name": "typescript-plugin-css-modules",
"version": "5.0.2",
"version": "5.1.0",
"main": "dist/index.js",
"author": "Brody McKee <mrmckeb@hotmail.com>",
"license": "MIT",
"description": "CSS modules support for TypeScript",
"homepage": "https://github.com/mrmckeb/typescript-plugin-css-modules",
"packageManager": "pnpm@7.18.0",
"packageManager": "pnpm@8.15.1",
"repository": {
"type": "git",
"url": "https://github.com/mrmckeb/typescript-plugin-css-modules"
@@ -27,7 +27,7 @@
],
"scripts": {
"build": "rm -rf ./dist && tsc --project tsconfig.build.json",
"lint": "eslint --max-warnings 0 . && pnpm prettier -c .",
"lint": "eslint --max-warnings 0 . && pnpm tsc && pnpm prettier -c .",
"prepublishOnly": "pnpm build",
"test": "jest",
"prepare": "husky install"
@@ -46,49 +46,48 @@
"trailingComma": "all"
},
"dependencies": {
"@types/postcss-modules-local-by-default": "^4.0.0",
"@types/postcss-modules-scope": "^3.0.1",
"dotenv": "^16.0.3",
"@types/postcss-modules-local-by-default": "^4.0.2",
"@types/postcss-modules-scope": "^3.0.4",
"dotenv": "^16.4.2",
"icss-utils": "^5.1.0",
"less": "^4.1.3",
"less": "^4.2.0",
"lodash.camelcase": "^4.3.0",
"postcss": "^8.4.21",
"postcss": "^8.4.35",
"postcss-load-config": "^3.1.4",
"postcss-modules-extract-imports": "^3.0.0",
"postcss-modules-local-by-default": "^4.0.0",
"postcss-modules-scope": "^3.0.0",
"postcss-modules-local-by-default": "^4.0.4",
"postcss-modules-scope": "^3.1.1",
"reserved-words": "^0.1.2",
"sass": "^1.58.3",
"sass": "^1.70.0",
"source-map-js": "^1.0.2",
"stylus": "^0.59.0",
"tsconfig-paths": "^4.1.2"
"stylus": "^0.62.0",
"tsconfig-paths": "^4.2.0"
},
"devDependencies": {
"@types/icss-utils": "^5.1.0",
"@types/jest": "^29.4.0",
"@types/less": "^3.0.3",
"@types/lodash.camelcase": "^4.3.7",
"@types/node": "^18.14.0",
"@types/postcss-modules-extract-imports": "^3.0.2",
"@types/reserved-words": "^0.1.0",
"@types/sass": "^1.43.1",
"@types/stylus": "^0.48.38",
"@typescript-eslint/eslint-plugin": "^5.52.0",
"@typescript-eslint/parser": "^5.52.0",
"bootstrap": "^5.2.3",
"eslint": "^8.34.0",
"eslint-config-prettier": "^8.6.0",
"husky": "^8.0.3",
"jest": "^29.4.3",
"jest-environment-node-single-context": "^29.0.0",
"lint-staged": "^13.1.2",
"@types/icss-utils": "^5.1.2",
"@types/jest": "^29.5.12",
"@types/less": "^3.0.6",
"@types/lodash.camelcase": "^4.3.9",
"@types/node": "^18.19.15",
"@types/postcss-modules-extract-imports": "^3.0.5",
"@types/reserved-words": "^0.1.4",
"@types/stylus": "^0.48.42",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"bootstrap": "^5.3.2",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"husky": "^9.0.10",
"jest": "^29.7.0",
"jest-environment-node-single-context": "^29.4.0",
"lint-staged": "^15.2.2",
"postcss-import-sync2": "^1.2.0",
"postcss-nested": "^4.2.3",
"postcss-preset-env": "^8.0.1",
"prettier": "^2.8.4",
"postcss-preset-env": "^8.5.1",
"prettier": "^3.2.5",
"sass-svg": "^1.2.0",
"ts-jest": "^29.0.5",
"typescript": "5.0.1-rc"
"ts-jest": "^29.1.2",
"typescript": "^5.3.3"
},
"peerDependencies": {
"typescript": ">=4.0.0"
Loading