Skip to content

Generates TypeScript definition (.d.ts) files for each of the postcss modules file

License

Notifications You must be signed in to change notification settings

lukaskl/postcss-typescript-d-ts

Repository files navigation

PostCSS modules Typescript definitions generator

PostCSS plugin - postcss-typescript-d-ts.

This plugin generated .d.ts files for each of the PostCSS file so that this file could be used with PostCSS modules and TypeScript.

For example, if styles.pcss content would be:

.container {
  background-color: blue;

  .header {
    font-size: 20px;
  }

  &-name {
    color: red;
  }
}

This plugin would create a new file styles.pcss.d.ts with the following content:

declare const styles: {
  container: string
  header: string
  'container-name': string
}

export default styles

Usage

Step 1: Install plugin:

yarn add --dev postcss  postcss-typescript-d-ts

OR

npm install --save-dev postcss postcss-typescript-d-ts

Step 2: Check you project for existed PostCSS config: postcss.config.js (or .postcssrc.js or any other postcss config file variation) in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Step 3: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-typescript-d-ts'),
    require('postcss-modules')
  ]
}
Or passing object instead of array
module.exports = {
  plugins: {
+   'postcss-typescript-d-ts': {},
    'postcss-modules': {},
  },
}

Step 4 (Optional): Configure the plugin

see packages/postcss-typescript-d-ts/src/plugin.ts for details.

The plugin accepts these configuration options:

export interface TypeScriptDefinitionsPluginOptions {
  /**
   * Custom handler which is called when a new generated file would be written.
   * If `writeFile` is passed, original `writeFile` will not be called.
   */
  writeFile?: (props: WriteFileProps) => Promise<void> | void
  /**
   * Transform content before writing it to the file.
   */
  transformContent?: (props: WriteFileProps) => Promise<string> | string
  /** Add extra content items either to the top or bottom of the file */
  extra?: {
    /** Add extra content to the top of the file */
    header?: string
    /** Add extra content to the bottom of the file */
    footer?: string
  }
}

Example: Use prettier to transform the content before writing to the file:

const prettier = require('prettier')
const prettierOptions = prettier.resolveConfig(__dirname + '..')

module.exports = {
  plugins: [
    require('postcss-typescript-d-ts')({
      transformContent: ({ content }) =>
        prettier.format(content, {
          parser: 'typescript',
          ...prettierOptions,
        }),
    }),
    require('postcss-modules'),
  ],
}
Or passing object instead of array
const prettier = require('prettier')
const prettierOptions = prettier.resolveConfig(__dirname + '..')

module.exports = {
  plugins: {
    'postcss-typescript-d-ts': {
      transformContent: ({ content }) =>
        prettier.format(content, {
          parser: 'typescript',
          ...prettierOptions,
        }),
    },
    'postcss-modules': {},
  },
}

About

Generates TypeScript definition (.d.ts) files for each of the postcss modules file

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published