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
-
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
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
}
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>
- 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
- Execute this command in your terminal and you are ready to go with CSS Modules:
$ go get github.com/otaxhu/go-cssmodules