handling indent in first line of style code block. (#28)

Author: gucong3000

extract.js

@@ -289,17 +289,21 @@ function literalParser (source, opts, styles) {
 
 	objLiteral = Array.from(objLiteral).map(endNode => {
 		const objectSyntax = require("./object-syntax");
-		const syntax = objectSyntax(endNode);
 		let startNode = endNode;
 		if (startNode.leadingComments && startNode.leadingComments.length) {
 			startNode = startNode.leadingComments[0];
 		}
+		let startIndex = startNode.start;
+		const before = source.slice(startNode.start - startNode.loc.start.column, startNode.start);
+		if (/^\s+$/.test(before)) {
+			startIndex -= before.length;
+		}
 		return {
-			startIndex: startNode.start,
+			startIndex,
 			endIndex: endNode.end,
 			skipConvert: true,
 			content: source,
-			syntax,
+			syntax: objectSyntax(endNode),
 			lang: "object-literal",
 		};
 	});

object-parser.js

@@ -79,9 +79,21 @@ class objectParser {
 		const startNode = root.first.raws.node;
 		const endNode = root.last.raws.node;
 
-		root.source.start = startNode.loc.start;
+		const start = {
+			line: startNode.loc.start.line,
+		};
+
+		let before = root.source.input.css.slice(startNode.start - startNode.loc.start.column, startNode.start);
+		if (/^\s+$/.test(before)) {
+			start.column = 1;
+		} else {
+			before = "";
+			start.column = startNode.loc.start.column;
+		}
 
-		root.source.input.css = root.source.input.css.slice(startNode.start, endNode.end);
+		root.first.raws.before = before;
+		root.source.input.css = before + root.source.input.css.slice(startNode.start, endNode.end);
+		root.source.start = start;
 
 		this.root = root;
 	}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-jsx",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "PostCSS syntax for parsing CSS in JS literals",
   "repository": {
     "type": "git",
@@ -44,11 +44,11 @@
     "@babel/core": "^7.0.0-rc.1"
   },
   "optionalDependencies": {
-    "postcss-styled": ">=0.32.0"
+    "postcss-styled": ">=0.33.0"
   },
   "peerDependencies": {
     "postcss": ">=5.0.0",
-    "postcss-syntax": ">=0.32.0"
+    "postcss-syntax": ">=0.33.0"
   },
   "devDependencies": {
     "autoprefixer": "^9.1.1",
@@ -60,6 +60,6 @@
     "postcss": "^7.0.2",
     "postcss-parser-tests": "^6.3.0",
     "postcss-safe-parser": "^4.0.1",
-    "postcss-syntax": ">=0.32.0"
+    "postcss-syntax": ">=0.33.0"
   }
 }

test/react.js

@@ -17,4 +17,28 @@ describe("react", () => {
 		expect(document.toString(syntax)).to.equal(code);
 		expect(document.nodes).to.lengthOf(3);
 	});
+
+	it("first line indentation handle", () => {
+		const code = `
+export default <img style=
+	{
+		{
+			transform: 'translate(1, 1)',
+		}
+	}
+/>;
+`;
+
+		const document = syntax.parse(code, {
+			from: "before.js",
+		});
+
+		expect(document.toString(syntax)).to.equal(code);
+		expect(document.nodes).to.lengthOf(1);
+		expect(document.first.source.input.css).to.match(/^\s+\{/);
+		expect(document.first.source.start.column).to.equal(1);
+		expect(document.first.raws.beforeStart).to.match(/\n$/);
+		expect(document.first.first.raws.before).to.match(/^\s+$/);
+		expect(document.first.first.source.start.column).to.greaterThan(1);
+	});
 });