@stylelint/postcss-css-in-js - npm Package Compare versions

Comparing version 0.37.2 to 0.37.3

camel-case.js

 'use strict';
 
 function camelCase(str) {
-	return str.replace(/[\w-]+/g, (s) =>
-		/^-?[a-z]+(?:-[a-z]+)+$/.test(s)
+	return str.replace(/[\w-]+/g, (s) => {
+		return /^-?[a-z]+(?:-[a-z]+)+$/.test(s)
 			? s
 					.replace(/^-(ms|moz|khtml|epub|(\w+-?)*webkit)(?=-)/i, '$1')
-					.replace(/-\w/g, (s) => s[1].toUpperCase())
-			: s,
-	);
+					.replace(/-\w/g, (uncasedStr) => uncasedStr[1].toUpperCase())
+			: s;
+	});
 }
 
 module.exports = camelCase;

extract.js

@@ -46,2 +46,9 @@ 'use strict';
 
+	// import styled from 'vue-emotion';
+	// Also see:
+	// - https://github.com/stylelint/stylelint/issues/4247
+	// - https://github.com/gucong3000/postcss-jsx/issues/63
+	// - https://github.com/stylelint/postcss-css-in-js/issues/22
+	'vue-emotion': true,
+
 	// import styled from 'preact-emotion'
@@ -141,3 +148,11 @@ 'preact-emotion': true,
 			// combine arrays for plugins
-			opts.parserOpts[key] = opts.parserOpts[key].concat(fileOpts[key]);
+			// plugins in fileOpts could be string, array or object
+			for (const plugin of fileOpts[key]) {
+				const option =
+					Array.isArray(plugin) || typeof plugin === 'string'
+						? plugin
+						: [plugin.key, plugin.options];
+
+				opts.parserOpts[key] = [...opts.parserOpts[key], option];
+			}
 		} else {
@@ -203,2 +218,13 @@ // because some options need to be passed to parser also
 		}
+
+		// If this is not an object but a function returning an object, we want to parse the
+		// object that is in the body of the function. We will only parse it if the body only
+		// consist of an object and nothing else.
+		if (path.isArrowFunctionExpression()) {
+			const body = path.get('body');
+
+			if (body) {
+				addObjectExpression(body);
+			}
+		}
 	}
@@ -406,5 +432,5 @@
 
