Extending wp scripts to handle scss

packages/scripts/config/webpack.config.js

@@ -4,6 +4,8 @@
 const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
 const LiveReloadPlugin = require( 'webpack-livereload-plugin' );
 const path = require( 'path' );
+const postcssPresetEnv = require( 'postcss-preset-env' );
+const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 
 /**
  * Internal dependencies
@@ -66,11 +68,14 @@ const externals = [
 const isProduction = process.env.NODE_ENV === 'production';
 const mode = isProduction ? 'production' : 'development';
 
-const getBabelLoaderOptions = () => hasBabelConfig() ? {} : {
-	babelrc: false,
-	configFile: false,
-	presets: [ require.resolve( '@wordpress/babel-preset-default' ) ],
-};
+const getBabelLoaderOptions = () =>
+	hasBabelConfig() ?
+		{} :
+		{
+			babelrc: false,
+			configFile: false,
+			presets: [ require.resolve( '@wordpress/babel-preset-default' ) ],
+		};
 
 const config = {
 	mode,
@@ -87,6 +92,29 @@ const config = {
 			'lodash-es': 'lodash',
 		},
 	},
+	optimization: {
+		splitChunks: {
+			chunks: 'all',
+			cacheGroups: {
+				editor: {
+					name: 'editor',
+					test: /editor\.(sc|sa|c)ss$/,
+					enforce: true,
+				},
+				style: {
+					name: 'styles',
+					test: /style\.(sc|sa|c)ss$/,
+					enforce: true,
+				},
+				theme: {
+					name: 'theme',
+					test: /theme\.(sc|sa|c)ss$/,
+					enforce: true,
+				},
+				default: false,
+			},
+		},
+	},
 	module: {
 		rules: [
 			{
@@ -102,15 +130,55 @@ const config = {
 					options: getBabelLoaderOptions(),
 				},
 			},
+			{
+				test: /\.(sc|sa|c)ss$/,
+				use: [
+					{
+						loader: MiniCssExtractPlugin.loader,
+					},
+					{
+						loader: require.resolve( 'css-loader' ),
+					},
+					{
+						loader: require.resolve( 'sass-loader' ),
+					},
+					{
+						loader: require.resolve( 'postcss-loader' ),
+						options: {
+							ident: 'postcss',
+							plugins: () => [
+								postcssPresetEnv( {
+									// Start with a stage.
+									stage: 3,
+									// Override specific features you do (or don't) want.
+									features: {
+										// And, optionally, configure rules/features as needed.
+										'custom-media-queries': {
+											preserve: false,
+										},
+										'custom-properties': {
+											preserve: true,
+										},
+										'nesting-rules': true,
+									},
+								} ),
+							],
+						},
+					},
+				],
+			},
 		],
 	},
 	plugins: [
 		// WP_BUNDLE_ANALYZER global variable enables utility that represents bundle content
 		// as convenient interactive zoomable treemap.
 		process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(),
+		// MiniCssExtractPlugin to extract the css thats gets imported into javascript
+		new MiniCssExtractPlugin(),
 		// WP_LIVE_RELOAD_PORT global variable changes port on which live reload works
 		// when running watch mode.
-		! isProduction && new LiveReloadPlugin( { port: process.env.WP_LIVE_RELOAD_PORT || 35729 } ),
+		! isProduction &&
+			new LiveReloadPlugin( { port: process.env.WP_LIVE_RELOAD_PORT || 35729 } ),
 	].filter( Boolean ),
 	stats: {
 		children: false,

packages/scripts/package.json

@@ -40,13 +40,19 @@
 		"chalk": "^2.4.1",
 		"check-node-version": "^3.1.1",
 		"cross-spawn": "^5.1.0",
+		"css-loader": "^2.1.1",
 		"eslint": "^5.12.1",
 		"jest": "^24.1.0",
 		"jest-puppeteer": "^4.0.0",
+		"mini-css-extract-plugin": "^0.6.0",
+		"node-sass": "^4.11.0",
 		"npm-package-json-lint": "^3.6.0",
+		"postcss-loader": "^3.0.0",
+		"postcss-preset-env": "^6.6.0",
 		"puppeteer": "1.6.1",
 		"read-pkg-up": "^1.0.1",
 		"resolve-bin": "^0.4.0",
+		"sass-loader": "^7.1.0",
 		"source-map-loader": "^0.2.4",
 		"stylelint": "^9.10.1",
 		"stylelint-config-wordpress": "^13.1.0",