[#27] feat: add template literal pre-processing tests

examples/js-parser/src/global/Layout.tsx

@@ -16,15 +16,6 @@ export default styled.div`
 export const RandomComponent = () => {
   const classes = ["foo", "bar"];
 
-  // All the below console.logs causes issue, but for now let's neglect it unless someone raises any issue
-  // This is because, I don't want to officially support JS/TS parsing, as it's a lot of overhead.
-  console.log(`--random: error`);
-  console.log(`-- foo: ${"foo"}`);
-  console.log(`--fuzz: ${"fuzz"}`);
-  console.log(`--flex: `, "flex");
-
-  console.log(`>>> bob--flex: `, "flex");
-
   return (
     <div className={`${classes[0]}`}>
       <p className={`baz ${classes[1] === "bar" ? "bizz" : "fizz"}`}>

jest-global-setup.js

@@ -0,0 +1,5 @@
+/* eslint-disable no-console */
+module.exports = async function (_globalConfig, _projectConfig) {
+  // console.log(globalConfig.testPathPattern);
+  // console.log(projectConfig.cache);
+};

jest.config.js

@@ -54,7 +54,7 @@ module.exports = {
   // forceCoverageMatch: [],
 
   // A path to a module which exports an async function that is triggered once before all test suites
-  // globalSetup: undefined,
+  globalSetup: "<rootDir>/jest-global-setup.js",
 
   // A path to a module which exports an async function that is triggered once after all test suites
   // globalTeardown: undefined,

package.json

@@ -324,7 +324,7 @@
     "@types/glob": "^7.2.0",
     "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.180",
-    "@types/node": "^12.20.47",
+    "@types/node": "^18.6.5",
     "@types/postcss-less": "^4.0.2",
     "@types/postcss-safe-parser": "^5.0.1",
     "@types/vscode": "1.46.0",

src/test/fixtures/edge-cases.jsx

@@ -0,0 +1,61 @@
+// ES6 imports
+import styled from 'styled';
+import { mod2 } from 'm2';
+
+// CJS
+const mod3 = require('m3');
+
+import { styled } from "@linaria/react";
+
+const StyledContainer = styled.div`
+  :root {
+    --h1: 44px;
+    --h2: 32px;
+    --h3: 24px;
+
+    --color-red: red;
+    --color-green: green;
+    --color-blue: blue;
+  }
+`;
+
+const baseClass = styled.css`
+  --base-var-1: #333;
+
+  .child {
+    --child-var-1: #222;
+  }
+`;
+
+export const RandomComponent = () => {
+  const classes = [baseClass, "bar"];
+
+  //#region Possible Edge cases for Template Literal Parsing
+  /**
+   * All the below console.logs causes issue, but for now let's neglect it unless someone raises any issue
+   * This is because, I don't want to officially support JS/TS parsing, as it's a lot of overhead.
+   */
+  // If Ever it comes to fix the below template literal, one of the solution could be to:
+  // To have a counter for colon and semi-colon, and there count should be at-least one at the
+  // end of parsing a template literal, to make sure the template-literal is possibly a CSS string.
+  console.log(`--random: error`);
+  console.log(`-- foo: ${"foo"}`);
+  console.log(`--fuzz: ${"fuzz"}`);
+  console.log(`--flex: `, "flex");
+  //#endregion
+
+  console.log(`>>> bob--flex: `, "flex");
+
+  return (
+    <StyledContainer className={`${classes[0]}`}>
+      <p className={`--baz ${classes[1] === "bar" ? "bizz" : "fizz"}`}>
+        Hell World
+      </p>
+    </StyledContainer>
+  );
+};
+
+
+export {
+  StyledContainer
+};

src/test/main.test.ts

@@ -30,13 +30,15 @@ describe("Test Extension Main", () => {
       const cssVars: CSSVarRecord = {
         "./src/01.css": [
           {
+            type: "css",
             property: "--red-A100",
             value: "red",
             theme: "",
           },
         ],
         "./src/02.css": [
           {
+            type: "css",
             property: "--red-500",
             value: "red",
             theme: "",
@@ -62,13 +64,15 @@ describe("Test Extension Main", () => {
       const cssVars: CSSVarRecord = {
         "./src/01.css": [
           {
+            type: "css",
             property: "--red-A100",
             value: "red",
             theme: "",
           },
         ],
         "./src/02.css": [
           {
+            type: "css",
             property: "--red-500",
             value: "red",
             theme: "",

src/test/parser.test.ts

@@ -173,7 +173,6 @@ describe("Test Parser", () => {
     const scssConfig: ConfigRecord = {
       [CACHE.activeRootPath]: {
         ...EXTENSION_CONFIG[CACHE.activeRootPath],
-        postcssSyntax: ["postcss-scss"],
         files: [IMPORT_SCSS_FILE],
       },
     };
@@ -229,7 +228,6 @@ describe("Multi Root", () => {
       [rootPath1]: {
         // This config will test SCSS files
         ...DEFAULT_CONFIG,
-        postcssSyntax: ["postcss-scss"],
         files: [IMPORT_SCSS_FILE],
       },
       [rootPath2]: {

src/test/pre-processors/template-literals.test.ts

@@ -0,0 +1,142 @@
+import { resolve } from "path";
+import fs from "fs";
+import preProcessContent, { JS_BLOCK } from "../../pre-processors";
+import { parseFiles } from "../../parser";
+import { CACHE, Config, CSSVarRecord, DEFAULT_CONFIG } from "../../constants";
+
+jest.mock("../../constants", () => {
+  const CONSTANTS = jest.requireActual("../../constants");
+  const activeRootPath = "foo";
+  return {
+    __esModule: true,
+    ...CONSTANTS,
+    CACHE: {
+      ...CONSTANTS.CACHE,
+      activeRootPath,
+      config: { [activeRootPath]: CONSTANTS.DEFAULT_CONFIG },
+    },
+  };
+});
+
+type ConfigRecord = { [rootPath: string]: Config };
+
+const MODIFIED_DATE = new Date("2021-04-12T08:58:58.676Z");
+const JSX_FILE_PATH = resolve(__dirname, "..", "fixtures", "edge-cases.jsx");
+const MOCK_CONFIG: ConfigRecord = {
+  [CACHE.activeRootPath]: {
+    ...DEFAULT_CONFIG,
+    files: [JSX_FILE_PATH],
+  },
+};
+
+const RESULTS = [
+  {
+    type: "css",
+    property: "--h1",
+    value: "44px",
+    theme: "",
+  },
+  {
+    type: "css",
+    property: "--h2",
+    value: "32px",
+    theme: "",
+  },
+  {
+    type: "css",
+    property: "--h3",
+    value: "24px",
+    theme: "",
+  },
+  {
+    type: "css",
+    property: "--color-red",
+    value: "red",
+    theme: "",
+    color: "rgb(255, 0, 0)",
+  },
+  {
+    type: "css",
+    property: "--color-green",
+    value: "green",
+    theme: "",
+    color: "rgb(0, 128, 0)",
+  },
+  {
+    type: "css",
+    property: "--color-blue",
+    value: "blue",
+    theme: "",
+    color: "rgb(0, 0, 255)",
+  },
+  {
+    type: "css",
+    property: "--base-var-1",
+    value: "#333",
+    theme: "",
+    color: "rgb(51, 51, 51)",
+  },
+  {
+    type: "css",
+    property: "--child-var-1",
+    value: "#222",
+    theme: "",
+    color: "rgb(34, 34, 34)",
+  },
+
+  // This should belong in WRONG_RESULTS, but for now
+  // it's fine
+  {
+    type: "css",
+    property: "--random",
+    value: "error",
+    theme: "",
+  },
+];
+
+const WRONG_RESULTS = [
+  {
+    type: "css",
+    property: "--",
+    value: JS_BLOCK,
+  },
+  {
+    type: "css",
+    property: "--fuzz",
+    value: JS_BLOCK,
+  },
+  {
+    type: "css",
+    property: "--flex",
+  },
+  {
+    type: "css",
+    property: "--baz",
+  },
+];
+
+let globalVarRecord: CSSVarRecord;
+beforeAll(() => {
+  CACHE.filesToWatch[CACHE.activeRootPath] = new Set();
+  CACHE.fileMetas = {};
+  CACHE.fileMetas[JSX_FILE_PATH] = {
+    path: JSX_FILE_PATH,
+    lastModified: +MODIFIED_DATE,
+  };
+  return parseFiles(MOCK_CONFIG).then(([varRecord, _]) => {
+    globalVarRecord = varRecord;
+    return varRecord;
+  });
+});
+
+test("should have proper variables present", () => {
+  for (const result of RESULTS) {
+    expect(globalVarRecord[JSX_FILE_PATH]).toContainEqual(expect.objectContaining(result));
+  }
+});
+
+test("should not have improper variables", () => {
+  for (const wrong of WRONG_RESULTS) {
+    expect(globalVarRecord[JSX_FILE_PATH]).not.toContainEqual(expect.objectContaining(wrong));
+  }
+});

yarn.lock

@@ -1413,10 +1413,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.0.6.tgz#0ba49ac517ad69abe7a1508bc9b3a5483df9d5d7"
   integrity sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw==
 
-"@types/node@^12.20.47":
-  version "12.20.55"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
-  integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
+"@types/node@^18.6.5":
+  version "18.6.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.6.5.tgz#06caea822caf9e59d5034b695186ee74154d2802"
+  integrity sha512-Xjt5ZGUa5WusGZJ4WJPbOT8QOqp6nDynVFRKcUt32bOgvXEoc6o085WNkYTMO7ifAj2isEfQQ2cseE+wT6jsRw==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"