@tsmodule/tsmodule 17.1.1 → 19.0.0

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="assets/tsmodule.png">
+  <img src="tsmodule.png">
   <h4>TypeScript Module Toolkit</h4>
 </div>
 

package/dist/commands/build/index.js

@@ -1,3 +1,3 @@
-import{build as T}from"esbuild";import{extname as E,isAbsolute as F,resolve as N,resolve as u}from"path";import{existsSync as O,readFileSync as x,rmSync as h,writeFileSync as D}from"fs";import l from"chalk";import{copy as P}from"fs-extra";import{env as w}from"process";import B from"fast-glob";import c from"ora";import{createDebugLogger as C,log as d}from"create-debug-logger";import{isJsOrTs as W,isTs as m,isTsxOrJsx as a}from"../../utils/index.js";import{emitTsDeclarations as $}from"./lib/emitTsDeclarations.js";import{getPackageJsonFile as v}from"../../utils/pkgJson.js";import{normalizeImportSpecifiers as G}from"../normalize/index.js";const J=t=>{const s=`  ${t}  `;d(l.bgBlue(l.bold(l.white(s))))},_=()=>{let t;if(O("dist/package.json")?t=JSON.parse(x("dist/package.json","utf-8")):t={},t?.module==="module")return!0;t.type="module",D("dist/package.json",JSON.stringify(t,null,2))},A=async({files:t="src/**/*",dev:s=!1,fast:g=!1})=>{w.NODE_ENV=s?"development":"production";const r=C(A);r.log("Building",{files:t,dev:s,fast:g}),J(`${l.bold("TS Module")} [${w.NODE_ENV}]`);const k=await v(),i=process.cwd(),f={absWorkingDir:i,outbase:"src",outdir:"dist",assetNames:"[name].js",logLevel:s?"warning":"error",charset:"utf8",format:"esm",target:"esnext",minify:!s,define:{PACKAGE_JSON:k}},p=u(i,"src"),n=u(i,"dist"),o=B.sync(t,{cwd:i}).filter(e=>E(e)!==".d.ts").map(e=>u(e));if(F(t)){o.length||o.push(t);const e=t.replace(p,n).replace(m,".js").replace(a,".js");r.log("Cleaning emitted file:",{outfile:e}),h(e,{force:!0})}else r.log("Cleaning old output:",{outDir:n}),h(n,{force:!0,recursive:!0});console.log();const y=o.filter(e=>m.test(e)).filter(e=>!a.test(e));r.log("Compiling TS files:",{tsFiles:y}),await T({...f,entryPoints:y.filter(e=>!e.endsWith(".d.ts"))}),c("Built TS files.").succeed();const S=o.filter(e=>a.test(e));r.log("Compiling TSX files:",{tsxFiles:S}),await T({...f,entryPoints:S.filter(e=>!e.endsWith(".d.ts")),jsxFactory:"createElement",banner:{js:`import { createElement } from "react";
-`}}),c("Built TSX files.").succeed();const b=o.filter(e=>!W.test(e));if(r.log("Copying non-JS/TS files.",{allFiles:o,nonJsTsFiles:b}),await Promise.all(b.map(async e=>{const j=N(i,e).replace(p,n).replace(m,".js").replace(a,".js");r.log("Copying non-source file:",{file:e,outfile:j}),await P(e,j)})),!process.env.NO_REWRITES){const e=t.replace(p,n).replace(/^(\.\/)?src\//,"dist/").replace(m,".js").replace(a,".js");await G(e.endsWith(".js")?e:`${e}.js`),c("Normalized import specifiers.").succeed()}_()&&c('Forced "type": "module" in output.').succeed(),console.log(),!(s||g)&&(J("Running post-build setup."),d(`Generating type declarations.
-This might take a moment.`),$(o),c(`Generated delcarations for ${o.length} files.`).succeed(),d(l.green("Build complete.")))};export{J as bannerLog,A as build};
+import{dirname as B,extname as C,isAbsolute as D,resolve as b,resolve as g}from"path";import{build as h}from"esbuild";import{existsSync as J,mkdirSync as W,readFileSync as k,rmSync as T,writeFileSync as x}from"fs";import c from"chalk";import{env as P}from"process";import $ from"fast-glob";import a from"ora";import{createDebugLogger as v,log as u}from"create-debug-logger";import{getPackageJson as G,getPackageJsonFile as _}from"../../utils/pkgJson.js";import{isJsOrTs as A,isTs as p,isTsxOrJsx as m}from"../../utils/index.js";import{createShell as I}from"await-shell";import{emitTsDeclarations as L}from"./lib/emitTsDeclarations.js";import{normalizeImportSpecifiers as M}from"../normalize/index.js";const E=s=>{const t=`  ${s}  `;u(c.bgBlue(c.bold(c.white(t))))},R=()=>{let s;if(J("dist/package.json")?s=JSON.parse(k("dist/package.json","utf-8")):s={},s?.module==="module")return!0;s.type="module",x("dist/package.json",JSON.stringify(s,null,2))},z=async({files:s="src/**/*",dev:t=!1,fast:f=!1})=>{P.NODE_ENV=t?"development":"production";const F=I(),o=v(z);o.log("Building",{files:s,dev:t,fast:f}),E(`${c.bold("TS Module")} [${P.NODE_ENV}]`);const N=await _(),r=process.cwd(),y={absWorkingDir:r,outbase:"src",outdir:"dist",assetNames:"[name].js",logLevel:t?"warning":"error",charset:"utf8",format:"esm",target:"esnext",minify:!t,define:{PACKAGE_JSON:N}},d=g(r,"src"),n=g(r,"dist"),i=$.sync(s,{cwd:r}).filter(e=>C(e)!==".d.ts").map(e=>g(e));if(D(s)){i.length||i.push(s);const e=s.replace(d,n).replace(p,".js").replace(m,".js");o.log("Cleaning emitted file:",{outfile:e}),T(e,{force:!0})}else o.log("Cleaning old output:",{outDir:n}),T(n,{force:!0,recursive:!0});console.log();const w=i.filter(e=>p.test(e)).filter(e=>!m.test(e));o.log("Compiling TS files:",{tsFiles:w}),await h({...y,entryPoints:w.filter(e=>!e.endsWith(".d.ts"))}),a("Built TS files.").succeed();const S=i.filter(e=>m.test(e));o.log("Compiling TSX files:",{tsxFiles:S}),await h({...y,entryPoints:S.filter(e=>!e.endsWith(".d.ts")),jsxFactory:"createElement",banner:{js:`import { createElement } from "react";
+`}}),a("Built TSX files.").succeed();const j=i.filter(e=>!A.test(e));if(o.log("Copying non-JS/TS files.",{allFiles:i,nonJsTsFiles:j}),await Promise.all(j.map(async e=>{const l=b(r,e).replace(d,n).replace(p,".js").replace(m,".js");o.log("Copying non-source file:",{file:e,outfile:l}),W(B(l),{recursive:!0}),x(l,k(e),{encoding:"binary",flag:"w"})})),!process.env.NO_REWRITES){const e=s.replace(d,n).replace(/^(\.\/)?src\//,"dist/").replace(p,".js").replace(m,".js");await M(e.endsWith(".js")?e:`${e}.js`),a("Normalized import specifiers.").succeed()}if(R()&&a('Forced "type": "module" in output.').succeed(),console.log(),!(t||f)){if(J(b("src","styles","components","index.css"))){o.log("Build minified component styles from styles/components.");const e=await G(),{style:l="./dist/styles.css"}=e,O=["npx tailwindcss",t?"":"-m","--postcss postcss.config.js","-i src/styles/components/index.css","-o",l];await F.run(O.join(" "))}E("Running post-build setup."),u(`Generating type declarations.
+This might take a moment.`),L(i),a(`Generated delcarations for ${i.length} files.`).succeed(),u(c.green("Build complete."))}};export{E as bannerLog,z 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{createTemplate as o}from"./lib/createTemplate.js";import{rewritePkgJson as l}from"./lib/rewritePkgJson.js";globalThis.SHELL_OPTIONS={stdio:["ignore","ignore","inherit"]};const w=async(e,{react:n=!1})=>{const t=c(),i=d(`Creating new module ${a.blueBright(e)}.`).start();await o("default",e),n&&await o("react",e),await l(e),i.succeed("Project created."),process.chdir(e);const r=[],s=["@tsmodule/tsmodule"];n&&(r.push("react","react-dom"),s.push("@types/react","@types/react-dom","next","eslint-config-next","tailwindcss","postcss","autoprefixer")),r.length&&await t.run(`yarn add ${r.join(" ")}`),s.length&&await t.run(`yarn add -D ${s.join(" ")}`),i.succeed("Dependencies installed."),await t.run("git init"),i.succeed("Git initialized.")};export{w as create};
+import a from"chalk";import{createShell as c}from"await-shell";import d from"ora";import{createTemplate 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 t=c(),i=d(`Creating new module ${a.blueBright(e)}.`).start();await n("default",e),o&&await n("react",e),await l(e),i.succeed("Project created."),process.chdir(e);const r=[],s=["@tsmodule/tsmodule"];o&&(r.push("react","react-dom"),s.push("@types/react","@types/react-dom","next","eslint","eslint-config-next","tailwindcss","postcss","postcss-import","autoprefixer")),r.length&&await t.run(`yarn add ${r.join(" ")}`),s.length&&await t.run(`yarn add -D ${s.join(" ")}`),i.succeed("Dependencies installed."),await t.run("git init"),i.succeed("Git initialized.")};export{w as create};

package/dist/commands/dev/index.js

@@ -1,3 +1,3 @@
-import{relative as a,resolve as m}from"path";import{build as s}from"../build/index.js";import r from"chalk";import{createShell as p}from"await-shell";import{existsSync as u,lstatSync as f}from"fs";import{log as d}from"create-debug-logger";import w from"ora";import g from"node-watch";const o=()=>{console.clear()},i=t=>{d(`
+import{existsSync as a,lstatSync as m}from"fs";import{relative as p,resolve as f}from"path";import{build as s}from"../build/index.js";import r from"chalk";import{createShell as u}from"await-shell";import{log as d}from"create-debug-logger";import w from"ora";import v from"node-watch";const o=()=>{console.clear()},i=t=>{d(`
 `,r.gray(`Built ${r.bold(t)}.`),`
-`,r.blue(new Date().toLocaleString()))},L=async()=>{const t=process.cwd(),n=p();process.platform!=="win32"&&await n.run("clear"),o(),await s({dev:!0}),i("src/**/*"),g(m(t,"src"),{recursive:!0,persistent:!0}).on("change",async(v,e)=>{if(!u(e)||!f(e).isFile())return;o();const c=Date.now();await s({dev:!0,files:e});const l=Date.now()-c;w(r.blueBright(`Dev refresh finished in ${r.bold(`${l}ms`)}.`)).succeed(),i(a(t,e))})};export{L as dev};
+`,r.blue(new Date().toLocaleString()))},O=async()=>{const t=process.cwd(),c=u();process.platform!=="win32"&&await c.run("clear"),o(),await s({dev:!0}),i("src/**/*"),v(f(t,"src"),{recursive:!0}).on("change",async(D,e)=>{if(!a(e)||m(e).isDirectory())return;o();const n=Date.now();await s({dev:!0,files:e});const l=Date.now()-n;w(r.blueBright(`Dev refresh finished in ${r.bold(`${l}ms`)}.`)).succeed(),i(p(t,e))})};export{O as dev};

package/dist/index.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-var r="@tsmodule/tsmodule",a="module",m="17.1.1",d="tsmodule/tsmodule",s="TypeScript Module loader and compiler",l="MIT",c={tsmodule:"dist/index.js"},p={".":"./dist/loader/index.js","./*":"./dist/*/index.js","./package.json":"./package.json"},u="dist/types/index.d.ts",f=[{name:"C. Lewis",email:"ctj.lewis@icloud.com",url:"https://ctjlewis.com"}],b=["dist/","templates/"],v={node:">=14"},g={bootstrap:"node bootstrap.js",bootload:"node --no-warnings --loader ./dist/loader/index.js src/index.ts build -f",prebuild:"yarn bootstrap && yarn bootload && yarn link -f",build:"tsmodule build",dev:"tsmodule dev",lint:"eslint --fix src",prepare:"yarn build -f",prepublishOnly:"yarn build && yarn test",pretest:"yarn build -f",test:"ava --no-worker-threads"},h={"@types/glob":"^7.2.0","@types/node":"^17.0.15","@typescript-eslint/eslint-plugin":"^5.9.1","@typescript-eslint/parser":"^5.9.1",ava:"^4.0.1","await-shell":"^29.0.1-0",chalk:"^5.0.0",commander:"^8.3.0","create-debug-logger":"^1.10.1",esbuild:"^0.14.0",eslint:"^8.8.0","fast-glob":"^3.2.10","fs-extra":"^10.0.0",glob:"^7.2.0","node-watch":"^0.7.3",ora:"^6.0.1",path:"^0.12.7",typescript:"^4.5.5"},S=["esm","loader","typescript","loader hook","require hook","experimental-loader"],w={timeout:"10 minutes",files:["test/**/*.test.ts"],extensions:{ts:"module"},nodeArguments:["--no-warnings","--loader=@tsmodule/tsmodule"]},y={"@types/fs-extra":"^9.0.13"},t={name:r,type:a,version:m,repository:d,description:s,license:l,bin:c,exports:p,types:u,contributors:f,files:b,engines:v,scripts:g,dependencies:h,keywords:S,ava:w,devDependencies:y};import e from"chalk";import{Command as T}from"commander";import{build as B}from"./commands/build/index.js";import{create as C}from"./commands/create/index.js";import{dev as R}from"./commands/dev/index.js";import{execute as j}from"./commands/execute/index.js";import{normalizeImportSpecifiers as x}from"./commands/normalize/index.js";const{version:A}=t,i=new T;i.name(e.white(e.bold("tsmodule"))).usage(e.white(e.bold("<file | command> [options]"))).description(e.blueBright(`A tool for building TypeScript modules.
+var r="@tsmodule/tsmodule",a="module",m="19.0.0",d="tsmodule/tsmodule",s="TypeScript Module loader and compiler",l="MIT",c={tsmodule:"dist/index.js"},p={".":"./dist/loader/index.js","./*":"./dist/*/index.js","./package.json":"./package.json"},u="dist/types/index.d.ts",f=[{name:"C. Lewis",email:"ctj.lewis@icloud.com",url:"https://ctjlewis.com"}],b=["dist/","templates/"],v={node:">=14"},g={bootstrap:"node bootstrap.js",bootload:"node --no-warnings --loader ./dist/loader/index.js src/index.ts build -f",prebuild:"yarn bootstrap && yarn bootload && yarn link -f",build:"tsmodule build",dev:"tsmodule dev",lint:"eslint --fix src",prepare:"yarn build -f",prepublishOnly:"yarn build && yarn test",pretest:"yarn build -f",test:"ava --no-worker-threads"},h={"@types/glob":"^7.2.0","@types/node":"^17.0.15","@typescript-eslint/eslint-plugin":"^5.9.1","@typescript-eslint/parser":"^5.9.1",ava:"^4.0.1","await-shell":"^29.0.1-0",chalk:"^5.0.0",commander:"^8.3.0","create-debug-logger":"^1.10.1",esbuild:"^0.14.0",eslint:"^8.8.0","fast-glob":"^3.2.10","fs-extra":"^10.0.0",glob:"^7.2.0","node-watch":"^0.7.3",ora:"^6.0.1",path:"^0.12.7",typescript:"^4.5.5"},S=["esm","loader","typescript","loader hook","require hook","experimental-loader"],w={timeout:"10 minutes",files:["test/**/*.test.ts"],extensions:{ts:"module"},nodeArguments:["--no-warnings","--loader=@tsmodule/tsmodule"]},y={"@types/fs-extra":"^9.0.13"},t={name:r,type:a,version:m,repository:d,description:s,license:l,bin:c,exports:p,types:u,contributors:f,files:b,engines:v,scripts:g,dependencies:h,keywords:S,ava:w,devDependencies:y};import e from"chalk";import{Command as T}from"commander";import{build as B}from"./commands/build/index.js";import{create as C}from"./commands/create/index.js";import{dev as R}from"./commands/dev/index.js";import{execute as j}from"./commands/execute/index.js";import{normalizeImportSpecifiers as x}from"./commands/normalize/index.js";const{version:A}=t,i=new T;i.name(e.white(e.bold("tsmodule"))).usage(e.white(e.bold("<file | command> [options]"))).description(e.blueBright(`A tool for building TypeScript modules.
 
 Run TS directly: ${e.bold("tsmodule src/index.ts")} 
 Use a command: ${e.bold("tsmodule build")}`)).version(String(A)),i.command("dev").description("Build and watch for changes.").action(R),i.command("build").option("--files <files>","The files to build (default: all)").option("-d, --dev","Build development version").option("-f, --fast","Do not emit type declarations, only transform to JS").description("Builds TS files to output in dist/.").action(B),i.command("create <name>").option("--react","Create React component library with Next.js").description("Create a new project.").action(C),i.command("normalize [files]").description(`Rewrites import specifiers in files to ESM-compliant paths.

package/dist/utils/pkgJson.js

@@ -1 +1 @@
-import{readFileSync as c}from"fs";import{resolve as r}from"path";const a=async()=>{const o=process.cwd(),e=r(o,"package.json");return c(e,"utf-8")};export{a as getPackageJsonFile};
+import{readFileSync as s}from"fs";import{resolve as n}from"path";const t=async()=>{const e=process.cwd(),o=n(e,"package.json");return s(o,"utf-8")},p=async()=>{const e=await t();return JSON.parse(e)};export{p as getPackageJson,t as getPackageJsonFile};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tsmodule/tsmodule",
   "type": "module",
-  "version": "17.1.1",
+  "version": "19.0.0",
   "repository": "tsmodule/tsmodule",
   "description": "TypeScript Module loader and compiler",
   "license": "MIT",

package/templates/default/package.json

@@ -13,6 +13,7 @@
     "./*": "./dist/*/index.js"
   },
   "scripts": {
+    "dev": "tsmodule dev",
     "build": "tsmodule build",
     "test": "ava",
     "lint": "eslint src --fix",

package/templates/react/package.json

@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "license": "MIT",
   "types": "dist/index.d.ts",
+  "style": "dist/styles.css",
   "files": [
     "dist"
   ],

package/templates/react/postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    "postcss-import": {},
     tailwindcss: {},
     autoprefixer: {},
   },

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

@@ -0,0 +1,268 @@
+/* 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: 1441px) {
+  html {
+    font-size: 1.8em;
+  }
+}
+
+@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;
+}
+
+.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 px-0 py-0; */
+  padding: 0 !important;
+  @apply flex-col center expanded filled gap-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

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

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

@@ -0,0 +1,11 @@
+/*
+ * 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, main, #__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,253 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss/base';
+@import 'tailwindcss/utilities';
+@import 'tailwindcss/components';
 
-/* FONTS: Customize */
-@layer base {
-  /* 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;
-  }
-}
-
-/* DEFAULT BODY FONT */
-@layer base {
-  html, body {
-    @apply font-size-sm interface;
-  }
-}
-
-/* LINKS */
-@layer base {
-  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 */
-@layer base {
-  .font-size-1 {
-    @apply text-4xl sm:text-5xl 2xl:text-6xl 4xl:text-8xl;
-  }
-
-  .font-size-2 {
-    @apply text-2xl sm:text-4xl 2xl:text-5xl 4xl:text-6xl;
-  }
-
-  .font-size-3 {
-    @apply text-xl sm:text-2xl 2xl:text-4xl 4xl:text-5xl;
-  }
-
-  .font-size-base {
-    @apply text-lg sm:text-xl 2xl:text-2xl 4xl:text-3xl;
-  }
-
-  .font-size-sm {
-    @apply text-base 2xl:text-lg 4xl:text-2xl;
-  }
-
-  .font-size-xs {
-    @apply text-sm 2xl:text-base 4xl:text-lg;
-  }
-}
-
-/* HEADINGS */
-@layer base {
-  h1, .h1,
-  h2, .h2,
-  h3, .h3,
-  h4, .h4,
-  h5, .h5,
-  h6, .h6 {
-    @apply font-bold display;
-    @apply pb-2 leading-snug;
-  }
-
-  h1, .h1 {
-    @apply font-size-1;
-  }
-
-  h2, .h2 {
-    @apply font-size-2;
-  }
-
-  h3, .h3 {
-    @apply font-size-3;
-  }
-
-  h4, .h4 {
-    @apply font-size-base;
-  }
-
-  h5, .h5 {
-    @apply font-size-sm;
-  }
-
-  h6, .h6 {
-    @apply font-size-xs;
-  }
-
-  .title {
-    @apply mt-2 display font-bold;
-  }
-
-  .title p {
-    @apply p-0 m-0;
-  }
-}
-
-/* FLEX */
-@layer base {
-  /**
-   * A container that fills its parent.
-   */
-  .expanded {
-    @apply h-full w-full;
-  }
-  /**
-   * Flex container that fills 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 */
-@layer base {
-  code {}
-
-  main {
-    @apply p-8 flex-col filled flex-center;
-  }
-
-  header {
-    z-index: 9999;
-  }
-
-  footer {
-    @apply flex-center py-4 border-t-2 border-gray-200;
-  }
-
-  article {
-    @apply font-size-base serif mx-auto;
-    @apply max-w-screen-sm lg:max-w-screen-lg 2xl:max-w-screen-2xl 4xl:max-w-screen-4xl;
-  }
-}
-
-/* FORMS */
-@layer base {
-  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;
-  }
-
-  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 */
-@layer base {
-  table {
-    @apply mx-auto w-full;
-  }
-  
-  table tr, table tr div {
-    @apply truncate;
-  }
-  
-  table tr:nth-child(even) {
-    /* @apply bg-gray-400; */
-  }
-}
-
-@import './elements/index.css';
-@import './viewport/index.css';
-@import './custom/index.css';
+@import './global/index.css';
+@import './components/index.css';

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

@@ -1,26 +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, #root, main {
-  /* Border-box, no padding. */
-  @apply m-0 p-0 box-border;
-  /* Fill screen, flex column, stretch items. */
-  @apply min-h-screen flex-col;
-}
-
-html,
-body {
-  background: #fafafa;
-
-  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif; */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  /* background-color: #90d5ec; */
-  /* background-image: linear-gradient(320deg, #fec3c5 20%, #d1ebf6 80%); */
-}
-
-/* purgecss end ignore */