@postcss-plugins/typescript-css
A PostCSS plugin to create a TypeScript file by each CSS file.
Installation
yarn add @postcss-plugins/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.ts", example:
componentName.style.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 './componentName.style';
const element = document.createElement('div');
element.className = componentNameStyle.componentName;
Usage
postcss([require('postcss-typescript-css')]);
Contributing
- ⇄ Pull requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.