nscss

NSCSS

CSS for Components Spec

What is it?

TBD

• use class selector instead of element selector
• use custom states inside the owner stylesheet
• multiple different app context
• Per StyleSheet Theme (TODO)

How it works?

• Static styles by source order

Features

• Scoped Stylesheet
• Root definition with custom states
• Customization of scoped and inner parts
• Complex selectors
• Theme - Global Theme / Per StyleSheet Theme (TODO)
• Framework Agnostic
• Easy debugging - readable CSS Class Names, fail-fast evaluation time errors
• No Runtime Errors 😜

Native css support

• @media query
• @font-face
• Animations (TODO)
• Pseudo Elements / Pseudo Classes / Native States
• Child & Attribute selectors

Syntax

• Styles As Object Literals
• As Template Literals?
• TypeScript

React integration

• Component integration
• SSR

Plugins

• Hooks to allow style transformations (vendor prefixing, etc.)
• Extract plain CSS
• IDE Plugins

Concepts

Namespace

Talk about namespace...

Stylesheet

Stylesheet has namespace and defines semantic scope parts: Single declaration:

• root - ?
• class - ? can ne auto detected
• component - ?
• scoped - ?
• selector - composed from defined parts

Usage

Scoping

Namespace is prefixed to each class name in the stylesheet

Code:

new Stylesheet({
    "@namespace": "App",
    "redButton": { color: "red" },
    "blueButton": { color: "blue" }
});

CSS output:

.App◼redButton { color: red; }
.App◼blueButton { color: blue; }

Root definition with custom states

The main className that should be used as for the component root node.

• Defines component custom states.
• Uses as namespace when namespace is not provided.
• Used as default cascade parent for component and scoped classes.

Stylesheet with root:

new Stylesheet({
    "@namespace": "Button",
    "@define": {
        "root": Stylesheet.root() // Declare a class as root
    },
    "root": { color: "red" }
});

CSS output:

/* result CSS class name: namespace + root name */
.Button◼root { color: red; }

Custom states

Custom states in nscss are just mapping between an attribute selector to a name.

Root with custom states:

new Stylesheet({
    "@define": {
        "Button": Stylesheet.root({
            mouseHover: "[data-state-hover]",
            disabled: "[data-state-disabled]"
        })
    },
    "Button": { color: "red" },
    "Button:mouseHover": { color: "green" }
});

CSS output:

.Button◼Button { color: red; }
.Button◼Button[data-state-hover] { color: "green" }

Cascade parent

Only affects the output css when used with component and scoped classes.

Customization (override)

Customization is a way to target component type within your stylesheet The way to do it is to get the a reference to a stylesheet and use it as component or scoped override

Customize all labels under root stylesheet using component:

//this can be imported from the label stylesheet file.
const Label = new Stylesheet(...);

new Stylesheet({
    "@define": {
        "Button": Stylesheet.root(),
        "Label": Stylesheet.component(Label) // use it as a component
    },
    "Label": { color: "red" },
    "Label:hover": { color: "green" },
    "Button:hover Label": { color: "blue" }
});

CSS output:

.Button◼Button .Label◼Label { color: red; }
.Button◼Button .Label◼Label:hover { color: green; }
.Button◼Button:hover > .Label◼Label { color: blue; }

Customize with local class that will be place on any of the components scoped

//this can be imported from the label stylesheet file.
const Label = new Stylesheet(...);

new Stylesheet({
    "@define": {
        "Button": Stylesheet.root(),
        "Label": Stylesheet.scoped(Label) // use it as a scoped
    },
    "Label": { color: "red" },
    "Label:hover": { color: "green" },
    "Button:hover > Label": { color: "blue" }
});

CSS output:

.Button◼Button .Button◼Label { color: red; }
.Button◼Button .Button◼Label:hover { color: green; }
.Button◼Button:hover .Button◼Label { color: blue; }

Customization of inner parts

Customization of inner parts is done with the :: operator and can be chained as many level that needed.

Target text class inside the label component:

//this can be imported from the label stylesheet file.
const Label = new Stylesheet({
    "@define": {
        "Label": Stylesheet.root(),
    },
    "text": { color: "red" } // label inner text class
});

new Stylesheet({
    "@define": {
        "Button": Stylesheet.root(),
        "Label": Stylesheet.component(Label), // target with component
        "MyLabel": Stylesheet.scoped(Label) // target with scoped
    },
    //target the ::text part
    "Label::text": { color: "green" },
    "MyLabel::text": { color: "blue" } 
});

CSS output:

.Button◼Button .Label◼Label .Label◼text { color: red; }
.Button◼Button .Button◼MyLabel .Label◼text { color: green; }

Complex Selectors

Selector definition must start with a defined part and then it can target internal parts, states or other defined parts.

new Stylesheet({
    "@define": {
        "Button": Stylesheet.root()       
    },
    "container": { ... },
    "btn": { ... },
    "container btn": {
        color: "red"
    },
    "container[data-active] > label:hover": {
        color: "red"
    }
});

Possible markup

<div class="Button">
    <div data-active class="container">
        <button class="btn"></button>
    </div>
    <button class="btn"></button>
<div>

CSS output:

...
/* this is complex part only */
.Button◼container .Button◼btn { color: blue; }
.Button◼container[data-active] > .Button◼btn:hover { color: blue; }

Global Theme

All css values in nscss are actually part of a template engine the data for the variables comes when you attach the stylesheet to the dom

new Stylesheet({
    "@define": {
        "Button": Stylesheet.root()       
    },
    "Button": { 
        color: "{{primaryColor}}" // this will be injected
    }
});

//at the app entry
Stylesheet.attach({
    primaryColor: "red"
});

CSS output:

.Button◼Button { color: red; }