fix: Improve assets handling and support vanilla extract styles. (#240)

* Add fixture.

* Work.

* Add tests.

* Update deps.

* Fix css external.

.moon/tasks.yml

@@ -23,8 +23,6 @@ tasks:
 
   test:
     command: 'vitest run --config ../../vitest.config.ts'
-    inputs:
-      - '/vitest.config.ts'
     deps:
       - '^:build'
 

package.json

@@ -25,14 +25,16 @@
     "@babel/core": "^7.24.0",
     "@moonrepo/cli": "^1.22.2",
     "@moonrepo/dev": "^2.0.1",
-    "@swc/cli": "^0.3.9",
+    "@swc/cli": "^0.3.10",
     "@types/micromatch": "^4.0.6",
-    "@types/node": "^16.18.85",
-    "@types/react": "^18.2.60",
+    "@types/node": "^16.18.86",
+    "@types/react": "^18.2.61",
     "@types/semver": "^7.5.8",
+    "@vanilla-extract/rollup-plugin": "^1.3.4",
     "babel-preset-moon": "^2.0.15",
+    "bootstrap": "^5.3.3",
     "chokidar": "^3.6.0",
-    "electron-to-chromium": "^1.4.687",
+    "electron-to-chromium": "^1.4.689",
     "eslint": "^8.57.0",
     "eslint-config-moon": "^2.1.2",
     "lerna": "^8.1.2",
@@ -47,9 +49,5 @@
     "type": "ko-fi",
     "url": "https://ko-fi.com/milesjohnson"
   },
-  "packageManager": "yarn@4.1.0",
-  "resolutions": {
-    "@rollup/plugin-commonjs@^22.0.2": "patch:@rollup/plugin-commonjs@npm:22.0.2#.yarn/patches/@rollup-plugin-commonjs-npm-22.0.2-6275b92096.patch",
-    "@rollup/plugin-node-resolve@^13.3.0": "patch:@rollup/plugin-node-resolve@npm:13.3.0#.yarn/patches/@rollup-plugin-node-resolve-npm-13.3.0-a93dd11647.patch"
-  }
+  "packageManager": "yarn@4.1.0"
 }

packages/packemon/src/rollup/plugins/copyAndRefAssets.ts

@@ -102,9 +102,6 @@ export function copyAndRefAssets(
 
 					return { id, external: true };
 				}
-
-				// Ignore files coming from node modules
-				return false;
 			}
 
 			return null;

packages/packemon/tests/__snapshots__/assets.test.ts.snap

@@ -0,0 +1,173 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`vanilla extract > bundle + compile > assets/src/styles.css.ts.vanilla.css 1`] = `
+".styles_redText__exh0q70 {
+  color: red;
+}"
+`;
+
+exports[`vanilla extract > bundle + compile > assets/src/styles.css.ts.vanilla.css 2`] = `
+".styles_redText__exh0q70 {
+  color: red;
+}"
+`;
+
+exports[`vanilla extract > bundle + compile > esm/index.js 1`] = `
+"// Bundled with Packemon: https://packemon.dev
+// Platform: browser, Support: stable, Format: esm
+
+import './assets/src/styles.css.ts.vanilla.css';
+var redText = 'styles_redText__exh0q70';
+const MyComponent = props => /*#__PURE__*/React.createElement("div", Object.assign({
+  className: redText
+}, props));
+export { MyComponent };
+//# sourceMappingURL=index.js.map
+"
+`;
+
+exports[`vanilla extract > bundle + compile > lib/index.js 1`] = `
+"// Bundled with Packemon: https://packemon.dev
+// Platform: browser, Support: stable, Format: lib
+
+'use strict';
+
+require('./assets/src/styles.css.ts.vanilla.css');
+var redText = 'styles_redText__exh0q70';
+const MyComponent = props => /*#__PURE__*/React.createElement("div", Object.assign({
+  className: redText
+}, props));
+exports.MyComponent = MyComponent;
+//# sourceMappingURL=index.js.map
+"
+`;
+
+exports[`vanilla extract > bundle + no compile > esm/index.js 1`] = `
+"// Bundled with Packemon: https://packemon.dev
+// Platform: browser, Support: stable, Format: esm
+
+import { style } from '@vanilla-extract/css';
+const redText = style({
+  color: 'red'
+});
+const MyComponent = props => /*#__PURE__*/React.createElement("div", Object.assign({
+  className: redText
+}, props));
+export { MyComponent };
+//# sourceMappingURL=index.js.map
+"
+`;
+
+exports[`vanilla extract > bundle + no compile > lib/index.js 1`] = `
+"// Bundled with Packemon: https://packemon.dev
+// Platform: browser, Support: stable, Format: lib
+
+'use strict';
+
+const css = require('@vanilla-extract/css');
+const redText = css.style({
+  color: 'red'
+});
+const MyComponent = props => /*#__PURE__*/React.createElement("div", Object.assign({
+  className: redText
+}, props));
+exports.MyComponent = MyComponent;
+//# sourceMappingURL=index.js.map
+"
+`;
+
+exports[`vanilla extract > no bundle + compile > assets/src/styles.css.ts.vanilla.css 1`] = `
+".styles_redText__exh0q70 {
+  color: red;
+}"
+`;
+
+exports[`vanilla extract > no bundle + compile > assets/src/styles.css.ts.vanilla.css 2`] = `
+".styles_redText__exh0q70 {
+  color: red;
+}"
+`;
+
+exports[`vanilla extract > no bundle + compile > esm/index.js 1`] = `
+"import { redText } from './styles.css.js';
+const MyComponent = props => /*#__PURE__*/React.createElement("div", Object.assign({
+  className: redText
+}, props));
+export { MyComponent };
+//# sourceMappingURL=index.js.map
+"
+`;
+
+exports[`vanilla extract > no bundle + compile > esm/styles.css.js 1`] = `
+"import './assets/src/styles.css.ts.vanilla.css';
+var redText = 'styles_redText__exh0q70';
+export { redText };
+//# sourceMappingURL=styles.css.js.map
+"
+`;
+
+exports[`vanilla extract > no bundle + compile > lib/index.js 1`] = `
+"'use strict';
+
+const styles_css = require('./styles.css.js');
+const MyComponent = props => /*#__PURE__*/React.createElement("div", Object.assign({
+  className: styles_css.redText
+}, props));
+exports.MyComponent = MyComponent;
+//# sourceMappingURL=index.js.map
+"
+`;
+
+exports[`vanilla extract > no bundle + compile > lib/styles.css.js 1`] = `
+"'use strict';
+
+require('./assets/src/styles.css.ts.vanilla.css');
+var redText = 'styles_redText__exh0q70';
+exports.redText = redText;
+//# sourceMappingURL=styles.css.js.map
+"
+`;
+
+exports[`vanilla extract > no bundle + no compile > esm/index.js 1`] = `
+"import { redText } from './styles.css.js';
+const MyComponent = props => /*#__PURE__*/React.createElement("div", Object.assign({
+  className: redText
+}, props));
+export { MyComponent };
+//# sourceMappingURL=index.js.map
+"
+`;
+
+exports[`vanilla extract > no bundle + no compile > esm/styles.css.js 1`] = `
+"import { style } from '@vanilla-extract/css';
+const redText = style({
+  color: 'red'
+});
+export { redText };
+//# sourceMappingURL=styles.css.js.map
+"
+`;
+
+exports[`vanilla extract > no bundle + no compile > lib/index.js 1`] = `
+"'use strict';
+
+const styles_css = require('./styles.css.js');
+const MyComponent = props => /*#__PURE__*/React.createElement("div", Object.assign({
+  className: styles_css.redText
+}, props));
+exports.MyComponent = MyComponent;
+//# sourceMappingURL=index.js.map
+"
+`;
+
+exports[`vanilla extract > no bundle + no compile > lib/styles.css.js 1`] = `
+"'use strict';
+
+const css = require('@vanilla-extract/css');
+const redText = css.style({
+  color: 'red'
+});
+exports.redText = redText;
+//# sourceMappingURL=styles.css.js.map
+"
+`;

