@ripple-ts/prettier-plugin 0.2.211 → 0.2.213

package/README.md

@@ -1,4 +1,7 @@
 # @ripple-ts/prettier-plugin
 
+[![npm version](https://img.shields.io/npm/v/%40ripple-ts%2Fprettier-plugin?logo=npm)](https://www.npmjs.com/package/@ripple-ts/prettier-plugin)
+[![npm downloads](https://img.shields.io/npm/dm/%40ripple-ts%2Fprettier-plugin?logo=npm&label=downloads)](https://www.npmjs.com/package/@ripple-ts/prettier-plugin)
+
 A Prettier plugin for formatting [Ripple](https://github.com/Ripple-TS/ripple)
 `.ripple` files.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ripple-ts/prettier-plugin",
-  "version": "0.2.211",
+  "version": "0.2.213",
   "description": "Ripple plugin for Prettier",
   "type": "module",
   "module": "src/index.js",
@@ -27,7 +27,7 @@
     "@types/estree": "^1.0.8",
     "@types/estree-jsx": "^1.0.5",
     "prettier": "^3.6.2",
-    "ripple": "0.2.211"
+    "ripple": "0.2.213"
   },
   "dependencies": {},
   "files": [

package/src/index.js

@@ -1596,6 +1596,18 @@ function printRippleNode(node, path, options, print, args) {
 			break;
 		}
 
+		case 'StyleSheet': {
+			// StyleSheet nodes inside <style> elements. When CSS is empty/whitespace-only,
+			// return empty string so the element collapses to <style></style>.
+			// Non-empty stylesheets are normally handled by embed() using textToDoc with the CSS parser.
+			if (!node.source || !node.source.trim()) {
+				nodeContent = '';
+			} else {
+				nodeContent = node.source.trim();
+			}
+			break;
+		}
+
 		case 'ServerIdentifier': {
 			nodeContent = '#server';
 			break;

package/src/index.test.js

@@ -1236,6 +1236,21 @@ const [obj1, obj2] = arrayOfObjects;`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should not mangle empty stylesheet tags <style></style>', async () => {
+			const input = `component App() {
+  <style>
+
+  </style>
+}`;
+
+			const expected = `component App() {
+  <style></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]);`;
@@ -1891,6 +1906,201 @@ files = [...(files ?? []), ...dt.files];`;
 			const result = await format(expected, { singleQuote: true, printWidth: 100 });
 			expect(result).toBeWithNewline(expected);
 		});
+
+		it('should not remove comments when stylesheet contains some sort of combination of selectors', async () => {
+			const expected = `component Editor() {
+  <div class="editor-mockup">
+    <div class="editor-header">
+      <div class="editor-dots">
+        // <div class="editor-dot red" />
+        // <div class="editor-dot yellow" />
+        <div class="editor-dot green" />
+      </div>
+      <div class="editor-tab">{'Examples.ripple'}</div>
+    </div>
+    <div class="editor-content">
+      <pre class="editor-code">
+        <span class="editor-loader">{'Loading...'}</span>
+      </pre>
+    </div>
+  </div>
+
+  <style>
+    @keyframes editorSlideIn {
+      0% {
+        opacity: 0;
+        transform: translateY(30px);
+      }
+      100% {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .editor-mockup {
+      max-width: 700px;
+      margin: 1rem auto;
+      background: rgba(30, 30, 35, 0.98);
+      border-radius: 12px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      overflow: hidden;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      text-align: left;
+      opacity: 1;
+      transform: translateY(30px);
+      animation: editorSlideIn 1s ease-out 0.5s forwards;
+    }
+
+    .editor-header {
+      background: rgba(20, 20, 25, 0.9);
+      padding: 0.75rem 1rem 0;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      display: flex;
+      align-items: flex-start;
+      gap: 1rem;
+    }
+
+    .editor-dots {
+      display: flex;
+      gap: 0.5rem;
+      align-self: center;
+      margin-top: -7px;
+    }
+
+    .editor-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+    }
+
+    .editor-dot.red {
+      background: #ff5f57;
+    }
+    .editor-dot.yellow {
+      background: #ffbd2e;
+    }
+    .editor-dot.green {
+      background: #28ca42;
+    }
+
+    .editor-loader {
+      display: 'flex';
+      align-items: center;
+      justify-content: center;
+    }
+
+    .editor-tab {
+      background: rgba(25, 25, 30, 0.95);
+      padding: 0.5rem 1rem;
+      border-radius: 6px 6px 0 0;
+      color: rgba(255, 255, 255, 0.9);
+      font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+      font-size: 0.75rem;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-bottom: none;
+      margin-bottom: -1px;
+      align-self: flex-end;
+    }
+
+    .editor-content {
+      background: rgba(25, 25, 30, 0.95);
+      padding: 0;
+      font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+      font-size: 0.8rem;
+      line-height: 1.5;
+      color: #e1e4e8;
+      overflow-x: auto;
+      text-align: left;
+      height: 800px;
+    }
+
+    .editor-code {
+      margin: 0;
+      padding: 1.5rem;
+      background: none;
+      color: inherit;
+      font: inherit;
+      white-space: pre;
+      overflow-x: auto;
+    }
+
+    :global(.editor-line) {
+      display: block;
+    }
+
+    :global(.line-number) {
+      color: rgba(255, 255, 255, 0.3);
+      display: inline-block;
+      width: 1rem;
+      text-align: right;
+      margin-right: 0.75rem;
+      user-select: none;
+    }
+
+    :global(.keyword) {
+      color: #569cd6;
+    }
+    :global(.export-keyword) {
+      color: #c586c0;
+    }
+    :global(.string) {
+      color: #ce9178;
+    }
+    :global(.component) {
+      color: #4ec9b0;
+    }
+    :global(.function) {
+      color: #dcdcaa;
+    }
+    :global(.property) {
+      color: #9cdcfe;
+    }
+    :global(.css-selector) {
+      color: #d7ba7d;
+    }
+    :global(.control-keyword) {
+      color: #c586c0;
+    }
+    :global(.block-brace) {
+      color: #c586c0;
+    }
+    :global(.tag) {
+      color: #569cd6;
+    }
+    :global(.attribute) {
+      color: #92c5f8;
+    }
+    :global(.value) {
+      color: #b5cea8;
+    }
+    :global(.comment) {
+      color: #6a9955;
+      font-style: italic;
+    }
+    :global(.brace) {
+      color: #ffd700;
+    }
+    :global(.css-brace) {
+      color: #d4d4d4;
+    }
+    :global(.template-brace) {
+      color: #ffd700;
+    }
+    :global(.ripple-syntax) {
+      color: #4fc1ff;
+    }
+    :global(.bracket) {
+      color: #808080;
+    }
+    :global(.reactive-var) {
+      color: #9cdcfe;
+      font-weight: bold;
+    }
+  </style>
+}`;
+
+			const result = await format(expected, { singleQuote: true, printWidth: 100 });
+			expect(result).toBeWithNewline(expected);
+		});
 	});
 
 	describe('edge cases', () => {