func TestLinkedCSS(t *testing.T) {
expected := "#galatica block {\n Helvetica\n color: Pink;\n}\n#galatica::before {\n content: \"bugger\";\n}\n#galatica div a {\n color: black;\n font-family: Helvetica;\n}\n@media (max-width: 400px) {\n #galatica:hover {\n color: blue;\n font-family: Helvetica;\n }\n}"
csr := css.New(`
block {
font-family: {{ .Font }}
color: {{ .Color }}
}
`)
csx := css.New(`
::before {
content: "bugger";
}
div a {
color: black;
font-family: {{ .Font }}
}
@media (max-width: 400px){
:hover {
color: blue;
font-family: {{ .Font }}
}
}
`, csr)
sheet, err := csx.Stylesheet(struct {
Font string
Color string
}{
Font: "Helvetica",
Color: "Pink",
}, "#galatica")
if err != nil {
tests.Failed(t, "Should have successfully processed stylesheet for rule")
}
tests.Passed(t, "Should have successfully processed stylesheet for rule")
if val := sheet.String(); val != expected {
t.Logf("\t\tRecieved: %q\n", val)
t.Logf("\t\tExpected: %q\n", expected)
tests.Failed(t, "Should have rendered expected stylesheet")
}
tests.Passed(t, "Should have rendered expected stylesheet")
}
// DoStyle adds a element which generates a <style> tag.
func DoStyle(styles interface{}, bind interface{}, deferRender bool) {
var rs *css.Rule
switch so := styles.(type) {
case string:
rs = css.New(so)
case *css.Rule:
rs = so
default:
panic("Invalid Acceptable type for css: Only string or *css.Rule")
}
current := getResources().MustCurrentResource()
var static gu.StaticView
static.Morph = true
static.Content = trees.CSSStylesheet(rs, bind)
trees.NewAttr("resource-id", current.UUID()).Apply(static.Content)
if deferRender {
current.DeferLinks = append(current.DeferLinks, static)
return
}
current.Links = append(current.Links, static)
}
func TestBasicCSS(t *testing.T) {
expected := "#galatica:hover {\n color: red;\n}\n#galatica::before {\n content: \"bugger\";\n}\n#galatica div a {\n color: black;\n font-family: Helvetica;\n}\n@media (max-width: 400px) {\n #galatica:hover {\n color: blue;\n font-family: Helvetica;\n }\n}"
csr := css.New(`
$:hover {
color: red;
}
$::before {
content: "bugger";
}
$ div a {
color: black;
font-family: {{ .Font }}
}
@media (max-width: 400px){
$:hover {
color: blue;
font-family: {{ .Font }}
}
}
`)
sheet, err := csr.Stylesheet(struct {
Font string
}{Font: "Helvetica"}, "#galatica")
if err != nil {
tests.Failed(t, "Should have successfully processed stylesheet for rule")
}
tests.Passed(t, "Should have successfully processed stylesheet for rule")
if val := sheet.String(); val != expected {
t.Logf("\t\tRecieved: %q\n", val)
t.Logf("\t\tExpected: %q\n", expected)
tests.Failed(t, "Should have rendered expected stylesheet")
}
tests.Passed(t, "Should have rendered expected stylesheet")
}
package css
import "github.com/gu-io/gu/css"
// Index defines the css component which defines the rendering for
// a notification page.
var Index = css.New(`
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
padding: 250px 0px 250px 400px;
background: #efefef;
}
`)
)
// IndexCSS defines the css component which defines the rendering for
// a notification page.
var IndexCSS = css.New(`
*{
margin: 0;
padding: 0;
font-family: "Lato", "Open Sans",sans-serif;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
width: 100%;
margin: 0 auto;
background: #efefef;
}
.roboto {
font-family: "Roboto", "Lato", "helvetica";
}
`)
// RootCSS defines a css component which defines the page rendering styles.
var RootCSS = css.New(`
$, $ *{