feat: process styles (#9)

BREAKING CHANGE: theme addon is gone

* chore: storybook 5.0.11

* feat: process styles

* feat: remove storybook addon :(

* chore: tslint-config-stoplight

* chore: lint --fix

* chore: remove ui-kit, add husky

package.json

@@ -39,37 +39,46 @@
     "react-dom": ">=16.8"
   },
   "dependencies": {
-    "@babel/core": "7.4.0",
-    "@stoplight/ui-kit": "^1.49.1",
-    "@storybook/addon-actions": "5.0.6",
-    "@storybook/addon-knobs": "5.0.6",
-    "@storybook/addon-links": "5.0.6",
-    "@storybook/addon-options": "5.0.6",
-    "@storybook/addons": "5.0.6",
-    "@storybook/core": "5.0.6",
-    "@storybook/react": "5.0.6",
+    "@babel/core": "7.4.4",
+    "@storybook/addon-actions": "5.0.11",
+    "@storybook/addon-knobs": "5.0.11",
+    "@storybook/addon-links": "5.0.11",
+    "@storybook/addon-options": "5.0.11",
+    "@storybook/addons": "5.0.11",
+    "@storybook/core": "5.0.11",
+    "@storybook/react": "5.0.11",
+    "@types/react": "^16.8.15",
+    "@types/react-dom": "^16.8.4",
     "@types/storybook__addon-actions": "3.4.x",
-    "@types/storybook__addon-knobs": "4.0.5",
+    "@types/storybook__addon-knobs": "5.0.0",
     "@types/storybook__addon-links": "3.3.x",
     "@types/storybook__addon-options": "4.0.x",
     "@types/storybook__react": "4.0.x",
+    "autoprefixer": "^9.5.1",
     "babel-loader": "8.x.x",
-    "ts-loader": "5.3.x",
-    "webpack": "4.29.6"
+    "css-loader": "^2.1.1",
+    "node-sass": "^4.12.0",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "ts-loader": "5.4.5",
+    "webpack": "4.30.0"
   },
   "devDependencies": {
     "@stoplight/scripts": "^5.1.0",
     "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.11.2",
+    "enzyme-adapter-react-16": "^1.12.1",
     "enzyme-to-json": "^3.3.5",
-    "jest": "24.5.0",
+    "husky": "^2.2.0",
+    "jest": "24.7.1",
     "jest-enzyme": "^7.0.2",
     "lodash": "4.17.11",
     "react": "16.8.6",
     "react-dom": "16.8.6",
-    "ts-jest": "24.0.1",
-    "tslint": "5.14.0",
-    "typescript": "3.4.1"
+    "ts-jest": "24.0.2",
+    "tslint": "5.16.0",
+    "tslint-config-stoplight": "^1.2.0",
+    "typescript": "3.4.5"
   },
   "lint-staged": {
     "*.{ts,tsx}$": [

src/addons.ts

@@ -2,4 +2,3 @@ require('@storybook/addon-knobs/register');
 require('@storybook/addon-actions/register');
 require('@storybook/addon-links/register');
 require('@storybook/addon-options/register');
-require('./addons/withThemes/register');

src/config.ts

@@ -1,6 +1,5 @@
 import { withOptions } from '@storybook/addon-options';
 import { addDecorator, configure } from '@storybook/react';
-import { withThemes } from './addons/withThemes';
 
 addDecorator(
   withOptions({
@@ -16,10 +15,6 @@ addDecorator(
   })
 );
 
-addDecorator(withThemes(require('@project/theme')));
-
-configure(require('@project/stories'), module);
-
 function loadStories() {
   require('@project/stories');
 }

src/webpack.config.ts

@@ -11,9 +11,6 @@ module.exports = ({ config }: any) => {
   config.context = cwd;
   config.mode = 'development';
   config.resolve.alias['@project/stories'] = require.resolve('src/__stories__/index.ts', { paths: [cwd] });
-  config.resolve.alias['@project/theme'] = require.resolve('.storybook/theme', {
-    paths: [cwd],
-  });
 
   config.plugins.push(
     new webpack.DefinePlugin({
@@ -23,19 +20,89 @@ module.exports = ({ config }: any) => {
   );
 
   config.module.rules.push({
-    test: /\.(ts|tsx)$/,
+    test: /\.tsx?$/,
     include: [path.resolve(cwd, 'src')],
     use: [
       {
         loader: require.resolve('ts-loader'),
         options: {
+          transpileOnly: true,
           onlyCompileBundledFiles: true, // https://github.com/TypeStrong/ts-loader#onlycompilebundledfiles-boolean-defaultfalse
         },
       },
     ],
   });
 
-  config.resolve.extensions.push('.ts', '.tsx');
+  config.module.rules.push({
+    test: /\.css$/,
+    include: [path.resolve(cwd, 'src')],
+    use: [
+      {
+        loader: require.resolve('style-loader'),
+        options: {
+          sourceMap: true,
+        },
+      },
+      {
+        loader: require.resolve('css-loader'),
+        options: {
+          sourceMap: true,
+          importLoaders: 1,
+        },
+      },
+      {
+        loader: require.resolve('postcss-loader'),
+        options: {
+          sourceMap: true,
+          plugins: [
+            require('autoprefixer')({
+              env: 'last 2 Chrome versions, last 2 Firefox versions, last 1 Safari version',
+            }),
+          ],
+        },
+      },
+    ],
+  });
+
+  config.module.rules.push({
+    test: /\.scss$/,
+    include: [path.resolve(cwd, 'src')],
+    use: [
+      {
+        loader: require.resolve('style-loader'),
+        options: {
+          sourceMap: true,
+        },
+      },
+      {
+        loader: require.resolve('css-loader'),
+        options: {
+          sourceMap: true,
+          importLoaders: 2,
+        },
+      },
+      {
+        loader: require.resolve('postcss-loader'),
+        options: {
+          sourceMap: true,
+          plugins: [
+            require('autoprefixer')({
+              env: 'last 2 Chrome versions, last 2 Firefox versions, last 1 Safari version',
+            }),
+          ],
+        },
+      },
+      {
+        loader: require.resolve('sass-loader'),
+        options: {
+          sourceMap: true,
+          includePaths: [path.resolve(cwd, 'node_modules')],
+        },
+      },
+    ],
+  });
+
+  config.resolve.extensions.push('.ts', '.tsx', '.jsx', '.js');
 
   return config;
 };