import { css , keyframes } from "otion" ; import * as React from "react" ; const pulse = keyframes ( { from : { opacity : 0 } , to : { opacity : 1 } , } ) ; export default function IndexPage ( ) { const unusedElement = ( < div className = { css ( { content : `"This text shouldn't appear in the SSR-collected style sheet."` , } ) } />); return ( < React . StrictMode > < h1 > Hello , world ! < /h1> < p className = { css ( { "--text-color" : "green" , color : [ "blue" , "var(--text-color)" ] , fontWeight : "bold" , fontSize : 30 , textEmphasis : "filled   red" , animation : `${ pulse } 3s infinite alternate` , paddingLeft : 16 , paddingRight : 24 , padding : 8 , selectors : { "& > * + *" : { paddingLeft : 48 , color : "teal" , } , "  &:focus ,  &:active" : { outline : "solid" , } , } , ":hover" : { padding : 32 , } , "@media" : { " (min-width:  \n600px)   " : { ":hover" : { color : "palevioletred  " , background : "papayawhip" , } , } , "(min-width:1024px)" : { "@supports" : { "  (  display:  grid  )  " : { display : [ "float" , "flex" , "grid" ] , } , } , } , } , } ) } > This is some long dummy text to demonstrate the styling capabilities provided by the underlying library . < /p> < div className = { css ( { "@media" : { "(min-width: 2px)" : { color : "green" } , } , } ) } / > < p className = { css ( { "@media" : { "(min-width: 1px)" : { color : "red" } , "(min-width: 2px)" : { color : "green" } , } , } ) } > Conditional rule precedence management test # 1 , should be green < /p> < p className = { css ( { color : "red" , "@media" : { "(min-width: 2px)" : { color : "green" } , } , } ) } > Conditional rule precedence management test # 2 , should be green < /p> < div className = { css ( { selectors : { "& + &" : { color : "green" } } } ) } / > < p className = { css ( { selectors : { "& + &" : { color : "green" } } } ) } > Self - referencing selector test , should be green < /p> < /React.StrictMode>); }