Deferred: My dream imba syntax (for front end design)

No one is asking, but this is some of my dream syntax for front-end work with imba.

tag app-root
	def render
		# self tag is implied by default (but optional) thus saving one indentation level
		<h1> "Hello " <span> user + "!" 
	def styles stylus # choose syntax plugin here css|sass|scss|stylus|etc
		# styles are scoped to component
			@apply text-blue-600 p-10
				@apply text-gray-800

tag app-button < button
	def render
		# pipe makes line a string by default, familiar to pug users, data interpolation with {}
		<self> | click me
	def styles css
		# can use self, this, or app-button as selector of this component
		self {@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full}

# global styles & project imports
### css
@import "tailwindcss/base";
@import "./custom-base-styles.css";
@import "tailwindcss/components";
@import "./custom-components.css";
@import "tailwindcss/utilities";
@import "./custom-utilities.css";
* {
	box-sizing: border-box

See imba.config.imba ideas here:

I think it’s all fun and cool but out of scope for v2. The syntax for styling should be delayed until post-Imba v2 IMO. Ideally, it should happen after v3. We already have enough topics that need to be addressed.


I’ll have to wait for better style support. i can’t do anything about it. :slight_smile:

It has been a dream of mine since i started using imba over a year ago, but I’m grateful for some support with comment blocks at the moment.