packages/packemon/tests/assets.test.ts

@@ -0,0 +1,100 @@
+import { InputPluginOption } from 'rollup';
+import { describe, it, vi } from 'vitest';
+import { Path } from '@boost/common';
+import { vanillaExtractPlugin } from '@vanilla-extract/rollup-plugin';
+import { Artifact } from '../src';
+import { getFixturePath, loadPackageAtPath, snapshotPackageBuildOutputs } from './helpers';
+
+vi.setConfig({ testTimeout: 30_000 });
+
+describe('vanilla extract', () => {
+	it('no bundle + compile', async () => {
+		const root = new Path(getFixturePath('project-assets-vanilla'));
+		const pkg = loadPackageAtPath(root);
+
+		const index = new Artifact(pkg, [{ format: 'lib' }, { format: 'esm' }]);
+		index.bundle = false;
+		index.platform = 'browser';
+		index.support = 'stable';
+		index.inputs = { index: 'src/index.tsx' };
+
+		pkg.artifacts.push(index);
+
+		await pkg.build(
+			{ addEntries: false },
+			{
+				rollupInput(config) {
+					(config.plugins as InputPluginOption[]).push(
+						vanillaExtractPlugin({
+							cwd: root.path(),
+						}),
+					);
+				},
+			},
+		);
+
+		snapshotPackageBuildOutputs(pkg);
+	});
+
+	it('bundle + compile', async () => {
+		const root = new Path(getFixturePath('project-assets-vanilla'));
+		const pkg = loadPackageAtPath(root);
+
+		const index = new Artifact(pkg, [{ format: 'lib' }, { format: 'esm' }]);
+		index.bundle = true;
+		index.platform = 'browser';
+		index.support = 'stable';
+		index.inputs = { index: 'src/index.tsx' };
+
+		pkg.artifacts.push(index);
+
+		await pkg.build(
+			{ addEntries: false },
+			{
+				rollupInput(config) {
+					(config.plugins as InputPluginOption[]).push(
+						vanillaExtractPlugin({
+							cwd: root.path(),
+						}),
+					);
+				},
+			},
+		);
+
+		snapshotPackageBuildOutputs(pkg);
+	});
+
+	it('no bundle + no compile', async () => {
+		const root = new Path(getFixturePath('project-assets-vanilla'));
+		const pkg = loadPackageAtPath(root);
+
+		const index = new Artifact(pkg, [{ format: 'lib' }, { format: 'esm' }]);
+		index.bundle = false;
+		index.platform = 'browser';
+		index.support = 'stable';
+		index.inputs = { index: 'src/index.tsx' };
+
+		pkg.artifacts.push(index);
+
+		await pkg.build({ addEntries: false }, {});
+
+		snapshotPackageBuildOutputs(pkg);
+	});
+
+	it('bundle + no compile', async () => {
+		const root = new Path(getFixturePath('project-assets-vanilla'));
+		const pkg = loadPackageAtPath(root);
+
+		const index = new Artifact(pkg, [{ format: 'lib' }, { format: 'esm' }]);
+		index.bundle = true;
+		index.platform = 'browser';
+		index.support = 'stable';
+		index.inputs = { index: 'src/index.tsx' };
+
+		pkg.artifacts.push(index);
+
+		await pkg.build({ addEntries: false }, {});
+
+		snapshotPackageBuildOutputs(pkg);
+	});
+});