Simplify build, remove postcss cli, use wp-scripts

.gitignore

@@ -6,8 +6,5 @@ Thumbs.db
 # ignore dependencies
 node_modules/
 
-# ignore built style.css
-style.css
-
 # ignore build files
 build/

README.md

@@ -18,29 +18,16 @@ This theme was started from [itsamoreh/block-theme-starter](https://github.com/i
 
 ## CSS
 
-This theme uses PostCSS to process CSS. The main CSS entrypoint is
-`assets/main.css`. All CSS with be compiled to `style.css` which is enqueued in
-`functions.php` **for both the editor and the frontend**.
-
-To build the CSS, run the following command in your terminal:
-
-```bash
-npm run build:css
-```
-
-This will take the `assets/main.css` file, run it and all imports through
-PostCSS, and output the result to style.css. To watch for changes to your CSS
-and automatically rebuild, run the following command in your terminal:
-
-```bash
-npm run watch:css
-```
+This theme uses PostCSS. The main CSS entrypoint is `assets/main.css`.
+All CSS is imported in `assets/js/editor/index.js` and
+`assets/js/frontend/index.js`, built with the rest of the build files then
+enqueued in `functions.php` **for both the editor and the frontend**.
 
 ## Editor and Frontend JavaScript
 
 This theme uses wp-scripts to build editor and frontend JS. The main editor
 entry is at `assets/js/editor/index.js` and the main frontend entry is at
-`assets/js/frontend/index.js`.
+`assets/js/frontend/index.js`. CSS is imported in the JS files.
 
 To build the JS, run the following command in your terminal:
 

assets/css/main.css

@@ -1,10 +1,2 @@
-@import "./stylecss-header.css";
-
-/**
- * The line above injects the WordPress file header. It needs to be first,
- * before this comment.
- */
-
 @import-glob "./global/**/*.css";
 @import-glob "./blocks/**/*.css";
-@import-glob "./patterns/**/*.css";

assets/js/editor/index.js

@@ -1,2 +1,4 @@
+import '../../css/main.css';
+
 import './block-variations';
 import './block-styles';

assets/js/frontend/index.js

@@ -1 +1 @@
-import './hello-world.js';
+import '../../css/main.css';

functions.php

@@ -23,9 +23,6 @@ function setup() {
 		// Make theme available for translation.
 		load_theme_textdomain( 'bts', get_template_directory() . '/languages' );
 
-		// Enqueue editor styles.
-		add_editor_style( '/style.css' );
-
 		// Disable loading core block inline styles.
 		add_filter( 'should_load_separate_core_block_assets', '__return_false' );
 
@@ -40,22 +37,7 @@ function setup() {
 add_action( 'after_setup_theme', __NAMESPACE__ . '\\setup' );
 
 /**
- * Enqueue theme style sheet.
- */
-function enqueue_style_sheet() {
-
-	wp_enqueue_style(
-		'bts',
-		get_template_directory_uri() . '/style.css',
-		array(),
-		wp_get_theme( 'bts' )->get( 'Version' )
-	);
-
-}
-add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\\enqueue_style_sheet' );
-
-/**
- * Enqueue theme frontend scripts.
+ * Enqueue theme frontend scripts and styles.
  */
 function enqueue_frontend_scripts() {
 
@@ -79,13 +61,22 @@ function enqueue_frontend_scripts() {
 		$frontend_script_asset['version'],
 	);
 
-	wp_enqueue_script( 'bts-frontend-js' );
+	wp_register_style(
+		'bts-frontend-css',
+		get_template_directory_uri() . '/build/frontend.css',
+		$frontend_script_asset['dependencies'],
+		$frontend_script_asset['version'],
+	);
+
+	// There is no frontend JS at this time.
+	// wp_enqueue_script( 'bts-frontend-js' );
+	wp_enqueue_style( 'bts-frontend-css' );
 
 }
-// add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\\enqueue_frontend_scripts' );
+add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\\enqueue_frontend_scripts' );
 
 /**
- * Enqueue theme editor scripts.
+ * Enqueue theme editor scripts and styles.
  */
 function enqueue_editor_scripts() {
 
@@ -108,6 +99,7 @@ function enqueue_editor_scripts() {
 	);
 
 	wp_enqueue_script( 'bts-editor-js' );
+	add_editor_style( '/build/editor.css' );
 }
 add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\\enqueue_editor_scripts' );