@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.

MIT License

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.1.2 (2021-02-25)

Note: Version bump only for package @postcss-plugins/typescript-css

0.1.1 (2021-02-16)

Bug Fixes

• typescript-css: add missing definition type (92d99ba)

0.1.0 (2021-02-16)

Features

• typescript-css: :sparkles: add plugin code (6f3398f)