Merge pull request #96 from martpie/scss-fix-9.5.0

Potential fix for CSS and SCSS issues

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,7 +4,6 @@ about: Report a bug
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 - [ ] I HAVE READ [THE FAQ](https://github.com/martpie/next-transpile-modules#faq) AND MY PROBLEM WAS NOT DESCRIBED THERE
@@ -28,6 +27,7 @@ A clear and concise description of what you expected to happen.
 - Node.js version:
 - `npm`/`yarn` version:
 - Operating System:
+- Webpack 4 or 5:
 
 **Additional context**
 Add any other context about the problem here.

.github/workflows/ci.yml

@@ -30,6 +30,9 @@ jobs:
       - name: Install tests apps dependencies (webpack 5)
         run: yarn --frozen-lockfile --cwd src/__tests__/__apps__/webpack-5
 
+      - name: Install tests apps dependencies (yarn workspaces)
+        run: yarn --frozen-lockfile --cwd src/__tests__/__apps__/yarn-workspaces
+
       - name: 'Test: unit & end-to-end tests'
         run: npm test
 

jest-puppeteer.config.js

@@ -1,4 +1,5 @@
 const basicAppPath = 'src/__tests__/__apps__/basic';
+const yarnWorkspacesAppPath = 'src/__tests__/__apps__/yarn-workspaces/app';
 const webpack5AppPath = 'src/__tests__/__apps__/webpack-5';
 
 module.exports = {
@@ -14,9 +15,14 @@ module.exports = {
       port: 3000
     },
     {
-      command: `npm run build --prefix=${webpack5AppPath} && npm run start --prefix=${webpack5AppPath} -- --port 3001`,
+      command: `yarn --cwd ${yarnWorkspacesAppPath} run build  && yarn --cwd ${yarnWorkspacesAppPath} run start -- --port 3001`,
       launchTimeout: 50000,
       port: 3001
+    },
+    {
+      command: `yarn --cwd ${webpack5AppPath} run build  && yarn --cwd ${webpack5AppPath} run start -- --port 3002`,
+      launchTimeout: 50000,
+      port: 3002
     }
   ]
 };

package.json

@@ -36,7 +36,7 @@
     "slash": "^3.0.0"
   },
   "devDependencies": {
-    "@types/jest-environment-puppeteer": "^4.3.1",
+    "@types/jest-environment-puppeteer": "4.3.2",
     "anymatch": "2.0.0",
     "eslint": "6.8.0",
     "eslint-config-prettier": "6.10.0",
@@ -47,11 +47,11 @@
     "eslint-plugin-promise": "4.2.1",
     "eslint-plugin-standard": "4.0.1",
     "jest": "25.1.0",
-    "jest-environment-puppeteer": "^4.4.0",
+    "jest-environment-puppeteer": "4.4.0",
     "jest-puppeteer": "^4.4.0",
     "prettier": "1.19.1",
     "prettier-eslint": "9.0.1",
-    "puppeteer": "^2.1.1",
+    "puppeteer": "5.2.1",
     "rewire": "4.0.1",
     "webpack": "^4.44.0"
   }

src/__tests__/__apps__/basic/next.config.js

@@ -1,3 +1,3 @@
-const withTM = require('./lib/next-transpile-modules')(['shared', 'shared-ts', 'shared-ui', 'lodash-es']);
+const withTM = require('../../../next-transpile-modules')(['shared', 'shared-ts', 'shared-ui', 'lodash-es']);
 
 module.exports = withTM({});

src/__tests__/__apps__/basic/package.json

@@ -1,12 +1,12 @@
 {
-  "name": "test-local-module",
+  "name": "test-basic",
   "version": "1.0.0",
   "description": "",
   "private": "true",
   "scripts": {
-    "dev": "cross-env NODE_PRESERVE_SYMLINKS=1 next",
-    "build": "cross-env NODE_PRESERVE_SYMLINKS=1 next build",
-    "start": "cross-env NODE_PRESERVE_SYMLINKS=1 next start"
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
   },
   "author": "Pierre de la Martinière <pierre.de.la.martiniere@gmail.com>",
   "license": "MIT",
@@ -22,7 +22,6 @@
   },
   "devDependencies": {
     "@types/react": "^16.9.23",
-    "@types/react-dom": "^16.9.5",
-    "cross-env": "^7.0.2"
+    "@types/react-dom": "^16.9.5"
   }
 }

src/__tests__/__apps__/webpack-5/pages

@@ -0,0 +1 @@
+../basic/pages

src/__tests__/__apps__/yarn-workspaces/_shared-ts/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "shared-ts",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}

src/__tests__/__apps__/yarn-workspaces/_shared-ts/utils/calc.ts

@@ -0,0 +1,2 @@
+export const add = (a: number, b: number) => a + b;
+export const substract = (a: number, b: number) => a - b;

src/__tests__/__apps__/yarn-workspaces/_shared-ui/components/Button.jsx

@@ -0,0 +1,16 @@
+import styles from './Button.module.css';
+
+function Button(props) {
+  return (
+    <button
+      type='button'
+      // Note how the "error" class is accessed as a property on the imported
+      // `styles` object.
+      className={styles.error}
+    >
+      {props.children}
+    </button>
+  );
+}
+
+export default Button;

src/__tests__/__apps__/yarn-workspaces/_shared-ui/components/Button.module.css

@@ -0,0 +1,4 @@
+.error {
+  color: white;
+  background-color: red;
+}

src/__tests__/__apps__/yarn-workspaces/_shared-ui/components/Input.jsx

@@ -0,0 +1,7 @@
+import styles from './Input.module.scss';
+
+function Input() {
+  return <input type='text' className={styles.input} />;
+}
+
+export default Input;

src/__tests__/__apps__/yarn-workspaces/_shared-ui/components/Input.module.scss

@@ -0,0 +1,9 @@
+$padding: 10px;
+$bg: black;
+$color: white;
+
+.input {
+  padding: $padding;
+  background-color: $bg;
+  color: $color;
+}

src/__tests__/__apps__/yarn-workspaces/_shared-ui/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "shared-ui",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  }
+}

src/__tests__/__apps__/yarn-workspaces/_shared-ui/styles/_variables.scss

@@ -0,0 +1 @@
+$background: red;

src/__tests__/__apps__/yarn-workspaces/_shared-ui/styles/another-global.scss

@@ -0,0 +1,5 @@
+@import 'variables';
+
+body {
+  background-color: $background;
+}

src/__tests__/__apps__/yarn-workspaces/_shared-ui/styles/global.css

@@ -0,0 +1,4 @@
+body {
+  background-color: black;
+  color: white;
+}

src/__tests__/__apps__/yarn-workspaces/_shared-ui/styles/yet-another-global.sass

@@ -0,0 +1,5 @@
+$base-color: black
+$border-dark: rgba($base-color, 0.88)
+
+body
+  border: 1px solid $border-dark

src/__tests__/__apps__/yarn-workspaces/_shared/main.js

@@ -0,0 +1 @@
+export const multiply = (a, b) => a * b;