move and unify postcss config into @kbn/optimizer

.eslintrc.js

@@ -529,6 +529,7 @@ module.exports = {
         'x-pack/test_utils/**/*',
         'x-pack/gulpfile.js',
         'x-pack/plugins/apm/public/utils/testHelpers.js',
+        'x-pack/plugins/canvas/shareable_runtime/postcss.config.js',
       ],
       rules: {
         'import/no-extraneous-dependencies': [

package.json

@@ -480,7 +480,7 @@
     "pixelmatch": "^5.1.0",
     "pkg-up": "^2.0.0",
     "pngjs": "^3.4.0",
-    "postcss": "^7.0.26",
+    "postcss": "^7.0.32",
     "postcss-url": "^8.0.0",
     "prettier": "^2.0.5",
     "proxyquire": "1.8.0",

packages/kbn-optimizer/package.json

@@ -36,6 +36,7 @@
     "loader-utils": "^1.2.3",
     "node-sass": "^4.13.0",
     "normalize-path": "^3.0.0",
+    "postcss": "^7.0.32",
     "postcss-loader": "^3.0.0",
     "raw-loader": "^3.1.0",
     "resolve-url-loader": "^3.1.1",

packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts

@@ -161,6 +161,7 @@ it('builds expected bundles, saves bundle counts to metadata', async () => {
     Array [
       <absolute path>/node_modules/css-loader/package.json,
       <absolute path>/node_modules/style-loader/package.json,
+      <absolute path>/packages/kbn-optimizer/postcss.config.js,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/bar/kibana.json,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/bar/public/index.scss,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/bar/public/index.ts,
@@ -171,7 +172,6 @@ it('builds expected bundles, saves bundle counts to metadata', async () => {
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/src/legacy/ui/public/styles/_globals_v7dark.scss,
       <absolute path>/packages/kbn-optimizer/src/__fixtures__/__tmp__/mock_repo/src/legacy/ui/public/styles/_globals_v7light.scss,
       <absolute path>/packages/kbn-optimizer/target/worker/entry_point_creator.js,
-      <absolute path>/packages/kbn-optimizer/target/worker/postcss.config.js,
       <absolute path>/packages/kbn-ui-shared-deps/public_path_module_creator.js,
     ]
   `);

packages/kbn-optimizer/src/worker/webpack.config.ts

@@ -151,7 +151,7 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker:
                   options: {
                     sourceMap: !worker.dist,
                     config: {
-                      path: require.resolve('./postcss.config'),
+                      path: require.resolve('@kbn/optimizer/postcss.config.js'),
                     },
                   },
                 },

packages/kbn-storybook/lib/webpack.dll.config.js

@@ -127,7 +127,7 @@ module.exports = {
             loader: 'postcss-loader',
             options: {
               config: {
-                path: path.resolve(REPO_ROOT, 'src/optimize/postcss.config.js'),
+                path: require.resolve('@kbn/optimizer/postcss.config.js'),
               },
             },
           },

packages/kbn-storybook/storybook_config/webpack.config.js

@@ -91,7 +91,7 @@ module.exports = async ({ config }) => {
         loader: 'postcss-loader',
         options: {
           config: {
-            path: resolve(REPO_ROOT, 'src/optimize/'),
+            path: require.resolve('@kbn/optimizer/postcss.config.js'),
           },
         },
       },

packages/kbn-ui-framework/Gruntfile.js

@@ -19,7 +19,7 @@
 
 const sass = require('node-sass');
 const postcss = require('postcss');
-const postcssConfig = require('../../src/optimize/postcss.config');
+const postcssConfig = require('@kbn/optimizer/postcss.config.js');
 const chokidar = require('chokidar');
 const { debounce } = require('lodash');
 

packages/kbn-ui-framework/package.json

@@ -33,7 +33,7 @@
     "@babel/core": "^7.10.2",
     "@elastic/eui": "0.0.55",
     "@kbn/babel-preset": "1.0.0",
-    "autoprefixer": "^9.7.4",
+    "@kbn/optimizer": "1.0.0",
     "babel-loader": "^8.0.6",
     "brace": "0.11.1",
     "chalk": "^2.4.2",
@@ -54,7 +54,7 @@
     "keymirror": "0.1.1",
     "moment": "^2.24.0",
     "node-sass": "^4.13.1",
-    "postcss": "^7.0.26",
+    "postcss": "^7.0.32",
     "postcss-loader": "^3.0.0",
     "raw-loader": "^3.1.0",
     "react-dom": "^16.12.0",

packages/kbn-ui-shared-deps/package.json

@@ -21,6 +21,7 @@
     "custom-event-polyfill": "^0.3.0",
     "elasticsearch-browser": "^16.7.0",
     "jquery": "^3.5.0",
+    "mini-css-extract-plugin": "0.8.0",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.27",
     "react": "^16.12.0",

src/optimize/base_optimizer.js

@@ -34,7 +34,7 @@ import { IS_KIBANA_DISTRIBUTABLE } from '../legacy/utils';
 import { fromRoot } from '../core/server/utils';
 import { PUBLIC_PATH_PLACEHOLDER } from './public_path_placeholder';
 
-const POSTCSS_CONFIG_PATH = require.resolve('./postcss.config');
+const POSTCSS_CONFIG_PATH = require.resolve('./postcss.config.js');
 const BABEL_PRESET_PATH = require.resolve('@kbn/babel-preset/webpack_preset');
 const ISTANBUL_PRESET_PATH = require.resolve('@kbn/babel-preset/istanbul_preset');
 const EMPTY_MODULE_PATH = require.resolve('./intentionally_empty_module.js');

x-pack/package.json

@@ -121,8 +121,10 @@
     "@types/pretty-ms": "^5.0.0",
     "@welldone-software/why-did-you-render": "^4.0.0",
     "abab": "^1.0.4",
+    "autoprefixer": "^9.7.4",
     "axios": "^0.19.0",
     "babel-jest": "^25.5.1",
+    "babel-loader": "^8.0.6",
     "babel-plugin-require-context-hook": "npm:babel-plugin-require-context-hook-babel7@1.0.0",
     "base64-js": "^1.3.1",
     "base64url": "^3.0.1",
@@ -159,6 +161,7 @@
     "loader-utils": "^1.2.3",
     "madge": "3.4.4",
     "marge": "^1.0.1",
+    "mini-css-extract-plugin": "0.8.0",
     "mocha": "^7.1.1",
     "mocha-junit-reporter": "^1.23.1",
     "mochawesome": "^4.1.0",
@@ -168,6 +171,9 @@
     "node-fetch": "^2.6.0",
     "null-loader": "^3.0.0",
     "pixelmatch": "^5.1.0",
+    "postcss": "^7.0.32",
+    "postcss-loader": "^3.0.0",
+    "postcss-prefix-selector": "^1.7.2",
     "proxyquire": "1.8.0",
     "react-docgen-typescript-loader": "^3.1.1",
     "react-is": "^16.8.0",
@@ -308,7 +314,6 @@
     "pluralize": "3.1.0",
     "pngjs": "3.4.0",
     "polished": "^1.9.2",
-    "postcss-prefix-selector": "^1.7.2",
     "prop-types": "^15.6.0",
     "proper-lockfile": "^3.2.0",
     "puid": "1.0.7",

x-pack/plugins/canvas/shareable_runtime/postcss.config.js

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// eslint-disable-next-line
 const autoprefixer = require('autoprefixer');
 const prefixer = require('postcss-prefix-selector');
 

x-pack/plugins/canvas/shareable_runtime/webpack.config.js

@@ -111,7 +111,7 @@ module.exports = {
             loader: 'postcss-loader',
             options: {
               config: {
-                path: path.resolve(KIBANA_ROOT, 'src/optimize/postcss.config.js'),
+                path: require.resolve('@kbn/optimizer/postcss.config.js'),
               },
             },
           },

x-pack/plugins/canvas/storybook/webpack.config.js

@@ -77,7 +77,9 @@ module.exports = async ({ config }) => {
       {
         loader: 'postcss-loader',
         options: {
-          path: path.resolve(KIBANA_ROOT, 'src/optimize/postcss.config.js'),
+          config: {
+            path: require.resolve('@kbn/optimizer/postcss.config.js'),
+          },
         },
       },
       {
@@ -114,7 +116,9 @@ module.exports = async ({ config }) => {
       {
         loader: 'postcss-loader',
         options: {
-          path: path.resolve(KIBANA_ROOT, 'src/optimize/postcss.config.js'),
+          config: {
+            path: require.resolve('@kbn/optimizer/postcss.config.js'),
+          },
         },
       },
       {

x-pack/plugins/canvas/storybook/webpack.dll.config.js

@@ -114,7 +114,7 @@ module.exports = {
             loader: 'postcss-loader',
             options: {
               config: {
-                path: path.resolve(KIBANA_ROOT, 'src/optimize/postcss.config.js'),
+                path: require.resolve('@kbn/optimizer/postcss.config.js'),
               },
             },
           },