test: add vanilla-extract tests

packages/toolkit/__tests__/build-project-vanilla-extract/.gitignore

@@ -0,0 +1 @@
+./dist

packages/toolkit/__tests__/build-project-vanilla-extract/__fixtures__/includes/blocks/example/block.json

@@ -0,0 +1,43 @@
+{
+	"title": "Example Block",
+	"description": "An Example Block",
+	"textdomain": "tenup-scaffold",
+	"name": "tenup/example",
+	"icon": "feedback",
+	"category": "tenup-scaffold-blocks",
+	"attributes": {
+		"title": {
+			"type": "string"
+		}
+	},
+	"example": {
+		"attributes": {
+			"title": "Example Block"
+		}
+	},
+	"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"
+}

packages/toolkit/__tests__/build-project-vanilla-extract/__fixtures__/includes/blocks/example/edit.js

@@ -0,0 +1,8 @@
+/* eslint-disable */
+import { container } from './styles.css.ts';
+
+const ExampleBlockEdit = () => {
+	return <div className={container} />
+};
+
+export default ExampleBlockEdit;

packages/toolkit/__tests__/build-project-vanilla-extract/__fixtures__/includes/blocks/example/index.js

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

packages/toolkit/__tests__/build-project-vanilla-extract/__fixtures__/includes/blocks/example/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;

packages/toolkit/__tests__/build-project-vanilla-extract/__fixtures__/includes/blocks/example/styles.css.ts

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

packages/toolkit/__tests__/build-project-vanilla-extract/package.json

@@ -0,0 +1,9 @@
+{
+	"name": "test-build-project-linaria",
+	"10up-toolkit": {
+		"useBlockAssets": true,
+		"paths": {
+			"blocksDir": "./__fixtures__/includes/blocks"
+		}
+	}
+}

packages/toolkit/__tests__/build-project-vanilla-extract/test.js

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import spawn from 'cross-spawn';
+import fs from 'fs';
+import path from 'path';
+
+describe('build a project (with vanilla-extract)', () => {
+	beforeAll(() => {
+		spawn.sync('node', ['../../scripts/build'], {
+			cwd: __dirname,
+		});
+	});
+
+	it('builds blocks', () => {
+		expect(
+			fs.existsSync(path.join(__dirname, 'dist', 'blocks', 'example', 'block.json')),
+		).toBeTruthy();
+
+		expect(
+			fs.existsSync(path.join(__dirname, 'dist', 'blocks', 'example', 'index.js')),
+		).toBeTruthy();
+
+		const indexCSS = path.join(__dirname, 'dist', 'blocks', 'example', 'index.css');
+		expect(fs.existsSync(indexCSS)).toBeTruthy();
+
+		// ensure it is extracting the css-in-js
+		const compiledCSS = fs.readFileSync(indexCSS).toString();
+		expect(compiledCSS).toMatch('border: 2px dashed black');
+	});
+});