nscss

NSCSS

CSS for Components

What is it?

How it works?

• Static styles by source order

Features

• Scoping for component
• Root Definition
• Custom states
• Override with scoped selector
• Override by root
• Override public scoped parts
• Theme - Global Theme / Per StyleSheet Theme (TODO)
• Framework Agnostic
• Easy debugging - readable CSS Class Names
• Great Feedback

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 for components

namespace is prefixed to each class

Code:

const { NSSheet } from "nscss";

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

CSS output:

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

Root Definition

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

Declare a class as root:

const { NSSheet } from "nscss";

new NSSheet({
    "@namespace": "Button",
    "@define": {
        "Button": NSSheet.root()
    },
    "Button": { color: "red" }
});

Custom states

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

Root with custom states:

const { NSSheet } from "nscss";

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

Cascade parent

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

Code:

const { NSSheet } from "nscss";

const Label = new NSSheet(...);

new NSSheet({
    "@namespace": "Button",
    "@define": {
        "Button": NSSheet.root(),
        "Label": NSSheet.component(Label)
    },
    "Label": { color: "red" }
});

CSS output:

/* App root   Label root */
.Button◼Button .Label◼Text { color: red; }

Overrides