stilr - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

CHANGELOG.md

@@ -13,2 +13,7 @@ # Changelog
 
+## 0.3.0
+  * Internal
+    * Media queries are now inserted after normal CSS
+    * Null and empty classes are now removed from rendered CSS
+
 ## 0.2.2
@@ -15,0 +20,0 @@ * Bug Fix

dist/index.js

@@ -28,2 +28,7 @@ 'use strict';
 
+      if (className === undefined) {
+        acc[key] = '';
+        return acc;
+      }
+
       if (!stylesheet.has(className)) stylesheet.set(className, style);
@@ -66,2 +71,3 @@
     var css = '';
+    var mediaQueries = '';
 
@@ -81,5 +87,9 @@ var _iteratorNormalCompletion = true;
 
-        if (styles instanceof Map) {
+        var isMap = styles instanceof Map;
+
+        if (!isMap && (0, _utils.isEmpty)(styles)) continue;
+
+        if (isMap) {
           var mediaQueryCSS = this.render(options, stylesheet.get(className));
-          css += options.pretty ? '' + className + ' {\n' + mediaQueryCSS + '}\n' : '' + className + '{' + mediaQueryCSS + '}';
+          mediaQueries += options.pretty ? '' + className + ' {\n' + mediaQueryCSS + '}\n' : '' + className + '{' + mediaQueryCSS + '}';
           continue;
@@ -106,3 +116,3 @@ }
 
-    return css;
+    return css + mediaQueries;
   },
@@ -109,0 +119,0 @@

dist/utils.js

@@ -12,2 +12,3 @@ 'use strict';
 exports.createMarkup = createMarkup;
+exports.isEmpty = isEmpty;
 exports.seperateStyles = seperateStyles;
@@ -62,3 +63,4 @@
 function createClassName(obj) {
-  return '_' + extendedToString(createHash(stringifyObject(obj)), 62);
+  var hash = extendedToString(createHash(stringifyObject(obj)), 62);
+  return hash ? '_' + hash : undefined;
 }
@@ -70,2 +72,6 @@
 
+function isEmpty(obj) {
+  return !Object.keys(obj).length;
+}
+
 function isPseudo(key, val) {
@@ -72,0 +78,0 @@ return key.charAt(0) === ':' && typeof val === 'object';

lib/index.js

@@ -5,3 +5,4 @@ import {
   createMarkup,
-  seperateStyles
+  seperateStyles,
+  isEmpty
 } from './utils';
@@ -20,2 +21,7 @@
 
+      if (className === undefined) {
+        acc[ key ] = '';
+        return acc;
+      }
+
       if ( !stylesheet.has( className ) )
@@ -59,9 +65,13 @@ stylesheet.set( className, style );
     let css = '';
+    let mediaQueries = '';
 
     for ( let entry of stylesheetEntries ) {
       const [ className, styles ] = entry;
+      const isMap = styles instanceof Map;
 
-      if (styles instanceof Map) {
+      if (!isMap && isEmpty(styles)) continue;
+
+      if (isMap) {
         const mediaQueryCSS = this.render(options, stylesheet.get( className ) );
-        css += options.pretty
+        mediaQueries += options.pretty
           ? `${ className } {\n${ mediaQueryCSS }}\n`
@@ -78,3 +88,3 @@ : `${ className }{${ mediaQueryCSS }}`;
 
-    return css;
+    return css + mediaQueries;
   },
@@ -81,0 +91,0 @@

lib/utils.js

@@ -51,3 +51,6 @@ import { createMarkupForStyles } from 'react/lib/CSSPropertyOperations';
 export function createClassName(obj) {
-  return '_' + extendedToString( createHash( stringifyObject(obj) ), 62);
+  const hash = extendedToString( createHash( stringifyObject(obj) ), 62);
+  return hash
+    ? '_' + hash
+    : undefined;
 }
@@ -59,3 +62,7 @@
 
+export function isEmpty(obj) {
+  return !Object.keys(obj).length;
+}
 
+
 function isPseudo(key, val) {
@@ -62,0 +69,0 @@ return key.charAt(0) === ':' && typeof val === 'object';

package.json

 {
   "name": "stilr",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "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

@@ -247,14 +247,57 @@ # 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)
 
-#### Makefile
+### Development
+When working with Stilr in development, the preferred way to extract styles would be the following way, just before you initialize your app.
+
+```javascript
+import App from '../app';
+import React from 'react';
+import StyleSheet from 'stilr';
+
+let stylesheet = document.createElement('style');
+stylesheet.textContent = StyleSheet.render();
+document.head.appendChild(stylesheet);
+
+React.render(<App />, document.getElementById('root'));
+```
+
+### Development React Hot Loader
+If you're using [React Hot Loader](https://github.com/gaearon/react-hot-loader). Use the following approach in development to get hot loading styles.
+
+```javascript
+import React from 'react';
+import StyleSheet from 'stilr';
+
+class App extends React.Component {
+   render() {
+     if (process.env !== 'production') {
+       // Make sure you have a style element with the ID: 'stylesheet' in your html.
+       document.getElementById('stylesheet').textContent = StyleSheet.render()
+     }
+     
+     return (
+        ...snip...
+     );
+   }
+}
+```
+
+#### Production
+
+##### Makefile
+Add this as a build step in your makefile.
 ```Makefile
 extract-styles:
-	@node -p "var s = require('stilr'); require('./your-app.js'); s.render()" >> ./build/styles.css
+	@node -p "require('babel/register')({ignore: false}); var s = require('stilr'); require('./your-app.js'); s.render()" > ./bundle.css
 ```
 
-#### Webpack
+The following snippet can also be executed anywhere to extract the styles.
+Remember to replace `./your-app.js` with the entry file of your app.
+`node -p "require('babel/register')({ignore: false}); var s = require('stilr'); require('./your-app.js')`
+
+##### Webpack
 Not implemented yet. Contributions are welcome!
 
 ## TODO:
-- [ ] Removed React as a dependency
+- [ ] Remove React as a dependency
 - [ ] More examples
 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23116

increased by10.65%

Lines of code

329

increased by8.58%

Number of lines in readme file

303

increased by16.54%

No dependency changes