@tsmodule/tsmodule 17.0.0 → 17.1.1

package/dist/commands/create/index.js

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

package/dist/index.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-var r="@tsmodule/tsmodule",a="module",m="17.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/","template/"],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="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.
 
 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tsmodule/tsmodule",
   "type": "module",
-  "version": "17.0.0",
+  "version": "17.1.1",
   "repository": "tsmodule/tsmodule",
   "description": "TypeScript Module loader and compiler",
   "license": "MIT",
@@ -23,7 +23,7 @@
   ],
   "files": [
     "dist/",
-    "template/"
+    "templates/"
   ],
   "engines": {
     "node": ">=14"

package/templates/default/.eslintrc

@@ -0,0 +1,52 @@
+{
+  "extends": [
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    
+    "no-console": "error",
+    "no-trailing-spaces": "error",
+    "max-len": [1, 80, 2, {
+      "ignorePattern": "^import\\s.+\\sfrom\\s.+;$",
+      "ignoreUrls": true,
+      "ignoreStrings": true,
+      "ignoreTemplateLiterals": true,
+      "ignoreRegExpLiterals": true
+    }],
+
+    "@typescript-eslint/type-annotation-spacing": ["error"],
+
+    "@typescript-eslint/ban-ts-comment": [
+      "error",
+      {
+        "ts-nocheck": "allow-with-description",
+        "ts-ignore": "allow-with-description"
+      }
+    ],
+
+    "indent": "off",
+    "@typescript-eslint/indent": ["error", 2],
+
+    "semi": "off",
+    "@typescript-eslint/semi": ["error", "always"],
+
+    "quotes": "off",
+    "@typescript-eslint/quotes": ["error", "double"],
+
+    "object-curly-spacing": "off",
+    "@typescript-eslint/object-curly-spacing": ["error", "always"],
+
+    "sort-imports": [
+      "warn",
+      {
+        "ignoreCase": false,
+        "ignoreDeclarationSort": false,
+        "ignoreMemberSort": true,
+        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
+        "allowSeparatedGroups": true
+      }
+    ]
+  }
+}

package/templates/default/.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - '**'
+  pull_request:
+    branches:
+      - '**'
+
+jobs:
+  test:
+    name: Node ${{ matrix.nodejs }} on ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 10
+    strategy:
+      matrix:
+        nodejs: [14, 16, "lts/*"]
+        os: [ubuntu-latest, windows-latest, macos-latest]
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.nodejs }}
+
+    - name: Install and link
+      run: yarn install --frozen-lockfile && yarn build
+
+    - name: Test
+      run: yarn test

package/templates/default/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+
+# Potential Firebase / GCP credentials.
+service-account.json
+
+# Emitted output.
+dist/
+
+# Incremental TS build info.
+*.tsbuildinfo

package/templates/default/README.md

@@ -0,0 +1,5 @@
+This is a TS module. Build it with tsmodule via:
+
+```shell
+yarn build
+```

package/templates/default/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "template",
+  "type": "module",
+  "version": "0.0.1",
+  "license": "MIT",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./dist/index.js",
+    "./*": "./dist/*/index.js"
+  },
+  "scripts": {
+    "build": "tsmodule build",
+    "test": "ava",
+    "lint": "eslint src --fix",
+    "pretest": "tsmodule build -f",
+    "prepublishOnly": "yarn build && yarn test"
+  },
+  "ava": {
+    "timout": 240000,
+    "files": [
+      "test/**/*.test.ts"
+    ],
+    "extensions": {
+      "ts": "module"
+    },
+    "nodeArguments": [
+      "--no-warnings",
+      "--loader=@tsmodule/tsmodule"
+    ]
+  }
+}

package/templates/default/src/index.ts

@@ -0,0 +1,4 @@
+export const helloWorld = () => {
+  // eslint-disable-next-line no-console
+  console.log("Hello World!");
+};

package/templates/default/test/example.test.ts

@@ -0,0 +1,7 @@
+import test from "ava";
+
+test("two plus two should equal four", (t) => {
+  if (2 + 2 === 4) {
+    t.pass();
+  }
+});

package/templates/default/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "include": [
+    "*env.d.ts",
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "test/**"
+  ],
+  "compilerOptions": {
+    "moduleResolution": "Node",
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "jsx": "preserve",
+    "rootDir": "src",
+    "outDir": "dist",
+    "allowJs": true,
+    "importHelpers": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "sourceMap": true,
+    "checkJs": true,
+    "noEmit": false,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "incremental": false
+  }
+}

package/templates/react/.eslintrc

@@ -0,0 +1,54 @@
+{
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "next",
+    "next/core-web-vitals"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    
+    "no-console": "error",
+    "no-trailing-spaces": "error",
+    "max-len": [1, 80, 2, {
+      "ignorePattern": "^import\\s.+\\sfrom\\s.+;$",
+      "ignoreUrls": true,
+      "ignoreStrings": true,
+      "ignoreTemplateLiterals": true,
+      "ignoreRegExpLiterals": true
+    }],
+
+    "@typescript-eslint/type-annotation-spacing": ["error"],
+
+    "@typescript-eslint/ban-ts-comment": [
+      "error",
+      {
+        "ts-nocheck": "allow-with-description",
+        "ts-ignore": "allow-with-description"
+      }
+    ],
+
+    "indent": "off",
+    "@typescript-eslint/indent": ["error", 2],
+
+    "semi": "off",
+    "@typescript-eslint/semi": ["error", "always"],
+
+    "quotes": "off",
+    "@typescript-eslint/quotes": ["error", "double"],
+
+    "object-curly-spacing": "off",
+    "@typescript-eslint/object-curly-spacing": ["error", "always"],
+
+    "sort-imports": [
+      "warn",
+      {
+        "ignoreCase": false,
+        "ignoreDeclarationSort": false,
+        "ignoreMemberSort": true,
+        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
+        "allowSeparatedGroups": true
+      }
+    ]
+  }
+}

