stylecow-plugin-flex - npm Package Compare versions

Comparing version 5.0.0 to 6.0.0

index.js

@@ -1,4 +0,6 @@
-module.exports = function (stylecow) {
-	require('./src/ms')(stylecow);
-	require('./src/webkit')(stylecow);
+"use strict";
+
+module.exports = function (tasks) {
+    tasks.use(require('./src/ms'));
+    tasks.use(require('./src/webkit'));
 };

package.json

 {
   "name": "stylecow-plugin-flex",
   "description": "Stylecow plugin to add vendor prefixes and create fallback in browsers supporting the old flexbox syntax",
-  "version": "5.0.0",
+  "version": "6.0.0",
+  "engines": {
+    "node": ">=4.0"
+  },
   "author": "Oscar Otero <[e-mail]>",
@@ -16,4 +19,4 @@ "homepage": "https://github.com/stylecow/stylecow-plugin-flex",
   "devDependencies": {
-    "mocha": "^2.2.5",
-    "stylecow-core": "^1.0.1"
+    "mocha": "^2.3.2",
+    "stylecow-core": "^2.0.0"
   },
@@ -20,0 +23,0 @@ "main": "index.js",

src/ms.js

@@ -1,84 +0,147 @@
-module.exports = function (stylecow) {
-	var names = {
-		'flex-grow': '-ms-flex-positive',
-		'flex-shrink': '-ms-flex-negative',
-		'order': '-ms-flex-order',
-		'justify-content': '-ms-flex-pack',
-		'align-items': '-ms-flex-align',
-		'align-self': '-ms-flex-item-align',
-		'align-content': '-ms-flex-line-pack',
-		'flex-wrap': '-ms-flex-wrap',
-	};
+"use strict";
 
-	var values = {
-		'flex-start': 'start',
-		'flex-end': 'end',
-		'nowrap': 'none'
-	};
+module.exports = function (tasks) {
+    var names = {
+        'flex-grow': '-ms-flex-positive',
+        'flex-shrink': '-ms-flex-negative',
+        'order': '-ms-flex-order',
+        'justify-content': '-ms-flex-pack',
+        'align-items': '-ms-flex-align',
+        'align-self': '-ms-flex-item-align',
+        'align-content': '-ms-flex-line-pack',
+        'flex-wrap': '-ms-flex-wrap',
+    };
 
-	stylecow.forBrowsersLowerThan({
-		explorer: 11.0
-	}, function () {
+    var values = {
+        'flex-start': 'start',
+        'flex-end': 'end',
+        'nowrap': 'none'
+    };
 
-		// from  display: flex/inline-flex
-		// to    display: -ms-flexbox/-ms-inline-flexbox
-		stylecow.addTask({
-			filter: {
-				type: 'Declaration',
-				string: [
-					'display: flex;',
-					'display: inline-flex;'
-				]
-			},
-			fn: function (declaration) {
-				declaration
-					.cloneBefore()
-					.getAll({
-						type: 'Keyword',
-						name: ['flex', 'inline-flex']
-					})
-					.forEach(function (keyword) {
-						keyword.name += 'box';
-						keyword.vendor = 'ms';
-					});
-			}
-		});
+    var support = {
+        explorer: 11.0
+    };
 
-		//name/value replacements
-		stylecow.addTask({
-			filter: {
-				type: 'Declaration',
-				name: Object.keys(names),
-				vendor: false
-			},
-			fn: function (declaration) {
-				declaration
-					.cloneBefore()
-					.setName(names[declaration.name])
-					.getAll({
-						type: 'Keyword',
-						name: Object.keys(values)
-					})
-					.forEach(function (keyword) {
-						keyword.name = values[keyword.name];
-					});
-			}
-		});
+    // from  display: flex/inline-flex
+    // to    display: -ms-flexbox/-ms-inline-flexbox
+    tasks.addTask({
+        forBrowsersLowerThan: support,
+        filter: {
+            type: 'Declaration',
+            string: [
+                'display: flex;',
+                'display: inline-flex;'
+            ]
+        },
+        fn: function (declaration) {
+            declaration
+                .cloneBefore()
+                .getAll({
+                    type: 'Keyword',
+                    name: ['flex', 'inline-flex']
+                })
+                .forEach(function (keyword) {
+                    keyword.name += 'box';
+                    keyword.vendor = 'ms';
+                });
+        }
+    });
 
-		//Other vendor prefixes
-		stylecow.addTask({
-			filter: {
-				type: 'Declaration',
-				name: /^flex/,
-				vendor: false
-			},
-			fn: function (declaration) {
-				if (!names[declaration.name]) {
-					declaration
-						.cloneBefore()
-						.setVendor('ms');
-				}
-			}
-		});
-	});
+    //name/value replacements
+    tasks.addTask({
+        forBrowsersLowerThan: support,
+        filter: {
+            type: 'Declaration',
+            name: Object.keys(names),
+            vendor: false
+        },
+        fn: function (declaration) {
+            declaration
+                .cloneBefore()
+                .setName(names[declaration.name])
+                .getAll({
+                    type: 'Keyword',
+                    name: Object.keys(values)
+                })
+                .forEach(keyword => keyword.name = values[keyword.name]);
+        }
+    });
+
+    //Other vendor prefixes
+    tasks.addTask({
+        forBrowsersLowerThan: support,
+        filter: {
+            type: 'Declaration',
+            name: [
+                'flex-direction',
+                'flex-flow',
+                'flex-basis',
+            ],
+            vendor: false
+        },
+        fn: function (declaration) {
+            declaration
+                .cloneBefore()
+                .setVendor('ms');
+        }
+    });
+
+    //Shorthand flex
+    //https://github.com/philipwalton/flexbugs/blob/master/README.md#6-the-default-flex-value-has-changed
+    tasks.addTask({
+        forBrowsersLowerThan: {
+            explorer: 12
+        },
+        filter: {
+            type: 'Declaration',
+            name: 'flex',
+            vendor: false
+        },
+        fn: function (declaration) {
+            if (declaration.has({
+                type: 'Keyword',
+                name: ['auto', 'initial']
+            })) {
+                return;
+            }
+
+            var value = declaration[0];
+
+            if (!value[1]) {
+                value[0].codeBefore('1', 'Number');
+            }
+
+            if (!value[2]) {
+                value[1].codeAfter('0%', 'Unit');
+            } else if (value[2].type === 'Number') {
+                value[2].replaceWithCode(value[2] + '%', 'Unit');
+            }
+        }
+    });
+
+    //Shorthand flex
+    //https://github.com/philipwalton/flexbugs/blob/master/README.md#6-the-default-flex-value-has-changed
+    tasks.addTask({
+        forBrowsersLowerThan: support,
+        filter: {
+            type: 'Declaration',
+            name: 'flex',
+            vendor: false
+        },
+        fn: function (declaration) {
+            switch (declaration.toString()) {
+                case 'flex: 1;':
+                    return declaration.codeBefore('-ms-flex: 1 1 0%', 'Declaration');
+
+                case 'flex: auto;':
+                    return declaration.codeBefore('-ms-flex: 1 1 auto', 'Declaration');
+
+                case 'flex: initial;':
+                    return declaration.codeBefore('-ms-flex: 0 1 auto', 'Declaration');
+
+                default:
+                    return declaration.cloneBefore().setVendor('ms');
+            }
+        }
+    });
 };

src/webkit.js

@@ -1,184 +0,190 @@
-module.exports = function (stylecow) {
-	var names = {
-		'justify-content': '-webkit-box-pack',
-		'align-items': '-webkit-box-align',
-		'flex-grow': '-webkit-box-flex'
-	};
+"use strict";
 
-	var values = {
-		'flex-start': 'start',
-		'flex-end': 'end',
-		'space-between': 'justify',
-	};
+module.exports = function (tasks) {
+    var names = {
+        'justify-content': '-webkit-box-pack',
+        'align-items': '-webkit-box-align',
+        'flex-grow': '-webkit-box-flex'
+    };
 
-	stylecow.forBrowsersLowerThan({
-		chrome: 21.0,
-		safari: 6.1,
-		android: 4.4,
-		ios: 7.0
-	}, function () {
+    var values = {
+        'flex-start': 'start',
+        'flex-end': 'end',
+        'space-between': 'justify',
+    };
 
-		//vendor prefixes in display: flex/inline-flex
-		stylecow.addTask({
-			filter: {
-				type: 'Declaration',
-				string: [
-					'display: flex;',
-					'display: inline-flex;'
-				]
-			},
-			fn: function (declaration) {
-				declaration
-					.cloneBefore()
-					.getAll({
-						type: 'Keyword',
-						name: ['flex', 'inline-flex']
-					})
-					.forEach(function (keyword) {
-						keyword.name = keyword.name.replace('flex', 'box');
-						keyword.vendor = 'webkit';
-					});
-			}
-		});
+    var support = {
+        chrome: 21.0,
+        safari: 6.1,
+        android: 4.4,
+        ios: 7.0
+    };
 
+    //vendor prefixes in display: flex/inline-flex
+    tasks.addTask({
+        forBrowsersLowerThan: support,
+        filter: {
+            type: 'Declaration',
+            string: [
+                'display: flex;',
+                'display: inline-flex;'
+            ]
+        },
+        fn: function (declaration) {
+            declaration
+                .cloneBefore()
+                .getAll({
+                    type: 'Keyword',
+                    name: ['flex', 'inline-flex']
+                })
+                .forEach(function (keyword) {
+                    keyword.name = keyword.name.replace('flex', 'box');
+                    keyword.vendor = 'webkit';
+                });
+        }
+    });
 
-		//flex-direction
-		stylecow.addTask({
-			filter: {
-				type: 'Declaration',
-				name: 'flex-direction'
-			},
-			fn: function (declaration) {
-				applyFlexDirection(declaration.join(' '), declaration);
-			}
-		});
 
+    //flex-direction
+    tasks.addTask({
+        forBrowsersLowerThan: support,
+        filter: {
+            type: 'Declaration',
+            name: 'flex-direction'
+        },
+        fn: function (declaration) {
+            applyFlexDirection(declaration.join(' '), declaration);
+        }
+    });
 
-		//flex-flow: <flex-direction> || <flex-wrap>
-		stylecow.addTask({
-			filter: {
-				type: 'Declaration',
-				name: 'flex-flow'
-			},
-			fn: function (declaration) {
-				var value = declaration.get('Value');
 
-				if (value[0]) { //flex-direction
-					applyFlexDirection(value[0].toString(), declaration);
-				}
+    //flex-flow: <flex-direction> || <flex-wrap>
+    tasks.addTask({
+        forBrowsersLowerThan: support,
+        filter: {
+            type: 'Declaration',
+            name: 'flex-flow'
+        },
+        fn: function (declaration) {
+            var value = declaration.get('Value');
 
-				if (value[1]) { //flex-wrap
-					applyFlexWrap(value[1].toString(), declaration);
-				}
-			}
-		});
+            if (value[0]) { //flex-direction
+                applyFlexDirection(value[0].toString(), declaration);
+            }
 
+            if (value[1]) { //flex-wrap
+                applyFlexWrap(value[1].toString(), declaration);
+            }
+        }
+    });
 
-		//flex: <flex-grow> <flex-shrink>? || <flex-basis>
-		stylecow.addTask({
-			filter: {
-				type: 'Declaration',
-				name: 'flex'
-			},
-			fn: function (declaration) {
-				var value = declaration.get('Value');
 
-				if (value[0]) { //flex-grow
-					var val = value[0].toString();
+    //flex: <flex-grow> <flex-shrink>? || <flex-basis>
+    tasks.addTask({
+        forBrowsersLowerThan: support,
+        filter: {
+            type: 'Declaration',
+            name: 'flex'
+        },
+        fn: function (declaration) {
+            var value = declaration.get('Value');
 
-					if (val === 'none') {
-						val = '0.0';
-					}
+            if (value[0]) { //flex-grow
+                var val = value[0].toString();
 
-					declaration.before(stylecow.parse('-webkit-box-flex: ' + value[0], 'Declaration'));
-				}
-			}
-		});
+                if (val === 'none') {
+                    val = '0.0';
+                }
 
+                declaration.codeBefore('-webkit-box-flex: ' + val, 'Declaration');
+            }
+        }
+    });
 
-		//flex-wrap
-		stylecow.addTask({
-			filter: {
-				type: 'Declaration',
-				name: 'flex-wrap'
-			},
-			fn: function (declaration) {
-				applyFlexWrap(declaration.join(' '), declaration);
-			}
-		});
 
+    //flex-wrap
+    tasks.addTask({
+        forBrowsersLowerThan: support,
+        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(' ')) + 1;
 
-				declaration.before(stylecow.parse('-webkit-box-ordinal-group: ' + value, 'Declaration'));
-			}
-		});
+    //order
+    tasks.addTask({
+        forBrowsersLowerThan: support,
+        filter: {
+            type: 'Declaration',
+            name: 'order'
+        },
+        fn: function (declaration) {
+            declaration.codeBefore('-webkit-box-ordinal-group: ' + (parseInt(declaration.join(' ')) + 1), 'Declaration');
+        }
+    });
 
 
-		//name/value replacements
-		stylecow.addTask({
-			filter: {
-				type: 'Declaration',
-				name: Object.keys(names)
-			},
-			fn: function (declaration) {
-				declaration
-					.cloneBefore()
-					.setName(names[declaration.name])
-					.getAll({
-						type: 'Keyword',
-						name: Object.keys(values)
-					})
-					.forEach(function (keyword) {
-						keyword.name = values[keyword.name];
-					});
-			}
-		});
-	});
+    //name/value replacements
+    tasks.addTask({
+        forBrowsersLowerThan: support,
+        filter: {
+            type: 'Declaration',
+            name: Object.keys(names)
+        },
+        fn: function (declaration) {
+            declaration
+                .cloneBefore()
+                .setName(names[declaration.name])
+                .getAll({
+                    type: 'Keyword',
+                    name: Object.keys(values)
+                })
+                .forEach(function (keyword) {
+                    keyword.name = values[keyword.name];
+                });
+        }
+    });
 
-	function applyFlexWrap(value, declaration) {
-		switch (value) {
-			case 'wrap':
-				declaration.before(stylecow.parse('-webkit-box-lines: multiple', 'Declaration'));
-				break;
+    function applyFlexWrap(value, declaration) {
+        switch (value) {
+            case 'wrap':
+                declaration.codeBefore('-webkit-box-lines: multiple', 'Declaration');
+                break;
 
-			case 'nowrap':
-				declaration.before(stylecow.parse('-webkit-box-lines: single', 'Declaration'));
-				break;
+            case 'nowrap':
+                declaration.codeBefore('-webkit-box-lines: single', 'Declaration');
+                break;
 
-			case 'wrap-reverse':
-				declaration.before(stylecow.parse('-webkit-box-lines: multiple', 'Declaration'));
-				declaration.before(stylecow.parse('-webkit-box-direction: reverse', 'Declaration'));
-				break;
-		}
-	}
+            case 'wrap-reverse':
+                declaration.codeBefore('-webkit-box-lines: multiple', 'Declaration');
+                declaration.codeBefore('-webkit-box-direction: reverse', 'Declaration');
+                break;
+        }
+    }
 
-	function applyFlexDirection(value, declaration) {
-		switch (value) {
-			case 'row':
-				declaration.before(stylecow.parse('-webkit-box-orient: horizontal', 'Declaration'));
-				break;
+    function applyFlexDirection(value, declaration) {
+        switch (value) {
+            case 'row':
+                declaration.codeBefore('-webkit-box-orient: horizontal', 'Declaration');
+                break;
 
-			case 'row-reverse':
-				declaration.before(stylecow.parse('-webkit-box-orient: horizontal', 'Declaration'));
-				declaration.before(stylecow.parse('-webkit-box-direction: reverse', 'Declaration'));
-				break;
+            case 'row-reverse':
+                declaration.codeBefore('-webkit-box-orient: horizontal', 'Declaration');
+                declaration.codeBefore('-webkit-box-direction: reverse', 'Declaration');
+                break;
 
-			case 'column':
-				declaration.before(stylecow.parse('-webkit-box-orient: vertical', 'Declaration'));
-				break;
+            case 'column':
+                declaration.codeBefore('-webkit-box-orient: vertical', 'Declaration');
+                break;
 
-			case 'column-reverse':
-				declaration.before(stylecow.parse('-webkit-box-orient: vertical', 'Declaration'));
-				declaration.before(stylecow.parse('-webkit-box-direction: reverse', 'Declaration'));
-				break;
-		}
-	}
+            case 'column-reverse':
+                declaration.codeBefore('-webkit-box-orient: vertical', 'Declaration');
+                declaration.codeBefore('-webkit-box-direction: reverse', 'Declaration');
+                break;
+        }
+    }
 };

tests/cases.js

@@ -1,29 +0,20 @@
-var assert = require('assert');
 var stylecow = require('stylecow-core');
 
-stylecow
-	.loadNpmModule(__dirname + '/../index')
-	.minSupport({
-		"explorer": 0,
-		"firefox": 0,
-		"chrome": 0,
-		"safari": 0,
-		"opera": 0,
-		"android": 0,
-		"ios": 0
-	})
-	.testCases(__dirname + '/cases', function (test) {
-		stylecow.run(test.css);
+var tests = new stylecow.Test(__dirname + '/cases');
+var tasks = (new stylecow.Tasks()).use(require('../index'));
 
-		describe('cases/' + test.name, function() {
-			it('should match output.css', function() {
-				//test.write('output.css', test.css.toString());
-				assert.equal(test.css.toString(), test.read('output.css'));
-			});
+tests.run(function (test) {
+    tasks.run(test.css);
 
-			it('should match ast.json', function() {
-				//test.writeJson('ast.json', test.css.toAst());
-				assert.deepEqual(test.css.toAst(), test.readJson('ast.json'));
-			});
-		});
-	});
+    describe('cases/' + test.name, function() {
+        it('should match output.css', function() {
+            //test.writeString()
+            test.assertString();
+        });
+
+        it('should match ast.json', function() {
+            //test.writeAst()
+            test.assertAst();
+        });
+    });
+});

tests/cases/flex/ast.json

 {
-  "class": "Root",
+  "type": "Root",
   "children": [
     {
-      "class": "Rule",
+      "type": "Rule",
       "children": [
         {
-          "class": "Selectors",
+          "type": "Selectors",
           "children": [
             {
-              "class": "Selector",
+              "type": "Selector",
               "children": [
                 {
-                  "class": "TypeSelector",
-                  "name": "div"
+                  "type": "ClassSelector",
+                  "name": "foo"
                 }
@@ -22,16 +22,29 @@ ]
         {
-          "class": "Block",
+          "type": "Block",
           "children": [
             {
-              "class": "Declaration",
-              "name": "display",
-              "vendor": null,
+              "type": "Declaration",
+              "name": "flex",
+              "vendor": "ms",
               "children": [
                 {
-                  "class": "Value",
+                  "type": "Value",
                   "children": [
                     {
-                      "class": "Keyword",
-                      "name": "flexbox",
-                      "vendor": "ms"
+                      "type": "Number",
+                      "name": 1
+                    },
+                    {
+                      "type": "Number",
+                      "name": 1
+                    },
+                    {
+                      "type": "Unit",
+                      "name": "%",
+                      "children": [
+                        {
+                          "type": "Number",
+                          "name": 0
+                        }
+                      ]
                     }
@@ -43,13 +56,12 @@ ]
             {
-              "class": "Declaration",
-              "name": "display",
-              "vendor": null,
+              "type": "Declaration",
+              "name": "box-flex",
+              "vendor": "webkit",
               "children": [
                 {
-                  "class": "Value",
+                  "type": "Value",
                   "children": [
                     {
-                      "class": "Keyword",
-                      "name": "box",
-                      "vendor": "webkit"
+                      "type": "Number",
+                      "name": 1
                     }
@@ -61,13 +73,26 @@ ]
             {
-              "class": "Declaration",
-              "name": "display",
+              "type": "Declaration",
+              "name": "flex",
               "vendor": null,
               "children": [
                 {
-                  "class": "Value",
+                  "type": "Value",
                   "children": [
                     {
-                      "class": "Keyword",
-                      "name": "flex",
-                      "vendor": null
+                      "type": "Number",
+                      "name": 1
+                    },
+                    {
+                      "type": "Number",
+                      "name": 1
+                    },
+                    {
+                      "type": "Unit",
+                      "name": "%",
+                      "children": [
+                        {
+                          "type": "Number",
+                          "name": 0
+                        }
+                      ]
                     }
@@ -77,32 +102,52 @@ ]
               ]
-            },
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "Rule",
+      "children": [
+        {
+          "type": "Selectors",
+          "children": [
             {
-              "class": "Declaration",
-              "name": "-ms-flex-align",
-              "vendor": null,
+              "type": "Selector",
               "children": [
                 {
-                  "class": "Value",
-                  "children": [
-                    {
-                      "class": "Keyword",
-                      "name": "start",
-                      "vendor": null
-                    }
-                  ]
+                  "type": "ClassSelector",
+                  "name": "foo"
                 }
               ]
-            },
+            }
+          ]
+        },
+        {
+          "type": "Block",
+          "children": [
             {
-              "class": "Declaration",
-              "name": "-webkit-box-align",
-              "vendor": null,
+              "type": "Declaration",
+              "name": "flex",
+              "vendor": "ms",
               "children": [
                 {
-                  "class": "Value",
+                  "type": "Value",
                   "children": [
                     {
-                      "class": "Keyword",
-                      "name": "start",
-                      "vendor": null
+                      "type": "Number",
+                      "name": 1
+                    },
+                    {
+                      "type": "Number",
+                      "name": 1
+                    },
+                    {
+                      "type": "Unit",
+                      "name": "%",
+                      "children": [
+                        {
+                          "type": "Number",
+                          "name": 0
+                        }
+                      ]
                     }
@@ -114,13 +159,12 @@ ]
             {
-              "class": "Declaration",
-              "name": "align-items",
-              "vendor": null,
+              "type": "Declaration",
+              "name": "box-flex",
+              "vendor": "webkit",
               "children": [
                 {
-                  "class": "Value",
+                  "type": "Value",
                   "children": [
                     {
-                      "class": "Keyword",
-                      "name": "flex-start",
-                      "vendor": null
+                      "type": "Number",
+                      "name": 1
                     }
@@ -132,18 +176,26 @@ ]
             {
-              "class": "Declaration",
-              "name": "flex-flow",
-              "vendor": "ms",
+              "type": "Declaration",
+              "name": "flex",
+              "vendor": null,
               "children": [
                 {
-                  "class": "Value",
+                  "type": "Value",
                   "children": [
                     {
-                      "class": "Keyword",
-                      "name": "column",
-                      "vendor": null
+                      "type": "Number",
+                      "name": 1
                     },
                     {
-                      "class": "Keyword",
-                      "name": "wrap",
-                      "vendor": null
+                      "type": "Number",
+                      "name": 1
+                    },
+                    {
+                      "type": "Unit",
+                      "name": "%",
+                      "children": [
+                        {
+                          "type": "Number",
+                          "name": 0
+                        }
+                      ]
                     }
@@ -153,15 +205,52 @@ ]
               ]
-            },
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "Rule",
+      "children": [
+        {
+          "type": "Selectors",
+          "children": [
             {
-              "class": "Declaration",
-              "name": "box-orient",
-              "vendor": "webkit",
+              "type": "Selector",
               "children": [
                 {
-                  "class": "Value",
+                  "type": "ClassSelector",
+                  "name": "foo"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "Block",
+          "children": [
+            {
+              "type": "Declaration",
+              "name": "flex",
+              "vendor": "ms",
+              "children": [
+                {
+                  "type": "Value",
                   "children": [
                     {
-                      "class": "Keyword",
-                      "name": "vertical",
-                      "vendor": null
+                      "type": "Number",
+                      "name": 1
+                    },
+                    {
+                      "type": "Number",
+                      "name": 1
+                    },
+                    {
+                      "type": "Unit",
+                      "name": "%",
+                      "children": [
+                        {
+                          "type": "Number",
+                          "name": 0
+                        }
+                      ]
                     }
@@ -173,13 +262,12 @@ ]
             {
-              "class": "Declaration",
-              "name": "box-lines",
+              "type": "Declaration",
+              "name": "box-flex",
               "vendor": "webkit",
               "children": [
                 {
-                  "class": "Value",
+                  "type": "Value",
                   "children": [
                     {
-                      "class": "Keyword",
-                      "name": "multiple",
-                      "vendor": null
+                      "type": "Number",
+                      "name": 1
                     }
@@ -191,18 +279,26 @@ ]
             {
-              "class": "Declaration",
-              "name": "flex-flow",
+              "type": "Declaration",
+              "name": "flex",
               "vendor": null,
               "children": [
                 {
-                  "class": "Value",
+                  "type": "Value",
                   "children": [
                     {
-                      "class": "Keyword",
-                      "name": "column",
-                      "vendor": null
+                      "type": "Number",
+                      "name": 1
                     },
                     {
-                      "class": "Keyword",
-                      "name": "wrap",
-                      "vendor": null
+                      "type": "Number",
+                      "name": 1
+                    },
+                    {
+                      "type": "Unit",
+                      "name": "%",
+                      "children": [
+                        {
+                          "type": "Number",
+                          "name": 0
+                        }
+                      ]
                     }
@@ -218,21 +314,13 @@ ]
     {
-      "class": "Rule",
+      "type": "Rule",
       "children": [
         {
-          "class": "Selectors",
+          "type": "Selectors",
           "children": [
             {
-              "class": "Selector",
+              "type": "Selector",
               "children": [
                 {
-                  "class": "TypeSelector",
-                  "name": "div"
-                },
-                {
-                  "class": "Combinator",
-                  "name": ">"
-                },
-                {
-                  "class": "TypeSelector",
-                  "name": "div"
+                  "type": "ClassSelector",
+                  "name": "foo"
                 }
@@ -244,6 +332,6 @@ ]
         {
-          "class": "Block",
+          "type": "Block",
           "children": [
             {
-              "class": "Declaration",
+              "type": "Declaration",
               "name": "flex",
@@ -253,19 +341,19 @@ "vendor": "ms",
                 {
-                  "class": "Value",
+                  "type": "Value",
                   "children": [
                     {
-                      "class": "Number",
+                      "type": "Number",
                       "name": 1
                     },
                     {
-                      "class": "Number",
-                      "name": 0
+                      "type": "Number",
+                      "name": 1
                     },
                     {
-                      "class": "Unit",
-                      "name": "%",
+                      "type": "Unit",
+                      "name": "px",
                       "children": [
                         {
-                          "class": "Number",
-                          "name": 100
+                          "type": "Number",
+                          "name": 0
                         }
@@ -279,3 +367,3 @@ ]
             {
-              "class": "Declaration",
+              "type": "Declaration",
               "name": "box-flex",
@@ -285,6 +373,6 @@ "vendor": "webkit",
                 {
-                  "class": "Value",
+                  "type": "Value",
                   "children": [
                     {
-                      "class": "Number",
+                      "type": "Number",
                       "name": 1
@@ -297,3 +385,3 @@ }
             {
-              "class": "Declaration",
+              "type": "Declaration",
               "name": "flex",
@@ -303,19 +391,19 @@ "vendor": null,
                 {
-                  "class": "Value",
+                  "type": "Value",
                   "children": [
                     {
-                      "class": "Number",
+                      "type": "Number",
                       "name": 1
                     },
                     {
-                      "class": "Number",
-                      "name": 0
+                      "type": "Number",
+                      "name": 1
                     },
                     {
-                      "class": "Unit",
-                      "name": "%",
+                      "type": "Unit",
+                      "name": "px",
                       "children": [
                         {
-                          "class": "Number",
-                          "name": 100
+                          "type": "Number",
+                          "name": 0
                         }
@@ -331,4 +419,202 @@ ]
       ]
+    },
+    {
+      "type": "Rule",
+      "children": [
+        {
+          "type": "Selectors",
+          "children": [
+            {
+              "type": "Selector",
+              "children": [
+                {
+                  "type": "ClassSelector",
+                  "name": "foo"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "Block",
+          "children": [
+            {
+              "type": "Declaration",
+              "name": "box-flex",
+              "vendor": "webkit",
+              "children": [
+                {
+                  "type": "Value",
+                  "children": [
+                    {
+                      "type": "Number",
+                      "name": 1
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "Declaration",
+              "name": "flex",
+              "vendor": "ms",
+              "children": [
+                {
+                  "type": "Value",
+                  "children": [
+                    {
+                      "type": "Number",
+                      "name": 1
+                    },
+                    {
+                      "type": "Number",
+                      "name": 1
+                    },
+                    {
+                      "type": "Keyword",
+                      "name": "auto",
+                      "vendor": null
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "Declaration",
+              "name": "box-flex",
+              "vendor": "webkit",
+              "children": [
+                {
+                  "type": "Value",
+                  "children": [
+                    {
+                      "type": "Keyword",
+                      "name": "auto",
+                      "vendor": null
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "Declaration",
+              "name": "flex",
+              "vendor": null,
+              "children": [
+                {
+                  "type": "Value",
+                  "children": [
+                    {
+                      "type": "Keyword",
+                      "name": "auto",
+                      "vendor": null
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "Rule",
+      "children": [
+        {
+          "type": "Selectors",
+          "children": [
+            {
+              "type": "Selector",
+              "children": [
+                {
+                  "type": "ClassSelector",
+                  "name": "foo"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "Block",
+          "children": [
+            {
+              "type": "Declaration",
+              "name": "box-flex",
+              "vendor": "webkit",
+              "children": [
+                {
+                  "type": "Value",
+                  "children": [
+                    {
+                      "type": "Number",
+                      "name": 0
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "Declaration",
+              "name": "flex",
+              "vendor": "ms",
+              "children": [
+                {
+                  "type": "Value",
+                  "children": [
+                    {
+                      "type": "Number",
+                      "name": 0
+                    },
+                    {
+                      "type": "Number",
+                      "name": 1
+                    },
+                    {
+                      "type": "Keyword",
+                      "name": "auto",
+                      "vendor": null
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "Declaration",
+              "name": "box-flex",
+              "vendor": "webkit",
+              "children": [
+                {
+                  "type": "Value",
+                  "children": [
+                    {
+                      "type": "Keyword",
+                      "name": "initial",
+                      "vendor": null
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "type": "Declaration",
+              "name": "flex",
+              "vendor": null,
+              "children": [
+                {
+                  "type": "Value",
+                  "children": [
+                    {
+                      "type": "Keyword",
+                      "name": "initial",
+                      "vendor": null
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
     }
   ]
 }

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

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

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

37513

increased by103.32%

Number of package files

15

increased by25%

Lines of code

1294

increased by113.88%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes