initial integration with vanilla-extract

packages/toolkit/config/webpack/modules.js

@@ -140,6 +140,18 @@ module.exports = ({
 				test: /\.svg$/,
 				use: ['@svgr/webpack', 'url-loader'],
 			},
+			{
+				test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
+				use: [
+					MiniCSSExtractPlugin.loader,
+					{
+						loader: require.resolve('css-loader'),
+						options: {
+							url: false, // Required as image imports should be handled via JS/TS import statements
+						},
+					},
+				],
+			},
 			{
 				test: /\.css$/,
 				use: getCSSLoaders({
@@ -150,7 +162,7 @@ module.exports = ({
 					postcss: true,
 					sass: false,
 				}),
-				exclude: [/\.module\.css$/, LINARIA_EXTENSION_REGEXP],
+				exclude: [/\.module\.css$/, LINARIA_EXTENSION_REGEXP, /\.vanilla\.css$/i],
 			},
 			{
 				test: /\.(sc|sa)ss$/,

packages/toolkit/config/webpack/plugins.js

@@ -9,6 +9,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const { resolve } = require('path');
+const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
 const RemoveEmptyScriptsPlugin = require('./plugins/remove-empty-scripts');
 const CleanExtractedDeps = require('./plugins/clean-extracted-deps');
 const TenUpToolkitTscPlugin = require('./plugins/tsc');
@@ -51,6 +52,7 @@ module.exports = ({
 	buildFiles,
 }) => {
 	const hasReactFastRefresh = hot && !isProduction && !isModule;
+	const shouldCompileVanillaExtract = isPackageInstalled('@vanilla-extract/css');
 
 	const hasBrowserSync =
 		isPackageInstalled('browser-sync-webpack-plugin') && isPackageInstalled('browser-sync');
@@ -96,7 +98,7 @@ module.exports = ({
 			fix: false,
 			lintDirtyModulesOnly: true,
 		}),
-
+		shouldCompileVanillaExtract && new VanillaExtractPlugin(),
 		// MiniCSSExtractPlugin to extract the CSS that gets imported into JavaScript.
 		new MiniCSSExtractPlugin({
 			filename: (options) => {

packages/toolkit/package.json

@@ -24,6 +24,7 @@
 		"@svgr/webpack": "^8.1.0",
 		"@typescript-eslint/eslint-plugin": "^6.17.0",
 		"@typescript-eslint/parser": "^6.17.0",
+		"@vanilla-extract/webpack-plugin": "^2.3.13",
 		"@wordpress/dependency-extraction-webpack-plugin": "^5.4.0",
 		"@wordpress/eslint-plugin": "^17.5.0",
 		"@wordpress/jest-console": "^7.19.0",

projects/10up-theme/includes/blocks/example-linaria/register.php

@@ -16,7 +16,7 @@ function register() {
 	};
 	// Register the block.
 	register_block_type_from_metadata(
-		TENUP_THEME_BLOCK_DIST_DIR . '/example-block',
+		TENUP_THEME_BLOCK_DIST_DIR . '/example-linaria',
 		[
 			'render_callback' => $n( 'render_block_callback' ),
 		]
@@ -35,7 +35,7 @@ function register() {
 function render_block_callback( $attributes, $content, $block ) {
 	ob_start();
 	get_template_part(
-		'includes/blocks/example-block/markup',
+		'includes/blocks/example-linaria/markup',
 		null,
 		[
 			'class_name' => 'wp-block-tenup-example',

projects/10up-theme/includes/blocks/example-vanilla-extract/block.json

@@ -0,0 +1,43 @@
+{
+	"title": "Example Block (With Vanilla Extract)",
+	"description": "An Example Block (With Vanilla Extract)",
+	"textdomain": "tenup-scaffold",
+	"name": "tenup/example-vanilla-extract",
+	"icon": "feedback",
+	"category": "tenup-scaffold-blocks",
+	"attributes": {
+		"title": {
+			"type": "string"
+		}
+	},
+	"example": {
+		"attributes": {
+			"title": "Example Block (With Vanilla Extract)"
+		}
+	},
+	"supports": {
+		"align": false,
+		"alignWide": false,
+		"anchor": false,
+		"color": {
+			"gradients": false,
+			"background": false,
+			"text": false
+		},
+		"customClassName": false,
+		"defaultStylePicker": false,
+		"typography": {
+			"fontSize": false,
+			"lineHeight": true
+		},
+		"html": false,
+		"inserter": true,
+		"multiple": true,
+		"reusable": false,
+		"spacing": {
+			"padding": false
+		}
+	},
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css"
+}

projects/10up-theme/includes/blocks/example-vanilla-extract/edit.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+// the version specified in package.json does not ship a transpiled version,
+// so the intent here is to test toolkit `--include` feature to manually tell toolkit to transpile this package
+import { ContentPicker } from '@10up/block-components';
+import { container } from './styles.css.ts';
+
+const ExampleBlockEdit = (props) => {
+	const { attributes, setAttributes } = props;
+	const { title } = attributes;
+
+	const blockProps = useBlockProps();
+
+	return (
+		<div {...blockProps} className={container}>
+			<RichText
+				className="wp-block-example-block__title"
+				tagName="h2"
+				placeholder={__('Custom Title (Vanilla Extract)')}
+				value={title}
+				onChange={(title) => setAttributes({ title })}
+			/>
+			<ContentPicker
+				onPickChange={(pickedContent) => {
+					console.log(pickedContent);
+				}}
+				mode="post"
+				label="Please select a Post or Page:"
+				contentTypes={['post', 'page']}
+			/>
+		</div>
+	);
+};
+export default ExampleBlockEdit;

projects/10up-theme/includes/blocks/example-vanilla-extract/index.js

@@ -0,0 +1,10 @@
+import { registerBlockType } from '@wordpress/blocks';
+
+import edit from './edit';
+import save from './save';
+import block from './block.json';
+
+registerBlockType(block, {
+	edit,
+	save,
+});

projects/10up-theme/includes/blocks/example-vanilla-extract/markup.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Example block markup
+ *
+ * @package TenUpTheme\Blocks\Example
+ *
+ * @var array    $attributes         Block attributes.
+ * @var string   $content            Block content.
+ * @var WP_Block $block              Block instance.
+ * @var array    $context            Block context.
+ */
+
+?>
+<div <?php echo get_block_wrapper_attributes(); // phpcs:ignore ?>>
+	<h2 class="wp-block-tenup-example__title">
+		<?php echo wp_kses_post( $attributes['title'] ); ?>
+	</h2>
+</div>

projects/10up-theme/includes/blocks/example-vanilla-extract/props-shape.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+export const propsShape = {
+	attributes: PropTypes.shape({
+		customTitle: PropTypes.string,
+	}).isRequired,
+	className: PropTypes.string,
+};
+
+export const editPropsShape = {
+	...propsShape,
+	clientId: PropTypes.string,
+	isSelected: PropTypes.bool,
+	setAttributes: PropTypes.func.isRequired,
+};

projects/10up-theme/includes/blocks/example-vanilla-extract/register.php

@@ -0,0 +1,49 @@
+<?php
+/**
+ * Gutenberg Blocks setup
+ *
+ * @package TenUpTheme\Blocks\Example
+ */
+
+namespace TenUpTheme\Blocks\Example;
+
+/**
+ * Register the block
+ */
+function register() {
+	$n = function( $function ) {
+		return __NAMESPACE__ . "\\$function";
+	};
+	// Register the block.
+	register_block_type_from_metadata(
+		TENUP_THEME_BLOCK_DIST_DIR . '/example-vanilla-extract',
+		[
+			'render_callback' => $n( 'render_block_callback' ),
+		]
+	);
+}
+
+/**
+ * Render callback method for the block
+ *
+ * @param array  $attributes The blocks attributes
+ * @param string $content    Data returned from InnerBlocks.Content
+ * @param array  $block      Block information such as context.
+ *
+ * @return string The rendered block markup.
+ */
+function render_block_callback( $attributes, $content, $block ) {
+	ob_start();
+	get_template_part(
+		'includes/blocks/example-vanilla-extract/markup',
+		null,
+		[
+			'class_name' => 'wp-block-tenup-example',
+			'attributes' => $attributes,
+			'content'    => $content,
+			'block'      => $block,
+		]
+	);
+
+	return ob_get_clean();
+}

projects/10up-theme/includes/blocks/example-vanilla-extract/save.js

@@ -0,0 +1,8 @@
+/**
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#save
+ *
+ * @returns {null} Dynamic blocks do not save the HTML.
+ */
+const ExampleBlockSave = () => null;
+
+export default ExampleBlockSave;

projects/10up-theme/includes/blocks/example-vanilla-extract/styles.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+	border: '2px dashed black',
+	backgroundColor: 'blue',
+});

projects/10up-theme/package.json

@@ -27,14 +27,15 @@
     "@10up/component-accordion": "^2.1.5",
     "@linaria/core": "^5.0.2",
     "@linaria/react": "^5.0.3",
+    "@vanilla-extract/css": "^1.15.5",
     "normalize.css": "^8.0.1",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "10up-toolkit": {
     "useBlockAssets": true,
-    "useScriptModules": true,
+    "useScriptModules": false,
     "loadBlockSpecificStyles": true,
     "entry": {
       "admin": "./assets/js/admin/admin.js",