@ripple-ts/prettier-plugin 0.2.169 → 0.2.171

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ripple-ts/prettier-plugin",
-  "version": "0.2.169",
+  "version": "0.2.171",
   "description": "Ripple plugin for Prettier",
   "type": "module",
   "module": "src/index.js",
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "prettier": "^3.6.2",
-    "ripple": "0.2.169"
+    "ripple": "0.2.171"
   },
   "dependencies": {},
   "files": [

package/src/index.js

@@ -21,11 +21,6 @@ const {
 } = builders;
 const { willBreak } = utils;
 
-// Embed function - not needed for now
-export function embed(path, options) {
-	return null;
-}
-
 export const languages = [
 	{
 		name: 'ripple',
@@ -39,8 +34,7 @@ export const parsers = {
 	ripple: {
 		astFormat: 'ripple-ast',
 		parse(text, parsers, options) {
-			const ast = parse(text);
-			return ast;
+			return parse(text);
 		},
 
 		locStart(node) {
@@ -66,11 +60,50 @@ export const printers = {
 			}
 			return typeof parts === 'string' ? parts : parts;
 		},
+		embed(path, options) {
+			const node = path.getValue();
+
+			// Handle StyleSheet nodes inside style tags
+			if (node.type === 'StyleSheet' && node.source) {
+				// Return async function that will be called by Prettier
+				return async (textToDoc) => {
+					try {
+						// Format CSS using Prettier's textToDoc
+						const body = await textToDoc(node.source, {
+							parser: 'css',
+						});
+
+						// Return the formatted CSS
+						// Note: printElement will wrap this in indent(), so we don't add indent here
+						return body;
+					} catch (error) {
+						// If CSS has syntax errors, return original unformatted content
+						console.error('Error formatting CSS:', error);
+						return node.source;
+					}
+				};
+			}
+
+			return null;
+		},
 		getVisitorKeys(node) {
+			// Exclude metadata and raw text properties that shouldn't be traversed
+			// The css property is specifically excluded so embed() can handle it
+			const excludedKeys = new Set([
+				'start',
+				'end',
+				'loc',
+				'metadata',
+				'css', // Handled by embed()
+				'raw',
+				'regex',
+			]);
+
 			const keys = Object.keys(node).filter((key) => {
-				return key === 'start' || key === 'end' || key === 'loc' || key === 'metadata' || 'css'
-					? false
-					: typeof node[key] === 'object' && node[key] !== null;
+				if (excludedKeys.has(key)) {
+					return false;
+				}
+				return typeof node[key] === 'object' && node[key] !== null;
 			});
 
 			return keys;
@@ -1923,61 +1956,6 @@ function printRippleNode(node, path, options, print, args) {
 			}
 			break;
 
-		case 'StyleSheet':
-			nodeContent = printStyleSheet(node, path, options, print);
-			break;
-		case 'Rule':
-			nodeContent = printCSSRule(node, path, options, print);
-			break;
-
-		case 'Declaration':
-			nodeContent = printCSSDeclaration(node, path, options, print);
-			break;
-
-		case 'Atrule':
-			nodeContent = printCSSAtrule(node, path, options, print);
-			break;
-
-		case 'SelectorList':
-			nodeContent = printCSSSelectorList(node, path, options, print);
-			break;
-
-		case 'ComplexSelector':
-			nodeContent = printCSSComplexSelector(node, path, options, print);
-			break;
-
-		case 'RelativeSelector':
-			nodeContent = printCSSRelativeSelector(node, path, options, print);
-			break;
-
-		case 'TypeSelector':
-			nodeContent = printCSSTypeSelector(node, path, options, print);
-			break;
-
-		case 'IdSelector':
-			nodeContent = printCSSIdSelector(node, path, options, print);
-			break;
-
-		case 'ClassSelector':
-			nodeContent = printCSSClassSelector(node, path, options, print);
-			break;
-
-		case 'NestingSelector':
-			nodeContent = printCSSNestingSelector(node, path, options, print);
-			break;
-
-		case 'PseudoClassSelector':
-			nodeContent = printCSSPseudoClassSelector(node, path, options, print);
-			break;
-
-		case 'PseudoElementSelector':
-			nodeContent = printCSSPseudoElementSelector(node, path, options, print);
-			break;
-
-		case 'Block':
-			nodeContent = printCSSBlock(node, path, options, print);
-			break;
-
 		case 'Attribute':
 			nodeContent = printAttribute(node, path, options, print);
 			break;
@@ -2066,7 +2044,6 @@ function printRippleNode(node, path, options, print, args) {
 }
 
 function printImportDeclaration(node, path, options, print) {
-	// Use Prettier's doc builders for proper cursor tracking
 	const parts = ['import'];
 
 	// Handle type imports
@@ -2095,25 +2072,47 @@ function printImportDeclaration(node, path, options, print) {
 			}
 		});
 
-		// Build import clause properly
-		const importParts = [];
+		// Build import clause with proper grouping and line breaking
+		const importClauseParts = [];
+
 		if (defaultImports.length > 0) {
-			importParts.push(defaultImports.join(', '));
+			importClauseParts.push(defaultImports.join(', '));
 		}
 		if (namespaceImports.length > 0) {
-			importParts.push(namespaceImports.join(', '));
+			importClauseParts.push(namespaceImports.join(', '));
 		}
 		if (namedImports.length > 0) {
-			importParts.push('{ ' + namedImports.join(', ') + ' }');
+			// Use Prettier's group and conditionalGroup for named imports to handle line breaking
+			const namedImportsDocs = namedImports.map((name) => name);
+			const namedImportsGroup = group(
+				concat([
+					'{',
+					indent(
+						concat([
+							options.bracketSpacing ? line : softline,
+							join(concat([',', line]), namedImportsDocs),
+						]),
+					),
+					ifBreak(shouldPrintComma(options) ? ',' : ''),
+					options.bracketSpacing ? line : softline,
+					'}',
+				]),
+			);
+			importClauseParts.push(namedImportsGroup);
 		}
 
-		parts.push(' ' + importParts.join(', ') + ' from');
+		parts.push(' ');
+		if (importClauseParts.length === 1 && typeof importClauseParts[0] === 'object') {
+			parts.push(importClauseParts[0]);
+		} else {
+			parts.push(join(', ', importClauseParts));
+		}
+		parts.push(' from');
 	}
 
-	parts.push(' ' + formatStringLiteral(node.source.value, options) + semi(options));
+	parts.push(' ', formatStringLiteral(node.source.value, options), semi(options));
 
-	// Return as single string for proper cursor tracking
-	return parts;
+	return concat(parts);
 }
 
 function printExportNamedDeclaration(node, path, options, print) {
@@ -4319,215 +4318,6 @@ function printTSIndexedAccessType(node, path, options, print) {
 	return concat([path.call(print, 'objectType'), '[', path.call(print, 'indexType'), ']']);
 }
 
-function printStyleSheet(node, path, options, print) {
-	// StyleSheet contains CSS rules in the 'body' property
-	if (node.body && node.body.length > 0) {
-		const cssItems = [];
-
-		// Process each item in the stylesheet body
-		for (let i = 0; i < node.body.length; i++) {
-			const item = path.call(print, 'body', i);
-			if (item) {
-				cssItems.push(item);
-			}
-		}
-
-		// Structure the CSS with proper indentation and spacing
-		// Check for blank lines between CSS items and preserve them
-		const result = [];
-		for (let i = 0; i < cssItems.length; i++) {
-			result.push(cssItems[i]);
-			if (i < cssItems.length - 1) {
-				// Check if there are blank lines between current and next item
-				const currentItem = node.body[i];
-				const nextItem = node.body[i + 1];
-
-				// Check for blank lines in the original CSS source between rules
-				let hasBlankLine = false;
-				if (
-					node.source &&
-					typeof currentItem.end === 'number' &&
-					typeof nextItem.start === 'number'
-				) {
-					const textBetween = node.source.substring(currentItem.end, nextItem.start);
-					// Count newlines in the text between the rules
-					const newlineCount = (textBetween.match(/\n/g) || []).length;
-					// If there are 2 or more newlines, there's at least one blank line
-					hasBlankLine = newlineCount >= 2;
-				}
-				if (hasBlankLine) {
-					// If there are blank lines, add an extra hardline (to create a blank line)
-					result.push(hardline, hardline);
-				} else {
-					result.push(hardline);
-				}
-			}
-		}
-
-		return concat(result);
-	}
-
-	// If no body, return empty string
-	return '';
-}
-
-function printCSSRule(node, path, options, print) {
-	// CSS Rule has prelude (selector) and block (declarations)
-	const selector = path.call(print, 'prelude');
-	const block = path.call(print, 'block');
-
-	return group([selector, ' {', indent([hardline, block]), hardline, '}']);
-}
-
-function printCSSDeclaration(node, path, options, print) {
-	// CSS Declaration has property and value
-	const parts = [node.property];
-
-	if (node.value) {
-		parts.push(': ');
-		const value = path.call(print, 'value');
-		parts.push(value);
-	}
-
-	parts.push(';');
-	return concat(parts);
-}
-
-function printCSSAtrule(node, path, options, print) {
-	// CSS At-rule like @media, @keyframes, etc.
-	const parts = ['@', node.name];
-
-	if (node.prelude) {
-		parts.push(' ');
-		const prelude = path.call(print, 'prelude');
-		parts.push(prelude);
-	}
-
-	if (node.block) {
-		const block = path.call(print, 'block');
-		parts.push(' {');
-		parts.push(indent([hardline, block]));
-		parts.push(hardline, '}');
-	} else {
-		parts.push(';');
-	}
-
-	return group(parts);
-}
-
-function printCSSSelectorList(node, path, options, print) {
-	// SelectorList contains multiple selectors
-	if (node.children && node.children.length > 0) {
-		const selectors = [];
-		for (let i = 0; i < node.children.length; i++) {
-			const selector = path.call(print, 'children', i);
-			selectors.push(selector);
-		}
-		// Join selectors with comma and line break for proper CSS formatting
-		return join([',', hardline], selectors);
-	}
-	return '';
-}
-
-function printCSSComplexSelector(node, path, options, print) {
-	// ComplexSelector contains selector components
-	if (node.children && node.children.length > 0) {
-		const selectorParts = [];
-		for (let i = 0; i < node.children.length; i++) {
-			const part = path.call(print, 'children', i);
-			selectorParts.push(part);
-		}
-		return concat(selectorParts);
-	}
-	return '';
-}
-
-function printCSSRelativeSelector(node, path, options, print) {
-	// RelativeSelector contains selector components in the 'selectors' property
-	const parts = [];
-
-	// Print combinator if it exists (e.g., +, >, ~, or space)
-	if (node.combinator) {
-		if (node.combinator.name === ' ') {
-			// Space combinator (descendant selector)
-			parts.push(' ');
-		} else {
-			// Other combinators (+, >, ~)
-			parts.push(' ', node.combinator.name, ' ');
-		}
-	}
-
-	if (node.selectors && node.selectors.length > 0) {
-		const selectorParts = [];
-		for (let i = 0; i < node.selectors.length; i++) {
-			const part = path.call(print, 'selectors', i);
-			selectorParts.push(part);
-		}
-		parts.push(...selectorParts);
-	}
-
-	return concat(parts);
-}
-
-function printCSSTypeSelector(node, path, options, print) {
-	// TypeSelector for element names like 'div', 'body', 'p', etc.
-	return node.name || '';
-}
-
-function printCSSIdSelector(node, path, options, print) {
-	// IdSelector for #id
-	return concat(['#', node.name || '']);
-}
-
-function printCSSClassSelector(node, path, options, print) {
-	// ClassSelector for .class
-	return concat(['.', node.name || '']);
-}
-
-function printCSSNestingSelector(node, path, options, print) {
-	// NestingSelector for & (parent reference in nested CSS)
-	return '&';
-}
-
-function printCSSPseudoClassSelector(node, path, options, print) {
-	// PseudoClassSelector for :hover, :global(), etc.
-	const parts = [':', node.name || ''];
-
-	// If it has args (like :global(.classname)), print them
-	if (node.args !== null && node.args !== undefined) {
-		parts.push('(', node.args, ')');
-	}
-
-	return concat(parts);
-}
-
-function printCSSPseudoElementSelector(node, path, options, print) {
-	// PseudoElementSelector for ::before, ::after, etc.
-	const parts = ['::', node.name || ''];
-
-	// If it has args (like ::slotted(span)), print them
-	if (node.args !== null && node.args !== undefined) {
-		parts.push('(', node.args, ')');
-	}
-
-	return concat(parts);
-}
-
-function printCSSBlock(node, path, options, print) {
-	// CSS Block contains declarations
-	if (node.children && node.children.length > 0) {
-		const declarations = [];
-		for (let i = 0; i < node.children.length; i++) {
-			const decl = path.call(print, 'children', i);
-			if (decl) {
-				declarations.push(decl);
-			}
-		}
-		return join(hardline, declarations);
-	}
-	return '';
-}
-
 function shouldInlineSingleChild(parentNode, firstChild, childDoc) {
 	if (!firstChild || childDoc == null) {
 		return false;

package/src/index.test.js

@@ -663,6 +663,33 @@ import { Something, type Props, track } from 'ripple';`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should format long import statements correctly', async () => {
+			const input = `import { flushSync, track, effect, bindValue, bindChecked, bindGroup, bindClientWidth, bindClientHeight, bindOffsetWidth, bindOffsetHeight, bindContentRect, bindContentBoxSize, bindBorderBoxSize, bindDevicePixelContentBoxSize, bindInnerHTML, bindInnerText, bindTextContent, bindNode } from 'ripple';`;
+			const expected = `import {
+  flushSync,
+  track,
+  effect,
+  bindValue,
+  bindChecked,
+  bindGroup,
+  bindClientWidth,
+  bindClientHeight,
+  bindOffsetWidth,
+  bindOffsetHeight,
+  bindContentRect,
+  bindContentBoxSize,
+  bindBorderBoxSize,
+  bindDevicePixelContentBoxSize,
+  bindInnerHTML,
+  bindInnerText,
+  bindTextContent,
+  bindNode,
+} from 'ripple';`;
+
+			const result = await format(input, { singleQuote: true, printWidth: 80 });
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should preserve @ symbol in JSX attributes and shorthand syntax', async () => {
 			const input = `component App() {
 	const count = track(0);
@@ -1135,6 +1162,59 @@ const [obj1, obj2] = arrayOfObjects;`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should keep css @keyframes syntax intact', async () => {
+			const input = `export component App() {
+  <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>
+}`;
+
+			const expected = `export component App() {
+  <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>
+}`;
+
+			const result = await format(input, { singleQuote: true, printWidth: 100 });
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should keep TrackedMap short syntax intact', async () => {
 			const expected = `const map = new #Map([['key1', 'value1'], ['key2', 'value2']]);
 const set = new #Set([1, 2, 3]);`;