-		const quasis = node.quasis.map((node) => ({
-			start: node.start,
-			end: node.end,
+		const quasis = node.quasis.map((quasiNode) => ({
+			start: quasiNode.start,
+			end: quasiNode.end,
 		}));
@@ -418,5 +444,5 @@ const style = {
 		if (node.expressions.length) {
-			const expressions = node.expressions.map((node) => ({
-				start: node.start,
-				end: node.end,
+			const expressions = node.expressions.map((expressionNode) => ({
+				start: expressionNode.start,
+				end: expressionNode.end,
 			}));
@@ -423,0 +449,0 @@

object-parser.js

@@ -14,7 +14,2 @@ 'use strict';
 
-const replaceProp = (fn) => (value) =>
-	value.replace(/(\(\s*)(.*?)(\s*:)/g, (s, prefix, prop, suffix) => prefix + fn(prop) + suffix);
-const camelCaseProp = replaceProp(camelCase);
-const unCamelCaseProp = replaceProp(unCamelCase);
-
 function defineRaws(node, prop, prefix, suffix, props) {
@@ -238,3 +233,3 @@ if (!props) {
 
-				defineRaws(atRule, 'name', key.prefix + '@', params ? '' : key.suffix, {
+				defineRaws(atRule, 'name', `${key.prefix}@`, params ? '' : key.suffix, {
 					raw: 'camel',
@@ -244,12 +239,4 @@ });
 				if (params) {
-					atRule.params = unCamelCaseProp(params);
-					defineRaws(atRule, 'params', '', key.suffix, {
-						raw: {
-							enumerable: true,
-							get: () => camelCaseProp(atRule.params),
-							set: (value) => {
-								atRule.params = unCamelCaseProp(value);
-							},
-						},
-					});
+					atRule.params = params;
+					defineRaws(atRule, 'params', '', key.suffix);
 				}
@@ -288,30 +275,30 @@
 			return atRule;
+		}
+
+		let decl;
+
+		if (key.raw) {
+			decl = postcss.decl({
+				prop: key.value,
+				value: value.value,
+				raws: {
+					prop: key,
+				},
+			});
 		} else {
-			let decl;
+			decl = postcss.decl({
+				prop: unCamelCase(key.value),
+				value: value.value,
+			});
 
-			if (key.raw) {
-				decl = postcss.decl({
-					prop: key.value,
-					value: value.value,
-					raws: {
-						prop: key,
-					},
-				});
-			} else {
-				decl = postcss.decl({
-					prop: unCamelCase(key.value),
-					value: value.value,
-				});
+			defineRaws(decl, 'prop', key.prefix, key.suffix, {
+				raw: 'camel',
+			});
+		}
 
-				defineRaws(decl, 'prop', key.prefix, key.suffix, {
-					raw: 'camel',
-				});
-			}
+		defineRaws(decl, 'value', value.prefix, value.suffix);
+		raw(decl);
 
-			defineRaws(decl, 'value', value.prefix, value.suffix);
-			raw(decl);
+		return decl;
 
-			return decl;
-		}
-
 		function raw(postcssNode) {
@@ -318,0 +305,0 @@ postcssNode.raws.between = between;

object-stringifier.js

@@ -90,5 +90,5 @@ 'use strict';
 
-			this.builder('//' + left + text + right, node);
+			this.builder(`//${left}${text}${right}`, node);
 		} else {
-			this.builder('/*' + left + node.text + right + '*/', node);
+			this.builder(`/*${left}${node.text}${right}*/`, node);
 		}
@@ -103,3 +103,3 @@ }
 		) {
-			value = ':' + value;
+			value = `:${value}`;
 		} else if (own === 'before' && /^(decl|rule)$/.test(node.type)) {
@@ -138,3 +138,3 @@ value = value.replace(/\S+$/, '');
 			if (prop === 'name') {
-				value = '@' + value;
+				value = `@${value}`;
 			} else if (node.nodes) {
@@ -141,0 +141,0 @@ return;

package.json

 {
   "name": "@stylelint/postcss-css-in-js",
-  "version": "0.37.2",
+  "version": "0.37.3",
   "description": "PostCSS syntax for parsing CSS in JS literals",
@@ -29,4 +29,4 @@ "keywords": [
   "scripts": {
-    "debug": "npm run mocha -- --inspect-brk",
     "format": "prettier . --write",
+    "_postinstall": "is-ci || husky install",
     "lint": "npm-run-all --parallel lint:*",
@@ -36,6 +36,7 @@ "lint:formatting": "prettier . --check",
     "lint:md": "remark . --quiet --frail",
-    "mocha": "mocha --no-timeouts",
+    "prepublishOnly": "pinst --disable",
+    "postpublish": "pinst --enable",
     "release": "np",
-    "test": "nyc npm run mocha",
-    "watch": "mocha --watch"
+    "test": "jest",
+    "watch": "jest --watch"
   },
@@ -55,15 +56,3 @@ "husky": {
       "stylelint"
-    ],
-    "rules": {
-      "array-callback-return": "off",
-      "no-confusing-arrow": "off",
-      "no-else-return": "off",
-      "prefer--template": "off",
-      "prefer-object-spread": "off",
-      "prefer-rest-params": "off",
-      "prefer-spread": "off",
-      "prefer-template": "off",
-      "jest/expect-expect": "off",
-      "jest/valid-expect": "off"
-    }
+    ]
   },
@@ -75,41 +64,40 @@ "remarkConfig": {
   },
-  "nyc": {
-    "all": true,
-    "cache": true,
-    "check-coverage": true,
-    "exclude": [
-      "coverage/**",
-      "test{,s}/**",
-      "**/.{prettier,eslint,mocha}rc.{js,cjs}"
+  "jest": {
+    "collectCoverage": true,
+    "collectCoverageFrom": [
+      "**/*.js",
+      "!coverage/**",
+      "!test{,s}/**",
+      "!**/.{prettier,eslint,mocha}rc.{js,cjs}"
     ],
-    "reporter": [
-      "lcov",
-      "text"
+    "testMatch": [
+      "**/test/*.js",
+      "**/test/**/*.test.js"
     ]
   },
   "dependencies": {
-    "@babel/core": ">=7.9.0"
+    "@babel/core": "^7.17.9"
   },
   "devDependencies": {
     "@stylelint/prettier-config": "^2.0.0",
-    "@stylelint/remark-preset": "^1.0.0",
-    "autoprefixer": "^9.7.6",
-    "chai": "^4.2.0",
-    "codecov": "^3.6.5",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-config-stylelint": "^12.0.0",
-    "husky": "^4.2.5",
-    "json5": "^2.1.3",
-    "lint-staged": "^10.1.3",
-    "mocha": "^7.1.1",
-    "np": "^6.3.2",
+    "@stylelint/remark-preset": "^2.0.0",
+    "autoprefixer": "^9.8.6",
+    "codecov": "^3.8.3",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-stylelint": "^13.1.0",
+    "husky": "^7.0.2",
+    "is-ci": "^3.0.0",
+    "jest": "^26.6.3",
+    "json5": "^2.2.0",
+    "lint-staged": "^11.1.2",
+    "np": "^7.5.0",
     "npm-run-all": "^4.1.5",
-    "nyc": "^15.0.1",
-    "postcss": ">=7.0.27",
+    "pinst": "^2.1.6",
+    "postcss": ">=7.0.32",
     "postcss-parser-tests": "^6.5.0",
     "postcss-safe-parser": "^4.0.2",
     "postcss-syntax": ">=0.36.2",
-    "prettier": "^2.0.4",
-    "remark-cli": "^8.0.0"
+    "prettier": "^2.4.1",
+    "remark-cli": "^9.0.0"
   },
@@ -116,0 +104,0 @@ "peerDependencies": {

template-parser-helper.js

@@ -48,6 +48,6 @@ 'use strict';
 		const nodeIndex = getNodeIndex(node, input);
-		const start = offset + nodeIndex;
-		const end = start + node.text.length;
+		const startIndex = offset + nodeIndex;
+		const endIndex = startIndex + node.text.length;
 		const templateLiteralStyles = input.templateLiteralStyles.filter(
-			(style) => style.startIndex <= end && start < style.endIndex,
+			(style) => style.startIndex <= endIndex && startIndex < style.endIndex,
 		);
@@ -91,3 +91,3 @@
 
-	const opts = Object.assign({}, input.parseOptions);
+	const opts = { ...input.parseOptions };
 
@@ -147,2 +147,4 @@ delete opts.templateLiteralStyles;
 			}
+
+			return false;
 		});
@@ -178,6 +180,3 @@
 			this.object(error.input);
-			error.message = error.message.replace(
-				/:\d+:\d+:/,
-				':' + error.line + ':' + error.column + ':',
-			);
+			error.message = error.message.replace(/:\d+:\d+:/, `:${error.line}:${error.column}:`);
 		}
@@ -193,17 +192,13 @@
 		try {
-			root = this.templateParse(
-				style.content,
-				Object.assign(
-					{},
-					opts,
-					{
-						map: false,
-					},
-					style.opts,
-				),
-			);
+			root = this.templateParse(style.content, {
+				...opts,
+				map: false,
+				...style.opts,
+			});
 		} catch (error) {
 			if (style.ignoreErrors) {
 				return;
-			} else if (!style.skipConvert) {
+			}
+
+			if (!style.skipConvert) {
 				this.error(error);
@@ -210,0 +205,0 @@ }

template-parser.js

@@ -11,11 +11,9 @@ 'use strict';
 	}
-	other() {
-		const args = arguments;
-
-		return helper.literal.apply(this, args) || super.other.apply(this, args);
+	other(start) {
+		return helper.literal.call(this, start) || super.other.call(this, start);
 	}
-	freeSemicolon() {
-		return helper.freeSemicolon.apply(this, arguments);
+	freeSemicolon(token) {
+		return helper.freeSemicolon.call(this, token);
 	}
 }
 module.exports = TemplateParser;

template-safe-parser.js

@@ -12,11 +12,9 @@ 'use strict';
 	}
-	other() {
-		const args = arguments;
-
-		return helper.literal.apply(this, args) || super.other.apply(this, args);
+	other(start) {
+		return helper.literal.call(this, start) || super.other.call(this, start);
 	}
-	freeSemicolon() {
-		return helper.freeSemicolon.apply(this, arguments);
+	freeSemicolon(token) {
+		return helper.freeSemicolon.call(this, token);
 	}
 }
 module.exports = TemplateSafeParser;

template-tokenize.js

@@ -5,6 +5,6 @@ 'use strict';
 
-function templateTokenize(input) {
+function templateTokenize(input, options = {}) {
 	let pos = input.quasis[0].start;
 	const quasis = input.quasis.filter((quasi) => quasi.start !== quasi.end);
-	const tokenizer = tokenize.apply(this, arguments);
+	const tokenizer = tokenize(input, options);
 
@@ -21,3 +21,5 @@ function tokenInExpressions(token, returned) {
 			return true;
-		} else if (returned.length) {
+		}
+
+		if (returned.length) {
 			back(token);
@@ -30,7 +32,6 @@ }
 
-		return tokenizer.back.apply(tokenizer, arguments);
+		return tokenizer.back(token);
 	}
 
-	function nextToken() {
-		const args = arguments;
+	function nextToken(opts) {
 		const returned = [];
@@ -41,6 +42,3 @@ let token;
 
-		while (
-			(token = tokenizer.nextToken.apply(tokenizer, args)) &&
-			tokenInExpressions(token, returned)
-		) {
+		while ((token = tokenizer.nextToken(opts)) && tokenInExpressions(token, returned)) {
 			line = token[4] || token[2] || line;
@@ -54,3 +52,3 @@ column = token[5] || token[3] || column;
 				returned[0][0],
-				returned.map((token) => token[1]).join(''),
+				returned.map((parentToken) => parentToken[1]).join(''),
 				returned[0][2],
@@ -66,8 +64,5 @@ returned[0][3],
 
-	return Object.assign({}, tokenizer, {
-		back,
-		nextToken,
-	});
+	return { ...tokenizer, back, nextToken };
 }
 
 module.exports = templateTokenize;

un-camel-case.js

 'use strict';
 
 function unCamelCase(str) {
-	return str.replace(/[\w-]+/g, (s) =>
-		/^[A-Z]?[a-z]*(?:[A-Z][a-z]*)+$/.test(s)
+	return str.replace(/[\w-]+/g, (s) => {
+		return /^[A-Z]?[a-z]*(?:[A-Z][a-z]*)+$/.test(s)
 			? s
-					.replace(/[A-Z]/g, (s) => '-' + s.toLowerCase())
+					.replace(/[A-Z]/g, (casedStr) => `-${casedStr.toLowerCase()}`)
 					.replace(/^(o|ms|moz|khtml|epub|(\w+-?)*webkit)(?=-)/i, '-$1')
-			: s,
-	);
+			: s;
+	});
 }
 
 module.exports = unCamelCase;

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Worsened metrics

Total package byte prevSize

40177

decreased by-1.63%

Number of package files

23

decreased by-4.17%

Lines of code

1236

decreased by-0.48%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@babel/core@^7.17.9