stilr - npm Package Compare versions

Comparing version 0.2.0 to 0.2.2

CHANGELOG.md

@@ -13,2 +13,8 @@ # Changelog
 
+## 0.2.2
+  * Bug Fix
+    * Media queries are now inserted after parent entry. Thanks @MicheleBertoli
+      !
+    * New entries in existing media queries don't overwrite existing entries
+
 ## 0.2.0
@@ -15,0 +21,0 @@

dist/index.js

@@ -28,2 +28,4 @@ 'use strict';
 
+      if (!stylesheet.has(className)) stylesheet.set(className, style);
+
       if (pseudos.length) {
@@ -34,3 +36,3 @@ pseudos.map(function (selector) {
 
-          if (stylesheet.has(pseudoClassName)) return;
+          if (stylesheet.has(pseudoClassName)) return false;
 
@@ -45,5 +47,5 @@ stylesheet.set(pseudoClassName, styles[key][selector]);
           if (stylesheet.has(selector)) {
-            if (stylesheet.get(selector).has(className)) return;
+            if (stylesheet.get(selector).has(className)) return false;
 
-            stylesheet.get(selector).set(className, styles[key][selector]);
+            return stylesheet.get(selector).set(className, styles[key][selector]);
           }
@@ -55,4 +57,2 @@
 
-      if (!stylesheet.has(className)) stylesheet.set(className, style);
-
       acc[key] = className;
@@ -59,0 +59,0 @@ return acc;

lib/index.js

@@ -19,2 +19,5 @@ import {
 
+      if ( !stylesheet.has( className ) )
+        stylesheet.set( className, style );
+
       if ( pseudos.length ) {
@@ -25,3 +28,3 @@ pseudos.map( selector => {
 
-          if ( stylesheet.has( pseudoClassName ) ) return;
+          if ( stylesheet.has( pseudoClassName ) ) return false;
 
@@ -36,5 +39,5 @@ stylesheet.set( pseudoClassName, styles[key][selector] );
           if ( stylesheet.has( selector ) ) {
-            if ( stylesheet.get( selector ).has( className )) return;
+            if ( stylesheet.get( selector ).has( className )) return false;
 
-            stylesheet.get( selector ).set( className, styles[key][selector] );
+            return stylesheet.get( selector ).set( className, styles[key][selector] );
           }
@@ -49,5 +52,2 @@
 
-      if ( !stylesheet.has( className ) )
-        stylesheet.set( className, style );
-
       acc[ key ] = className;
@@ -54,0 +54,0 @@ return acc;

package.json

 {
   "name": "stilr",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Usefull with React",
@@ -5,0 +5,0 @@ "main": "dist",

README.md

@@ -10,2 +10,3 @@ # Stilr [![Build Status](https://travis-ci.org/chriskjaer/stilr.svg)](https://travis-ci.org/chriskjaer/stilr) [![npm version](https://badge.fury.io/js/stilr.svg)](http://badge.fury.io/js/stilr)
 - Allows nested media queries
+- No namespacing / Class name collisions.
 
@@ -229,5 +230,32 @@ ...oh, and did I mention you get duplicate style elimination for free?
 
+## Extracting your styles.
+
+#### Server
+If you do serverside rendering, you should be able to extract your styles right after you load your app.
+
+```javascript
+import React from 'react';
+import StyleSheet from 'stilr';
+import App from '../your-app.js';
+
+const css = StyleSheet.render();
+const html = React.renderToStaticMarkup(<App />);
+
+// Extract css to a file or insert it in a file at the top of your html document
+```
+Apply autoprefixer here, or other preprocess goodness here. 
+If you're really fancy, you only do the required autoprefixes based on the user agent.
+
+#### Makefile
+```Makefile
+extract-styles:
+	@node -p "var s = require('stilr'); require('./your-app.js'); s.render()" >> ./build/styles.css
+```
+
+#### Webpack
+Not implemented yet. Contributions are welcome!
+
 ## TODO:
 - [ ] Removed React as a dependency
-- [ ] Flesh out documentation
 - [ ] More examples
+

No alert changes

Improved metrics

Total package byte prevSize

20891

increased by5.11%

Number of lines in readme file

260

increased by12.07%

No dependency changes