stilr - npm Package Compare versions

Comparing version 0.3.0 to 1.0.0

CHANGELOG.md

@@ -13,4 +13,12 @@ # Changelog
 
+## 1.0.0
+__Yeah, 1.0.0!__
+The Api have been solidified, It's used in production, there's good test
+coverage, let's :shipit: !
+
+  * __Feature__
+    * It's now possible to use pseudo selectors inside media queries.
+
 ## 0.3.0
-  * Internal
+  * __Internal__
     * Media queries are now inserted after normal CSS
@@ -20,3 +28,3 @@ * Null and empty classes are now removed from rendered CSS
 ## 0.2.2
-  * Bug Fix
+  * __Bug Fix__
     * Media queries are now inserted after parent entry. Thanks @MicheleBertoli
@@ -23,0 +31,0 @@ !

dist/index.js

@@ -9,2 +9,4 @@ 'use strict';
 
+function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr); }
+
 var _utils = require('./utils');
@@ -38,4 +40,4 @@
         pseudos.map(function (selector) {
+          delete style[selector];
           var pseudoClassName = '' + className + '' + selector;
-          delete style[selector]; // Remove selector. We don't need that in the stylesheet.
 
@@ -50,10 +52,41 @@ if (stylesheet.has(pseudoClassName)) return false;
         mediaQueries.map(function (selector) {
-          delete style[selector]; // Remove selector. We don't need that in the stylesheet.
-          if (stylesheet.has(selector)) {
-            if (stylesheet.get(selector).has(className)) return false;
+          var mqSelector = selector;
+          var mqStyles = styles[key][selector];
+          var mqPseudos = [];
+          var mqStylesheet = undefined;
 
-            return stylesheet.get(selector).set(className, styles[key][selector]);
+          if (Array.isArray(selector)) {
+            var _selector = _toArray(selector);
+
+            var main = _selector[0];
+            var _styles = _selector[1];
+
+            var rest = _selector.slice(2);
+
+            mqSelector = main;
+            mqPseudos = rest;
+            mqStyles = _styles;
           }
 
-          stylesheet.set(selector, new Map()).get(selector).set(className, styles[key][selector]);
+          delete style[mqSelector];
+
+          if (stylesheet.has(mqSelector)) {
+            mqStylesheet = stylesheet.get(mqSelector);
+
+            if (mqStylesheet.has(className)) return false;
+          }
+
+          mqStylesheet = mqStylesheet || stylesheet.set(mqSelector, new Map()).get(mqSelector);
+
+          mqStylesheet.set(className, mqStyles);
+
+          if (mqPseudos.length) {
+            mqPseudos.map(function (pseudo) {
+              delete mqStyles[pseudo];
+              var pseudoClassName = '' + className + '' + pseudo;
+
+              if (mqStylesheet.has(pseudoClassName)) return false;
+              mqStylesheet.set(pseudoClassName, styles[key][mqSelector][pseudo]);
+            });
+          }
         });
@@ -60,0 +93,0 @@ }

dist/utils.js

@@ -13,2 +13,4 @@ 'use strict';
 exports.isEmpty = isEmpty;
+exports.isPseudo = isPseudo;
+exports.isMediaQuery = isMediaQuery;
 exports.seperateStyles = seperateStyles;
@@ -75,29 +77,50 @@
 
-function isPseudo(key, val) {
-  return key.charAt(0) === ':' && typeof val === 'object';
+function isPseudo(_ref) {
+  var style = _ref.style;
+  var rule = _ref.rule;
+
+  return rule.charAt(0) === ':' && typeof style === 'object';
 }
 
-function isMediaQuery(key, val) {
-  return key.charAt(0) === '@' && typeof val === 'object';
+function isMediaQuery(_ref2) {
+  var style = _ref2.style;
+  var rule = _ref2.rule;
+
+  return rule.charAt(0) === '@' && typeof style === 'object';
 }
 
+function handle(type, acc, _ref3) {
+  var style = _ref3.style;
+  var rule = _ref3.rule;
+  var pseudos = arguments[3] === undefined ? [] : arguments[3];
+
+  var hash = createClassName(sortObject(style));
+  var rules = pseudos.length ? [[].concat(rule, style, pseudos)] : rule;
+
+  acc[type] = acc[type].concat(rules);
+  acc.style[rule] = hash;
+  return acc;
+}
+
 function seperateStyles(styles) {
-  return Object.keys(styles).reduce(function (acc, entry) {
-    var style = styles[entry];
+  return Object.keys(styles).reduce(function (acc, rule) {
+    var content = {
+      style: styles[rule],
+      rule: rule
+    };
 
-    if (isPseudo(entry, style)) {
-      var hash = createClassName(sortObject(style));
-      acc.pseudos.push(entry);
-      acc.style[entry] = hash;
-      return acc;
+    if (isPseudo(content)) {
+      return handle('pseudos', acc, content);
     }
 
-    if (isMediaQuery(entry, style)) {
-      var hash = createClassName(sortObject(style));
-      acc.mediaQueries.push(entry);
-      acc.style[entry] = hash;
-      return acc;
+    if (isMediaQuery(content)) {
+      var _seperateStyles = seperateStyles(content.style);
+
+      var style = _seperateStyles.style;
+      var pseudos = _seperateStyles.pseudos;
+
+      return handle('mediaQueries', acc, { rule: rule, style: style }, pseudos);
     }
 
-    acc.style[entry] = style;
+    acc.style[rule] = content.style;
     return acc;
@@ -104,0 +127,0 @@ }, {

lib/index.js

@@ -6,3 +6,3 @@ import {
   seperateStyles,
-  isEmpty
+  isEmpty,
 } from './utils';
@@ -31,4 +31,4 @@
         pseudos.map( selector => {
+          delete style[selector];
           const pseudoClassName = `${className}${selector}`;
-          delete style[selector]; // Remove selector. We don't need that in the stylesheet.
 
@@ -43,13 +43,37 @@ if ( stylesheet.has( pseudoClassName ) ) return false;
         mediaQueries.map( selector => {
-          delete style[selector]; // Remove selector. We don't need that in the stylesheet.
-          if ( stylesheet.has( selector ) ) {
-            if ( stylesheet.get( selector ).has( className )) return false;
+          let mqSelector = selector;
+          let mqStyles = styles[key][selector];
+          let mqPseudos = [];
+          let mqStylesheet;
 
-            return stylesheet.get( selector ).set( className, styles[key][selector] );
+          if ( Array.isArray(selector) ) {
+            let [ main, styles, ...rest ] = selector;
+            mqSelector = main;
+            mqPseudos = rest;
+            mqStyles = styles;
           }
 
-          stylesheet
-            .set( selector, new Map() )
-            .get( selector )
-            .set( className, styles[key][selector] );
+          delete style[mqSelector];
+
+
+          if ( stylesheet.has( mqSelector ) ) {
+            mqStylesheet = stylesheet.get( mqSelector );
+
+            if ( mqStylesheet.has( className )) return false;
+          }
+
+          mqStylesheet = mqStylesheet
+            || stylesheet.set( mqSelector, new Map() ).get( mqSelector );
+
+          mqStylesheet.set( className, mqStyles );
+
+          if ( mqPseudos.length ) {
+            mqPseudos.map( pseudo => {
+              delete mqStyles[pseudo];
+              const pseudoClassName = `${className}${pseudo}`;
+
+              if ( mqStylesheet.has( pseudoClassName ) ) return false;
+              mqStylesheet.set( pseudoClassName, styles[key][mqSelector][pseudo] );
+            });
+          }
         });
@@ -56,0 +80,0 @@ }

lib/utils.js

@@ -65,30 +65,39 @@ import { createMarkupForStyles } from 'react/lib/CSSPropertyOperations';
 
+export function isPseudo({ style, rule }) {
+  return rule.charAt(0) === ':' && typeof style === 'object';
+}
 
-function isPseudo(key, val) {
-  return key.charAt(0) === ':' && typeof val === 'object';
+export function isMediaQuery({ style, rule }) {
+  return rule.charAt(0) === '@' && typeof style === 'object';
 }
 
-function isMediaQuery(key, val) {
-  return key.charAt(0) === '@' && typeof val === 'object';
+function handle(type, acc, { style, rule }, pseudos = []) {
+  const hash = createClassName( sortObject( style ));
+  const rules = pseudos.length
+    ? [[].concat(rule, style, pseudos)]
+    : rule;
+
+  acc[type] = acc[type].concat(rules);
+  acc.style[rule] = hash;
+  return acc;
 }
 
+
 export function seperateStyles (styles) {
-  return Object.keys(styles).reduce( (acc, entry) => {
-    const style = styles[entry];
+  return Object.keys(styles).reduce( (acc, rule) => {
+    const content = {
+      style: styles[rule],
+      rule
+    };
 
-    if ( isPseudo( entry, style ) ) {
-      let hash = createClassName( sortObject( style ));
-      acc.pseudos.push(entry);
-      acc.style[entry] = hash;
-      return acc;
+    if ( isPseudo( content ) ) {
+      return handle('pseudos', acc, content );
     }
 
-    if ( isMediaQuery( entry, style ) ) {
-      let hash = createClassName( sortObject( style ));
-      acc.mediaQueries.push( entry );
-      acc.style[entry] = hash;
-      return acc;
+    if ( isMediaQuery( content ) ) {
+      const { style, pseudos } = seperateStyles( content.style );
+      return handle('mediaQueries', acc, { rule, style }, pseudos );
     }
 
-    acc.style[entry] = style;
+    acc.style[rule] = content.style;
     return acc;
@@ -95,0 +104,0 @@ }, {

package.json

 {
   "name": "stilr",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Usefull with React",
@@ -35,6 +35,8 @@ "main": "dist",
     "css": "^2.2.0",
+    "istanbul": "^0.3.14",
     "mocha": "^2.2.4",
-    "mocha-clean": "^0.4.0"
+    "mocha-clean": "^0.4.0",
+    "semver": "^4.3.6"
   },
   "repository": "chriskjaer/stilr"
 }

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26307

increased by13.8%

Lines of code

392

increased by19.15%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

8

increased by33.33%

No dependency changes