https://github.com/ezavile/postcss-typescript-css-example

How to use postcss-typescript-css plugin with webpack 2, React, TypeScript and PostCSS
https://github.com/ezavile/postcss-typescript-css-example

css postcss postcss-plugin typescript

Last synced: 28 days ago
JSON representation

How to use postcss-typescript-css plugin with webpack 2, React, TypeScript and PostCSS

• Host: GitHub
• URL: https://github.com/ezavile/postcss-typescript-css-example
• Owner: ezavile
• License: mit
• Created: 2017-04-28T02:05:01.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-04-29T08:10:50.000Z (over 7 years ago)
• Last Synced: 2024-11-07T04:44:12.628Z (3 months ago)
• Topics: css, postcss, postcss-plugin, typescript
• Language: JavaScript
• Homepage: http://postcss-typescript-css.herokuapp.com/
• Size: 141 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# postcss-typescript-css-example

How to use [postcss-typescript-css] plugin with webpack 2, React, TypeScript and PostCSS

This project has two components Card and Title. Each component has its own style file. The Card Component is using **postcss-modules**.

## Usage

### TitleComponent

**title.css** (I'm using [cssnext])

```css

.Title {

  color: #444;

  margin: 0;

  &-description  {

    color: #acb2b5;

    margin-bottom: 0;

    }

}

```

**Title.tsx**

```javascript

import  './title.css';

import { titleStyle } from  './titleStyle';

```

So, titleStyle is an object with two properties:

```javascript

titleStyle  =  {

  title: 'Title',

  titleDescription: 'Title-description',

}

```

Now you can use it

```jsx

Welcome to postcss-typescript-css!

This is an example using the plugin with webpack 2, React, TypeScript and PostCSS

```

[postcss-typescript-css]: https://github.com/ezavile/postcss-typescript-css

[cssnext]: https://github.com/MoOx/postcss-cssnext