Merge 6107a7f into c4562de

.github/workflows/ci.yml

@@ -52,7 +52,7 @@ jobs:
         run: yarn build-storybook
 
       - name: Start Server
-        run: yarn http-server docs -p 9001 & npx wait-on http://localhost:9001
+        run: npx http-server docs -p 9001 & npx wait-on http://localhost:9001
 
       - uses: chromaui/action@v1
         with:

.postcssrc.js

@@ -0,0 +1,14 @@
+const date = new Date();
+
+module.exports = {
+  map: true,
+  plugins: {
+    'postcss-discard-duplicates': {},
+    autoprefixer: {},
+    'css-mqpacker': {},
+    'postcss-banner': {
+      banner: `Copyright 2019-${date.getFullYear()} Workday, Inc.`,
+    },
+    'postcss-inline-svg': {},
+  },
+};

.storybook/webpack.config.js

@@ -5,7 +5,6 @@ const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
 const modulesPath = path.resolve(__dirname, '../modules');
 const welcomeSectionPath = path.resolve(__dirname, './');
 const utilsPath = path.resolve(__dirname, '../utils');
-const postcssConfigPath = path.resolve(__dirname, './postcss.config');
 
 module.exports = ({config, mode}) => {
   // This is so we get consistent results when loading .ts/tsx and .mdx files
@@ -20,26 +19,18 @@ module.exports = ({config, mode}) => {
     },
   ];
 
