Add postcss-d-ts to CRA as aside

.gitignore

@@ -15,3 +15,4 @@ build
 
 *.tgz
 package/
+postcss-output

__recipes__/create-react-app/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+postcss-output

__recipes__/create-react-app/package.json

@@ -10,7 +10,8 @@
     "@types/node": "^12.20.6",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
-    "postcss-cli": "^8.3.1",
+    "npm-run-all": "^4.1.5",
+    "postcss-cli": "^7.1.2",
     "postcss-d-ts": "file:../../package",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
@@ -19,8 +20,12 @@
     "web-vitals": "^1.1.1"
   },
   "scripts": {
+    "postcss-d-ts": "postcss 'src/**/*.css' --use postcss-d-ts/dist/7 --dir postcss-output",
+    "postcss": "postcss 'src/**/*.{css,scss,sass}' --dir postcss-output",
+    "postcss:dev": "npm run postcss -- --watch",
+    "start:both": "npm-run-all -p postcss:dev start",
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "npm run postcss && react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "prebuild": "npm run ci && npm install ../../package/",

__recipes__/create-react-app/postcss.config.js

@@ -0,0 +1,19 @@
+!process.env.NODE_ENV && (process.env.NODE_ENV = "development")
+
+const craConfig = require("react-scripts/config/webpack.config")()
+
+const {oneOf} = craConfig.module.rules.find(({oneOf}) => oneOf)
+
+const {use} = oneOf.find(({use}) => use && use
+  .some(({options: {ident}}) => ident === "postcss")
+)
+
+const {options} = use.find(({options: {ident}}) => ident === "postcss")
+const plugins = options.plugins()
+
+plugins.push(require("postcss-d-ts/dist/7"))
+
+module.exports = {
+  ...options,
+  plugins
+}

__recipes__/create-react-app/src/App.module.css.d.ts

@@ -0,0 +1,11 @@
+/** Generated by [postcss-d-ts](https://github.com/askirmas/postcss-d-ts) */
+declare const identifiersMap: CssIdentifiersMap
+
+export default identifiersMap
+
+export type CssIdentifiersMap = {
+  "App": string|undefined
+  "App-header": string|undefined
+  "App-link": string|undefined
+  "App-logo": string|undefined
+}

__recipes__/create-react-app/src/App.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import logo from './logo.svg';
-import './App.css';
+import styles from './App.module.css';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+    <div className={styles.App}>
+      <header className={styles["App-header"]}>
+        <img src={logo} className={styles["App-logo"]} alt="logo" />
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
         </p>
         <a
-          className="App-link"
+          className={styles["App-link"]}
           href="https://reactjs.org"
           target="_blank"
           rel="noopener noreferrer"