stylecow-plugin-flex - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

index.js

 module.exports = function (stylecow) {
 	require('./src/ms')(stylecow);
+	require('./src/webkit-old')(stylecow);
 	require('./src/webkit')(stylecow);
-	require('./src/webkit-old')(stylecow);
 };

package.json

 {
 	"name": "stylecow-plugin-flex",
 	"description": "Stylecow plugin to add vendor prefixes and create fallback in browsers supporting the old flexbox syntax",
-	"version": "3.0.0",
+	"version": "3.0.1",
 	"author": "Oscar Otero <[e-mail]>",
@@ -12,4 +12,10 @@ "homepage": "https://github.com/stylecow/stylecow-plugin-flex",
 	},
+	"scripts": {
+		"test": "node tests/index.js"
+	},
+	"devDependencies": {
+		"stylecow": "*"
+	},
 	"main": "index.js",
 	"license": "MIT"
 }

src/webkit-old.js

@@ -5,4 +5,3 @@ module.exports = function (stylecow) {
 		'align-items': '-webkit-box-align',
-		'flex-grow': '-webkit-box-flex',
-		'flex': '-webkit-box-flex',
+		'flex-grow': '-webkit-box-flex'
 	};
@@ -14,3 +13,2 @@
 		'space-between': 'justify',
-		'space-around': 'justify'
 	};
@@ -55,31 +53,44 @@
 			fn: function (declaration) {
-				var orient, direction;
+				applyFlexDirection(declaration.join(' '), declaration);
+			}
+		});
 
-				switch (declaration.join(' ')) {
-					case 'row':
-						orient = 'horizontal';
-						break;
 
-					case 'row-reverse':
-						orient = 'horizontal';
-						direction = 'reverse';
-						break;
+		//flex-flow: <flex-direction> || <flex-wrap>
+		stylecow.addTask({
+			filter: {
+				type: 'Declaration',
+				name: 'flex-flow'
+			},
+			fn: function (declaration) {
+				var value = declaration[0];
 
-					case 'column':
-						orient = 'vertical';
-						break;
+				if (value[0]) { //flex-direction
+					applyFlexDirection(value[0].toString(), declaration);
+				}
 
-					case 'column-reverse':
-						orient = 'vertical';
-						direction = 'reverse';
-						break;
-
-					default:
-						return false;
+				if (value[1]) { //flex-wrap
+					applyFlexWrap(value[1].toString(), declaration);
 				}
+			}
+		});
 
-				declaration.before(stylecow.Declaration.createFromString('-webkit-box-orient: ' + orient));
 
-				if (direction) {
-					declaration.before(stylecow.Declaration.createFromString('-webkit-box-direction: ' + direction));
+		//flex: <flex-grow> <flex-shrink>? || <flex-basis>
+		stylecow.addTask({
+			filter: {
+				type: 'Declaration',
+				name: 'flex'
+			},
+			fn: function (declaration) {
+				var value = declaration[0];
+
+				if (value[0]) { //flex-grow
+					var val = value[0].toString();
+
+					if (val === 'none') {
+						val = '0.0';
+					}
+
+					declaration.before(stylecow.Declaration.createFromString('-webkit-box-flex: ' + value[0]));
 				}
@@ -90,15 +101,23 @@ }
 
-		//flex-direction
+		//flex-wrap
 		stylecow.addTask({
 			filter: {
 				type: 'Declaration',
+				name: 'flex-wrap'
+			},
+			fn: function (declaration) {
+				applyFlexWrap(declaration.join(' '), declaration);
+			}
+		});
+
+
+		//order
+		stylecow.addTask({
+			filter: {
+				type: 'Declaration',
 				name: 'order'
 			},
 			fn: function (declaration) {
-				var value = parseInt(declaration.join(' '));
+				var value = parseInt(declaration.join(' ')) + 1;
 
-				if (value === 0) {
-					value = 1;
-				}
-
 				declaration.before(stylecow.Declaration.createFromString('-webkit-box-ordinal-group: ' + value));
@@ -129,2 +148,41 @@ }
 	});
+
+	function applyFlexWrap(value, declaration) {
+		switch (value) {
+			case 'wrap':
+				declaration.before(stylecow.Declaration.createFromString('-webkit-box-lines: multiple'));
+				break;
+
+			case 'nowrap':
+				declaration.before(stylecow.Declaration.createFromString('-webkit-box-lines: single'));
+				break;
+
+			case 'wrap-reverse':
+				declaration.before(stylecow.Declaration.createFromString('-webkit-box-lines: multiple'));
+				declaration.before(stylecow.Declaration.createFromString('-webkit-box-direction: reverse'));
+				break;
+		}
+	}
+
+	function applyFlexDirection(value, declaration) {
+		switch (value) {
+			case 'row':
+				declaration.before(stylecow.Declaration.createFromString('-webkit-box-orient: horizontal'));
+				break;
+
+			case 'row-reverse':
+				declaration.before(stylecow.Declaration.createFromString('-webkit-box-orient: horizontal'));
+				declaration.before(stylecow.Declaration.createFromString('-webkit-box-direction: reverse'));
+				break;
+
+			case 'column':
+				declaration.before(stylecow.Declaration.createFromString('-webkit-box-orient: vertical'));
+				break;
+
+			case 'column-reverse':
+				declaration.before(stylecow.Declaration.createFromString('-webkit-box-orient: vertical'));
+				declaration.before(stylecow.Declaration.createFromString('-webkit-box-direction: reverse'));
+				break;
+		}
+	}
 };

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11090

increased by33.25%

Number of package files

11

increased by37.5%

Lines of code

311

increased by38.22%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

1

increased byInfinity%

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes