diff --git a/packages/tools/components-package/nps.js b/packages/tools/components-package/nps.js
index a51780a38757..a49277ced7b0 100644
--- a/packages/tools/components-package/nps.js
+++ b/packages/tools/components-package/nps.js
@@ -23,7 +23,7 @@ const getScripts = (options) => {
 			styles: {
 				default: "nps build.styles.themes build.styles.components",
 				themes: "postcss src/**/parameters-bundle.css --config config/postcss.themes --base src --dir dist/css/",
-				components: "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/",
+				components: "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/", // When updating this, also update the new files script
 			},
 			i18n: {
 				default: "nps build.i18n.defaultsjs build.i18n.json",
@@ -52,8 +52,8 @@ const getScripts = (options) => {
 			"webcomponents-polyfill-placeholder": `node ${LIB}/polyfill-placeholder/index.js`
 		},
 		watch: {
-			default: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.bundle" "nps watch.styles"',
-			es5: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.bundle.es5" "nps watch.styles"',
+			default: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.bundle" "nps watch.styles" "nps watch.i18n"',
+			es5: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.bundle.es5" "nps watch.styles" "nps watch.i18n"',
 			src: 'nps "copy.src --watch --safe --skip-initial-copy"',
 			props: 'nps "copy.props --watch --safe --skip-initial-copy"',
 			test: 'nps "copy.test --watch --safe --skip-initial-copy"',
@@ -64,10 +64,15 @@ const getScripts = (options) => {
 			styles: {
 				default: 'concurrently "nps watch.styles.themes" "nps watch.styles.components"',
 				themes: 'nps "build.styles.themes -w"',
-				components: 'nps "build.styles.components -w"',
+				components: {
+					default: 'concurrently "nps watch.styles.components.existingFiles" "nps watch.styles.components.newFiles"',
+					existingFiles: `nps "build.styles.components -w"`,
+					newFiles: `node "${LIB}/postcss-new-files/index.js" --srcFiles="src/themes/*.css"`,
+				},
 			},
-			templates: "chokidar \"src/**/*.hbs\" -c \"nps build.templates\"",
-			samples: "chokidar \"test/**/*.sample.html\" -c \"nps build.samples\"",
+			templates: 'chokidar "src/**/*.hbs" -c "nps build.templates"',
+			samples: 'chokidar "test/**/*.sample.html" -c "nps build.samples"',
+			i18n: 'chokidar "src/i18n/messagebundle.properties" -c "nps build.i18n.defaultsjs"'
 		},
 		dev: {
 			default: 'concurrently "nps serve" "nps watch"',
diff --git a/packages/tools/lib/postcss-new-files/index.js b/packages/tools/lib/postcss-new-files/index.js
new file mode 100644
index 000000000000..a3bd4f95f4f5
--- /dev/null
+++ b/packages/tools/lib/postcss-new-files/index.js
@@ -0,0 +1,36 @@
+const chokidar = require("chokidar");
+const commandLineArgs = require("command-line-args");
+const { exec } = require("child_process");
+
+const options = commandLineArgs([
+	{ name: "srcFiles", type: String },
+]);
+
+const runPostcss = path => {
+	let command = `postcss ${path} --config config/postcss.components --base src --dir dist/css/`;
+	console.log(`Executing: ${command}`);
+	exec(command, (err, stdout, stderr) => {
+		if (err) {
+			console.log(`Could not run postcss for ${path}. Error: ${err}`);
+		}
+	});
+
+	command = `${command} -w`;
+	console.log(`Executing: ${command}`);
+	exec(command, (err, stdout, stderr) => {
+		if (err) {
+			console.log(`Could not run postcss in watch mode for ${path}. Error: ${err}`);
+		}
+	});
+};
+
+let ready = false; // Do nothing until the ready event has been fired (we don't want to recompile all files initially)
+const watcher = chokidar.watch(options.srcFiles);
+watcher.on("ready", () => {
+	ready = true; // Initial scan is over -> waiting for new files
+});
+watcher.on("add", path => {
+	if (ready) {
+		runPostcss(path);
+	}
+});
diff --git a/packages/tools/package.json b/packages/tools/package.json
index 0ad10ff7d37f..35994ff42414 100644
--- a/packages/tools/package.json
+++ b/packages/tools/package.json
@@ -38,6 +38,8 @@
     "@wdio/sync": "^7.2.0",
     "@webcomponents/webcomponentsjs": "^2.5.0",
     "chai": "^4.3.4",
+    "child_process": "^1.0.2",
+    "chokidar": "^3.5.1",
     "chokidar-cli": "^2.1.0",
     "clean-css": "^5.1.1",
     "colors": "^1.4.0",
diff --git a/yarn.lock b/yarn.lock
index 820f812e8732..ddea2dc2d03b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2497,6 +2497,11 @@ check-error@^1.0.2:
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
   integrity sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=
 
+child_process@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/child_process/-/child_process-1.0.2.tgz#b1f7e7fc73d25e7fd1d455adc94e143830182b5a"
+  integrity sha1-sffn/HPSXn/R1FWtyU4UODAYK1o=
+
 chokidar-cli@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/chokidar-cli/-/chokidar-cli-2.1.0.tgz#2491df133bd62cd145227b1746fbd94f2733e1bc"
@@ -2522,7 +2527,7 @@ chokidar@3.4.1:
   optionalDependencies:
     fsevents "~2.1.2"
 
-chokidar@3.5.1, chokidar@^3.0.0, chokidar@^3.2.3, chokidar@^3.3.0, chokidar@^3.4.0, chokidar@^3.5.0:
+chokidar@3.5.1, chokidar@^3.0.0, chokidar@^3.2.3, chokidar@^3.3.0, chokidar@^3.4.0, chokidar@^3.5.0, chokidar@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
   integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==