tomato

A CSS preprocessor that reads like English.

A small, sharp language that compiles to plain CSS. Components, tokens, breakpoints. No new runtime. No framework. Just shorter files.

Try it Read on GitHub
$ npm install -D @srivtx/tomato-css v1.2.0 · 12kb · 0 deps
button.tom  →  button.css 
# a button
component btn:
  pad 2 4
  round lg
  bold
  pointer

button:
  use btn
  bg blue-500
  color white

  hover:
    bg blue-600
button {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: bold;
  cursor: pointer;
  background: #3b82f6;
  color: #ffffff;
}

button:hover {
  background: #2563eb;
}
§ 01 — What it is

Plain English in, plain CSS out.

parser  ·  ~3kb
runtime  ·  none
output  ·  css

Tomato is a preprocessor, not a framework. You write .tom files. The compiler reads them and emits standard CSS. There is no JavaScript shipped to the browser and no classes you have to remember.

The language is intentionally small. pad 2 4 instead of padding: 0.5rem 1rem. use btn instead of copy-pasting twelve lines. @mobile: instead of writing a media query by hand. You can read the whole spec in two minutes.

Tailwind colors are built in. The spacing scale, radius scale, and shadow scale match the same scales you've been using for years. Anything Tomato can't express, you drop into a property: value; line and it passes through unchanged.

§ 02 — Try it

Edit on the left. Read the CSS on the right.


                

                    input.tom → output.css
                    
                        compiles in your browser
                    
                

            

        


        
        

            
§ 03 — The spec

            
A small language, on purpose.


            
    
                
  1. 
                    
    
                    
    
                        
    Selectors
    
                        
    
                            Plain button, .class, #id, and
                            button.btn. Comma-separated groups (.a, .b) work.
                        
    
                    
    
                
    2. 
                
  2. 
                    
    
                    
    
                        
    Shortcuts
    
                        
    
                            pad, m, round, shadow, bg,
                            color, row, column, grid, gap,
                            center, hidden, block, flex.
                        
    
                    
    
                
    3. 
                
  3. 
                    
    
                    
    
                        
    Components
    
                        
    
                            component btn: defines a reusable block. use btn pastes it
                            into any selector.
                        
    
                    
    
                
    4. 
                
  4. 
                    
    
                    
    
                        
    Nesting
    
                        
    
                            hover:, focus:, active:, disabled:.
                            Indent one level. No & needed.
                        
    
                    
    
                
    5. 
                
  5. 
                    
    
                    
    
                        
    Breakpoints
    
                        
    
                            @mobile, @tablet, @laptop, @desktop,
                            @wide  — match the Tailwind widths out of the box.
                        
    
                    
    
                
    6. 
                
  6. 
                    
    
                    
    
                        
    Color modes
    
                        
    
                            @dark: and @light: compile to real
                            prefers-color-scheme media queries.
                        
    
                    
    
                
    7. 
                
  7. 
                    
    
                    
    
                        
    Tokens
    
                        
    
                            Define a color once as primary, then use bg primary anywhere.
                            @import "./tokens.tom" shares them across files.
                        
    
                    
    
                
    8. 
                
  8. 
                    
    
                    
    
                        
    Pass-through
    
                        
    
                            Anything Tomato doesn't recognise is copied to the output untouched. CSS variables,
                            grid-template-areas, the lot.
                        
    
                    
    
                
    9.