Styling library for composable components.
Static styles by source order, compose unique selectors for each scope that override the scoped subtree Stylesheet has namespace and defines semantic scope parts: Single declaration:
This examples based on React and uses the nscss react components.
Install:
npm install nscss --save
Usage:
import * as React from "react";
import { render } from "react-dom";
import { NSComponent, NSStateless, Stylesheet } from "nscss/react";
//NSStateless warps a stateless component
const HelloWorld = NSStateless(()=>{
return <div className="Hello">
<span className="World">Hello World</span>
</div>
}, {
"@define": {
Hello: NSStateless.root('div', ["floating"])
},
".Hello": {
background: "green"
},
".World": {
color: "yellow"
}
});
// NSComponent wraps react component
const App = NSComponent(class extends React.Component {
render(){
return <div className="App">
{/* classNames and styles are automatically
applied on the root element of components */}
<HelloWorld className="MyHello"/>
</div>
}
}, {
"@define": {
App: NSComponent.root("div"),
MyHello: NSComponent.scoped(HelloWorld)
},
".App": {
backgroundColor: "blue"
},
".MyHello": {
background: "{{lightColor}}"
},
".MyHello:floating": {
fontSize: "3em"
},
".MyHello::World": {
color: "{{darkColor}}"
}
});
// set theme variables and attach all css into the document head
Stylesheet.context.attach({
lightColor: "red",
darkColor: "green"
});
render(<App/>, document.querySelector("#app"));
All Primitive part definitions are class definitions that are used to makeup the selectors. A class may implement another sheet interface and define states.
Namespace is prefixed to each class name in the stylesheet
Code:
new Stylesheet({
"@namespace": "App",
".redButton": { color: "red" },
".blueButton": { color: "blue" }
});
CSS output:
/* global namespace + separator + local namespace */
.App◼redButton { color: red; }
.App◼blueButton { color: blue; }
The main class for the component root node.
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; }
Special class definitions that allows you to define your stylesheet structure in order it to be used by other stylesheets.
Component class is an alias to a css class name, when used in a selector it will be replaced with the class name of the extended component. it's behavior is like css element (tag) selector it affects all instances of the component
const Label = new Stylesheet({
"@define": {
"Label": Stylesheet.root()
}
});
const Button = new Stylesheet({
"@define": {
"Button": Stylesheet.root(),
"MyLabel": Stylesheet.component(Label)
},
".MyLabel": { color: "red" },
".MyLabel:hover": { color: "green" },
".Button:hover .MyLabel": { color: "blue" }
});
Possible markup (JSX)
<button className="Button">
<Label/>
<button>
CSS output:
.Button◼Button .Label◼Label { color: red; }
.Button◼Button .Label◼Label:hover { color: green; }
.Button◼Button:hover .Label◼Label { color: blue; }
Intended to be passed to a component of the scoped type. when used in a selector it's output will have stronger specificity then a component class.
const Label = new Stylesheet(...);
new Stylesheet({
"@define": {
"Button": Stylesheet.root(),
"Label": Stylesheet.scoped(Label)
},
".Label": { color: "red" },
".Label:hover": { color: "green" },
".Button:hover > .Label": { color: "blue" }
});
Possible markup (JSX)
<button className="Button">
<Label/>
<Label className="Label"/>
<button>
CSS output:
.Button◼Button .Button◼Label { color: red; }
.Button◼Button .Button◼Label:hover { color: green; }
.Button◼Button:hover > .Button◼Label { color: blue; }
When using typed classes, it is possible to style the inner parts with the :: operator.
This ability can be chained for as many level as needed.
const Label = new Stylesheet({
"@define": {
"Label": Stylesheet.root()
},
".Text": { color: "red" } // label inner text class
});
const Button = new Stylesheet({
"@define": {
"Button": Stylesheet.root(),
"Label": Stylesheet.scoped(Label),
}
});
new Stylesheet({
"@define": {
"MyForm": Stylesheet.root(),
"Button": Stylesheet.component(Button),
"SubmitButton": Stylesheet.scoped(Button)
},
".Button::Label::Text": { color: "green" },
".SubmitButton::Label::Text": { color: "blue" }
});
CSS output:
.Label◼Text { color: red; }
.MyForm◼MyForm .Button◼Button .Button◼Label .Label◼Text { color: green; }
.MyForm◼MyForm .MyForm◼SubmitButton.Button◼Button .Button◼Label .Label◼Text { color: blue; }
Custom states are mapping between an attribute selector to a name. Any class definition can accept states that can be used to build selectors.
Root with custom states:
new Stylesheet({
"@define": {
"Button": Stylesheet.root('div', {
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" }
Requires integration with stylesheet instance to generate state attributes in the default format of data-${namespace}-${stateName}.
Root with auto states:
const sheet = new Stylesheet({
"@define": {
"Button": Stylesheet.root('div', ["mouseHover", "disabled"])
},
".Button": { color: "red" },
".Button:mouseHover": { color: "green" }
});
// possible react use case
function Button(){
return <button {...sheet.cssStates({mouseHover: true, disabled: false})}></button>
}
CSS output:
.Button◼Button { color: red; }
.Button◼Button[data-Button-mouseHover] { color: "green" }
When a stylesheet definition root extends another stylesheet*, it automatically extends states.
const Button = new Stylesheet({
"@define": {
"Button": Stylesheet.root('button', ["hover", "focus"])
}
});
new Stylesheet({
"@define": {
"ToggleButton": Stylesheet.root(Button, ["toggled", "focus"])
},
".ToggleButton:active": { color: "black" },
".ToggleButton:hover": { color: "red" },
".ToggleButton:toggled": { color: "green" },
".ToggleButton:focus": { color: "blue" }
});
CSS output:
/* active state is not overrided and default to native */
.ToggleButton◼ToggleButton:active { color: black; }
/* hover state is not overrided and namespaced by the Button */
.ToggleButton◼ToggleButton[data-Button-hover] { color: red; }
/* toggled state is new and namespaced by the ToggleButton */
.ToggleButton◼ToggleButton[data-ToggleButton-toggled] { color: green; }
/* focus state is overriden and namespaced by the ToggleButton */
.ToggleButton◼ToggleButton[data-ToggleButton-focus] { color: blue; }
Selector definition must start with a defined part and then it can target internal parts, states or other defined parts.
new Stylesheet({
"@define": {
"App": Stylesheet.root()
},
".Button": {
color: "red"
},
".Container .Button": {
color: "blue"
},
".Container[data-active] > .Button:hover": {
color: "green"
}
});
Possible markup (JSX)
<div className="App">
<div data-active className="Container">
<button className="Button"></button>
</div>
<div className="Container">
<button className="Button"></button>
</div>
<button className="Button"></button>
<div>
CSS output:
...
.App◼Button { color: red; }
.App◼Container .App◼Button { color: blue; }
.App◼Container[data-active] > .App◼Button:hover { color: green; }
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; }
Mixins are recipes to apply complex rule sets and selectors with simplified interface.
using mixins is very straight forward:
new Stylesheet({
"@define": {
"Container": Stylesheet.root()
},
".Container": {
...GridMixin({ itemsPerRow: 3, gutter: '50px' })
}
})
CSS output:
.Container◼Container { /* rules for grid container */ }
.Container◼Container > * { /* rules for grid item */ }
This is the definition of GridMixin it shows all the available apis
interface Options {
itemsPerRow: number;
gutterX: string;
gutterY: string;
}
function mixinGridCell(options: Options){...}
const GridMixin = defineMixin('GridMixin', (ctx, options: Options) => {
ctx.insertRules({
'display': 'flex',
'flexWrap': 'wrap',
'justifyContent': 'space-around',
'alignContent': 'space-around',
});
ctx.insertSelector(' > *', mixinGridCell(options));
});
/*************************************/
/*button.ns.css*/
.Button {
/* define root class*/
-ns-root: true;
/* auto state and mapped state*/
-ns-states: floating, loading("[data-Button-loading]");
/* grab color from global theme */
color: theme(BGColor);
}
.Icon {}
/*************************************/
/*************************************/
/*toggle-button.ns.css*/
.ToggleButton {
-ns-root: true;
/* imports the root type of button */
-ns-type: './button';
/* extend states */
-ns-states: toggled, focus;
/*mixin multiple mixins*/
-ns-mixin: mixinA("Yoo!!"), mixinB("Yoo!!");
/* mixin short hand */
-ns-mixin-mixinC: 1, 2, 3;
/* mixin long hand */
-ns-mixin-mixinC-param: 1;
color: green;
}
/* target inner part*/
.ToggleButton::Icon {
color: gold;
}
/* native states */
.ToggleButton:hover { color: black }
/* state from button */
.ToggleButton:loading { color: black }
.ToggleButton:floating { color: red }
/* state from toggle button */
.ToggleButton:toggled { color: green }
.ToggleButton:focus { color: blue }
/*************************************/
/*************************************/
/*gallery.ns.css*/
.Gallery {
-ns-root: true;
}
.GalleryToggleButton {
/* used on inner class */
-ns-type: './toggle-button';
}
/*************************************/
component class to subtree class?scope class to class class?::content to reference root if not usedFAQs
CSS for Components
We found that nscss demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.