ripple 0.2.41 → 0.2.42

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is a TypeScript UI framework for the web",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.41",
+  "version": "0.2.42",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

package/src/compiler/phases/1-parse/index.js

@@ -413,9 +413,9 @@ function RipplePlugin(config) {
 					}
 				} else {
 					if (open.name.name === 'style') {
-						// jsx_parseOpeningElementAt can treat a html element selector as an identifier and read it
-						// In that case, need to backtrack to include it in the css content
-						const start = this.pos - (this.value?.length ?? 1)
+						// jsx_parseOpeningElementAt treats ID selectors (ie. #myid) or type selectors (ie. div) as identifier and read it
+						// So backtrack to the end of the <style> tag to make sure everything is included
+						const start = open.end;
 						const input = this.input.slice(start);
 						const end = input.indexOf('</style>');
 						const content = input.slice(0, end);
@@ -428,7 +428,7 @@ function RipplePlugin(config) {
 
 						const newLines = content.match(regex_newline_characters)?.length;
 						if (newLines) {
-							this.curLine += newLines;
+							this.curLine = open.loc.end.line + newLines;
 							this.lineStart = start + content.lastIndexOf('\n') + 1;
 						}
 						this.pos = start + content.length + 1;

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

@@ -199,6 +199,20 @@ const visitors = {
 		);
 	},
 
+	TSTypeAliasDeclaration(_, context) {
+		if (!context.state.to_ts) {
+			return b.empty;
+		}
+		context.next();
+	},
+
+	TSInterfaceDeclaration(_, context) {
+		if (!context.state.to_ts) {
+			return b.empty;
+		}
+		context.next();
+	},
+
 	NewExpression(node, context) {
 		const callee = node.callee;
 		const parent = context.path.at(-1);

package/tests/compiler.test.ripple

@@ -1,5 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { mount, RippleArray } from 'ripple';
+import { parse } from 'ripple/compiler'
 
 describe('compiler success tests', () => {
   let container;
@@ -20,6 +21,30 @@ describe('compiler success tests', () => {
 		container = null;
 	});
 
+	
+	it('Parses style content correctly', () => {
+		const source = `export component App() {
+  <div id="myid" class="myclass">{"Hello World"}</div>
+  
+  <style>#style</style>
+}`;
+		const style1 = '.myid {color: green }';
+		const style2 = '#myid {color: green }';
+		const style3 = 'div {color: green }';
+		
+		let input = source.replace('#style', style1);
+		let ast = parse(input);
+		expect(ast.body[0].declaration.css.source).toEqual(style1);
+
+		input = source.replace('#style', style2);
+		ast = parse(input);
+		expect(ast.body[0].declaration.css.source).toEqual(style2);
+
+		input = source.replace('#style', style3);
+		ast = parse(input);
+		expect(ast.body[0].declaration.css.source).toEqual(style3);
+	});
+
   it('renders without crashing', () => {
 		component App() {
 			let foo;