cssmodules

CSS Modules in Go

This library follows almost all of the features and characteristics from the CSS Modules non-standard specification

With this library you can parse any CSS that you have and get some key-value pairs with your classes and the scoped classes

• Features:

• Class scoping per function call

• Global scoping trought the :global keyword

• Media query scoping support

• Another @ (at) declarations support: @import, @font-face, @keyframes, etc.

• Your ID (#), element (div, span, etc.) and universal (*) selectors are global scoped whether they are outside or not of a :global block

• Scoping of animations (@keyframes declarations)

• composes keyword support

• Quick usage:

package main

import (
    "log"
    "os"
    "strings"

    "github.com/otaxhu/go-cssmodules"
)

func main() {
    myCSS := strings.NewReader(
`.my-class {color: red;}`,
)
    // Now you have your cssScoped and you can access your classes throught 
    // the scopedClasses variable
    cssProcessed, scopedClasses, err := cssmodules.ProcessCSSModules(myCSS)
    if err != nil {
        log.Fatal(err)
    }
    fmt.Printf("your css processed: %s\nmy-class generated name: %s", cssProcessed, scopedClasses["my-class"])
    // Output in Stdout will be something like this:
    //
    // your css processed: .RANDOMCLASS{color: red;}
    // my-class generated name: RANDOMCLASS
}

CSS Modules in HTML templates:

Also you can use the ProcessHTMLWithCSSModules function for processing HTML tags that has a css-module attribute.

Little example of a template with CSS Modules:

<div css-module="class-foo">
    <p css-module="class-foo class-bar">Lorem ipsum</p>
</div>

Pass it with this map[string]string or json-like object with values of strings to the ProcessHTMLWithCSSModules function:

// To obtain this object you have to first
// generate it with the function ProcessCSSModules
{
    "class-foo": "_class-foo_RANIDFOOBARPIZZA",
    "class-bar": "_class-bar_RANIDBARFOOAREPA"
}

Your template will become something like this after processed:

<div class="_class-foo_RANIDFOOBARPIZZA">
    <p class="_class-foo_RANIDFOOBARPIZZA _class-bar_RANIDBARFOOAREPA">Lorem ipsum</p>
</div>

Installation:

1. Create a new directory and initialize a go project with the following commands:

$ mkdir my-directory
$ cd my-directory
$ go mod init my-directory
go: creating new go.mod: module my-directory

1. Execute this command in your terminal and you are ready to go with CSS Modules:

$ go get github.com/otaxhu/go-cssmodules