@tsmodule/tsmodule 28.8.0 → 30.0.1

package/dist/commands/build/index.js

@@ -1,4 +1,4 @@
-import{dirname as R,extname as K,isAbsolute as U,resolve as F,resolve as v}from"path";import{build as h,transform as q}from"esbuild";import{existsSync as _,mkdirSync as H,readFileSync as j,rmSync as $,writeFileSync as L}from"fs";import c from"chalk";import{env as M}from"process";import Q from"fast-glob";import m from"ora";import{createDebugLogger as Y,log as y}from"create-debug-logger";import{isJsOrTs as A,isTs as S,isTsxOrJsx as p}from"../../utils/resolve.js";import{createShell as Z}from"await-shell";import{emitTsDeclarations as ee}from"./lib/emitTsDeclarations.js";import{normalizeImportSpecifiers as te}from"../normalize/index.js";import{getPackageJsonFile as oe}from"../../utils/pkgJson.js";import{getWorkingDirs as G}from"../../utils/cwd.js";import{readStdin as se}from"../../utils/stdin.js";const ie=`import React from "react";
+import{dirname as R,extname as K,isAbsolute as U,resolve as F,resolve as v}from"path";import{build as j,transform as q}from"esbuild";import{existsSync as A,mkdirSync as H,readFileSync as h,rmSync as _,writeFileSync as $}from"fs";import l from"chalk";import{env as L}from"process";import Q from"fast-glob";import m from"ora";import{createDebugLogger as Y,log as g}from"create-debug-logger";import{isJsOrTs as M,isTs as y,isTsxOrJsx as f}from"../../utils/resolve.js";import{createShell as Z}from"await-shell";import{emitTsDeclarations as ee}from"./lib/emitTsDeclarations.js";import{normalizeImportSpecifiers as te}from"../normalize/index.js";import{getPackageJsonFile as oe}from"../../utils/pkgJson.js";import{getWorkingDirs as W}from"../../utils/cwd.js";import{readStdin as se}from"../../utils/stdin.js";const ie=`import React from "react";
 import ReactDOM from "react-dom";
