nscss - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

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

README.md

@@ -13,6 +13,7 @@ # NSCSS
 * Scoping for component
+* Root Definition
+* Custom states
 * Override with scoped selector
-* Override by component 
+* Override by root
 * Override public scoped parts
-* Custom states
 * Theme - Global Theme / Per StyleSheet Theme (TODO)
@@ -28,3 +29,3 @@ * Framework Agnostic
 * Animations (TODO)
-* Pseudo Classes / native states
+* Pseudo Elements / Pseudo Classes / Native States
 * Child & Attribute selectors
@@ -35,11 +36,11 @@
 * As Template Literals?
-* Typescript
+* TypeScript
 
 ### React integration
+* Component integration
 * SSR
-* Component definition
 
 ### Plugins
-* Vendor Prefixing hook
-* Extract CSS File
+* Hooks to allow style transformations (vendor prefixing, etc.)
+* Extract plain CSS
 * IDE Plugins
@@ -51,26 +52,109 @@
 
-Stylesheet defines semantic scope parts: 
+### Namespace
 
-Single deceleration:
+Talk about namespace... 
 
+### Stylesheet
+
+Stylesheet has namespace and defines semantic scope parts: 
+Single declaration:
+
 * root - ?
-* class - ?
+* class - ? can ne auto detected
 * component - ?
-* scoped class - ?
+* scoped - ?
+* selector - composed from defined parts
 
-Composition:
+## Usage
 
-* selector - composed from defined parts
+### Scoping for components
 
 
+namespace is prefixed to each class
 
-## Usage
+Code:
+```js
+const { NSSheet } from "nscss";
 
+new NSSheet({
+    "@namespace": "App",
+    "redButton": { color: "red" },
+    "blueButton": { color: "blue" }
+});
+```
+CSS output:
+```css
+.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: 
 ```js
-{NSCSS}
-{
-    "component" : StyleShh
-}
+const { NSSheet } from "nscss";
+
+new NSSheet({
+    "@namespace": "App",
+    "@define": {
+        "Button": NSSheet.root()
+    },
+    "Button": { color: "red" }
+});
+
+//Note: there is not change to the css output
 ```
 
+#### Custom states
 
+Custom states in nscss are just mapping between an attribute selector to a name.
+
+Root with custom states:
+```js
+const { NSSheet } from "nscss";
+
+new NSSheet({
+    "@namespace": "App",
+    "@define": {
+        "Button": NSSheet.root({
+            mouseHover: "[data-state-hover]",
+            disabled: "[data-state-disabled]"
+        })
+    },
+    "Button": { color: "red" }
+});
+
+//Note: there is not change to the css output
+```
+
+#### Cascade parent
+
+Only affects the output css when used with **component** and **scoped** classes.
+
+
+Code:
+```js
+const { NSSheet } from "nscss";
+
+const Label = new NSSheet(...);
+
+new NSSheet({
+    "@namespace": "App",
+    "@define": {
+        "Button": NSSheet.root(),
+        "Label": NSSheet.component(Label)
+    },
+    "Label": { color: "red" }
+});
+```
+CSS output:
+```css
+/* App root   Label root */
+.App◼Button .Label◼Text { color: red; }
+```
+
+### Overrides

No alert changes

Improved metrics

Total package byte prevSize

3129

increased by144.26%

Number of lines in readme file

156

increased by113.7%

No dependency changes