@guanghechen/postcss-modules-dts

Generate `*.d.ts` files for style files (such as css, stylus and etc)

Usage no npm install needed!

<script type="module">
  import guanghechenPostcssModulesDts from 'https://cdn.skypack.dev/@guanghechen/postcss-modules-dts';
</script>

README

@guanghechen/postcss-modules-dts


Generate *.d.ts files for style files (such as css, stylus and etc), should be worked with postcss-modules.

Install

  • npm

    npm install --save-dev @guanghechen/postcss-modules-dts
    
  • yarn

    yarn add --dev @guanghechen/postcss-modules-dts
    

Usage

import dts from '@guanghechen/postcss-modules-dts'

dts()
dts({ indent: '\t', semicolon: true })
dts({ encoding: 'gbk' })

Options

Name Type Required Default
encoding string false utf-8
indent string false
semicolon boolean false false
dtsForCompiledCss boolean false false
shouldIgnore Function false -
getJSON Function false -
  • encoding: Encoding of the generated *.d.ts files.

  • indent: Code indent in the generated *.d.ts files.

  • semicolon: Whether if print a semicolon at the end of the statement.

  • dtsForCompiledCss: Whether if generated *.d.ts for compiled css files.

  • shouldIgnore: Determine whether to ignore the given source file or css token.

    function shouldIgnore(
      cssPath: string,
      json: Record<string, string>,
      outputFilePath: string,
    ): boolean
    
  • getJSON: A callback function that can get the css name mapping. postcss-modules for details.

    function getJSON(
      cssPath: string,
      json: Record<string, string>,
      outputFilePath: string,
    ): Promise<void> | void
    

Examples

  • Use within postcss-modules

    import dts from '@guanghechen/postcss-modules-dts'
    import postcssModules from 'postcss-modules'
    
    postcssModules({
      ...dts()
      // ... other options of postcss-modules
    })
    
  • Use within rollup-plugin-postcss

    import dts from '@guanghechen/postcss-modules-dts'
    import postcss from 'rollup-plugin-postcss'
    
    postcss({ modules: { ...dts() } })
    

Related