chore: add postcss support

Author: alioguzhan

.eslintrc.js

@@ -20,7 +20,6 @@ module.exports = {
     'plugin:react/recommended',
     'standard',
     'prettier',
-    'prettier/@typescript-eslint',
     'plugin:prettier/recommended',
     'plugin:@typescript-eslint/eslint-recommended',
   ],

Globals.d.ts

@@ -0,0 +1 @@
+declare module '*.module.css';

README.md

@@ -9,6 +9,7 @@ A template to create a react component / library with Typescript.
 - React
 - Typescript
 - Rollup
+- Css Modules
 - Jest with code coverage report
 - `Typedoc` for API documentation
 - `standard-version` ready

jest.config.js

@@ -2,4 +2,10 @@ module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
   testPathIgnorePatterns: ['example', 'node_modules'],
+  setupFiles: ['@testing-library/react/dont-cleanup-after-each'],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '\\.(scss|sass|css)$': 'identity-obj-proxy',
+  },
 };

package.json

@@ -62,8 +62,10 @@
     "eslint-plugin-standard": "^4.1.0",
     "gh-pages": "^3.1.0",
     "husky": "^6.0.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "lint-staged": "^10.5.4",
+    "postcss": "^8.2.13",
     "prettier": "^2.2.1",
     "prompt": "^1.1.0",
     "react": "^17.0.2",
@@ -74,6 +76,7 @@
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",

rollup.config.js

@@ -1,6 +1,7 @@
 import commonjs from 'rollup-plugin-commonjs';
 import json from 'rollup-plugin-json';
 import resolve from 'rollup-plugin-node-resolve';
+import postcss from 'rollup-plugin-postcss';
 import external from 'rollup-plugin-peer-deps-external';
 import sourceMaps from 'rollup-plugin-sourcemaps';
 import { terser } from 'rollup-plugin-terser';
@@ -36,6 +37,9 @@ export default {
   },
   plugins: [
     external(),
+    postcss({
+      modules: true,
+    }),
     // Allow json resolution
     json(),
     // Compile TypeScript files

src/__tests__/index.test.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Main from '../index';
 
 describe('My Component', () => {

src/index.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import styles from './styles.module.css';
 
 interface Props {
   message?: string;
@@ -11,7 +12,9 @@ function Greeting(props: Props) {
     console.log('Incoming message: ', props.message);
   }, [props.message]);
 
-  return <div>{props.message ?? 'No Message'}</div>;
+  return (
+    <div className={styles.container}>{props.message ?? 'No Message'}</div>
+  );
 }
 
 export default Greeting;

src/styles.module.css

@@ -0,0 +1,3 @@
+.container {
+  display: flex;
+}

tools/init.ts

@@ -12,6 +12,11 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+if (process.env['RTL_SKIP_POSTINSTALL']) {
+  console.log('Skipping post-install process...');
+  process.exit(0);
+}
+
 const { basename, resolve } = require('path');
 const replace = require('replace-in-file');
 const { readFileSync, writeFileSync } = require('fs');

tsconfig.json

@@ -2,7 +2,12 @@
   "compilerOptions": {
     "target": "es5",
     "module": "ES6",
-    "lib": ["ES2017", "ES7", "ES6", "DOM"],
+    "lib": [
+      "ES2017",
+      "ES7",
+      "ES6",
+      "DOM"
+    ],
     "declaration": true,
     "declarationDir": "dist",
     "outDir": "dist",
@@ -16,8 +21,21 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "jsx": "react-jsx",
-    "baseUrl": "./src"
+    "baseUrl": "./src",
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules"
+      }
+    ],
   },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist", "src/**/*.spec.tsx", "src/**/*.test.tsx"]
+  "include": [
+    "src/**/*",
+    "Globals.d.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx"
+  ]
 }