gulp-css-usage - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

dist/index.js

@@ -29,24 +29,24 @@ 'use strict';
 var PLUGIN_NAME = 'gulp-css-usage';
-var cssClassRegex = /\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?![^\{]*\})/gm;
+var cssSelectorRegex = /([.#](-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?![^\{]*\}))/gm;
 
 var error = undefined;
 
-var getAllClassNamesFromCSSFile = function getAllClassNamesFromCSSFile(cssFile) {
+var getAllSelectorsFromCSSFile = function getAllSelectorsFromCSSFile(cssFile) {
 	var contents = cssFile.contents.toString();
-	var classNames = {};
-	var matches = cssClassRegex.exec(contents);
+	var selectors = {};
+	var matches = cssSelectorRegex.exec(contents);
 	while (matches != null) {
-		var className = matches[1];
-		classNames[className] = className;
-		matches = cssClassRegex.exec(contents);
+		var selector = matches[1];
+		selectors[selector] = selector;
+		matches = cssSelectorRegex.exec(contents);
 	}
 
-	return classNames;
+	return selectors;
 };
 
-var makeDiff = function makeDiff(cssClasses, jsxClasses) {
+var makeDiff = function makeDiff(cssSelectors, jsxAttributes) {
 	var needless = [];
-	Object.keys(cssClasses).forEach(function (className) {
-		if (!jsxClasses[className]) {
-			needless.push('.' + className);
+	Object.keys(cssSelectors).forEach(function (selector) {
+		if (!jsxAttributes[selector.substring(1)]) {
+			needless.push(selector);
 		}
@@ -58,7 +58,7 @@ });
 
-var printNeedlessClassList = function printNeedlessClassList(list) {
+var printNeedlessSelectorList = function printNeedlessSelectorList(list) {
 	_gulpUtil2.default.log('');
-	_gulpUtil2.default.log(_gulpUtil2.default.colors.yellow(PLUGIN_NAME + ': The following class names are not in use'));
-	list.forEach(function (clazz) {
-		return _gulpUtil2.default.log(clazz);
+	_gulpUtil2.default.log(_gulpUtil2.default.colors.yellow(PLUGIN_NAME + ': The following selectors are not in use'));
+	list.forEach(function (selector) {
+		return _gulpUtil2.default.log(selector);
 	});
@@ -68,7 +68,7 @@ _gulpUtil2.default.log('');
 
-var parseAndExtractJsxClassNames = function parseAndExtractJsxClassNames(jsxFileContents) {
+var parseAndExtractJsxAttributes = function parseAndExtractJsxAttributes(jsxFileContents) {
 	var babylonPlugins = arguments.length <= 1 || arguments[1] === undefined ? [] : arguments[1];
 
-	var jsxClassNames = {};
-	var plugins = ['jsx', 'classProperties'];
+	var jsxAttributes = {};
+	var plugins = ['jsx', 'flow', 'classProperties'];
 	if (babylonPlugins.length) {
@@ -78,3 +78,3 @@ plugins = plugins.concat(babylonPlugins);
 
-	// use babylon.parse and then babel traverse for dynamic class names on the jsx code.
+	// use babylon.parse and then babel traverse for dynamic class names and other attributes on the jsx code.
 	// might come up with a bit more strings but the needless stuff are not here anyway.
@@ -89,5 +89,5 @@ var ast = (0, _babylon.parse)(jsxFileContents, { sourceType: 'module', plugins: plugins });
 			if (type === 'StringLiteral') {
-				var classNames = value.split(' ');
-				classNames.forEach(function (className) {
-					return jsxClassNames[className] = className;
+				var attributes = value.split(' ');
+				attributes.forEach(function (attr) {
+					return jsxAttributes[attr] = attr;
 				});
@@ -98,3 +98,3 @@ }
 
-	return jsxClassNames;
+	return jsxAttributes;
 };
@@ -115,7 +115,7 @@
 	var cssFile = new _gulpUtil2.default.File({ path: cssFilePath, contents: _fs2.default.readFileSync(cssFilePath) });
-	var cssClasses = getAllClassNamesFromCSSFile(cssFile);
+	var cssSelectors = getAllSelectorsFromCSSFile(cssFile);
 	var fileBuffer = undefined;
-	var allClassNames = {};
+	var allAttributes = {};
 	var transformers = function transformers(file, enc, cb) {
-		var currentJsxClassNames = undefined;
+		var currentJsxAttributes = undefined;
 		if (file.isNull()) {
@@ -125,4 +125,4 @@ return cb(error, file);
 		if (file.isBuffer()) {
-			currentJsxClassNames = parseAndExtractJsxClassNames(file.contents.toString(), babylon);
-			Object.assign(allClassNames, currentJsxClassNames);
+			currentJsxAttributes = parseAndExtractJsxAttributes(file.contents.toString(), babylon);
+			Object.assign(allAttributes, currentJsxAttributes);
 			cb(error, file);
@@ -143,4 +143,4 @@ }
 			file.contents.on('end', function () {
-				currentJsxClassNames = parseAndExtractJsxClassNames(fileBuffer.toString(), babylon);
-				Object.assign(allClassNames, currentJsxClassNames);
+				currentJsxAttributes = parseAndExtractJsxAttributes(fileBuffer.toString(), babylon);
+				Object.assign(allAttributes, currentJsxAttributes);
 				fileBuffer = undefined;
@@ -153,4 +153,4 @@ cb(error, file);
 	var flush = function flush(cb) {
-		var needless = makeDiff(cssClasses, allClassNames);
-		printNeedlessClassList(needless);
+		var needless = makeDiff(cssSelectors, allAttributes);
+		printNeedlessSelectorList(needless);
 		cb();
@@ -157,0 +157,0 @@ };

index.js

@@ -9,24 +9,24 @@ import through from 'through2';
 const PLUGIN_NAME = 'gulp-css-usage';
-const cssClassRegex = /\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?![^\{]*\})/gm;
+const cssSelectorRegex = /([.#](-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?![^\{]*\}))/gm;
 
 let error = undefined;
 
-let getAllClassNamesFromCSSFile = (cssFile) => {
+let getAllSelectorsFromCSSFile = (cssFile) => {
 	let contents = cssFile.contents.toString();
-	let classNames = {};
-	let matches = cssClassRegex.exec(contents);
+	let selectors = {};
+	let matches = cssSelectorRegex.exec(contents);
 	while (matches != null) {
-		let className = matches[1];
-		classNames[className] = className;
-		matches = cssClassRegex.exec(contents);
+		let selector = matches[1];
+		selectors[selector] = selector;
+		matches = cssSelectorRegex.exec(contents);
 	}
 
-	return classNames;
+	return selectors;
 };
 
-let makeDiff = (cssClasses, jsxClasses) => {
+let makeDiff = (cssSelectors, jsxAttributes) => {
 	let needless = [];
-	Object.keys(cssClasses).forEach(className => {
-		if (!jsxClasses[className]) {
-			needless.push(`.${className}`);
+	Object.keys(cssSelectors).forEach(selector => {
+		if (!jsxAttributes[selector.substring(1)]) {
+			needless.push(selector);
 		}
@@ -38,12 +38,12 @@ });
 
-let printNeedlessClassList = (list) => {
+let printNeedlessSelectorList = (list) => {
 	gutil.log('');
-	gutil.log(gutil.colors.yellow(PLUGIN_NAME + ': The following class names are not in use'));
-	list.forEach(clazz => gutil.log(clazz));
+	gutil.log(gutil.colors.yellow(PLUGIN_NAME + ': The following selectors are not in use'));
+	list.forEach(selector => gutil.log(selector));
 	gutil.log('');
 };
 
-let parseAndExtractJsxClassNames = (jsxFileContents, babylonPlugins = []) => {
-	let jsxClassNames = {};
-	let plugins = ['jsx', 'classProperties'];
+let parseAndExtractJsxAttributes = (jsxFileContents, babylonPlugins = []) => {
+	let jsxAttributes = {};
+	let plugins = ['jsx', 'flow', 'classProperties'];
 	if(babylonPlugins.length) {
@@ -53,3 +53,3 @@ plugins = plugins.concat(babylonPlugins);
 
-	// use babylon.parse and then babel traverse for dynamic class names on the jsx code.
+	// use babylon.parse and then babel traverse for dynamic class names and other attributes on the jsx code.
 	// might come up with a bit more strings but the needless stuff are not here anyway.
@@ -61,4 +61,4 @@ let ast = parse(jsxFileContents, {sourceType: 'module', plugins: plugins});
 			if (type === 'StringLiteral') {
-				let classNames = value.split(' ');
-				classNames.forEach(className => jsxClassNames[className] = className);
+				let attributes = value.split(' ');
+				attributes.forEach(attr => jsxAttributes[attr] = attr);
 			}
@@ -68,3 +68,3 @@ }
 
-	return jsxClassNames;
+	return jsxAttributes;
 };
@@ -83,7 +83,7 @@
 	let cssFile = new gutil.File({path: cssFilePath, contents: fs.readFileSync(cssFilePath)});
-	let cssClasses = getAllClassNamesFromCSSFile(cssFile);
+	let cssSelectors = getAllSelectorsFromCSSFile(cssFile);
 	let fileBuffer;
-	let allClassNames = {};
+	let allAttributes = {};
 	let transformers = (file, enc, cb) => {
-		let currentJsxClassNames;
+		let currentJsxAttributes;
 		if (file.isNull()) {
@@ -93,4 +93,4 @@ return cb(error, file);
 		if (file.isBuffer()) {
-			currentJsxClassNames = parseAndExtractJsxClassNames(file.contents.toString(), babylon);
-			Object.assign(allClassNames, currentJsxClassNames);
+			currentJsxAttributes = parseAndExtractJsxAttributes(file.contents.toString(), babylon);
+			Object.assign(allAttributes, currentJsxAttributes);
 			cb(error, file);
@@ -109,4 +109,4 @@ }
 			file.contents.on('end', () => {
-				currentJsxClassNames = parseAndExtractJsxClassNames(fileBuffer.toString(), babylon);
-				Object.assign(allClassNames, currentJsxClassNames);
+				currentJsxAttributes = parseAndExtractJsxAttributes(fileBuffer.toString(), babylon);
+				Object.assign(allAttributes, currentJsxAttributes);
 				fileBuffer = undefined;
@@ -119,4 +119,4 @@ cb(error, file);
 	let flush = (cb) => {
-		let needless = makeDiff(cssClasses, allClassNames);
-		printNeedlessClassList(needless);
+		let needless = makeDiff(cssSelectors, allAttributes);
+		printNeedlessSelectorList(needless);
 		cb();
@@ -123,0 +123,0 @@ };

package.json

 {
   "name": "gulp-css-usage",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "A Gulp task which scans your JavaScript classes, including React JSX files support (.jsx/.js), your CSS files, and gives you a report of CSS coverage. i.e how many class names are needless and which are those class names.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -42,3 +42,3 @@ # gulp-css-usage
 ### babylon
-Type: `Array:String` Default: `['jsx', 'classProperties']`
+Type: `Array:String` Default: `['jsx', 'flow', 'classProperties']`
 
@@ -62,3 +62,3 @@ Array containing the plugins that you want to enable.<br>
 * write results to file
-* support of more CSS selectors, such as `#`,
+* support of more CSS selectors
 * support multiple CSS files
@@ -65,0 +65,0 @@ * support of precompiled SCSS files as well

No alert changes

Improved metrics

Total package byte prevSize

14660

increased by0.62%

No dependency changes