chore: Add css modules example (#417)

Author: dmtrKovalenko

README.md

@@ -139,6 +139,7 @@ Spec | Description
 [stateless-spec.js](cypress/component/basic/stateless-spec.js) | Passes Cypress stub to the component, confirms the component calls it on click
 [window-spec.js](cypress/component/basic/window-spec.js) | In the component test, the spec `window` and the application's `window` where the component is running should be the same object
 [css](cypress/component/basic/css) | Shows that component with `import './Button.css'` works
+[css modules](cypress/component/basic/css-modules) | Shows that component that using css modules styles works
 [network](cypress/component/basic/network) | Confirms we can use `cy.route` to stub / spy on component's network calls
 [no-visit](cypress/component/basic/no-visit) | Component specs cannot call `cy.visit`
 [react-book-by-chris-noring](cypress/component/basic/react-book-by-chris-noring) | Copied test examples from [React Book](https://softchris.github.io/books/react) and adapted for Cypress component tests

cypress/component/basic/css-modules/Button.jsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import * as PropTypes from 'prop-types'
+import styles from './Button.modules.css'
+
+export const Button = ({ name, orange, wide }) => {
+  const className = [
+    styles.componentButton,
+    orange ? styles.orange : '',
+    wide ? styles.wide : '',
+  ]
+
+  return (
+    <div className={className.join(' ').trim()}>
+      <button>{name}</button>
+    </div>
+  )
+}
+
+Button.propTypes = {
+  orange: PropTypes.bool,
+  wide: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+}

cypress/component/basic/css-modules/Button.modules.css

@@ -0,0 +1,63 @@
+.componentButton {
+  display: inline-flex;
+  width: 25%;
+  flex: 1 0 auto;
+}
+
+.componentButton.wide {
+  width: 50%;
+}
+
+.componentButton button {
+  background-color: #e0e0e0;
+  border: 0;
+  font-size: 12px;
+  margin: 0 1px 0 0;
+  flex: 1 0 auto;
+  padding: 0;
+}
+
+.componentButton:last-child button {
+  margin-right: 0;
+}
+
+.componentButton.orange button {
+  background-color: #f5923e;
+  color: white;
+}
+
+@media (min-width: 200px) and (min-height: 200px) {
+  .componentButton button {
+    font-size: 25px;
+  }
+}
+
+@media (min-width: 300px) and (min-height: 300px) {
+  .componentButton button {
+    font-size: 30px;
+  }
+}
+
+@media (min-width: 400px) and (min-height: 400px) {
+  .componentButton button {
+    font-size: 35px;
+  }
+}
+
+@media (min-width: 500px) and (min-height: 500px) {
+  .componentButton button {
+    font-size: 40px;
+  }
+}
+
+@media (min-width: 600px) and (min-height: 600px) {
+  .componentButton button {
+    font-size: 60px;
+  }
+}
+
+@media (min-width: 800px) and (min-height: 800px) {
+  .componentButton button {
+    font-size: 70px;
+  }
+}

cypress/component/basic/css-modules/css-modules-orange-button-spec.js

@@ -0,0 +1,17 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import styles from './Button.modules.css'
+import { Button } from './Button.jsx'
+
+describe('Button', () => {
+  it('renders orange styles', () => {
+    mount(<Button name="Orange" orange />)
+
+    cy.get('div > button')
+      .parent()
+      .should('have.class', styles.orange)
+      .find('button')
+      .should('have.css', 'background-color', 'rgb(245, 146, 62)')
+  })
+})

cypress/component/basic/css/orange-button-spec.js renamed to cypress/component/basic/css/css-orange-button-spec.js

@@ -24,8 +24,21 @@ const webpackOptions = {
         options: babelConfig,
       },
       {
-        test: /\.css$/,
+        test: /\.modules\.css$/i,
         exclude: [/node_modules/],
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        exclude: [/node_modules/, /\.modules\.css$/i],
         use: ['style-loader', 'css-loader'],
       },
       {