gulp-css-info - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

index.js

@@ -0,5 +1,12 @@
+var _ = require('underscore');
 var through = require('through2');
 var cssInfo = require('css-info');
 var gutil = require('gulp-util');
+var fs = require('fs');
+var jade = require('jade');
+var jadeFile;
 
+var PLUGIN_NAME = 'gulp-css-info';
+var JADE_FILE = __dirname+'/templates/css-info-page.jade';
+
 module.exports = function(options) {
@@ -22,1 +29,279 @@ options = options || {};
 };
+
+function propertiesStringMatcher(propertiesString) {
+	return function(item) {
+		return item.classes[0].propertiesString === propertiesString;
+	};
+}
+
+function forEachBorderItem(item) {
+	item.containsBorderColorProperty = item.classes[0].properties.some(function(property) {
+		return /^border-(top|right|bottom|left)-color$/.test(property);
+	});
+	item.containsBorderStyleProperty = item.classes[0].properties.some(function(property) {
+		return /^border-(top|right|bottom|left)-style$/.test(property);
+	});
+	item.containsBorderWidthProperty = item.classes[0].properties.some(function(property) {
+		return /^border-(top|right|bottom|left)-width$/.test(property);
+	});
+}
+
+module.exports.html = function(options) {
+	options = options || {};
+	return through.obj(function(file, encoding, callback) {
+		if(file.isNull()) {
+			// nothing to do
+			return callback(null, file);
+		}
+
+		if(file.isStream()) {
+			this.emit('error', new PluginError(PLUGIN_NAME, 'Streams not supported!'));
+		} else if(file.isBuffer()) {
+
+			var css = file.contents.toString();
+
+			var info = cssInfo.parse(css, {
+
+			});
+
+			jadeFile = jadeFile || jade.compileFile(JADE_FILE);
+
+			var classGroups = _.groupBy(info.classes, 'declarationsString');
+
+			items = _.map(classGroups, function(classGroup, id) {
+				return {
+					id: id,
+					classes: classGroup,
+				};
+			});
+
+			var categories = _.map({
+				'color': 'Text color',
+				'background-color': 'Background color',
+				'text-shadow': 'Text shadow',
+				'box-shadow': 'Box shadow',
+				'border-bottom-color,border-left-color,border-right-color,border-top-color': 'Border color all sides',
+				'border-bottom-style,border-left-style,border-right-style,border-top-style': 'Border style all sides',
+				'border-bottom-width,border-left-width,border-right-width,border-top-width': 'Border width all sides',
+			}, function(title, name) {
+				return {
+					name: name,
+					type: name.replace(/-(top|right|bottom|left).*$/, ''),
+					title: title,
+					filter: propertiesStringMatcher(name),
+					forEachItem: forEachBorderItem,
+				};
+			}).concat([
+				{
+					name: 'border-top',
+					title: 'Border top',
+					type: 'border',
+					filter: function(item) {
+						return item.classes[0].properties.every(function(property) {
+							return /^border-(top)-(color|style|width)$/.test(property);
+						});
+					},
+					forEachItem: forEachBorderItem,
+				},
+				{
+					name: 'border-right',
+					title: 'Border right',
+					type: 'border',
+					filter: function(item) {
+						return item.classes[0].properties.every(function(property) {
+							return /^border-(right)-(color|style|width)$/.test(property);
+						});
+					},
+					forEachItem: forEachBorderItem,
+				},
+				{
+					name: 'border-bottom',
+					title: 'Border bottom',
+					type: 'border',
+					filter: function(item) {
+						return item.classes[0].properties.every(function(property) {
+							return /^border-(bottom)-(color|style|width)$/.test(property);
+						});
+					},
+					forEachItem: forEachBorderItem,
+				},
+				{
+					name: 'border-left',
+					title: 'Border left',
+					type: 'border',
+					filter: function(item) {
+						return item.classes[0].properties.every(function(property) {
+							return /^border-(left)-(color|style|width)$/.test(property);
+						});
+					},
+					forEachItem: forEachBorderItem,
+				},
+				{
+					name: 'border-bottom,border-top',
+					title: 'Border vertical',
+					type: 'border',
+					filter: function(item) {
+						return item.classes[0].properties.every(function(property) {
+							return /^border-(top|bottom)-(color|style|width)$/.test(property);
+						});
+					},
+					forEachItem: forEachBorderItem,
+				},
+				{
+					name: 'border-left,border-right',
+					title: 'Border horizontal',
+					type: 'border',
+					filter: function(item) {
+						return item.classes[0].properties.every(function(property) {
+							return /^border-(right|left)-(color|style|width)$/.test(property);
+						});
+					},
+					forEachItem: forEachBorderItem,
+				},
+				{
+					name: 'border',
+					title: 'Border all sides',
+					type: 'border',
+					filter: function(item) {
+						return item.classes[0].properties.every(function(property) {
+							return /^border-(top|right|bottom|left)-(color|style|width)$/.test(property);
+						});
+					},
+					forEachItem: forEachBorderItem,
+				},
+			],
+			_.map({
+				'font-family': 'Font family',
+				'font-weight': 'Font weight',
+				'font-size': 'Font size',
+				'line-height': 'Line height',
+				'text-transform': 'Text transform',
+				'text-decoration': 'Text decoration',
+				'text-align': 'Text align',
+				'margin-top': 'Margin top',
+				'margin-right': 'Margin right',
+				'margin-bottom': 'Margin bottom',
+				'margin-left': 'Margin left',
+				'margin-bottom,margin-top': 'Margin vertical',
+				'margin-left,margin-right': 'Margin horizontal',
+				'margin': 'Margin all sides',
+				'padding-top': 'Padding top',
+				'padding-right': 'Padding right',
+				'padding-bottom': 'Padding bottom',
+				'padding-left': 'Padding left',
+				'padding-bottom,padding-top': 'Padding vertical',
+				'padding-left,padding-right': 'Padding horizontal',
+				'padding': 'Padding all sides',
+				'width': 'Width',
+				'min-width': 'Min width',
+				'max-width': 'Max width',
+				'height': 'Height',
+				'min-height': 'Min height',
+				'max-height': 'Max height',
+				'display': 'Display',
+				'float': 'Float',
+				'position': 'Position',
+				'top': 'Top',
+				'right': 'Right',
+				'bottom': 'Bottom',
+				'left': 'Left',
+			}, function(title, name) {
+				return {
+					name: name,
+					type: name.replace(/-(top|right|bottom|left).*$/, '').replace(/^(min|max)-/, ''),
+					title: title,
+					filter: propertiesStringMatcher(name),
+				};
+			}),
+			[
+				{
+					name: 'overflow',
+					title: 'Overflow',
+					type: 'overflow',
+					filter: function(item) {
+						return item.classes[0].properties.every(function(property) {
+							return /^overflow(-(x|y))?$/.test(property);
+						});
+					},
+				},
+				{
+					name: 'border-radius',
+					title: 'Border radius',
+					type: 'border-radius',
+					filter: function(item) {
+						return item.classes[0].properties.every(function(property) {
+							return /^border(-(top|bottom)-(right|left))?-radius$/.test(property);
+						});
+					},
+				},
+				{
+					name: 'none',
+					title: 'Other classes',
+					type: 'none',
+				},
+			]);
+
+			var uncategorizedItems = items;
+
+			categories.forEach(function(category) {
+				if(category.filter) {
+					var partitions = _.partition(uncategorizedItems, category.filter);
+					category.items = partitions[0];
+					uncategorizedItems = partitions[1];
+				} else {
+					category.items = uncategorizedItems;
+					uncategorizedItems = [];
+				}
+				category.items.forEach(function(item) {
+					item.category = category.name;
+					item.type = category.type;
+				});
+				if(category.forEachItem) {
+					category.items.forEach(category.forEachItem);
+				}
+				delete category.forEachItem;
+				delete category.filter;
+			});
+
+			var states = _.uniq(_.flatten(_.pluck(info.classes, 'states'), true));
+			var medias = _.uniq(_.flatten(_.pluck(info.classes, 'medias'), true));
+
+			var data = jadeFile({
+				css: css,
+				categories: categories,
+				states: states,
+				medias: medias,
+				exampleBgValues: [
+					{
+						label: 'White',
+						css: {
+							'bg': "white",
+							'border-color': "black",
+							'fg': "white",
+						},
+					},
+					{
+						label: 'Checkboard',
+						css: {
+							'bg': "top left url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACpJREFUeNpi/P//PwM2cPbsWaziTAwkglENxAAWXOFtbGw8Gkr00wAQYAD5xAiGkcIskQAAAABJRU5ErkJggg==)",
+							'border-color': "black",
+							'fg': "transparent",
+						},
+					},
+					{
+						label: 'Black',
+						css: {
+							'bg': "black",
+							'border-color': "white",
+							'fg': "black",
+						},
+					},
+				]
+			});
+
+			file.contents = new Buffer(data);
+			file.path = gutil.replaceExtension(file.path, '.html');
+			return callback(null, file);
+		}
+	});
+};

