Merge pull request #8 from marko-js/ts-js-style-support

feat: add ts/js style support, improve style formatting

.lintstagedrc.json

@@ -1,4 +1,4 @@
 {
-  "*.ts": ["eslint -f codeframe --fix", "prettier --write"],
+  "*.ts": ["eslint --fix", "prettier --write"],
   "*{.js,.json,.md,.yml,rc}": ["prettier --write"]
 }

package.json

@@ -5,32 +5,32 @@
   "author": "Dylan Piercey <[email protected]>",
   "bugs": "https://github.com/marko-js/prettier/issues",
   "devDependencies": {
-    "@commitlint/cli": "^13.2.1",
-    "@commitlint/config-conventional": "^13.2.0",
-    "@istanbuljs/nyc-config-typescript": "^1.0.1",
-    "@marko/compiler": "^5.16.0",
-    "@marko/translator-default": "^5.16.0",
-    "@types/mocha": "^9.0.0",
-    "@types/node": "^16.10.3",
-    "@types/prettier": "^2.4.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@commitlint/cli": "^16.2.3",
+    "@commitlint/config-conventional": "^16.2.1",
+    "@istanbuljs/nyc-config-typescript": "^1.0.2",
+    "@marko/compiler": "^5.20.5",
+    "@marko/translator-default": "^5.20.5",
+    "@types/mocha": "^9.1.1",
+    "@types/node": "^17.0.25",
+    "@types/prettier": "^2.6.0",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
     "codecov": "^3.8.3",
-    "esbuild": "^0.13.4",
-    "esbuild-register": "^3.0.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "fast-glob": "^3.2.7",
+    "esbuild": "^0.14.38",
+    "esbuild-register": "^3.3.2",
+    "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.5.0",
+    "fast-glob": "^3.2.11",
     "fixpack": "^4.0.0",
-    "husky": "^7.0.2",
-    "lint-staged": "^11.2.3",
-    "marko": "^5.15.10",
-    "mocha": "^9.1.2",
-    "mocha-snap": "^4.0.2",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.4.0",
+    "marko": "^5.20.5",
+    "mocha": "^9.2.2",
+    "mocha-snap": "^4.3.0",
     "nyc": "^15.1.0",
-    "prettier": "^2.3.2",
-    "semantic-release": "^18.0.0",
-    "typescript": "^4.4.3"
+    "prettier": "^2.6.2",
+    "semantic-release": "^19.0.2",
+    "typescript": "^4.6.3"
   },
   "exports": {
     ".": {
@@ -54,7 +54,7 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "peerDependencies": {
-    "@marko/compiler": "^5.16.0",
+    "@marko/compiler": "^5.20.5",
     "prettier": "^2"
   },
   "publishConfig": {

src/__tests__/__snapshots__/style-js.expected/auto.marko

@@ -0,0 +1,5 @@
+<style.js/{ title }>
+  export const title = style({
+    backgroundColor: "red",
+  });
+</style>

src/__tests__/__snapshots__/style-js.expected/concise.marko

@@ -0,0 +1,6 @@
+style.js/{ title }
+  --
+  export const title = style({
+    backgroundColor: "red",
+  });
+  --

src/__tests__/__snapshots__/style-js.expected/html.marko

@@ -0,0 +1,5 @@
+<style.js/{ title }>
+  export const title = style({
+    backgroundColor: "red",
+  });
+</style>

src/__tests__/__snapshots__/style-js.expected/with-parens.marko

@@ -0,0 +1,5 @@
+<style.js/{ title }>
+  export const title = style({
+    backgroundColor: "red",
+  });
+</style>

src/__tests__/fixtures/style-js.marko

@@ -0,0 +1,4 @@
+<style.js/{ title }>
+  export const title = style({
+backgroundColor: "red" });
+</style>

src/constants.ts

@@ -29,7 +29,7 @@ export type Node = t.Node | MarkoEmbedNode;
 
 export const enclosedNodeTypeReg =
   /^(?:Identifier|.*Literal|(?:Object|Array|Parenthesized|Record|Tuple)Expression)$/;
-export const styleReg = /^style(?:\.([^\s]+))?\s*\{?/;
+export const styleReg = /^style((?:\.[^\s\\/:*?"<>|({]+)+)?\s*\{?/;
 export const voidHTMLReg =
   /^(?:area|b(?:ase|r)|col|embed|hr|i(?:mg|nput)|keygen|link|meta|param|source|track|wbr)$/;
 export const shorthandIdOrClassReg =

src/index.ts

@@ -30,7 +30,7 @@ import asLiteralTextContent from "./utils/as-literal-text-content";
 
 const defaultFilePath = resolve("index.marko");
 const { builders: b } = doc;
-const identity = <T extends unknown>(val: T) => val;
+const identity = <T>(val: T) => val;
 
 export const languages: SupportLanguage[] = [
   {
@@ -43,7 +43,7 @@ export const languages: SupportLanguage[] = [
     vscodeLanguageIds: ["marko"],
     linguistLanguageId: 932782397,
     codemirrorMimeType: "text/html",
-    extensions: [".marko", ".ts.marko"],
+    extensions: [".marko"],
   },
 ];
 
@@ -245,12 +245,12 @@ export const printers: Record<string, Printer<Node>> = {
             if (literalTagName === "script") {
               embedMode = "script";
             } else if (literalTagName === "style") {
-              const [startContent, lang = "css"] = styleReg.exec(
+              const [startContent, lang = ".css"] = styleReg.exec(
                 node.rawValue || literalTagName
               )!;
 
               embedMode = `style.${
-                getFileInfo.sync(`${opts.filepath}.${lang}`).inferredParser
+                getFileInfo.sync(opts.filepath + lang).inferredParser
               }`;
 
               if (startContent.endsWith("{")) {
@@ -264,7 +264,7 @@ export const printers: Record<string, Printer<Node>> = {
 
                 return b.group([
                   "style",
-                  lang === "css" ? "" : `.${lang}`,
+                  lang === ".css" ? "" : lang,
                   " {",
                   b.indent([b.line, callEmbed(print, path, embedMode, code)]),
                   b.line,
@@ -284,6 +284,8 @@ export const printers: Record<string, Printer<Node>> = {
             );
           }
 
+          const shorthandIndex = doc.push("") - 1;
+
           if (node.var) {
             doc.push(
               "/",
@@ -339,10 +341,8 @@ export const printers: Record<string, Printer<Node>> = {
                 shorthandIdOrClassReg.test(childNode.value.value)
               ) {
                 const symbol = childNode.name === "class" ? "." : "#";
-                doc.push(
-                  symbol,
-                  childNode.value.value.split(/ +/).join(symbol)
-                );
+                doc[shorthandIndex] +=
+                  symbol + childNode.value.value.split(/ +/).join(symbol);
               } else if ((childNode as t.MarkoAttribute).default) {
                 doc.push(print(childPath));
               } else {