HTML and CSS in Neapolitan
In JSX, tags are written in Neapolitan: core (main), cascett (div), chiacchier (p), luccolone (h1), citofono (button), list (ul), voce (li), cartulin (img), vattenn (a)… The compiler translates them to HTML, so the page and the browser tools show standard tags. English names stay valid: div is still div.
Attributes and events of tags have Neapolitan names too: classe (className), chiave (key), tipo (type), valore (value), esempio (placeholder), da (src), addo (href), stutato (disabled), and for events quanno-tuocche (onClick), quanno-scrive (onInput), quanno-cagne (onChange), quanno-manne (onSubmit), quanno-premi (onKeyDown)… They apply to HTML tags only: the props of your own components stay as you write them. React names stay valid.
stile…` writes CSS in Neapolitan and is translated at compile time too: culore becomes color, sfunno-culore becomes background-color, spazio becomes padding, russo becomes red, :passanno becomes :hover, @quanno becomes @media`. As everywhere else in the language the semicolon is optional: a new line is enough.
stile returns the CSS and, in the browser, adds it to the page once. Values can come from the code with ${…} and are kept as they are. For Tailwind just use classe with its classes: fratm nuovo --tailwind sets the project up.
// 'O CSS napulitano: stile`…` se traduce quanno 'o codice se compila
chiamm { stile } da "fratm"
chist è css = stile`
core.pizzeria {
sfunno-culore: janco
spazio: 16px
mostra: flessibile
}
citofono:passanno {
culore: russo
cursore: manella
}
@quanno (larghezza-massima: 600px) {
core.pizzeria { spazio: 8px }
}
`
stamm a dì(css)
// 'E valori ponno arrivà d'o codice
tien culore = "#1d4ed8"
stamm a dì(stile`luccolone { culore: ${culore} }`)Output
main.pizzeria {
background-color: white;
padding: 16px;
display: flex
}
button:hover {
color: red;
cursor: pointer
}
@media (max-width: 600px) {
main.pizzeria { padding: 8px }
}
h1 { color: #1d4ed8 }