nscss - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

package.json

 {
   "name": "nscss",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "CSS for Components",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -7,2 +7,9 @@ # NSCSS
 
+### 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?
@@ -13,14 +20,12 @@ * Static styles by source order
 
-* Scoping for component
-* Root Definition
-* Custom states
-* Override with scoped selector
-* Override by root
-* Override public scoped parts
+* 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
-* Great Feedback
+* Easy debugging - readable CSS Class Names, fail-fast evaluation time errors
+* No Runtime Errors 😜
 
-#### Native css support
+### Native css support
 
@@ -68,12 +73,10 @@ * @media query
 
-### Scoping for components
+### Scoping
 
 
-namespace is prefixed to each class
+Namespace is prefixed to each class name in the stylesheet
 
 Code:
 ```js
-const { NSSheet } from "nscss";
-
-new NSSheet({
+new Stylesheet({
     "@namespace": "App",
@@ -90,4 +93,6 @@ "redButton": { color: "red" },
 
-### Root Definition
+### Root definition with custom states
 
+The main className that should be used as for the component root node. 
+
 * Defines component custom states.
@@ -97,15 +102,17 @@ * Uses as namespace when namespace is not provided.
 
-Declare a class as root: 
+Stylesheet with root:
 ```js
-const { NSSheet } from "nscss";
-
-new NSSheet({
+new Stylesheet({
     "@namespace": "Button",
     "@define": {
-        "Button": NSSheet.root()
+        "root": Stylesheet.root() // Declare a class as root
     },
-    "Button": { color: "red" }
+    "root": { color: "red" }
 });
-
 ```
+CSS output:
+```css
+/* result CSS class name: namespace + root name */
+.Button◼root { color: red; }
+```
 
@@ -118,8 +125,5 @@ #### Custom states
 ```js
-const { NSSheet } from "nscss";
-
-new NSSheet({
-    "@namespace": "Button",
+new Stylesheet({
     "@define": {
-        "Button": NSSheet.root({
+        "Button": Stylesheet.root({
             mouseHover: "[data-state-hover]",
@@ -129,6 +133,11 @@ disabled: "[data-state-disabled]"
     },
-    "Button": { color: "red" }
+    "Button": { color: "red" },
+    "Button:mouseHover": { color: "green" }
 });
-
 ```
+CSS output:
+```css
+.Button◼Button { color: red; }
+.Button◼Button[data-state-hover]: { color: "green" }
+```
 
@@ -139,16 +148,44 @@ #### Cascade parent
 
+### Customization (override)
 
-Code:
+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**:
 ```js
-const { NSSheet } from "nscss";
+//this can be imported from the label stylesheet file.
+const Label = new Stylesheet(...);
 
-const Label = new NSSheet(...);
+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:
+```css
+.Button◼Button .Label◼Label { color: red; }
+.Button◼Button .Label◼Label:hover { color: green; }
+.Button◼Button:hover > .Label◼Label { color: blue; }
+```
 
-new NSSheet({
-    "@namespace": "Button",
+
+Customize with local class that will be place on any of the components **scoped**
+
+```js
+//this can be imported from the label stylesheet file.
+const Label = new Stylesheet(...);
+
+new Stylesheet({
     "@define": {
-        "Button": NSSheet.root(),
-        "Label": NSSheet.component(Label)
+        "Button": Stylesheet.root(),
+        "Label": Stylesheet.scoped(Label) // use it as a scoped
     },
-    "Label": { color: "red" }
+    "Label": { color: "red" },
+    "Label:hover": { color: "green" },
+    "Button:hover > Label": { color: "blue" }
 });
@@ -158,6 +195,103 @@ ```
 ```css
-/* App root   Label root */
-.Button◼Button .Label◼Text { color: red; }
+.Button◼Button .Button◼Label { color: red; }
+.Button◼Button .Button◼Label:hover { color: green; }
+.Button◼Button:hover .Button◼Label { color: blue; }
 ```
 
-### Overrides
+
+
+#### 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:
+```js
+//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:
+```css
+.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.
+
+```js
+new Stylesheet({
+    "@define": {
+        "Button": Stylesheet.root()       
+    },
+    "container": { ... },
+    "btn": { ... },
+    "container btn": {
+        color: "red"
+    },
+    "container[data-active] > label:hover": {
+        color: "red"
+    }
+});
+```
+Possible markup
+```html
+<div class="Button">
+    <div data-active class="container">
+        <button class="btn"></button>
+    </div>
+    <button class="btn"></button>
+<div>
+```
+
+CSS output:
+```css
+...
+/* 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
+
+```js
+new Stylesheet({
+    "@define": {
+        "Button": Stylesheet.root()       
+    },
+    "Button": { 
+        color: "{{primaryColor}}" // this will be injected
+    }
+});
+
+//at the app entry
+Stylesheet.attach({
+    mycolor: "red"
+});
+```
+CSS output:
+```css
+.Button◼Button { primaryColor: red; }
+```

No alert changes

Improved metrics

Total package byte prevSize

6854

increased by124.94%

Number of lines in readme file

289

increased by87.66%

No dependency changes