package/templates/react/.gitignore

@@ -0,0 +1,11 @@
+node_modules
+
+# Potential Firebase / GCP credentials.
+service-account.json
+
+# Emitted output.
+dist/
+.next/
+
+# Incremental TS build info.
+*.tsbuildinfo

package/templates/react/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/templates/react/next.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  reactStrictMode: true,
+  webpack: (config) => {
+    // config.experiments = { topLevelAwait: true };
+    // config.resolve.fallback = {
+    //   assert: false,
+    //   process: false,
+    //   events: false,
+    //   fs: false,
+    //   util: false,
+    //   path: false,
+    //   stream: false,
+    //   constants: false,
+    //   os: false,
+    // };
+    return config;
+  },
+};

package/templates/react/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "template",
+  "version": "0.0.1",
+  "license": "MIT",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./styles": "./dist/styles/index.css",
+    "./styles/*": "./dist/styles/*/index.css",
+    "./package.json": "./package.json",
+    "./*": "./dist/components/*/index.js"
+  },
+  "scripts": {
+    "export": "tsmodule build",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint --fix",
+    "test": "ava",
+    "prepublishOnly": "yarn build && yarn test"
+  },
+  "ava": {
+    "timout": 240000,
+    "files": [
+      "test/**/*.test.ts"
+    ],
+    "extensions": {
+      "ts": "module"
+    },
+    "nodeArguments": [
+      "--no-warnings",
+      "--loader=@tsmodule/tsmodule"
+    ]
+  }
+}

package/templates/react/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/templates/react/src/components/Card/index.tsx

@@ -0,0 +1,13 @@
+import { FC } from "react";
+
+interface CardProps {
+  href: string;
+}
+
+export const Card: FC<CardProps> = ({ href, children }) => {
+  return (
+    <a href={href} className="card">
+      {children}
+    </a>
+  );
+};

package/templates/react/src/components/CardGrid/index.tsx

@@ -0,0 +1,29 @@
+import { Card } from "../Card";
+
+export const CardGrid = () => {
+  return (
+    <div className="grid md:grid-cols-2">
+      <a href="https://nextjs.org/docs" className="card">
+        <h4>Documentation &rarr;</h4>
+        <p>Find in-depth information about Next.js features and API.</p>
+      </a>
+
+      <Card href="https://nextjs.org/learn">
+        <h4>Learn &rarr;</h4>
+        <p>Learn about Next.js in an interactive course with quizzes!</p>
+      </Card>
+
+      <Card href="https://github.com/vercel/next.js/tree/master/examples">
+        <h4>Examples &rarr;</h4>
+        <p>Discover and deploy boilerplate example Next.js projects.</p>
+      </Card>
+
+      <Card href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app">
+        <h4>Deploy &rarr;</h4>
+        <p>
+              Instantly deploy your Next.js site to a public URL with Vercel.
+        </p>
+      </Card>
+    </div>
+  );
+};

package/templates/react/src/components/Footer/index.tsx

@@ -0,0 +1,19 @@
+import Image from "next/image";
+
+export const Footer = () => {
+  return (
+    <footer>
+      <a
+        className="flex-center"
+        href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+          Powered by{" "}
+        <span className="h-4 ml-2 flex-center">
+          <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+        </span>
+      </a>
+    </footer>
+  );
+};

package/templates/react/src/components/GetStarted/index.tsx

@@ -0,0 +1,8 @@
+export const GetStarted = () => {
+  return (
+    <p className="my-8 text-center md:my-16 font-size-3">
+        Get started by editing{" "}
+      <code className="code">pages/index.js</code>
+    </p>
+  );
+};

package/templates/react/src/components/Welcome/index.tsx

@@ -0,0 +1,7 @@
+export const Welcome = () => {
+  return (
+    <h1 className="text-center">
+      Welcome to <a href="https://nextjs.org">Next.js!</a>
+    </h1>
+  );
+};

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

@@ -0,0 +1,4 @@
+export * from "./Card";
+export * from "./CardGrid";
+export * from "./GetStarted";
+export * from "./Welcome";

package/templates/react/src/index.ts

@@ -0,0 +1 @@
+export * from "./components";

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

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

package/templates/react/src/pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+
+type Data = {
+  name: string
+};
+
+export default function handler(
+  _: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: "John Doe" });
+}

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

@@ -0,0 +1,26 @@
+import Head from "next/head";
+
+import { CardGrid } from "../components/CardGrid";
+import { Footer } from "../components/Footer";
+import { GetStarted } from "../components/GetStarted";
+import { Welcome } from "../components/Welcome";
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main>
+        <Welcome />
+        <GetStarted />
+        <CardGrid />
+      </main>
+
+      <Footer />
+    </>
+  );
+}

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

@@ -0,0 +1,14 @@
+.card {
+  @apply m-4 p-6 text-left rounded-lg;
+  text-decoration: none;
+  border: 1px solid #eaeaea;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  /* max-width: 300px; */
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  color: #0070f3;
+  border-color: #0070f3;
+}

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

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

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

@@ -0,0 +1,253 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 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';

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

@@ -0,0 +1,26 @@
+/*
+ * 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 */

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

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

package/templates/react/tailwind.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  content: ["src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      screens: {
+        "3xl": "1920px",
+        "4xl": "3840px",
+      },
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))"
+      },
+      border : [ "hover"],
+        
+      
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};