fix: css-module support about 'keyframes logo-spin'

template/images.d.ts → template/shims/images.d.ts

@@ -5,6 +5,3 @@ declare module '*.jpeg'
 declare module '*.gif'
 declare module '*.bmp'
 declare module '*.tiff'
-declare module '*.css'
-declare module '*.scss'
-declare module '*.sass'

template/shims/styles.d.ts

@@ -0,0 +1,16 @@
+
+declare module '*.module.css' {
+  const exports: { [exportName: string]: string };
+  export = exports;
+}
+declare module '*.module.scss' {
+  const exports: { [exportName: string]: string };
+  export = exports;
+}
+declare module '*.module.sass' {
+  const exports: { [exportName: string]: string };
+  export = exports;
+}
+declare module '*.css'
+declare module '*.scss'
+declare module '*.sass'

template/src/App.css → template/src/App.module.css

@@ -1,13 +1,13 @@
-:local .app {
+.app {
   text-align: center;
 }
 
-:local .logo {
+.logo {
   animation: logo-spin infinite 20s linear;
   height: 40vmin;
 }
 
-:local .header {
+.header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
@@ -18,7 +18,7 @@
   color: white;
 }
 
-:local .link {
+.link {
   color: #61dafb;
 }
 

template/src/App.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as styles from './App.css';
+import * as styles from './App.module.css';
 import logo from './logo.svg';
 
 class App extends React.Component {