feat: introduce CSS in JS via Linaria

fix adobe#14

Author: jedmao

README.md

@@ -22,6 +22,7 @@ See [Design Goals](https://github.com/adobe/generator-tsx/wiki/Design-Goals).
    -  [Router](https://github.com/ReactTraining/react-router)
    -  [Testing Library](https://github.com/testing-library/react-testing-library#react-testing-library)
    -  [react-intl](https://github.com/formatjs/react-intl)
+-  CSS in JS via [Linaria](https://linaria.now.sh/)
 
 ## Installation
 

generators/app/index.ts

@@ -95,13 +95,15 @@ export = class extends Generator {
 	}
 
 	public writing() {
-		;['public', 'src', 'package.json', 'README.md'].forEach(filename => {
-			this.fs.copyTpl(
-				this.templatePath(filename),
-				this.destinationPath(filename),
-				this.answers,
-			)
-		})
+		;['config', 'public', 'src', 'package.json', 'README.md'].forEach(
+			filename => {
+				this.fs.copyTpl(
+					this.templatePath(filename),
+					this.destinationPath(filename),
+					this.answers,
+				)
+			},
+		)
 	}
 
 	public install() {
@@ -124,6 +126,7 @@ export = class extends Generator {
 		)
 		this.npmInstall(
 			[
+				'@craco/craco@5',
 				'@jedmao/tsconfig',
 				'@types/fetch-mock@^7',
 				'@types/jest@^24',
@@ -140,6 +143,7 @@ export = class extends Generator {
 				'fetch-mock@^7',
 				'husky@^2',
 				'jest-fetch-mock@^2',
+				'linaria@1',
 				'lint-staged@^8',
 				'prettier@^1',
 				'react-scripts@^3',

generators/app/templates/.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# linaria
+src/.linaria_cache

generators/app/templates/.vscode/settings.json

@@ -6,6 +6,7 @@
   "search.exclude": {
     "**/build": true,
     "**/coverge": true,
-    "**/node_modules": true
+    "**/node_modules": true,
+    "src/.linaria_cache": true
   }
 }

generators/app/templates/package.json

@@ -13,10 +13,10 @@
   "homepage": "https://github.com/<%= githubUsername %>/<%= appname %>#readme",
   "scripts": {
     "clean": "rimraf coverage build *.log*",
-    "start": "react-scripts start",
+    "start": "craco start",
     "prebuild": "rimraf build",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject",
     "check-types": "tsc --noEmit",
     "precover": "rimraf coverage",
@@ -65,6 +65,7 @@
       "lcov"
     ]
   },
+  "cracoConfig": "config/craco.config.js",
   "eslintConfig": {
     "extends": "react-app",
     "globals": {

generators/app/templates/src/components/Home/Home.module.css

@@ -1,3 +1,4 @@
+import { styled } from 'linaria/react'
 import React, { useEffect } from 'react'
 import Helmet from 'react-helmet'
 import { FormattedMessage, FormattedHTMLMessage } from 'react-intl'
@@ -8,7 +9,6 @@ import useTheme from 'helpers/useTheme'
 import Theme from 'models/Theme'
 import RootState from 'store/RootState'
 
-import styles from './Home.module.css'
 import logo from './logo.svg'
 
 interface StateProps extends Pick<RootState, 'cart'> {
@@ -31,12 +31,12 @@ const Home: React.FC<HomeProps & StateProps & DispatchProps> = ({
 	}, [getCart])
 	useTheme(theme)
 	return (
-		<div className={styles.root}>
+		<Root>
 			<Helmet>
 				<title>Home</title>
 			</Helmet>
-			<header className={styles.header}>
-				<img src={logo} className={styles.logo} alt="logo" />
+			<Header>
+				<Logo src={logo} alt="logo" />
 				<p>
 					<FormattedHTMLMessage id="home.instructions" />
 				</p>
@@ -48,8 +48,8 @@ const Home: React.FC<HomeProps & StateProps & DispatchProps> = ({
 					<FormattedMessage id="home.learn" />
 				</a>
 				{JSON.stringify(cart.subtotal.amount)}
-			</header>
-		</div>
+			</Header>
+		</Root>
 	)
 }
 
@@ -62,3 +62,29 @@ export default connect<StateProps, DispatchProps, void, RootState>(
 		getCart: fetchCart,
 	},
 )(Home)
+
+const Root = styled.div`
+	text-align: center;
+`
+
+const Header = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: calc(10px + 2vmin);
+`
+
+const Logo = styled.img`
+	animation: spin infinite 20s linear;
+	height: 40vmin;
+	pointer-events: none;
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+`

generators/app/templates/src/components/Home/Home.tsx

@@ -1,18 +1,21 @@
+import { styled } from 'linaria/react'
 import React from 'react'
 import { connect } from 'react-redux'
 
 import RootState from 'store/RootState'
 
-import styles from './QuxQuux.module.css'
-
 interface StateProps {}
 
 interface DispatchProps {}
 
 export interface QuxQuuxProps {}
 
 const QuxQuux: React.FC<QuxQuuxProps & StateProps & DispatchProps> = () => (
-	<div className={styles.root}>content</div>
+	<Root>content</Root>
 )
 
 export default connect<StateProps, DispatchProps, void, RootState>(null)(QuxQuux)
+
+const Root = styled.div`
+	display: block;
+`

generators/component/expected/barBaz/QuxQuux/QuxQuux.module.css

@@ -22,7 +22,6 @@ describe('tsx:component', () => {
 			'barBaz/QuxQuux/index.ts',
 			'barBaz/QuxQuux/QuxQuux.tsx',
 			'barBaz/QuxQuux/QuxQuux.test.tsx',
-			'barBaz/QuxQuux/QuxQuux.module.css',
 		]
 		for (const filename of expectedFiles) {
 			assert.fileContent(

generators/component/expected/barBaz/QuxQuux/QuxQuux.tsx

@@ -29,21 +29,19 @@ export = class extends Generator {
 		const parts = this.options.name.split('/').map(camelCase)
 		const name = sentenceCase(parts[parts.length - 1])
 		parts.splice(-1, 1, name)
-		;['index.ts', 'Foo.tsx', 'Foo.test.tsx', 'Foo.module.css'].forEach(
-			filename => {
-				this.fs.copyTpl(
-					this.templatePath(filename),
-					this.destinationPath(
-						`src/components/${parts.join('/')}/${filename.replace(
-							/^Foo/,
-							name,
-						)}`,
-					),
-					{
+		;['index.ts', 'Foo.tsx', 'Foo.test.tsx'].forEach(filename => {
+			this.fs.copyTpl(
+				this.templatePath(filename),
+				this.destinationPath(
+					`src/components/${parts.join('/')}/${filename.replace(
+						/^Foo/,
 						name,
-					},
-				)
-			},
-		)
+					)}`,
+				),
+				{
+					name,
+				},
+			)
+		})
 	}
 }

generators/component/index.test.ts

@@ -1,18 +1,21 @@
+import { styled } from 'linaria/react'
 import React from 'react'
 import { connect } from 'react-redux'
 
 import RootState from 'store/RootState'
 
-import styles from './<%= name %>.module.css'
-
 interface StateProps {}
 
 interface DispatchProps {}
 
 export interface <%= name %>Props {}
 
 const <%= name %>: React.FC<<%= name %>Props & StateProps & DispatchProps> = () => (
-	<div className={styles.root}>content</div>
+	<Root>content</Root>
 )
 
 export default connect<StateProps, DispatchProps, void, RootState>(null)(<%= name %>)
+
+const Root = styled.div`
+	display: block;
+`