Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/longlho/ts-transform-css-modules
Extract css class names from required css module files for TypeScript
https://github.com/longlho/ts-transform-css-modules
ast compiler css css-modules transform typescript
Last synced: 28 days ago
JSON representation
Extract css class names from required css module files for TypeScript
- Host: GitHub
- URL: https://github.com/longlho/ts-transform-css-modules
- Owner: longlho
- License: mit
- Created: 2017-04-29T01:35:18.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-16T10:01:50.000Z (almost 2 years ago)
- Last Synced: 2024-04-26T08:04:40.231Z (7 months ago)
- Topics: ast, compiler, css, css-modules, transform, typescript
- Language: TypeScript
- Size: 281 KB
- Stars: 83
- Watchers: 4
- Forks: 4
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-typescript-ecosystem - ts-transform-css-modules - Extract css class names from required css module files for TypeScript (Transformers / General transformers)
README
# ts-transform-css-modules
[![Greenkeeper badge](https://badges.greenkeeper.io/longlho/ts-transform-css-modules.svg)](https://greenkeeper.io/)
[![npm version](https://badge.fury.io/js/ts-transform-css-modules.svg)](https://badge.fury.io/js/ts-transform-css-modules)
[![travis](https://travis-ci.org/longlho/ts-transform-css-modules.svg?branch=master)](https://travis-ci.org/longlho/ts-transform-css-modules)Extract css class names from required css module files for TypeScript. This plugin is based on [css-modules-require-hook](https://github.com/css-modules/css-modules-require-hook) and so constructor opts are from that repo.
This allows you to do this in TS files:
```ts
// Import works
import * as css from 'foo.css'
// require also works
const foo = require('foo.css')console.log(css.foo)
```Append this to `before` in your compilation step. See [compile.ts](https://github.com/longlho/ts-transform-css-modules-transform/blob/master/compile.ts#L30-L32) for more info.
Right now named imports will not work due to TS mangling import name after compilation.
```ts
// Those are NOT working
import css from 'foo.css'
import { button, badge } from 'foo.css'
```## Options
See [css-modules-require-hook](https://github.com/css-modules/css-modules-require-hook#tuning-options) for a list of options.
### Custom Options
`tsImportResolver (path: string): string`: This callback function allows you to override import path in `ImportDeclaration` for every CSS file we encounter. This is useful when dealing with project that uses `paths` aliases in tsconfig. This might not be necessary once https://github.com/Microsoft/TypeScript/issues/28276 is resolved.
## Caveats
1. Source map support might not be entirely accurate