feat(scss): Add scss support. Act as css module

Autogenerate types from scss. Convert scss to module css

fix #21

package.json

@@ -8,16 +8,16 @@
     "homepage": "/~https://github.com/nfq-eta/react-typescript",
     "scripts": {
         "cm": "git-cz",
-        "prestart": "tcm src",
+        "prestart": "tcm -p src/client/**/*.{css,scss}",
         "start": "cross-env NODE_ENV=development webpack-dev-server --open --content-base dist --env=dev",
-        "prebuild": "tcm src && rimraf ./dist ./coverage",
+        "prebuild": "tcm -p src/client/**/*.{css,scss} && rimraf ./dist ./coverage",
         "cleanup": "yarn prebuild",
         "build": "cross-env NODE_ENV=production webpack -p --env=prod --display-error-details",
         "prebuild:start": "yarn build",
         "postbuild": "yarn build-storybook",
         "build:start": "serve -s -o -C -n dist",
         "lint": "tslint -c tslint.json -p tsconfig.json -t stylish ",
-        "lint:css": "stylelint './src/**/*.{css,scss}'",
+        "lint:css": "stylelint './src/client/**/*.{css,scss}'",
         "test": "jest --watch --no-cache",
         "test:ci": "jest --env=jsdom --no-cache --maxWorkers=2",
         "test:coverage": "cross-env NODE_ENV=test jest --env=jsdom --no-cache --coverage",

src/client/components/header/Header.scss

@@ -0,0 +1,3 @@
+.header {
+    background-color: #ffefc8;
+}

src/client/components/header/Header.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import * as styles from './Header.scss';
+
+export interface IHeaderProps {
+}
+
+export interface IHeaderState {
+}
+
+export class Header extends React.Component<IHeaderProps, IHeaderState> {
+    constructor(props: IHeaderProps) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className={styles.header}>
+                <h1>App</h1>
+                Component name: Header
+                File name: Header.tsx
+            </div>
+        );
+    }
+}

src/client/components/header/tests/Header.test.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import enzymeToJson from 'enzyme-to-json';
+
+import { Header } from '../Header';
+
+describe('Header.js', () => {
+    it('renders without crashing', () => {
+        shallow(<Header/>);
+    });
+
+    it('matches snapshot', () => {
+        const wrapper = shallow(<Header/>);
+        expect(enzymeToJson(wrapper)).toMatchSnapshot();
+    });
+});

src/client/components/header/tests/__snapshots__/Header.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header.js matches snapshot 1`] = `
+<div
+  className="header"
+>
+  <h1>
+    App
+  </h1>
+  Component name: Header File name: Header.tsx
+</div>
+`;

src/client/containers/App.tsx

@@ -8,6 +8,7 @@ import * as CheckboxItemsJson from '../components/checkbox/tests/__mocks__/Check
 import * as CheckboxSelectedItemsJson from '../components/checkbox/tests/__mocks__/CheckboxSelectedItems.json';
 import { addCheckbox } from '../modules/checkbox/actions';
 import { IRootState } from '../core/reducers';
+import { Header } from '../components/header/Header';
 
 export interface IAppProps {
     addAction: typeof addCheckbox;
@@ -18,7 +19,6 @@ export interface IAppState {
     items: IItem[];
 }
 
-// @connect(mapStateToProps, mapDispatchToProps)
 class App extends React.Component<IAppProps, IAppState> {
     selectedItems = new Map(CheckboxSelectedItemsJson);
 
@@ -51,7 +51,7 @@ class App extends React.Component<IAppProps, IAppState> {
     render() {
         return (
             <div>
-                <h1>App</h1>
+                <Header />
                 <button onClick={this.handleAdd}>Add more</button>
                 {this.props.items.map(item => (
                     <div key={item.id}>

src/client/containers/tests/App.test.tsx

@@ -25,7 +25,7 @@ describe('App.tsx', () => {
 
     it('Title should be visible', () => {
         const wrapper = shallow(<AppDisconnected {...props} />);
-        expect(wrapper.find('h1').text()).toContain('App');
+        expect(wrapper.find('Header').length).toBe(1);
     });
 
     it('should handle click', () => {

src/client/containers/tests/__snapshots__/App.test.tsx.snap

@@ -2,9 +2,7 @@
 
 exports[`App.tsx matches snapshot 1`] = `
 <div>
-  <h1>
-    App
-  </h1>
+  <Header />
   <button
     onClick={[Function]}
   >