ripple 0.2.169 → 0.2.170

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.169",
+  "version": "0.2.170",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -81,6 +81,6 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "ripple": "0.2.169"
+    "ripple": "0.2.170"
   }
 }

package/src/compiler/phases/2-analyze/prune.js

@@ -845,6 +845,26 @@ function get_parent_rules(rule) {
 	return rules;
 }
 
+/**
+ * Check if a CSS rule contains animation or animation-name properties
+ * @param {Compiler.AST.CSS.Rule} rule
+ * @returns {boolean}
+ */
+function rule_has_animation(rule) {
+	if (!rule.block) return false;
+
+	for (const child of rule.block.children) {
+		if (child.type === 'Declaration') {
+			const prop = child.property?.toLowerCase();
+			if (prop === 'animation' || prop === 'animation-name') {
+				return true;
+			}
+		}
+	}
+
+	return false;
+}
+
 export function prune_css(css, element) {
 	walk(css, null, {
 		Rule(node, context) {
@@ -859,14 +879,9 @@ export function prune_css(css, element) {
 
 			seen.clear();
 
-			if (
-				apply_selector(
-					selectors,
-					/** @type {Compiler.AST.CSS.Rule} */ (node.metadata.rule),
-					element,
-					BACKWARD,
-				)
-			) {
+			const rule = /** @type {Compiler.AST.CSS.Rule} */ (node.metadata.rule);
+
+			if (apply_selector(selectors, rule, element, BACKWARD) || rule_has_animation(rule)) {
 				node.metadata.used = true;
 			}
 

package/src/compiler/phases/3-transform/stylesheet.js

@@ -195,7 +195,7 @@ const visitors = {
 				const character = state.code.original[index];
 
 				if (regex_css_name_boundary.test(character)) {
-					if (character !== ' ') {
+					if (name) {
 						const append_index = index - name.length;
 						state.keyframes[name] ??= { indexes: [], local: undefined };
 						if (state.keyframes[name].local) {

package/tests/client/css/global-keyframes.test.ripple

@@ -98,4 +98,61 @@ export component Test() {
 		expect(css).toContain('@keyframes foo');
 		expect(css).toContain('@keyframes bar');
 	});
+
+	it('handles animation property referencing keyframes (not marking as unused)', () => {
+		const source = `
+export component Parent() {
+	<div class="parent">
+		<Child />
+	</div>
+
+	<style>
+		/* Scoped keyframe - only usable within Parent */
+		@keyframes slideIn {
+			from { transform: translateX(-100%); }
+			to { transform: translateX(0); }
+		}
+
+		/* Global keyframe - usable in any component */
+		@keyframes -global-fadeIn {
+			0% { opacity: 0; }
+			100% { opacity: 1; }
+		}
+
+		.parent {
+			animation: slideIn 1s;
+		}
+	</style>
+}
+
+component Child() {
+	<div class="child">{'Child content'}</div>
+
+	<style>
+		.child {
+			animation: fadeIn 3s; /* Uses global fadeIn from Parent */
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		// Parent should have scoped slideIn and global fadeIn
+		expect(css).toMatch(/@keyframes ripple-[a-z0-9]+-slideIn/);
+		expect(css).toContain('@keyframes fadeIn');
+		expect(css).not.toContain('-global-fadeIn');
+
+		// Parent .parent should reference scoped slideIn
+		expect(css).toMatch(
+			/\.parent\.ripple-[a-z0-9]+\s*{[\s\S]*?animation:\s*ripple-[a-z0-9]+-slideIn 1s/,
+		);
+
+		// .parent should NOT be marked as unused
+		expect(css).not.toContain('(unused) .parent');
+
+		// Child .child should reference global fadeIn
+		expect(css).toMatch(/\.child\.ripple-[a-z0-9]+\s*{[\s\S]*?animation:\s*fadeIn 3s/);
+
+		// .child should NOT be marked as unused
+		expect(css).not.toContain('(unused) .child');
+	});
 });