postcss-typescript-d-ts

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': {},
  },
}