Some CSS-in-JS declarations in React integration were not tree-shaked properly

[intrnl]

Summary

I'm currently experimenting with Remirror to see if it's a great fit for our project, I've noticed that our bundles included several CSS-in-JS declarations that weren't being removed properly despite it not being used.

Steps to reproduce

1. Create a Vite React project
2. Add remirror @remirror/react and @remirror/pm
3. Use the React integration to build a custom editor, not relying on the built-in WYSIWYG components
4. Try building the project

Expected results

The resulting build output shouldn't contain any CSS-in-JS code

Actual results

The exact code in question:

remirror/packages/remirror__theme/src/extension-tables-theme.ts

Lines 93 to 232 in ce360d5

	const CSSSegements = (() => {
	// To get the benefits from typescript-styled-plugin like auto-completion and
	// syntax error reporting, we create a fake "css" function to cheat it.
	const css = String.raw;
	const tableController = css`
	overflow: visible;
	padding: 0;
	cursor: pointer;
	z-index: 15;
	position: relative;
	`;
	const tableControllerTriggerArea = css`
	flex: 1;
	position: relative;
	z-index: 10;
	/* Style for debug. Use linear-gradient as background so that we can differentiate two neighbor areas. */
	/* background: linear-gradient(to left top, rgba(0, 255, 100, 0.2), rgba(200, 100, 255, 0.2)); */
	`;
	const tableControllerWrapper = css`
	overflow: visible;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	`;
	const tableControllerMark = css`
	position: absolute;
	width: 0px;
	height: 0px;
	border-radius: 50%;
	border-style: solid;
	border-color: ${getThemeVar('color', 'table', 'mark')};
	border-width: ${markRadius}px;
	`;
	const tableControllerMarkRowCorner = css`
	bottom: -${markRadius}px;
	left: -12px;
	${tableControllerMark}
	`;
	const tableControllerMarkColumnCorner = css`
	${tableControllerMark}
	right: -${markRadius}px;
	top: -12px;
	`;
	const tableCornerController = css`
	${tableController}
	height: ${controllerSize}px;
	width: ${controllerSize}px;
	& div.${TABLE_CONTROLLER_WRAPPER} {
	${tableControllerWrapper}
	width: ${controllerSize}px;
	height: ${controllerSize}px;
	}
	& div.${TABLE_CONTROLLER_TRIGGER_AREA} {
	${tableControllerTriggerArea}
	display: none;
	}
	& div.${TABLE_CONTROLLER_MARK_ROW_CORNER} {
	${tableControllerMarkRowCorner}
	}
	& div.${TABLE_CONTROLLER_MARK_COLUMN_CORNER} {
	${tableControllerMarkColumnCorner}
	}
	`;
	const tableColumnController = css`
	${tableController}
	height: ${controllerSize}px;
	& div.${TABLE_CONTROLLER_WRAPPER} {
	${tableControllerWrapper}
	width: 100%;
	height: ${controllerSize}px;
	flex-direction: row;
	}
	& div.${TABLE_CONTROLLER_TRIGGER_AREA} {
	${tableControllerTriggerArea}
	height: 36px;
	}
	& div.${TABLE_CONTROLLER_MARK_ROW_CORNER} {
	display: none;
	}
	& div.${TABLE_CONTROLLER_MARK_COLUMN_CORNER} {
	${tableControllerMarkColumnCorner}
	}
	`;
	const tableRowController = css`
	${tableController}
	width: ${controllerSize}px;
	& div.${TABLE_CONTROLLER_WRAPPER} {
	${tableControllerWrapper}
	height: 100%;
	width: ${controllerSize}px;
	flex-direction: column;
	}
	& div.${TABLE_CONTROLLER_TRIGGER_AREA} {
	${tableControllerTriggerArea}
	width: 36px;
	}
	& div.${TABLE_CONTROLLER_MARK_ROW_CORNER} {
	${tableControllerMarkRowCorner}
	}
	& div.${TABLE_CONTROLLER_MARK_COLUMN_CORNER} {
	display: none;
	}
	`;
	return {
	tableCornerController,
	tableColumnController,
	tableRowController,
	};
	})();

The way the IIFE starts indicates that they aren't being used anywhere.

Possible Solution

It seems that only those wrapped in IIFE were not being tree-shaked, can the IIFE removed somehow? or perhaps annotating the IIFE as pure might help?

Screenshot(s)

[intrnl]

here's the exact Editor component I built, I'll get around to making a proper reproduction sandbox later today

https://gist.github.com/intrnl/2d8d2914d90ac6cfba78ddf4a59ee841

[intrnl]

I just noticed that they were mapped to String.raw and not to Linaria's css tag, they're still not great to see though.