-`,I=t=>{const o=`  ${t}  `;y(c.bgBlue(c.bold(c.white(o))))},ne=()=>{let t;if(_("dist/package.json")?t=JSON.parse(j("dist/package.json","utf-8")):t={},t?.module==="module")return!0;t.type="module",L("dist/package.json",JSON.stringify(t,null,2))},V=(t,o,f)=>{const{srcDir:i,outDir:O}=G();return o=v(o),{stdin:{contents:t,sourcefile:o,resolveDir:R(o),loader:f},outdir:void 0,outfile:o.replace(A,".js").replace(i,O)}},re=async({files:t="src/**/*",styles:o="src/styles/components/index.css",bundle:f=!1,dev:i=!1,target:O="esnext",runtimeOnly:w=!1,noWrite:d=!1,stdin:l="",stdinFile:u=""})=>{M.NODE_ENV=i?"development":"production";const s=Y(re),W=Z(),{cwd:b,srcDir:T,outDir:a}=G(),C=await oe(),J=JSON.parse(C),k={treeShaking:f,target:O,minify:!i,format:"esm",charset:"utf8",logLevel:i?"warning":"error",define:{PACKAGE_JSON:C,"process.env.NODE_ENV":i?JSON.stringify("development"):JSON.stringify("production")}},x={...k,bundle:f,absWorkingDir:b,outbase:"src",outdir:"dist",assetNames:"[name].js",format:"esm",target:"esnext",platform:J?.platform??"node",write:!d};let g="";if(l){s.log("Building file from stdin",{stdin:l,stdinFile:u,noWrite:d}),!d&&!u&&(y(c.red("ERROR: --stdin-file must be specified when using stdin in write mode.")),process.exit(1)),typeof l=="string"&&l.length?g=l:g=await se();const e={...k,sourcefile:u,loader:"tsx",banner:void 0,footer:void 0};if(d)return(await q(g,e)).code;{const n=V(g,u,"tsx");return await h({...x,...n})}}s.log("Building",{files:t,dev:i,runtimeOnly:w}),I(`${c.bold("TS Module")} [${M.NODE_ENV}]`);const r=Q.sync(t,{cwd:b}).filter(e=>K(e)!==".d.ts").map(e=>v(e));if(U(t)){r.length||r.push(t);const e=t.replace(T,a).replace(S,".js").replace(p,".js");s.log("Cleaning emitted file:",{outfile:e}),$(e,{force:!0})}else s.log("Cleaning old output:",{outDir:a}),$(a,{force:!0,recursive:!0});console.log();const D=r.filter(e=>S.test(e)).filter(e=>!p.test(e));s.log("Compiling TS files:",{tsFiles:D}),await h({...x,entryPoints:D.filter(e=>!e.endsWith(".d.ts"))}),m("Built TS files.").succeed();const N=r.filter(e=>p.test(e));s.log("Compiling TSX files:",{tsxFiles:N});const z=N.filter(e=>!e.endsWith(".d.ts"));await Promise.all(z.map(async e=>{const n=j(e,"utf-8"),B=ie+n,P=V(B,e,"tsx");await h({...x,...P,jsxFactory:"React.createElement"})})),m("Built TSX files.").succeed();const E=r.filter(e=>!A.test(e));if(s.log("Copying non-JS/TS files.",{allFiles:r,nonJsTsFiles:E}),await Promise.all(E.map(async e=>{const n=F(b,e).replace(T,a).replace(S,".js").replace(p,".js");s.log("Copying non-source file:",{file:e,outfile:n}),H(R(n),{recursive:!0}),L(n,j(e),{encoding:"binary",flag:"w"})})),!process.env.NO_REWRITES){const e=t.replace(T,a).replace(/^(\.\/)?src\//,"dist/").replace(S,".js").replace(p,".js");await te(e.endsWith(".js")?e:`${e}.js`),m("Normalized import specifiers.").succeed()}if(ne()&&m('Forced "type": "module" in output.').succeed(),console.log(),!(i||w)){if(_(F(o))){s.log("Building styles for production.");const{style:e="./dist/styles.css"}=J,X=["npx tailwindcss",i?"":"-m","--postcss postcss.config.js",`-i ${o}`,"-o",e];await W.run(X.join(" "))}else s.log("Styles not found.",{styles:o});I("Running post-build setup."),y(`Generating type declarations.
-This might take a moment.`),ee(r),m(`Generated delcarations for ${r.length} files.`).succeed(),y(c.green("Build complete."))}};export{I as bannerLog,re as build};
+`,G=t=>{const o=`  ${t}  `;g(l.bgBlue(l.bold(l.white(o))))},ne=()=>{let t;if(A("dist/package.json")?t=JSON.parse(h("dist/package.json","utf-8")):t={},t?.module==="module")return!0;t.type="module",$("dist/package.json",JSON.stringify(t,null,2))},I=(t,o,p)=>{const{srcDir:i,outDir:S}=W();return o=v(o),{stdin:{contents:t,sourcefile:o,resolveDir:R(o),loader:p},outdir:void 0,outfile:o.replace(M,".js").replace(i,S)}},re=async({files:t="src/**/*",styles:o="src/components/index.css",bundle:p=!1,dev:i=!1,target:S="esnext",runtimeOnly:b=!1,noWrite:O=!1,stdin:c,stdinFile:d})=>{L.NODE_ENV=i?"development":"production";const s=Y(re),V=Z(),{cwd:w,srcDir:x,outDir:a}=W(),C=await oe(),J=JSON.parse(C),k={treeShaking:p,target:S,minify:!i,jsx:"transform",jsxFactory:"React.createElement",format:"esm",charset:"utf8",logLevel:i?"warning":"error",define:{PACKAGE_JSON:C,"process.env.NODE_ENV":i?JSON.stringify("development"):JSON.stringify("production")}},T={...k,bundle:p,absWorkingDir:w,outbase:"src",outdir:"dist",assetNames:"[name].js",format:"esm",target:"esnext",platform:J?.platform??"node",write:!O};let u="";if(c){s.log("Building file from stdin",{stdin:c,stdinFile:d,noWrite:O}),d||(g(l.red("ERROR: --stdin-file must be specified to emulate a file location when using stdin.")),process.exit(1)),typeof c=="string"&&c.length?u=c:u=await se();const e={...k,sourcefile:d,loader:"tsx",banner:void 0,footer:void 0};if(O)return(await q(u,e)).code;{const n=I(u,d,"tsx");return await j({...T,...n})}}s.log("Building",{files:t,dev:i,runtimeOnly:b}),G(`${l.bold("TS Module")} [${L.NODE_ENV}]`);const r=Q.sync(t,{cwd:w}).filter(e=>K(e)!==".d.ts").map(e=>v(e));if(U(t)){r.length||r.push(t);const e=t.replace(x,a).replace(y,".js").replace(f,".js");s.log("Cleaning emitted file:",{outfile:e}),_(e,{force:!0})}else s.log("Cleaning old output:",{outDir:a}),_(a,{force:!0,recursive:!0});console.log();const D=r.filter(e=>f.test(e));s.log("Compiling TSX files:",{tsxFiles:D});const z=D.filter(e=>!e.endsWith(".d.ts"));await Promise.all(z.map(async e=>{const n=h(e,"utf-8"),E=ie+n,P=I(E,e,"tsx");await j({...T,...P})})),m("Built TSX files.").succeed();const N=r.filter(e=>y.test(e)).filter(e=>!f.test(e));s.log("Compiling TS files:",{tsFiles:N}),await j({...T,entryPoints:N.filter(e=>!e.endsWith(".d.ts"))}),m("Built TS files.").succeed();const B=r.filter(e=>!M.test(e));if(s.log("Copying non-JS/TS files.",{allFiles:r,nonJsTsFiles:B}),await Promise.all(B.map(async e=>{const n=F(w,e).replace(x,a).replace(y,".js").replace(f,".js");s.log("Copying non-source file:",{file:e,outfile:n}),H(R(n),{recursive:!0}),$(n,h(e),{encoding:"binary",flag:"w"})})),!process.env.NO_REWRITES){const e=t.replace(x,a).replace(/^(\.\/)?src\//,"dist/").replace(y,".js").replace(f,".js");await te(e.endsWith(".js")?e:`${e}.js`),m("Normalized import specifiers.").succeed()}if(ne()&&m('Forced "type": "module" in output.').succeed(),console.log(),!(i||b)){if(A(F(o))){s.log("Building styles for production.");const{style:e="./dist/bundle.css"}=J,X=["npx tailwindcss",i?"":"-m","--postcss postcss.config.js",`-i ${o}`,"-o",e];await V.run(X.join(" "))}else s.log("Styles not found.",{styles:o});G("Running post-build setup."),g(`Generating type declarations.
+This might take a moment.`),ee(r),m(`Generated delcarations for ${r.length} files.`).succeed(),g(l.green("Build complete."))}};export{G as bannerLog,re as build};

package/dist/commands/create/index.js

@@ -1 +1 @@
-import a from"chalk";import{createShell as c}from"await-shell";import d from"ora";import{copyTemplate as n}from"./lib/createTemplate.js";import{rewritePkgJson as l}from"./lib/rewritePkgJson.js";globalThis.SHELL_OPTIONS={stdio:["ignore","ignore","inherit"]};const w=async(e,{react:o=!1})=>{const i=c(),s=d(`Creating new module ${a.blueBright(e)}.`).start();await n("default",e),o&&await n("react",e),await l(e),s.succeed("Project created."),process.chdir(e);const r=[],t=["@tsmodule/tsmodule"];o?(r.push("react","react-dom"),t.push("@types/react","@types/react-dom","next","eslint","eslint-config-next","tailwindcss","postcss","postcss-import","autoprefixer")):t.push("@types/node"),r.length&&await i.run(`yarn add ${r.join(" ")}`),t.length&&await i.run(`yarn add -D ${t.join(" ")}`),s.succeed("Dependencies installed."),await i.run("git init"),s.succeed("Git initialized.")};export{w as create};
+import c from"chalk";import{createShell as l}from"await-shell";import d from"ora";import{dependencies as p,devDependencies as n}from"../../constants.js";import{copyTemplate as a}from"./lib/createTemplate.js";import{rewritePkgJson as u}from"./lib/rewritePkgJson.js";globalThis.SHELL_OPTIONS={stdio:["ignore","ignore","inherit"]};const D=async(e,{react:o=!1})=>{const i=l(),r=d(`Creating new module ${c.blueBright(e)}.`).start();await a("default",e),o&&await a("react",e),await u(e),r.succeed("Project created."),process.chdir(e);const s=[],t=["@tsmodule/tsmodule"];o?(s.push(...p.react),t.push(...n.react)):t.push(...n.default),s.length&&await i.run(`yarn add ${s.join(" ")}`),t.length&&await i.run(`yarn add -D ${t.join(" ")}`),r.succeed("Dependencies installed."),await i.run("git init"),r.succeed("Git initialized.")};export{D as create};

package/dist/constants.js

@@ -0,0 +1 @@
+const t={default:[],react:["@tsmodule/react","react","react-dom"]},s={default:["@types/node"],react:["next","@types/react","@types/react-dom","eslint","eslint-config-next","tailwindcss","autoprefixer","cssnano","postcss","postcss-import"]};export{t as dependencies,s as devDependencies};

package/dist/index.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
-var r="@tsmodule/tsmodule",s="node",a="module",d="28.8.0",m="tsmodule/tsmodule",l="TypeScript Module loader and compiler",p="MIT",c={tsmodule:"dist/index.js"},u={".":"./dist/loader/index.js","./*":"./dist/*/index.js","./package.json":"./package.json"},f="dist/types/index.d.ts",g=[{name:"C. Lewis",email:"ctj.lewis@icloud.com",url:"https://ctjlewis.com"}],b=["dist/","templates/"],y={node:">=14"},h={bootstrap:"node bootstrap.js",bootload:"node --no-warnings --loader ./dist/loader/index.js src/index.ts build -r",prebuild:"yarn bootstrap && yarn bootload && yarn link -f",build:"tsmodule build",dev:"tsmodule dev",lint:"eslint --fix src",prepare:"yarn build -r",prepublishOnly:"yarn build && yarn test",pretest:"yarn build -r",test:"ava --no-worker-threads",retest:"SKIP_TEST_SETUP=1 yarn test"},v={"@types/glob":"^7.2.0","@types/node":"^17.0.21","@typescript-eslint/eslint-plugin":"^5.14.0","@typescript-eslint/parser":"^5.14.0",ava:"^4.1.0","await-shell":"^32.0.0",chalk:"^5.0.1",commander:"^9.0.0","create-debug-logger":"^3.0.0",esbuild:"^0.14.25",eslint:"^8.11.0","fast-glob":"^3.2.10","fs-extra":"^10.0.1",glob:"^7.2.0","node-watch":"^0.7.3",ora:"^6.1.0",path:"^0.12.7",typescript:"^4.6.2"},w=["esm","loader","typescript","loader hook","require hook","experimental-loader"],S={timeout:"10 minutes",files:["test/**/*.test.ts"],extensions:{ts:"module"},nodeArguments:["--no-warnings","--loader=@tsmodule/tsmodule"]},R={"@types/fs-extra":"^9.0.13"},n={name:r,platform:s,type:a,version:d,repository:m,description:l,license:p,bin:c,exports:u,types:f,contributors:g,files:b,engines:y,scripts:h,dependencies:v,keywords:w,ava:S,devDependencies:R};import t from"chalk";import{Command as x}from"commander";import{build as B}from"./commands/build/index.js";import{create as C}from"./commands/create/index.js";import{dev as E}from"./commands/dev/index.js";import{execute as T}from"./commands/execute/index.js";import{normalizeImportSpecifiers as A}from"./commands/normalize/index.js";const{version:j}=n,o=new x;o.name(t.white(t.bold("tsmodule"))).usage(t.white(t.bold("<file | command> [options]"))).description(t.blueBright(`A tool for building TypeScript modules.
+var r="@tsmodule/tsmodule",s="node",a="module",d="30.0.1",m="tsmodule/tsmodule",l="TypeScript Module loader and compiler",p="MIT",c="dist/types/index.d.ts",u={tsmodule:"dist/index.js"},f={".":"./dist/loader/index.js","./*":"./dist/*/index.js","./package.json":"./package.json"},g=["dist/","templates/"],b={node:">=14"},y={bootstrap:"node bootstrap.js",bootload:"node --no-warnings --loader ./dist/loader/index.js src/index.ts build -r",prebuild:"yarn bootstrap && yarn bootload && yarn link -f",build:"tsmodule build",dev:"tsmodule dev",lint:"eslint --fix src",prepare:"yarn build -r",prepublishOnly:"yarn build && yarn test",pretest:"yarn build -r",test:"ava --no-worker-threads",retest:"SKIP_TEST_SETUP=1 yarn test"},h={"@types/glob":"^7.2.0","@types/node":"^17.0.21","@typescript-eslint/eslint-plugin":"^5.14.0","@typescript-eslint/parser":"^5.14.0",ava:"^4.1.0","await-shell":"^32.0.0",chalk:"^5.0.1",commander:"^9.0.0","create-debug-logger":"^3.0.0",esbuild:"^0.14.25",eslint:"^8.11.0","fast-glob":"^3.2.10","fs-extra":"^10.0.1",glob:"^7.2.0","node-watch":"^0.7.3",ora:"^6.1.0",path:"^0.12.7",typescript:"^4.6.2"},v={"@types/fs-extra":"^9.0.13","eslint-config-next":"^12.1.0"},w={timeout:"10 minutes",files:["test/**/*.test.ts"],extensions:{ts:"module"},nodeArguments:["--no-warnings","--loader=@tsmodule/tsmodule"]},S=["esm","loader","typescript","loader hook","require hook","experimental-loader"],R=[{name:"C. Lewis",email:"ctj.lewis@icloud.com",url:"https://ctjlewis.com"}],n={name:r,platform:s,type:a,version:d,repository:m,description:l,license:p,types:c,bin:u,exports:f,files:g,engines:b,scripts:y,dependencies:h,devDependencies:v,ava:w,keywords:S,contributors:R};import t from"chalk";import{Command as x}from"commander";import{build as B}from"./commands/build/index.js";import{create as C}from"./commands/create/index.js";import{dev as E}from"./commands/dev/index.js";import{execute as T}from"./commands/execute/index.js";import{normalizeImportSpecifiers as A}from"./commands/normalize/index.js";const{version:j}=n,o=new x;o.name(t.white(t.bold("tsmodule"))).usage(t.white(t.bold("<file | command> [options]"))).description(t.blueBright(`A tool for building TypeScript modules.
 
 Run TS directly: ${t.bold("tsmodule src/index.ts")} 
-Use a command: ${t.bold("tsmodule build")}`)).version(String(j)),o.command("dev").description("Build and watch for changes.").action(E),o.command("build").option("--files <files>","Entrypoints to compile.\r","src/**/*").option("--styles <styles>","Specify stylesheet entrypoint.\r","src/styles/components/index.css").option("-t, --target <target>","ECMAScript featureset to target.\r","esnext").option("-b, --bundle","Bundle dependencies into entrypoints.\r",!1).option("-d, --dev","Build development runtime.\r",!1).option("-r, --runtime-only","Do not emit type declarations, only build JS runtime.\r",!1).option("--stdin [source]","Read from a string or stdin.").option("--stdin-file [file]","File path to mock for stdin.").option("--no-write",`Return code from build() rather than write to disk.
-For programmatic use alongside { stdin: ... }.`).description("Builds TS files to output in dist/.").action(async i=>{await B(i)}),o.command("create <name>").option("--react","Create React component library with Next.js").description("Create a new project.").action(C),o.command("normalize [files]").description(`Rewrites import specifiers in files to ESM-compliant paths.
+Use a command: ${t.bold("tsmodule build")}`)).version(String(j)),o.command("dev").description("Build and watch for changes.").action(E),o.command("build").description("Builds TS files to output in dist/.").option("--files <files>","Entrypoints to compile.","src/**/*").option("--styles <styles>","Specify stylesheet entrypoint.","src/components/index.css").option("-t, --target <target>","ECMAScript featureset to target.","esnext").option("-b, --bundle","Bundle dependencies into entrypoints.",!1).option("-d, --dev","Build development runtime.",!1).option("-r, --runtime-only","Do not emit type declarations, only build JS runtime.",!1).option("--stdin [source]","Read from a string or stdin.").option("--stdin-file [file]","File path to mock for stdin.").option("--no-write",`Return code from build() rather than write to disk.
+For programmatic use alongside { stdin: ... }.`,!1).action(async i=>{await B(i)}),o.command("create <name>").option("--react","Create React component library with Next.js").description("Create a new project.").action(C),o.command("normalize [files]").description(`Rewrites import specifiers in files to ESM-compliant paths.
 (default: dist/**/*.js)`).action(async({files:i})=>{await A(i)}),o.command("run",{isDefault:!0}).argument("<file>","The file to run.").option("--d, --dev","Enable development mode").description("Run the given TS program, analogous to `node <file>`.").action(T),o.parse(process.argv);

package/package.json

@@ -2,10 +2,11 @@
   "name": "@tsmodule/tsmodule",
   "platform": "node",
   "type": "module",
-  "version": "28.8.0",
+  "version": "30.0.1",
   "repository": "tsmodule/tsmodule",
   "description": "TypeScript Module loader and compiler",
   "license": "MIT",
+  "types": "dist/types/index.d.ts",
   "bin": {
     "tsmodule": "dist/index.js"
   },
@@ -14,14 +15,6 @@
     "./*": "./dist/*/index.js",
     "./package.json": "./package.json"
   },
-  "types": "dist/types/index.d.ts",
-  "contributors": [
-    {
-      "name": "C. Lewis",
-      "email": "ctj.lewis@icloud.com",
-      "url": "https://ctjlewis.com"
-    }
-  ],
   "files": [
     "dist/",
     "templates/"
@@ -62,14 +55,10 @@
     "path": "^0.12.7",
     "typescript": "^4.6.2"
   },
-  "keywords": [
-    "esm",
-    "loader",
-    "typescript",
-    "loader hook",
-    "require hook",
-    "experimental-loader"
-  ],
+  "devDependencies": {
+    "@types/fs-extra": "^9.0.13",
+    "eslint-config-next": "^12.1.0"
+  },
   "ava": {
     "timeout": "10 minutes",
     "files": [
@@ -83,7 +72,19 @@
       "--loader=@tsmodule/tsmodule"
     ]
   },
-  "devDependencies": {
-    "@types/fs-extra": "^9.0.13"
-  }
+  "keywords": [
+    "esm",
+    "loader",
+    "typescript",
+    "loader hook",
+    "require hook",
+    "experimental-loader"
+  ],
+  "contributors": [
+    {
+      "name": "C. Lewis",
+      "email": "ctj.lewis@icloud.com",
+      "url": "https://ctjlewis.com"
+    }
+  ]
 }

