@postcss-plugins/typescript-css
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

@postcss-plugins/typescript-css

npm

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

Package Sidebar

Install

npm i @postcss-plugins/typescript-css

Weekly Downloads

51

Version

0.1.2

License

MIT

Unpacked Size

8.19 kB

Total Files

8

Last publish

Collaborators

  • ezavile