postcss-styled-syntax - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

lib/parse.js

 let postcss = require('postcss');
-let tsESTree = require('@typescript-eslint/typescript-estree');
-let { walk } = require('estree-walker');
 let Parser = require('./parser');
+const { parseJs } = require('./parseJs');
 
-/**
- * @typedef {object} NodeData
- * @property {string} css
- * @property {number} rangeStart
- * @property {number} rangeEnd
- * @property {Array<{ start: number; end: number }>} interpolationRanges
- * @property {{ line: number; column: number }} locationStart
- */
+/** @typedef {import('./types.d.ts').NodeData} NodeData */
 
-/** @typedef {import('@typescript-eslint/typescript-estree').TSESTree.TaggedTemplateExpression} TaggedTemplateExpression */
-/** @typedef {import('@typescript-eslint/typescript-estree').TSESTree.Expression} Expression */
-
 /** @type {import('postcss').Parser<import('postcss').Document>} */
@@ -30,27 +19,4 @@ module.exports = function parse(css, opts) {
 	/** @type {NodeData[]} */
-	let foundNodes = [];
+	let foundNodes = parseJs(inputCode, opts);
 
-	try {
-		let jsAst = tsESTree.parse(inputCode, {
-			filePath: opts?.from,
-			loc: true,
-			range: true,
-			tokens: true,
-		});
-
-		walk(jsAst, {
-			enter(node) {
-				if (isTaggedTemplateExpression(node)) {
-					if (isStyledComponent(node.tag)) {
-						let nodeCssData = getNodeCssData(node, inputCode);
-
-						foundNodes.push(nodeCssData);
-					}
-				}
-			},
-		});
-	} catch (error) {
-		// Don't show parsing errors for JavaScript/TypeScript, because they are not relevant to CSS. And these errors most likely caught for user by JavaScript tools already
-	}
-
 	let components = foundNodes.filter((node) => isComponent(node, foundNodes));
@@ -127,94 +93,1 @@ let lastComponent = components[components.length - 1];
 }
-
-/**
- * Checkes where it is a styled component or css`` interpolation
- *
- * @param {TaggedTemplateExpression['tag']} tag
- * @return {boolean}
- */
-function isStyledComponent(tag) {
-	switch (tag.type) {
-		case 'MemberExpression':
-			// styled.foo``
-			return isStyledIdentifier(tag.object);
-
-		case 'CallExpression':
-			return (
-				// styled(Component)``
-				isStyledIdentifier(tag.callee) ||
-				(tag.callee.type === 'MemberExpression' &&
-					((tag.callee.object.type === 'MemberExpression' &&
-						// styled.foo.attrs({})``
-						isStyledIdentifier(tag.callee.object.object)) ||
-						// styled(Component).attrs({})``
-						(tag.callee.object.type === 'CallExpression' &&
-							isStyledIdentifier(tag.callee.object.callee))))
-			);
-
-		case 'Identifier':
-			// css`` or createGlobalStyle``
-			return tag.name === 'css' || tag.name === 'createGlobalStyle';
-
-		default:
-			return false;
-	}
-}
-
-/**
- * @param {Expression} node
- * @return {boolean}
- */
-function isStyledIdentifier(node) {
-	return node.type === 'Identifier' && node.name === 'styled';
-}
-
-/**
- * @param {any} node
- * @return {node is TaggedTemplateExpression}
- */
-function isTaggedTemplateExpression(node) {
-	return node.type === 'TaggedTemplateExpression';
-}
-
-/**
- *
- * @param {TaggedTemplateExpression} node
- * @param {string} inputCode
- * @return {NodeData}
- */
-function getNodeCssData(node, inputCode) {
-	let { quasis } = node.quasi;
-
-	/** @type {NodeData["interpolationRanges"]} */
-	let interpolationRanges = [];
-
-	for (let index = 0; index < quasis.length; index++) {
-		let quasi = quasis[index];
-
-		let isLastQuasi = quasi.tail;
-
-		if (!isLastQuasi) {
-			// To include `${`
-			let currentEnd = quasi.range[1] - 2;
-			// To include `}`
-			let nextStart = quasis[index + 1].range[0] + 1;
-
-			interpolationRanges.push({ start: currentEnd, end: nextStart });
-		}
-	}
-
-	// exclude backticks
-	let rangeStart = quasis[0].range[0] + 1;
-	let rangeEnd = quasis[quasis.length - 1].range[1] - 1;
-
-	return {
-		css: inputCode.slice(rangeStart, rangeEnd),
-		interpolationRanges,
-		rangeStart,
-		rangeEnd,
-		locationStart: {
-			line: quasis[0].loc.start.line,
-			column: quasis[0].loc.start.column + 2, // +1 to start count from 1, and not from 0. Another +1 to include backticks similar to range
-		},
-	};
-}