-  // Exclude all node_modules from babel-loader
-  config.module.rules
-    .find(rule => /mjs\|jsx/.test(rule.test.toString()))
-    .exclude.push(/node_modules/);
-
-  // Filter out extraneous rules added by CRA (react-scripts)
-  // react-scripts automatically adds js/ts matchers for a `src` folder which we don't use so these rules are moot
-  config.module.rules = config.module.rules.filter(
-    rule => !/js\|mjs\|jsx\|ts\|tsx/.test(rule.test.toString())
-  );
-
-  // Override CRA postcss presets
-  config.module.rules.forEach(rule => {
-    if (rule.test.toString().includes('scss|sass')) {
-      delete rule.use[2].options.plugins;
-
-      rule.use[2].options.config = {
-        path: postcssConfigPath,
-      };
-    }
+  config.module.rules.push({
+    test: /\.(scss|css)$/,
+    use: [
+      'style-loader',
+      {
+        loader: 'css-loader',
+        options: {importLoaders: 2},
+      },
+      'postcss-loader',
+      'sass-loader',
+    ],
+    include: modulesPath,
   });
 
   // Add `.ts` and `.tsx` as a resolvable extension.

.travis.yml

@@ -26,7 +26,6 @@ install:
 
 jobs:
   include:
-
   - stage: tag
     script:
       - yarn build

modules/segmented-control/react/package.json

@@ -47,7 +47,6 @@
     "react": ">= 16.8 < 17"
   },
   "dependencies": {
-    "@workday/canvas-kit-labs-react-core": "^4.0.0-beta.1",
     "@workday/canvas-kit-react-button": "^4.0.0-beta.1",
     "@workday/canvas-kit-react-common": "^4.0.0-beta.1",
     "@workday/canvas-kit-react-core": "^4.0.0-beta.1",

package.json

@@ -12,19 +12,19 @@
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
-    "@commitlint/cli": "^8.1.0",
+    "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.1.0",
-    "@cypress/webpack-preprocessor": "^4.1.0",
+    "@cypress/webpack-preprocessor": "^4.1.3",
     "@emotion/is-prop-valid": "^0.8.2",
     "@storybook/addon-actions": "^5.3.14",
-    "@storybook/addon-docs": "^5.3.14",
+    "@storybook/addon-docs": "^5.3.17",
     "@storybook/addon-knobs": "^5.3.14",
     "@storybook/addon-storysource": "^5.3.14",
     "@storybook/addon-viewport": "^5.3.14",
     "@storybook/components": "^5.3.14",
-    "@storybook/react": "^5.3.14",
+    "@storybook/react": "^5.3.17",
     "@storybook/source-loader": "^5.3.14",
-    "@testing-library/cypress": "^5.3.0",
+    "@testing-library/cypress": "^6.0.0",
     "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^9.1.4",
     "@types/chroma-js": "^1.4.3",
@@ -46,17 +46,17 @@
     "@typescript-eslint/parser": "^2.25.0",
     "autoprefixer": "^9.5.0",
     "axe-core": "^3.4.0",
-    "babel-jest": "^24.9.0",
+    "babel-jest": "^25.1.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-emotion": "^10.0.29",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "colors": "^1.4.0",
-    "commitizen": "^3.1.1",
+    "commitizen": "^4.0.4",
     "core-js": "^3.5.0",
     "css-loader": "^3.2.0",
     "css-mqpacker": "^7.0.0",
     "cssstats": "^3.3.0",
-    "cypress": "^4.0.0",
+    "cypress": "4.3.0",
     "cypress-axe": "^0.5.1",
     "cypress-pipe": "^1.5.0",
     "cypress-plugin-tab": "^1.0.3",
@@ -68,7 +68,7 @@
     "emotion-theming": "^10.0.10",
     "enzyme": "^3.6.0",
     "enzyme-adapter-react-16": "^1.5.0",
-    "eslint": "^6.5.1",
+    "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.3.0",
     "eslint-plugin-compat": "^3.5.1",
     "eslint-plugin-emotion": "^10.0.14",
@@ -81,20 +81,19 @@
     "file-loader": "^1.1.5",
     "github-markdown-css": "^3.0.1",
     "glob": "^7.1.6",
-    "http-server": "^0.12.1",
     "husky": "^0.14.3",
     "inquirer": "^7.0.0",
-    "jest": "^24.1.0",
+    "jest": "^25.1.0",
     "jest-axe": "^3.2.0",
     "jest-emotion": "^10.0.17",
-    "jest-junit": "^6.4.0",
-    "lerna": "^3.13.1",
+    "jest-junit": "^10.0.0",
+    "lerna": "^3.20.2",
     "lint-staged": "8.0.5",
     "markdown-to-jsx": "^6.10.3",
-    "mkdirp": "^0.5.1",
+    "mkdirp": "^1.0.3",
     "node-cmd": "^3.0.0",
     "node-fetch": "^2.1.2",
-    "node-sass": "^4.12.0",
+    "node-sass": "^4.13.1",
     "npm-run-all": "^4.1.5",
     "postcss-banner": "^3.0.1",
     "postcss-discard-duplicates": "^4.0.2",
@@ -106,7 +105,6 @@
     "react-docgen-typescript": "^1.15.0",
     "react-docgen-typescript-loader": "^3.3.0",
     "react-dom": "16.12.0",
-    "react-scripts": "^3.2.0",
     "replace-in-files": "^2.0.3",
     "request": "^2.88.2",
     "rimraf": "^2.6.3",

utils/css-build.js

@@ -19,15 +19,15 @@ const outputDir = path.join(cwd, 'dist');
 const outputFile = path.join(outputDir, moduleName + '.css');
 const outputFileMin = path.join(outputDir, moduleName + '.min.css');
 const outputStats = path.join(outputDir, 'stats.json');
-const postcssConfig = require('../.postcss.json');
+const postcssConfig = require('../.postcssrc.js');
 const nodeModules = path.resolve(__dirname, '../node_modules');
 
 // Make the build directory if it doesn't exist
 mkdirp(outputDir);
 
-const postcssPlugins = Object.keys(postcssConfig.build).map(plugin => {
+const postcssPlugins = Object.keys(postcssConfig.plugins).map(plugin => {
   const name = plugin;
-  const options = postcssConfig.build[plugin];
+  const options = postcssConfig.plugins[plugin];
 
   if (name === 'postcss-banner') {
     const banner = options.banner;