package.json

 {
   "name": "gulp-css-info",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "",
@@ -20,6 +20,8 @@ "main": "index.js",
   "dependencies": {
-    "css-info": "^0.1.1",
+    "css-info": "^0.2.0",
     "gulp-util": "^3.0.7",
-    "through2": "^2.0.0"
+    "jade": "^1.11.0",
+    "through2": "^2.0.0",
+    "underscore": "^1.8.3"
   }
 }

New 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

Filesystem access

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57130

4342.46%

Number of package files

12

200%

Lines of code

380

1900%

Worsened metrics

Dependency count

5

66.67%

Number of low supply chain risk alerts

1

Infinity%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  jade@^1.11.0

• + Added

  underscore@^1.8.3

• + Added

  acorn@1.2.22.7.0
  (transitive)

• + Added

  acorn-globals@1.0.9
  (transitive)

• + Added

  align-text@0.1.4
  (transitive)

• + Added

  amdefine@1.0.1
  (transitive)

• + Added

  asap@1.0.0
  (transitive)

• + Added

  camelcase@1.2.1
  (transitive)

• + Added

  center-align@0.1.3
  (transitive)

• + Added

  character-parser@1.2.1
  (transitive)

• + Added

  clean-css@3.4.28
  (transitive)

• + Added

  cliui@2.1.0
  (transitive)

