fix(react): component generator outputs correct CSS module setup (#9084)

nrwl · Feb 22, 2022 · e6941e4 · e6941e4
1 parent 0a62f1f
commit e6941e4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/packages/react/src/generators/component/component.spec.ts b/packages/react/src/generators/component/component.spec.ts
@@ -34,6 +34,12 @@ describe('component', () => {
     expect(
       appTree.exists('libs/my-lib/src/lib/hello/hello.module.css')
     ).toBeTruthy();
+    expect(
+      appTree.read('libs/my-lib/src/lib/hello/hello.tsx').toString()
+    ).toMatch(/import styles from '.\/hello.module.css'/);
+    expect(
+      appTree.read('libs/my-lib/src/lib/hello/hello.tsx').toString()
+    ).toMatch(/<div className={styles\['container']}>/);
   });
 
   it('should generate files with global CSS', async () => {
@@ -52,6 +58,12 @@ describe('component', () => {
     expect(
       appTree.exists('libs/my-lib/src/lib/hello/hello.module.css')
     ).toBeFalsy();
+    expect(
+      appTree.read('libs/my-lib/src/lib/hello/hello.tsx').toString()
+    ).toMatch(/import '.\/hello.css'/);
+    expect(
+      appTree.read('libs/my-lib/src/lib/hello/hello.tsx').toString()
+    ).toMatch(/<div>/);
   });
 
   it('should generate files for an app', async () => {

diff --git a/packages/react/src/generators/component/files/__fileName__.module.__style__ b/packages/react/src/generators/component/files/__fileName__.module.__style__
@@ -0,0 +1,2 @@
+.container {
+}
diff --git a/packages/react/src/generators/component/files/__fileName__.tsx__tmpl__ b/packages/react/src/generators/component/files/__fileName__.tsx__tmpl__
@@ -9,14 +9,19 @@ import { Route, Link } from 'react-router-dom';
 <% if (hasStyles) {
    if (styledModule && styledModule !== 'styled-jsx') {
     var wrapper = 'Styled' + className;
+    var extras = '';
   %>
   import styled from '<%= styledModule %>';
   <% } else {
     var wrapper = 'div';
+    var extras = globalCss ? '' : " className={styles['container']}";
   %>
-  <%- style !== 'styled-jsx' ? globalCss ? `import './${fileName}.${style}';` : `import './${fileName}.module.${style}';`: '' %>
+  <%- style !== 'styled-jsx' ? globalCss ? `import './${fileName}.${style}';` : `import styles from './${fileName}.module.${style}';`: '' %>
   <% }
-} else { var wrapper = 'div'; } %>
+} else {
+    var wrapper = 'div';
+    var extras = '';
+} %>
 
 /* eslint-disable-next-line */
 export interface <%= className %>Props {
@@ -31,7 +36,7 @@ const Styled<%= className %> = styled.div`
 export class <%= className %> extends Component<<%= className %>Props> {
   render() {
     return (
-      <<%= wrapper %>>
+      <<%= wrapper %><%- extras %>>
         <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
         <p>Welcome to <%= className %>!</p>
         <% if (routing) { %>
@@ -47,7 +52,7 @@ export class <%= className %> extends Component<<%= className %>Props> {
 <% } else { %>
 export function <%= className %>(props: <%= className %>Props) {
   return (
-    <<%= wrapper %>>
+    <<%= wrapper %><%- extras %>>
       <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
       <h1>Welcome to <%= className %>!</h1>
       <% if (routing) { %>