lib/parser.js

@@ -390,12 +390,18 @@ // @ts-nocheck
 		for (index = 0; index < tokensLength; index++) {
-			let next = tokens.shift();
+			let current = tokens.shift();
 
-			spaces += next[1];
-			removedTokens.push(next);
+			spaces += current[1];
+			removedTokens.push(current);
 
-			if (index === 0 && this.isInterpolation(next)) {
+			if (index === 0 && this.isInterpolation(current)) {
 				hasInterpolation = true;
 			}
 
-			if (next[0] === 'space' && next[1].includes('\n')) {
+			if (current[0] === 'space' && current[1].includes('\n')) {
+				const nextToken = tokens[0];
+
+				if (nextToken && this.isInterpolation(nextToken)) {
+					continue;
+				}
+
 				break;
@@ -402,0 +408,0 @@ }

package.json

 {
 	"name": "postcss-styled-syntax",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"description": "PostCSS syntax for template literals CSS-in-JS (e. g. styled-components).",
@@ -35,2 +35,3 @@ "main": "lib/index.js",
 	"jest": {
+		"prettierPath": null,
 		"watchPlugins": [
@@ -43,5 +44,3 @@ "jest-watch-typeahead/filename",
 	"dependencies": {
-		"@typescript-eslint/typescript-estree": "^5.62.0",
-		"estree-walker": "^2.0.2",
-		"typescript": "~5.1.6"
+		"typescript": "^5.3.3"
 	},
@@ -52,11 +51,10 @@ "peerDependencies": {
 	"devDependencies": {
-		"@types/estree": "^1.0.1",
-		"@types/jest": "^29.5.4",
-		"eslint": "^8.49.0",
+		"@types/jest": "^29.5.11",
+		"eslint": "^8.56.0",
 		"eslint-config-hudochenkov": "^9.0.0",
-		"eslint-config-prettier": "^9.0.0",
+		"eslint-config-prettier": "^9.1.0",
 		"jest": "^29.7.0",
 		"jest-watch-typeahead": "^2.2.2",
-		"postcss": "^8.4.29",
-		"prettier": "^3.0.3",
+		"postcss": "^8.4.32",
+		"prettier": "^3.1.1",
 		"prettier-config-hudochenkov": "^0.4.0"
@@ -63,0 +61,0 @@ },

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

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

36266

increased by2.9%

Dependency count

2

decreased by-50%

Dev dependency count

9

decreased by-10%

Number of package files

12

increased by33.33%

Lines of code

1048

increased by3.66%

Dependency changes

• + Addedtypescript@5.6.3(transitive)

• - Removed@typescript-eslint/typescript-estree@^5.62.0

• - Removedestree-walker@^2.0.2

• - Removed@nodelib/fs.scandir@2.1.5(transitive)

• - Removed@nodelib/fs.stat@2.0.5(transitive)

• - Removed@nodelib/fs.walk@1.2.8(transitive)

• - Removed@typescript-eslint/types@5.62.0(transitive)

• - Removed@typescript-eslint/typescript-estree@5.62.0(transitive)

• - Removed@typescript-eslint/visitor-keys@5.62.0(transitive)

• - Removedarray-union@2.1.0(transitive)

• - Removedbraces@3.0.3(transitive)

• - Removeddebug@4.3.7(transitive)

• - Removeddir-glob@3.0.1(transitive)

• - Removedeslint-visitor-keys@3.4.3(transitive)

• - Removedestree-walker@2.0.2(transitive)

• - Removedfast-glob@3.3.2(transitive)

• - Removedfastq@1.17.1(transitive)

• - Removedfill-range@7.1.1(transitive)

• - Removedglob-parent@5.1.2(transitive)

• - Removedglobby@11.1.0(transitive)

• - Removedignore@5.3.2(transitive)

• - Removedis-extglob@2.1.1(transitive)

• - Removedis-glob@4.0.3(transitive)

• - Removedis-number@7.0.0(transitive)

• - Removedmerge2@1.4.1(transitive)

• - Removedmicromatch@4.0.8(transitive)

• - Removedms@2.1.3(transitive)

• - Removedpath-type@4.0.0(transitive)

• - Removedpicomatch@2.3.1(transitive)

• - Removedqueue-microtask@1.2.3(transitive)

• - Removedreusify@1.0.4(transitive)

• - Removedrun-parallel@1.2.0(transitive)

• - Removedsemver@7.6.3(transitive)

• - Removedslash@3.0.0(transitive)

• - Removedto-regex-range@5.0.1(transitive)

• - Removedtslib@1.14.1(transitive)

• - Removedtsutils@3.21.0(transitive)

• - Removedtypescript@5.1.6(transitive)

• Updatedtypescript@^5.3.3