@softmotions/postcss-typescript-css

postcss-typescript-css

A PostCSS plugin to create a TypeScript file by each CSS file.

Installation

npm install postcss-typescript-css

What is this? For example, you have the following CSS file:

componentName.css

.ComponentName {
   color: green;
}
.ComponentName-descendentName {
   color: yellow;
}
.ComponentName--modifierName {
   color: red;
}

And the plugin will give you a TypeScript file in the same location where the CSS file is. This file generated has almost the same name, only it's added "Style" at the end of the original name of your CSS file, example:

componentNameStyle.ts

export const componentNameStyle = {
   componentName: 'ComponentName',
   componentDescendentName: 'ComponentName-descendentName',
   componentModifierName: 'ComponentName--modifierName',
};

So, you can import the TypeScript file

Note: you have to import first the componentName.css

import './componentName.css';
import { componentNameStyle } from './componentNameStyle';

const element = document.createElement('div');
element.className = componentNameStyle.componentName;

Usage

postcss([
   require('postcss-typescript-css')
]);

if you are using postcss-modules you need to do this:

postcss([
   require('postcss-modules')({
      getJSON: (cssFileName, json) => {
         require('postcss-typescript-css')({
            cssFileName: cssFileName,
            content: json,
         })();
      }
   })
]);

Options

Note: only use the options if you are using postcss-modules

cssFileName

Type: string

content

Type: object (JSON object)

Testing

This will build scripts, run tests and generate a code coverage report. Anything less than 100% coverage will throw an error.

npm test

Example

Take a look a this repo. Here you could see the plugin in action with webpack 2 and React with TypeScript and PostCSS.

See PostCSS docs for examples for your environment.

Thanks

Inspired by postcss-generate-ts-hash, postcss-modules and postcss-font-pack to create the structure of the project

Contributing

• ⇄ Pull requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.
• Pull requests must be accompanied by passing automated tests (npm test).

MIT License