diff --git a/.eslintrc.js b/.eslintrc.js
index d8b3a26a0af8c8..157b31ec455915 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -533,6 +533,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': [
diff --git a/package.json b/package.json
index b12d4df2484eca..79ee9a37ed558a 100644
--- a/package.json
+++ b/package.json
@@ -475,7 +475,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",
diff --git a/packages/kbn-optimizer/package.json b/packages/kbn-optimizer/package.json
index c11bd1b6469332..4fbbc920c4447a 100644
--- a/packages/kbn-optimizer/package.json
+++ b/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",
diff --git a/packages/kbn-optimizer/src/worker/postcss.config.js b/packages/kbn-optimizer/postcss.config.js
similarity index 100%
rename from packages/kbn-optimizer/src/worker/postcss.config.js
rename to packages/kbn-optimizer/postcss.config.js
diff --git a/packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts b/packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts
index 716dd5e3edbc1b..908ae502cc8d36 100644
--- a/packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts
+++ b/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,
     ]
   `);
diff --git a/packages/kbn-optimizer/src/worker/webpack.config.ts b/packages/kbn-optimizer/src/worker/webpack.config.ts
index ab68f85d489041..e4cbade1dd315d 100644
--- a/packages/kbn-optimizer/src/worker/webpack.config.ts
+++ b/packages/kbn-optimizer/src/worker/webpack.config.ts
@@ -149,7 +149,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'),
                     },
                   },
                 },
diff --git a/packages/kbn-storybook/lib/webpack.dll.config.js b/packages/kbn-storybook/lib/webpack.dll.config.js
index 740ee3819c36f5..661312b9a0581c 100644
--- a/packages/kbn-storybook/lib/webpack.dll.config.js
+++ b/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'),
               },
             },
           },
diff --git a/packages/kbn-storybook/storybook_config/webpack.config.js b/packages/kbn-storybook/storybook_config/webpack.config.js
index b2df4f40d4fbe9..0a9977463aee8c 100644
--- a/packages/kbn-storybook/storybook_config/webpack.config.js
+++ b/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'),
           },
         },
       },
diff --git a/packages/kbn-ui-framework/Gruntfile.js b/packages/kbn-ui-framework/Gruntfile.js
index b7ba1e87b2f001..bb8e7b72cb7bd7 100644
--- a/packages/kbn-ui-framework/Gruntfile.js
+++ b/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');
 
diff --git a/packages/kbn-ui-framework/doc_site/postcss.config.js b/packages/kbn-ui-framework/doc_site/postcss.config.js
deleted file mode 100644
index 571bae86dee371..00000000000000
--- a/packages/kbn-ui-framework/doc_site/postcss.config.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-module.exports = {
-  plugins: [require('autoprefixer')()],
-};
diff --git a/packages/kbn-ui-framework/package.json b/packages/kbn-ui-framework/package.json
index abf64906e02539..7933ce06d6847a 100644
--- a/packages/kbn-ui-framework/package.json
+++ b/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",
diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json
index 3c6c1b06daede5..bc9dab06b3a913 100644
--- a/packages/kbn-ui-shared-deps/package.json
+++ b/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",
diff --git a/src/optimize/base_optimizer.js b/src/optimize/base_optimizer.js
index a0de344c5bc0bd..043669f71374e1 100644
--- a/src/optimize/base_optimizer.js
+++ b/src/optimize/base_optimizer.js
@@ -33,7 +33,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 EMPTY_MODULE_PATH = require.resolve('./intentionally_empty_module.js');
 const BABEL_EXCLUDE_RE = [/[\/\\](webpackShims|node_modules|bower_components)[\/\\]/];
diff --git a/x-pack/package.json b/x-pack/package.json
index 678a22f9e46998..58453d22240cab 100644
--- a/x-pack/package.json
+++ b/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",
@@ -170,6 +173,9 @@
     "pdf-image": "2.0.0",
     "pdfjs-dist": "^2.0.943",
     "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",
@@ -309,7 +315,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",
diff --git a/x-pack/plugins/canvas/shareable_runtime/postcss.config.js b/x-pack/plugins/canvas/shareable_runtime/postcss.config.js
index 10baaddfc9b053..e1db6e4a64f710 100644
--- a/x-pack/plugins/canvas/shareable_runtime/postcss.config.js
+++ b/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');
 
diff --git a/x-pack/plugins/canvas/shareable_runtime/webpack.config.js b/x-pack/plugins/canvas/shareable_runtime/webpack.config.js
index 93dc3dbccd549e..43e422a1615696 100644
--- a/x-pack/plugins/canvas/shareable_runtime/webpack.config.js
+++ b/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'),
               },
             },
           },
diff --git a/x-pack/plugins/canvas/storybook/webpack.config.js b/x-pack/plugins/canvas/storybook/webpack.config.js
index 927f71b832ba05..982185a731b149 100644
--- a/x-pack/plugins/canvas/storybook/webpack.config.js
+++ b/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'),
+          },
         },
       },
       {
diff --git a/x-pack/plugins/canvas/storybook/webpack.dll.config.js b/x-pack/plugins/canvas/storybook/webpack.dll.config.js
index 0e9371e4cb5e45..81d19c035075f7 100644
--- a/x-pack/plugins/canvas/storybook/webpack.dll.config.js
+++ b/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'),
               },
             },
           },