Media queries

[Xe]

I've been trying to port Xess to gcss as an exercise to see what I think about it and I've run into an issue, I can't properly express media queries like this:

@media only screen and (max-device-width: 736px) {
  main {
    padding: 0;
  }
}

What's the gcss way to do this?

[stuartaccent]

Hi @Xe

Ive added a basic example of how you could do it. The end goal with any of it is you just need to wrap styles with something like the media string to the writer. In short there isn't a way and im keen not to impose it as that will keep the repo free of problems.

But here is an example:

package main

import (
	"github.com/AccentDesign/gcss"
	"github.com/AccentDesign/gcss/props"
	"io"
	"os"
)

type (
	Styles []gcss.Style
	Media  struct {
		Query  string
		Styles Styles
	}
	Stylesheet struct {
		Styles Styles
		Medias []Media
	}
)

// WriteCSS writes the CSS for the media query to the writer
func (m Media) WriteCSS(w io.Writer) error {
	if _, err := io.WriteString(w, m.Query); err != nil {
		return err
	}
	if _, err := io.WriteString(w, "{"); err != nil {
		return err
	}
	for _, style := range m.Styles {
		if err := style.CSS(w); err != nil {
			return err
		}
	}
	if _, err := io.WriteString(w, "}"); err != nil {
		return err
	}
	return nil
}

// WriteCSS writes the CSS for the stylesheet to the writer
func (ss Stylesheet) WriteCSS(w io.Writer) error {
	// Write the base styles first
	for _, style := range ss.Styles {
		if err := style.CSS(w); err != nil {
			return err
		}
	}
	// Write the media queries next
	for _, media := range ss.Medias {
		if err := media.WriteCSS(w); err != nil {
			return err
		}
	}
	return nil
}

var (
	base = Styles{
		{
			Selector: "body",
			Props: gcss.Props{
				Margin: props.UnitRaw(0),
			},
		},
	}
	screen736 = Media{
		Query: "@media only screen and (max-device-width: 736px)",
		Styles: Styles{
			{
				Selector: "main",
				Props: gcss.Props{
					Padding: props.UnitRaw(0),
				},
			},
		},
	}
	stylesheet = Stylesheet{
		Styles: base,
		Medias: []Media{screen736},
	}
)

// This is just a basic idea of how you could structure your CSS
// the goal hear is just to wrap the css how you wish with what ever you wish
// construct your stylesheet to suit your needs.
// The end goal is just to call CSS on each style with the object to write to.
func main() {
	file, err := os.Create("media.css")
	if err != nil {
		panic(err)
	}
	defer file.Close()

	if err := stylesheet.WriteCSS(file); err != nil {
		panic(err)
	}
}

hope this helps in some way

[stuartaccent]

PS. when you get sommit ur happy with feel free to pr it to the examples would love to see it :)

[jamiec7919]

Sorry to wade in here but I've been evaluating gcss - couldn't this also be solved (and also enable nested styles) by just including a []Styles child field in Style?

[stuartaccent]

hi @jamiec7919,

yeh there are a multitude of ways really, what ever suits the needs best. I did have a play around with a sort of starting point after this issue at https://github.com/AccentDesign/gcss-starter as a "could it actually generate a more complete basic stylesheet to cover the basics" and "does it actually need anything adding that can serve this kind of use more specifically".

I did toy with the nested idea, but thought I would wait and chew it over. The only thought off the cuff would be validity of the selectors and whether it is actually a media query or standard selectors and does it even matter.

i'm not sure where the lib is going at present. Still trying to work that out. it feels like we should either do it properly (aka more complete). The bare basics. Or nothing :)

Stu

[jamiec7919]

Fair enough, @ rules should be fairly easy to distinguish (being that they begin with @!), however it definitely really depends on the overall plan. A micro-parser for selector/media rule validation might be very useful regardless. I won't pollute this issue anymore as you've answerd @Xe's question but I might open a new one with some other queries.