Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
bemjson-to-scss
Advanced tools
bemjson-to-scss - npm Package Compare versions
Comparing version 0.1.0 to 0.1.1
| (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.BEMJSON = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ | ||
| var _NL_ = '\n\n'; | ||
| var _SP_ = ' '; | ||
| function BEMJSON (options) { | ||
@@ -9,2 +6,3 @@ options = options || {}; | ||
| options.compact = options.compact || false; | ||
| options.tab = options.tab || ' '; | ||
| options.modificatorSeparator = options.modificatorSeparator || '--'; | ||
@@ -25,2 +23,52 @@ | ||
| function collect(array, result) { | ||
| array.forEach(function(el) { | ||
| if(Array.isArray(el.content)) { | ||
| var content = Array.from(el.content); | ||
| el.content = null; | ||
| el._unified = true; | ||
| result.push(el); | ||
| collect(content, result); | ||
| } else { | ||
| el.content = null; | ||
| el._unified = true; | ||
| result.push(el); | ||
| } | ||
| }); | ||
| } | ||
| function toObject(entity) { | ||
| return (typeof entity === 'object') ? entity : {}; | ||
| } | ||
| function mergeEqual(array) { | ||
| var found = {}; | ||
| array.forEach(function(item, index) { | ||
| if (found[item.elem]) { | ||
| found[item.elem].mods = Object.assign({}, toObject(found[item.elem].mods), toObject(item.mods)); | ||
| array[index] = null; | ||
| } else { | ||
| found[item.elem] = item; | ||
| } | ||
| }); | ||
| while (array.indexOf(null) >= 0) { | ||
| array.splice(array.indexOf(null), 1); | ||
| } | ||
| return array; | ||
| } | ||
| BEMJSON.prototype.unifyJSON = function prototype(bemjson) { | ||
| if (Array.isArray(bemjson.content)) { | ||
| var collected = []; | ||
| collect(bemjson.content, collected); | ||
| bemjson.content = mergeEqual(collected); | ||
| } | ||
| return bemjson; | ||
| }; | ||
| BEMJSON.prototype.toCSS = function toCSS(bemjson, ctxBlock) { | ||
@@ -31,3 +79,7 @@ | ||
| if (typeof bemjson === 'string') { | ||
| bemjson = eval('(' + bemjson + ')'); | ||
| try { | ||
| bemjson = eval('(' + bemjson + ')'); | ||
| } catch (err) { | ||
| return ''; | ||
| } | ||
| } | ||
@@ -39,2 +91,6 @@ | ||
| if (!bemjson._unified) { | ||
| bemjson = this.unifyJSON(bemjson); | ||
| } | ||
| if (Array.isArray(bemjson)) { | ||
@@ -48,4 +104,5 @@ return this.concatinateArray(bemjson, ctxBlock); | ||
| var NL = this._options.compact ? '' : _NL_; | ||
| var SP = this._options.compact ? '' : _SP_; | ||
| var NL = this._options.compact ? '' : '\n\n'; | ||
| var SP = this._options.compact ? '' : ' '; | ||
| var TB = this._options.compact ? '' : this._options.tab; | ||
@@ -62,5 +119,3 @@ if (ctxBlock) { | ||
| if (bemjson.mods.hasOwnProperty(key)) { | ||
| if (bemjson.mods[key] == true ) { | ||
| res += `.${className}${this._options.modificatorSeparator}${key}${SP}{${NL}}${NL}`; | ||
| } | ||
| res += `.${className}${this._options.modificatorSeparator}${key}${SP}{${NL}}${NL}`; | ||
| } | ||
@@ -73,4 +128,4 @@ } | ||
| className = bemjson.elem ? '&__' + bemjson.elem : '.' + ctxBlock; | ||
| var space = bemjson.elem ? `${SP}${SP}` : ``; | ||
| var modSpace = space + `${SP}${SP}`; | ||
| var space = bemjson.elem ? `${TB}${TB}` : ``; | ||
| var modSpace = space + `${TB}${TB}`; | ||
@@ -83,5 +138,3 @@ if (className) { | ||
| if (bemjson.mods.hasOwnProperty(key)) { | ||
| if (bemjson.mods[key] == true ) { | ||
| mods += `${modSpace}&${this._options.modificatorSeparator}${key}${SP}{${NL}${modSpace}}${NL}`; | ||
| } | ||
| mods += `${modSpace}&${this._options.modificatorSeparator}${key}${SP}{${NL}${modSpace}}${NL}`; | ||
| } | ||
@@ -92,6 +145,4 @@ } | ||
| var contentCSS = this.toCSS(bemjson.content, ctxBlock); | ||
| return bemjson.elem ? `${space}${className}${SP}{${NL}${mods}${space}}${NL}${contentCSS}` : `${className}${SP}{${NL}${mods}${contentCSS}`; | ||
| var res = bemjson.elem ? `${space}${className}${SP}{${NL}${mods}${space}}${NL}${contentCSS}` : `${className}${SP}{${NL}${mods}${contentCSS}`; | ||
| return res; | ||
| } | ||
@@ -98,0 +149,0 @@ } |
85
index.js
@@ -1,4 +0,1 @@ | ||
| var _NL_ = '\n\n'; | ||
| var _SP_ = ' '; | ||
| function BEMJSON (options) { | ||
@@ -8,2 +5,3 @@ options = options || {}; | ||
| options.compact = options.compact || false; | ||
| options.tab = options.tab || ' '; | ||
| options.modificatorSeparator = options.modificatorSeparator || '--'; | ||
@@ -24,2 +22,52 @@ | ||
| function collect(array, result) { | ||
| array.forEach(function(el) { | ||
| if(Array.isArray(el.content)) { | ||
| var content = Array.from(el.content); | ||
| el.content = null; | ||
| el._unified = true; | ||
| result.push(el); | ||
| collect(content, result); | ||
| } else { | ||
| el.content = null; | ||
| el._unified = true; | ||
| result.push(el); | ||
| } | ||
| }); | ||
| } | ||
| function toObject(entity) { | ||
| return (typeof entity === 'object') ? entity : {}; | ||
| } | ||
| function mergeEqual(array) { | ||
| var found = {}; | ||
| array.forEach(function(item, index) { | ||
| if (found[item.elem]) { | ||
| found[item.elem].mods = Object.assign({}, toObject(found[item.elem].mods), toObject(item.mods)); | ||
| array[index] = null; | ||
| } else { | ||
| found[item.elem] = item; | ||
| } | ||
| }); | ||
| while (array.indexOf(null) >= 0) { | ||
| array.splice(array.indexOf(null), 1); | ||
| } | ||
| return array; | ||
| } | ||
| BEMJSON.prototype.unifyJSON = function prototype(bemjson) { | ||
| if (Array.isArray(bemjson.content)) { | ||
| var collected = []; | ||
| collect(bemjson.content, collected); | ||
| bemjson.content = mergeEqual(collected); | ||
| } | ||
| return bemjson; | ||
| }; | ||
| BEMJSON.prototype.toCSS = function toCSS(bemjson, ctxBlock) { | ||
@@ -30,3 +78,7 @@ | ||
| if (typeof bemjson === 'string') { | ||
| bemjson = eval('(' + bemjson + ')'); | ||
| try { | ||
| bemjson = eval('(' + bemjson + ')'); | ||
| } catch (err) { | ||
| return ''; | ||
| } | ||
| } | ||
@@ -38,2 +90,6 @@ | ||
| if (!bemjson._unified) { | ||
| bemjson = this.unifyJSON(bemjson); | ||
| } | ||
| if (Array.isArray(bemjson)) { | ||
@@ -47,4 +103,5 @@ return this.concatinateArray(bemjson, ctxBlock); | ||
| var NL = this._options.compact ? '' : _NL_; | ||
| var SP = this._options.compact ? '' : _SP_; | ||
| var NL = this._options.compact ? '' : '\n\n'; | ||
| var SP = this._options.compact ? '' : ' '; | ||
| var TB = this._options.compact ? '' : this._options.tab; | ||
@@ -61,5 +118,3 @@ if (ctxBlock) { | ||
| if (bemjson.mods.hasOwnProperty(key)) { | ||
| if (bemjson.mods[key] == true ) { | ||
| res += `.${className}${this._options.modificatorSeparator}${key}${SP}{${NL}}${NL}`; | ||
| } | ||
| res += `.${className}${this._options.modificatorSeparator}${key}${SP}{${NL}}${NL}`; | ||
| } | ||
@@ -72,4 +127,4 @@ } | ||
| className = bemjson.elem ? '&__' + bemjson.elem : '.' + ctxBlock; | ||
| var space = bemjson.elem ? `${SP}${SP}` : ``; | ||
| var modSpace = space + `${SP}${SP}`; | ||
| var space = bemjson.elem ? `${TB}${TB}` : ``; | ||
| var modSpace = space + `${TB}${TB}`; | ||
@@ -82,5 +137,3 @@ if (className) { | ||
| if (bemjson.mods.hasOwnProperty(key)) { | ||
| if (bemjson.mods[key] == true ) { | ||
| mods += `${modSpace}&${this._options.modificatorSeparator}${key}${SP}{${NL}${modSpace}}${NL}`; | ||
| } | ||
| mods += `${modSpace}&${this._options.modificatorSeparator}${key}${SP}{${NL}${modSpace}}${NL}`; | ||
| } | ||
@@ -91,6 +144,4 @@ } | ||
| var contentCSS = this.toCSS(bemjson.content, ctxBlock); | ||
| return bemjson.elem ? `${space}${className}${SP}{${NL}${mods}${space}}${NL}${contentCSS}` : `${className}${SP}{${NL}${mods}${contentCSS}`; | ||
| var res = bemjson.elem ? `${space}${className}${SP}{${NL}${mods}${space}}${NL}${contentCSS}` : `${className}${SP}{${NL}${mods}${contentCSS}`; | ||
| return res; | ||
| } | ||
@@ -97,0 +148,0 @@ } |
| { | ||
| "name": "bemjson-to-scss", | ||
| "version": "0.1.0", | ||
| "version": "0.1.1", | ||
| "description": "BEMJSON to CSS/SCSS serializer", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -24,2 +24,3 @@ # bemjson-to-scss | ||
| * `compact` _Boolean_ - removes all the whitespaces if `true` (default: `false`). | ||
| * `tab` _String_ - you can choose tabs for inner classes e.g ` ` or `\t` (default: ` `, two spaces). | ||
| * `modificatorSeparator` _String_ - Suffix to use for mods instead of default `--` one. (E.g. `{modificatorSeparator: '_'}`). | ||
@@ -31,6 +32,2 @@ | ||
| ### BEMJSON.toSCSS(bemjson) | ||
| Returns serialized SCSS string. | ||
| ## License | ||
@@ -37,0 +34,0 @@ |
@@ -44,4 +44,33 @@ /* global describe, it, beforeEach */ | ||
| }); | ||
| }) | ||
| }); | ||
| describe('css/mods', function() { | ||
| var bemjson = new (require('..'))({ | ||
| compact: true, | ||
| compileTo: 'css' | ||
| }); | ||
| it('should set correct modification classes to elements', function() { | ||
| bemjson.toCSS({ | ||
| block: 'button', | ||
| mods: { | ||
| main: true, | ||
| hidden: false, | ||
| }, | ||
| content: [ | ||
| { elem: 'control', | ||
| content: [{ | ||
| elem: 'default', | ||
| mods: { | ||
| active: true, | ||
| selected: true | ||
| } | ||
| }]} | ||
| ] | ||
| }).should.equal( | ||
| '.button{}.button--main{}.button--hidden{}.button__control{}.button__default{}.button__default--active{}.button__default--selected{}' | ||
| ); | ||
| }); | ||
| }); | ||
| describe('scss/elem', function() { | ||
@@ -59,2 +88,3 @@ var bemjson = new (require('..'))({ | ||
| elem: 'default', | ||
| content: 'COPY', | ||
| mods: { | ||
@@ -70,32 +100,30 @@ active: true, | ||
| }); | ||
| }) | ||
| }); | ||
| describe('css/mods', function() { | ||
| describe('scss/dublicates', function() { | ||
| var bemjson = new (require('..'))({ | ||
| compact: true, | ||
| compileTo: 'css' | ||
| compact: true | ||
| }); | ||
| it('should set correct modification classes to elements', function() { | ||
| it('shouldn serialize each class only once and merge their mods', function() { | ||
| bemjson.toCSS({ | ||
| block: 'button', | ||
| mods: { | ||
| main: true, | ||
| hidden: false, | ||
| }, | ||
| content: [ | ||
| { elem: 'control', | ||
| content: [{ | ||
| elem: 'default', | ||
| mods: { | ||
| active: true, | ||
| selected: true | ||
| } | ||
| }]} | ||
| ] | ||
| }).should.equal( | ||
| '.button{}.button--main{}.button__control{}.button__default{}.button__default--active{}.button__default--selected{}' | ||
| block: 'button', | ||
| content: [ | ||
| { elem: 'default', | ||
| mods: { | ||
| fixed: true | ||
| }, | ||
| content: [{ | ||
| elem: 'default', | ||
| mods: { | ||
| active: true, | ||
| selected: true | ||
| } | ||
| }]} | ||
| ] | ||
| }).should.equal( | ||
| '.button{&__default{&--fixed{}&--active{}&--selected{}}' | ||
| ); | ||
| }); | ||
| }) | ||
| }); | ||
| }); |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by21.59%
19632
- Lines of code
- increased by45.9%
356
Worsened metrics
- Number of lines in readme file
- decreased by-7.69%
36
No dependency changes