package/templates/react/README.md

@@ -39,10 +39,10 @@ To reuse your components:
 
 #### Footnotes
 
-Styles are exported in `dist/`, and are also bundled to `dist/styles.css` from
+Styles are exported in `dist/`, and are also bundled to `dist/bundle.css` from
 the entrypoint given in the `style` package.json.
 
 The default behavior is to export all component styles, i.e.
-`src/styles/components/index.css ➞ dist/styles.css`.  This can be overridden
+`src/styles/components/index.css ➞ dist/bundle.css`.  This can be overridden
 with tsmodule's `--styles` flag, i.e. `tsmodule build --styles
 src/styles/index.css` (which would include all styles in emitted bundle).

package/templates/react/package.json

@@ -4,14 +4,14 @@
   "version": "0.0.1",
   "license": "MIT",
   "types": "dist/index.d.ts",
-  "style": "dist/styles.css",
+  "style": "dist/bundle.css",
   "files": [
     "dist"
   ],
   "exports": {
     ".": "./dist/index.js",
-    "./styles": "./dist/styles/index.css",
-    "./styles/*": "./dist/styles/*/index.css",
+    "./styles": "./dist/bundle.css",
+    "./styles/*": "./dist/components/*/index.css",
     "./package.json": "./package.json",
     "./*": "./dist/components/*/index.js"
   },

package/templates/react/postcss.config.js

@@ -1,7 +1,11 @@
 module.exports = {
   plugins: {
+    /**
+     * PostCSS import resolution must come first.
+     */
     "postcss-import": {},
     tailwindcss: {},
     autoprefixer: {},
+    ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {})
   },
-}
+};

package/templates/react/src/{styles/components/card → components/Card}/index.css

@@ -15,4 +15,8 @@
 
 .card > p {
   @apply text-gray-700;
+}
+
+.test {
+  @apply flex-pure;
 }

package/templates/react/src/components/index.css

@@ -0,0 +1,19 @@
+/**
+ * @fileoverview 
+ * COMPONENT STYLES
+ *
+ * This file loads all styles needed to render any of the module components, and
+ * does not include, e.g., the standardized viewport styles (which would alter
+ * the sizing of html, body, ... in any layouts that relied it).
+ */
+
+/**
+ * ❌ DO NOT CHANGE: Load standardized styles that may be relied on by component
+ * styles.
+ */
+@import "@tsmodule/react";
+
+/**
+ * 📝 EXPORT COMPONENT STYLES: Load your component style exports here as needed.
+ */
+@import "./Card/index.css";

package/templates/react/src/index.css

@@ -0,0 +1,20 @@
+/**
+ * @fileoverview
+ * APPLICATION STYLES
+ *
+ * This stylesheet includes all styles needed to render the entire viewport,
+ * namely Tailwind utilities, standardized viewport styles, and all component
+ * styles.
+ */
+
+/**
+ * Load Tailwind utilities.
+ */
+@import "tailwindcss/base";
+@import "tailwindcss/utilities";
+@import "tailwindcss/components";
+
+/**
+ * Load this module's component styles.
+ */
+@import "./components/index.css";

package/templates/react/src/pages/_app.tsx

@@ -1,8 +1,9 @@
-import "../styles/index.css";
+import "../index.css";
+
 import type { AppProps } from "next/app";
 import { StrictMode } from "react";
 
-function MyApp({ Component, pageProps }: AppProps) {
+function App({ Component, pageProps }: AppProps) {
   return (
     <StrictMode>
       <Component {...pageProps} />
@@ -10,4 +11,4 @@ function MyApp({ Component, pageProps }: AppProps) {
   );
 }
 
-export default MyApp;
+export default App;

package/templates/react/tailwind.config.js

@@ -10,8 +10,6 @@ module.exports = {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))"
       },
       border : [ "hover"],
-        
-      
     },
   },
   variants: {

package/templates/react/src/styles/components/index.css

@@ -1 +0,0 @@
-@import './card/index.css';

package/templates/react/src/styles/global/elements/index.css

@@ -1,266 +0,0 @@
-/* FONTS: Customize */
-/* Style your serif font here. */
-.serif {
-  font-family: serif;
-}
-
-/* Style your sans font here. */
-.sans-serif {
-  font-family: sans-serif;
-}
-
-/* Style your display font here. */
-.display {}
-
-/* Style your interface font here. */
-.interface {
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-  Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-/* LINKS */
-a {
-  @apply underline;
-  color: inherit;
-  text-decoration: none;
-}
-
-h1 a,
-h2 a,
-h3 a,
-h4 a,
-h5 a,
-h6 a {
-  color: #0070f3;
-}
-
-/* If the user can hover, transition in by default. */
-@media (hover: hover) {
-  a {
-    transition: 300ms;
-    text-decoration: underline;
-    text-decoration-color: transparent;
-  }
-
-  a:hover {
-    text-decoration-color: inherit;
-  }
-}
-
-/* FONT SIZES */
-@media (min-width: 769px) {
-  html {
-    font-size: 1.25em;
-  }
-}
-
-@media (min-width: 1081px) {
-  html {
-    font-size: 1.5em;
-  }
-}
-
-@media (min-width: 1921px) {
-  html {
-    font-size: 2.5em;
-  }
-}
-
-/* HEADINGS */
-
-h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4,
-h5, .h5,
-h6, .h6 {
-  @apply font-bold display;
-  @apply pb-2 leading-snug;
-}
-
-h1, .h1 {
-  @apply text-4xl;
-}
-
-h2, .h2 {
-  @apply text-2xl;
-}
-
-h3, .h3 {
-  @apply text-xl;
-}
-
-h4, .h4 {
-  @apply text-lg;
-}
-
-h5, .h5 {
-  @apply text-base;
-}
-
-h6, .h6 {
-  @apply text-sm;
-}
-
-p {
-  @apply text-base;
-}
-
-.title {
-  @apply mt-2 display font-bold;
-}
-
-.title p {
-  @apply p-0 m-0;
-}
-
-/* FLEX */
-
-/**
-  * A container that expands to fill its parent.
-  */
-.expanded {
-  @apply h-full w-full;
-}
-/**
-  * A flex container that is filled by its content.
-  */
-.filled {
-  @apply flex flex-1 items-stretch;
-}
-/**
-  * A pure-flex container will be display: flex.
-  */
-.pure-flex {
-  @apply flex;
-}
-/**
-  * And its immediate children will have zero padding and margin.
-  */
-.pure-flex > * {
-  @apply m-0 p-0;
-}
-/*
-  * A flex container centered along both axes.
-  */
-.flex-center {
-  @apply flex justify-center items-center;
-}
-/**
-  * Center flex and text.
-  */
-.center {
-  @apply flex-center text-center;
-}
-
-/* CONTENT */
-
-code {}
-
-main {
-  @apply flex-center flex-col space-y-8 md:space-y-16;
-  @apply min-h-full w-full;
-  @apply px-4 py-16;
-}
-
-header {
-  z-index: 9999;
-}
-
-footer {
-  @apply flex-center py-4 border-t-2 border-gray-200;
-}
-
-article {
-  @apply text-lg serif mx-auto;
-  @apply max-w-screen-sm lg:max-w-screen-lg 2xl:max-w-screen-2xl 4xl:max-w-screen-4xl;
-}
-
-/* FORMS */
-
-button, .button {
-  @apply cursor-pointer;
-  @apply pure-flex flex-center;
-  @apply px-8 py-4;
-  @apply rounded-lg border-2;
-  @apply bg-blue-500 text-white font-bold;
-
-  text-decoration: none !important;
-}
-
-label {
-  @apply p-4 font-light;
-}
-
-input {
-  @apply border-2 border-gray-300 rounded-lg;
-  @apply p-2;
-}
-
-select {
-  @apply bg-white;
-  @apply border-2 border-gray-300 rounded-lg;
-  @apply p-2;
-}
-
-/* Buttons already signal that the user can interact by touching. */
-button, .button {
-  text-decoration: none !important;
-  @apply cursor-pointer;
-  @apply pure-flex flex-center;
-  @apply px-8 py-4;
-  @apply rounded-lg border-2;
-  @apply bg-blue-500 text-white font-bold;
-}
-
-/* TABLES */
-
-table {
-  @apply mx-auto w-full;
-}
-
-table tr, table tr div {
-  @apply truncate;
-}
-
-table tr:nth-child(even) {
-  /* @apply bg-gray-400; */
-}
-
-
-.squish {
-  animation-name: squish;
-  animation-timing-function: ease;
-  animation-duration: 2s;
-  animation-iteration-count: 1;
-}
-
-@keyframes squish {
-  0% {
-    transform: scale(1, 1);
-  }
-
-  10% {
-    transform: scale(1.1, 0.9);
-  }
-
-  30% {
-    transform: scale(0.9, 1.1);
-  }
-
-  50% {
-    transform: scale(1.05, 0.95);
-  }
-
-  57% {
-    transform: scale(1, 1);
-  }
-
-  64% {
-    transform: scale(1, 1);
-  }
-
-  100% {
-    transform: scale(1, 1);
-  }
-}

package/templates/react/src/styles/global/index.css

@@ -1,2 +0,0 @@
-@import './viewport/index.css';
-@import './elements/index.css';

package/templates/react/src/styles/global/viewport/index.css

@@ -1,11 +0,0 @@
-/*
- * Ensure the page fills the viewport. Prevent purgecss from removing this
- * styling, which it likes to do for the #__next selector.
- */
-/* purgecss start ignore */
-html, body, #__next {
-  @apply m-0 p-0 box-border;
-  @apply min-h-screen;
-  @apply w-full h-full;
-}
-/* purgecss end ignore */

package/templates/react/src/styles/index.css

@@ -1,6 +0,0 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/utilities';
-@import 'tailwindcss/components';
-
-@import './global/index.css';
-@import './components/index.css';

package/templates/react/src/utils/globs.ts

@@ -1 +0,0 @@
-export const PRODUCTION = process.env.NODE_ENV === 'production';