• + Added

  commander@2.6.02.8.1
  (transitive)

• + Added

  constantinople@3.0.2
  (transitive)

• + Added

  css@1.0.8
  (transitive)

• + Added

  css-info@0.2.1
  (transitive)

• + Added

  css-parse@1.0.4
  (transitive)

• + Added

  css-stringify@1.0.5
  (transitive)

• + Added

  decamelize@1.2.0
  (transitive)

• + Added

  graceful-readlink@1.0.1
  (transitive)

• + Added

  immutable@3.8.2
  (transitive)

• + Added

  is-buffer@1.1.6
  (transitive)

• + Added

  is-promise@1.0.12.2.2
  (transitive)

• + Added

  jade@1.11.0
  (transitive)

• + Added

  jstransformer@0.0.2
  (transitive)

• + Added

  kind-of@3.2.2
  (transitive)

• + Added

  lazy-cache@1.0.4
  (transitive)

• + Added

  longest@1.0.1
  (transitive)

• + Added

  mkdirp@0.5.6
  (transitive)

• + Added

  optimist@0.3.7
  (transitive)

• + Added

  promise@2.0.06.1.0
  (transitive)

• + Added

  repeat-string@1.6.1
  (transitive)

• + Added

  right-align@0.1.3
  (transitive)

• + Added

  source-map@0.1.430.4.40.5.7
  (transitive)

• + Added

  transformers@2.1.0
  (transitive)

• + Added

  uglify-js@2.2.52.8.29
  (transitive)

• + Added

  uglify-to-browserify@1.0.2
  (transitive)

• + Added

  underscore@1.13.7
  (transitive)

• + Added

  void-elements@2.0.1
  (transitive)

• + Added

  window-size@0.1.0
  (transitive)

• + Added

  with@4.0.3
  (transitive)

• + Added

  wordwrap@0.0.20.0.3
  (transitive)

• + Added

  yargs@3.10.0
  (transitive)

• - Removed

  css-info@0.1.1
  (transitive)

• - Removed

  jspath@0.3.4
  (transitive)

• Updated

  css-info@^0.2.0