Merge branch 'main' into fix/add-prop-types-to-deps

.all-contributorsrc

@@ -822,6 +822,15 @@
       ]
     },
     {
+      "login": "imp-dance",
+      "name": "Håkon",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1190770?v=4",
+      "profile": "https://haakon.dev/",
+      "contributions": [
+        "code"
+      ]
+     },
+     {
       "login": "TannerS",
       "name": "Tanner Summers",
       "avatar_url": "https://avatars.githubusercontent.com/u/8866319?v=4",

README.md

@@ -189,6 +189,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/egriff38"><img src="https://avatars.githubusercontent.com/u/6627718?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Eshin Griffith</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=egriff38" title="Code">💻</a></td>
     <td align="center"><a href="https://riantavares.github.io/"><img src="https://avatars.githubusercontent.com/u/8935295?v=4?s=100" width="100px;" alt=""/><br /><sub><b>@RianTavaresOn</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=RianTavares" title="Code">💻</a> <a href="#design-RianTavares" title="Design">🎨</a></td>
     <td align="center"><a href="https://github.com/ColbyJohnIBM"><img src="https://avatars.githubusercontent.com/u/19613692?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ColbyJohnIBM</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ColbyJohnIBM" title="Code">💻</a></td>
+    <td align="center"><a href="https://haakon.dev/"><img src="https://avatars.githubusercontent.com/u/1190770?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Håkon</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=imp-dance" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/TannerS"><img src="https://avatars.githubusercontent.com/u/8866319?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tanner Summers</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=TannerS" title="Code">💻</a></td>
   </tr>
   <tr>

config/jest-config-carbon/index.js

@@ -21,7 +21,7 @@ module.exports = {
   ],
   transform: {
     '^.+\\.(js|jsx)$': require.resolve('./transform/jsTransform.js'),
-    '^.+\\.css$': require.resolve('./transform/cssTransform.js'),
+    '^.+\\.s?css$': require.resolve('./transform/cssTransform.js'),
     '^(?!.*\\.(js|jsx|css|json)$)': require.resolve(
       './transform/fileTransform.js'
     ),

config/jest-config-carbon/package.json

@@ -35,7 +35,8 @@
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
     "jest-circus": "^27.0.6",
-    "jest-watch-typeahead": "^0.6.4"
+    "jest-watch-typeahead": "^0.6.4",
+    "sass": "^1.45.0"
   },
   "devDependencies": {
     "react": "^17.0.1",

config/jest-config-carbon/transform/cssTransform.js

@@ -7,15 +7,48 @@
 
 'use strict';
 
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/tutorial-webpack.html
+const { createHash } = require('crypto');
+const fs = require('fs');
+const sass = require('sass');
+const path = require('path');
+
+const THIS_FILE = fs.readFileSync(__filename);
 
 module.exports = {
-  process() {
-    return 'module.exports = {};';
+  process(_file, filepath) {
+    const result = sass.renderSync({
+      file: filepath,
+      outputStyle: 'compressed',
+    });
+    return `
+      const css = \`${result.css.toString()}\`;
+      let style;
+      beforeAll(() => {
+        style = document.createElement('style');
+        style.textContent = css;
+        document.head.appendChild(style);
+      });
+      afterAll(() => {
+        document.head.removeChild(style);
+      });
+    `;
   },
-  getCacheKey() {
-    // The output is always the same.
-    return 'cssTransform';
+  getCacheKey(sourceText, sourcePath, transformOptions) {
+    const { config, configString, instrument } = transformOptions;
+    return createHash('md5')
+      .update(THIS_FILE)
+      .update('\0', 'utf8')
+      .update(sourceText)
+      .update('\0', 'utf8')
+      .update(path.relative(config.rootDir, sourcePath))
+      .update('\0', 'utf8')
+      .update(configString)
+      .update('\0', 'utf8')
+      .update(instrument ? 'instrument' : '')
+      .update('\0', 'utf8')
+      .update(process.version)
+      .update('\0', 'utf8')
+      .update(sass.info)
+      .digest('hex');
   },
 };

package.json

@@ -58,7 +58,7 @@
     "cross-spawn": "^6.0.5",
     "doctoc": "^1.4.0",
     "eslint": "^7.28.0",
-    "fs-extra": "^8.1.0",
+    "fs-extra": "^10.0.0",
     "glob": "^7.1.4",
     "husky": "^7.0.0",
     "jest": "^27.0.6",

packages/cli/package.json

@@ -37,7 +37,7 @@
     "clipboardy": "^2.1.0",
     "enquirer": "^2.3.6",
     "fast-glob": "^3.2.7",
-    "fs-extra": "^8.0.1",
+    "fs-extra": "^10.0.0",
     "inquirer": "^6.4.1",
     "klaw-sync": "^6.0.0",
     "lodash.template": "^4.5.0",

packages/colors/package.json

@@ -41,7 +41,7 @@
     "@carbon/scss-generator": "^10.13.0",
     "@carbon/test-utils": "^10.20.0",
     "change-case": "^4.1.1",
-    "fs-extra": "^8.1.0",
+    "fs-extra": "^10.0.0",
     "node-sass": "^6.0.1",
     "rimraf": "^3.0.0"
   },

packages/components/package.json

@@ -12,9 +12,6 @@
   },
   "bugs": "https://github.com/carbon-design-system/carbon/issues",
   "homepage": "https://www.carbondesignsystem.com/",
-  "engines": {
-    "node": ">=6.x"
-  },
   "files": [
     "css/**/*",
     "es/**/*",