Build process with Laravel Mix. Switches the dev CSS to use SCSS. Org…

…anizes the dev JS and SCSS files.

.gitignore

@@ -1,2 +1,4 @@
-composer.lock
+/node_modules
 /vendor
+/composer.lock
+*.map

package.json

@@ -0,0 +1,28 @@
+{
+	"name": "customize-section-button",
+	"version": "1.0.0",
+	"author": "WPTRT",
+	"license": "GPL-2.0+",
+	"homepage": "https://github.com/WPTRT/customize-section-button",
+	"main": "",
+	"scripts": {
+		"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+		"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+		"prod": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/WPTRT/customize-section-button.git"
+	},
+	"bugs": {
+		"url": "https://github.com/WPTRT/customize-section-button/issues"
+	},
+	"devDependencies": {
+		"cross-env": "^5.2.0",
+		"laravel-mix": "^4.0.16",
+		"postcss-preset-env": "^6.6.0",
+		"sass": "^1.22.0",
+		"sass-loader": "^7.1.0",
+		"vue-template-compiler": "^2.6.10"
+	}
+}

public/mix-manifest.json

@@ -0,0 +1,4 @@
+{
+    "/js/customize-controls.js": "/js/customize-controls.js?id=89773d0dfda85acd340f",
+    "/css/customize-controls.css": "/css/customize-controls.css?id=06bbe20903aac0ce7de7"
+}

resources/js/customize-controls.js

@@ -1,11 +1,14 @@
+/**
+ * Customize Controls.
+ *
+ * This is the primary script for the customize controls panel. Use this file
+ * importing scripts for custom panels, sections, and controls.
+ *
+ * @package   CustomizeSectionButton
+ * @author    WPTRT <themes@wordpress.org>
+ * @copyright 2019 WPTRT
+ * @license   https://www.gnu.org/licenses/gpl-2.0.html GPL-2.0-or-later
+ * @link      https://github.com/WPTRT/customize-section-button
+ */
 
-wp.customize.sectionConstructor['wptrt-button'] = wp.customize.Section.extend( {
-
-	// No events for this type of section.
-	attachEvents: function () {},
-
-	// Always make the section active.
-	isContextuallyActive: function () {
-		return true;
-	}
-} );
+import sectionButton from './customize-controls/section-button';

resources/js/customize-controls/section-button.js

@@ -0,0 +1,20 @@
+/**
+ * Button Customize Section.
+ *
+ * @package   CustomizeSectionButton
+ * @author    WPTRT <themes@wordpress.org>
+ * @copyright 2019 WPTRT
+ * @license   https://www.gnu.org/licenses/gpl-2.0.html GPL-2.0-or-later
+ * @link      https://github.com/WPTRT/customize-section-button
+ */
+
+wp.customize.sectionConstructor['wptrt-button'] = wp.customize.Section.extend( {
+
+	// No events for this type of section.
+	attachEvents: () => {},
+
+	// Always make the section active.
+	isContextuallyActive: () => {
+		return true;
+	}
+} );

resources/scss/customize-controls.scss

@@ -0,0 +1,14 @@
+////
+/// Customize controls stylesheet.
+///
+/// This is the primary stylesheet for the customize controls panel. Use this
+/// for importing styles for custom panels, sections, and controls.
+///
+/// @group  Styles
+/// @author WPTRT <themes@wordpress.org>
+/// @link   https://github.com/WPTRT/customize-section-button
+////
+
+// Import components.
+
+@import 'customize-controls/section-button';

resources/scss/customize-controls/_section-button.scss

@@ -0,0 +1,35 @@
+////
+/// Button section.
+///
+/// @group  Components
+/// @author WPTRT <themes@wordpress.org>
+/// @link   https://github.com/WPTRT/customize-section-button
+////
+
+.control-section-wptrt-button {
+
+	.accordion-section-title {
+
+		// Make sure that the background color doesn't change if the
+		// section title is hovered or focused because this is an
+		// non-expandable section.
+		&:hover,
+		&:focus {
+			background-color: #fff;
+		}
+
+		// Adjusts the button to make sure it's vertically aligned in
+		// the section title and provide some margin horizontally to
+		// keep text from butting against it.
+		.button {
+			margin-top:  -4px;
+			margin-left: 8px;
+			font-weight: 400;
+
+			.rtl & {
+				margin-left:  0;
+				margin-right: 8px;
+			}
+		}
+	}
+}

webpack.mix.js

@@ -0,0 +1,54 @@
+/**
+ * Lavarel Mix Config.
+ *
+ * Laravel Mix is a simplified wrapper for Webpack.  Use this file to add CSS/JS
+ * files to compile.
+ *
+ * @package   CustomizeSectionButton
+ * @author    WPTRT <themes@wordpress.org>
+ * @copyright 2019 WPTRT
+ * @license   https://www.gnu.org/licenses/gpl-2.0.html GPL-2.0-or-later
+ * @link      https://github.com/WPTRT/customize-section-button
+ */
+
+// Import required packages.
+const mix = require( 'laravel-mix' );
+
+// Set dev path.
+const devPath  = 'resources';
+
+// Set public path.
+mix.setPublicPath( 'public' );
+
+// Set options.
+mix.options( {
+	postCss        : [ require( 'postcss-preset-env' )() ],
+	processCssUrls : false
+} );
+
+// Source maps.
+mix.sourceMaps();
+
+// Versioning and cache-busting with `mix-manifest.json`.
+mix.version();
+
+// Compile JS.
+mix.js( `${devPath}/js/customize-controls.js`, 'js' );
+
+// Sass configuration.
+var sassConfig = {
+	outputStyle : 'expanded',
+	indentType  : 'tab',
+	indentWidth : 1
+};
+
+// Compile SASS/CSS.
+mix.sass( `${devPath}/scss/customize-controls.scss`, 'css', sassConfig );
+
+// Extra Webpack config.
+mix.webpackConfig( {
+	stats       : 'minimal',
+	devtool     : mix.inProduction() ? false : 'source-map',
+	performance : { hints  : false    },
+	externals   : { jquery : 'jQuery' },
+} );