@tsmodule/tsmodule 18.0.0 → 20.0.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/commands/build/index.d.ts +12 -0
- package/dist/commands/build/index.js +3 -3
- package/dist/commands/build/lib/emitTsDeclarations.d.ts +1 -0
- package/dist/commands/create/index.d.ts +3 -0
- package/dist/commands/create/index.js +1 -1
- package/dist/commands/create/lib/createTemplate.d.ts +1 -0
- package/dist/commands/create/lib/rewritePkgJson.d.ts +1 -0
- package/dist/commands/dev/index.d.ts +1 -0
- package/dist/commands/execute/index.d.ts +1 -0
- package/dist/commands/normalize/index.d.ts +19 -0
- package/dist/commands/normalize/lib/typescriptApi.d.ts +13 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +4 -4
- package/dist/loader/index.d.ts +11 -0
- package/dist/loader/types.d.ts +22 -0
- package/dist/types/index.d.ts +4 -0
- package/dist/utils/index.d.ts +28 -0
- package/dist/utils/pkgJson.d.ts +2 -0
- package/dist/utils/pkgJson.js +1 -1
- package/package.json +4 -4
- package/templates/default/package.json +2 -1
- package/templates/react/package.json +1 -0
- package/templates/react/postcss.config.js +1 -0
- package/templates/react/src/styles/{elements → components}/card/index.css +0 -0
- package/templates/react/src/styles/{elements → components}/index.css +0 -0
- package/templates/react/src/styles/global/elements/index.css +268 -0
- package/templates/react/src/styles/global/index.css +2 -0
- package/templates/react/src/styles/global/viewport/index.css +11 -0
- package/templates/react/src/styles/index.css +5 -252
- package/templates/react/src/styles/custom/index.css +0 -0
- package/templates/react/src/styles/viewport/index.css +0 -26
@@ -0,0 +1,12 @@
|
|
1
|
+
export declare const bannerLog: (msg: string) => void;
|
2
|
+
/**
|
3
|
+
* Build TS to JS. This will contain incomplete specifiers like `./foo` which
|
4
|
+
* could mean many things, all of which is handled by the loader which will
|
5
|
+
* resolve them for us.
|
6
|
+
*/
|
7
|
+
export declare const build: ({ files, styles, dev, runtimeOnly, }: {
|
8
|
+
files?: string;
|
9
|
+
styles?: string;
|
10
|
+
dev?: boolean;
|
11
|
+
runtimeOnly?: boolean;
|
12
|
+
}) => Promise<void>;
|
@@ -1,3 +1,3 @@
|
|
1
|
-
import{dirname as
|
2
|
-
`}}),
|
3
|
-
This might take a moment.`)
|
1
|
+
import{dirname as D,extname as O,isAbsolute as $,resolve as h,resolve as u}from"path";import{build as J}from"esbuild";import{existsSync as k,mkdirSync as W,readFileSync as T,rmSync as x,writeFileSync as P}from"fs";import a from"chalk";import{env as E}from"process";import v from"fast-glob";import m from"ora";import{createDebugLogger as G,log as f}from"create-debug-logger";import{getPackageJson as _,getPackageJsonFile as A}from"../../utils/pkgJson.js";import{isJsOrTs as I,isTs as d,isTsxOrJsx as p}from"../../utils/index.js";import{createShell as L}from"await-shell";import{emitTsDeclarations as M}from"./lib/emitTsDeclarations.js";import{normalizeImportSpecifiers as R}from"../normalize/index.js";const F=s=>{const r=` ${s} `;f(a.bgBlue(a.bold(a.white(r))))},z=()=>{let s;if(k("dist/package.json")?s=JSON.parse(T("dist/package.json","utf-8")):s={},s?.module==="module")return!0;s.type="module",P("dist/package.json",JSON.stringify(s,null,2))},V=async({files:s="src/**/*",styles:r="src/styles/components/index.css",dev:i=!1,runtimeOnly:y=!1})=>{E.NODE_ENV=i?"development":"production";const N=L(),t=G(V);t.log("Building",{files:s,dev:i,runtimeOnly:y}),F(`${a.bold("TS Module")} [${E.NODE_ENV}]`);const B=await A(),n=process.cwd(),S={absWorkingDir:n,outbase:"src",outdir:"dist",assetNames:"[name].js",logLevel:i?"warning":"error",charset:"utf8",format:"esm",target:"esnext",minify:!i,define:{PACKAGE_JSON:B}},g=u(n,"src"),l=u(n,"dist"),o=v.sync(s,{cwd:n}).filter(e=>O(e)!==".d.ts").map(e=>u(e));if($(s)){o.length||o.push(s);const e=s.replace(g,l).replace(d,".js").replace(p,".js");t.log("Cleaning emitted file:",{outfile:e}),x(e,{force:!0})}else t.log("Cleaning old output:",{outDir:l}),x(l,{force:!0,recursive:!0});console.log();const w=o.filter(e=>d.test(e)).filter(e=>!p.test(e));t.log("Compiling TS files:",{tsFiles:w}),await J({...S,entryPoints:w.filter(e=>!e.endsWith(".d.ts"))}),m("Built TS files.").succeed();const j=o.filter(e=>p.test(e));t.log("Compiling TSX files:",{tsxFiles:j}),await J({...S,entryPoints:j.filter(e=>!e.endsWith(".d.ts")),jsxFactory:"createElement",banner:{js:`import { createElement } from "react";
|
2
|
+
`}}),m("Built TSX files.").succeed();const b=o.filter(e=>!I.test(e));if(t.log("Copying non-JS/TS files.",{allFiles:o,nonJsTsFiles:b}),await Promise.all(b.map(async e=>{const c=h(n,e).replace(g,l).replace(d,".js").replace(p,".js");t.log("Copying non-source file:",{file:e,outfile:c}),W(D(c),{recursive:!0}),P(c,T(e),{encoding:"binary",flag:"w"})})),!process.env.NO_REWRITES){const e=s.replace(g,l).replace(/^(\.\/)?src\//,"dist/").replace(d,".js").replace(p,".js");await R(e.endsWith(".js")?e:`${e}.js`),m("Normalized import specifiers.").succeed()}if(z()&&m('Forced "type": "module" in output.').succeed(),console.log(),!(i||y)){if(k(h(r))){t.log("Building styles for production.");const e=await _(),{style:c="./dist/styles.css"}=e,C=["npx tailwindcss",i?"":"-m","--postcss postcss.config.js",`-i ${r}`,"-o",c];await N.run(C.join(" "))}else t.log("Styles not found.",{styles:r});F("Running post-build setup."),f(`Generating type declarations.
|
3
|
+
This might take a moment.`),M(o),m(`Generated delcarations for ${o.length} files.`).succeed(),f(a.green("Build complete."))}};export{F as bannerLog,V as build};
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const emitTsDeclarations: (files: string[]) => void;
|
@@ -1 +1 @@
|
|
1
|
-
import a from"chalk";import{createShell as c}from"await-shell";import d from"ora";import{createTemplate as
|
1
|
+
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};
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const createTemplate: (template: string, projectName: string) => Promise<void>;
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const rewritePkgJson: (projectName: string) => Promise<void>;
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const dev: () => Promise<void>;
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const execute: () => Promise<void>;
|
@@ -0,0 +1,19 @@
|
|
1
|
+
/**
|
2
|
+
* @fileoverview
|
3
|
+
* This module contains the logic for normalizing import specifiers. It must use
|
4
|
+
* fully-specified filepaths here, since the bootstrap script will compile it
|
5
|
+
* with esbuild and then use it to normalize emitted output.
|
6
|
+
*/
|
7
|
+
/**
|
8
|
+
* Matches a complete import statement, including the import keyword, as well as
|
9
|
+
* dynamic imports, requires, and export statements.
|
10
|
+
*/
|
11
|
+
export declare const generateImportPattern: (importSource: string) => RegExp;
|
12
|
+
/**
|
13
|
+
* Rewrite an import/export/require statement.
|
14
|
+
*/
|
15
|
+
export declare const rewriteImportStatement: (importStatement: string, specifierToReplace: string, specifierReplacement: string) => string;
|
16
|
+
/**
|
17
|
+
* Rewrite imports in the emitted JS to ESM-compliant paths.
|
18
|
+
*/
|
19
|
+
export declare const normalizeImportSpecifiers: (files?: string) => Promise<any>;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import ts from "typescript";
|
2
|
+
export declare const TS_CONFIG: ts.CompilerOptions;
|
3
|
+
export declare const compilerHost: ts.CompilerHost;
|
4
|
+
interface SpecifierReplacement {
|
5
|
+
specifierToReplace: string;
|
6
|
+
specifierReplacement: string;
|
7
|
+
}
|
8
|
+
/**
|
9
|
+
* Get the rewritten specifiers for a given module. Import/export specifiers
|
10
|
+
* will be resolved ahead-of-time by the TypeScript compiler and returned.
|
11
|
+
*/
|
12
|
+
export declare const getRewrittenSpecifiers: (modulePath: string) => SpecifierReplacement[];
|
13
|
+
export {};
|
package/dist/index.d.ts
ADDED
package/dist/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
#!/usr/bin/env node
|
2
|
-
var r="@tsmodule/tsmodule",
|
2
|
+
var r="@tsmodule/tsmodule",s="module",m="20.0.0",d="tsmodule/tsmodule",l="TypeScript Module loader and compiler",a="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/"],g={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"},v={"@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"},y=["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"]},w={"@types/fs-extra":"^9.0.13"},t={name:r,type:s,version:m,repository:d,description:l,license:a,bin:c,exports:p,types:u,contributors:f,files:b,engines:g,scripts:h,dependencies:v,keywords:y,ava:S,devDependencies:w};import o from"chalk";import{Command as T}from"commander";import{build as x}from"./commands/build/index.js";import{create as B}from"./commands/create/index.js";import{dev as C}from"./commands/dev/index.js";import{execute as R}from"./commands/execute/index.js";import{normalizeImportSpecifiers as j}from"./commands/normalize/index.js";const{version:A}=t,i=new T;i.name(o.white(o.bold("tsmodule"))).usage(o.white(o.bold("<file | command> [options]"))).description(o.blueBright(`A tool for building TypeScript modules.
|
3
3
|
|
4
|
-
Run TS directly: ${
|
5
|
-
Use a command: ${
|
6
|
-
(default: dist/**/*.js)`).action(async({files:n})=>{await
|
4
|
+
Run TS directly: ${o.bold("tsmodule src/index.ts")}
|
5
|
+
Use a command: ${o.bold("tsmodule build")}`)).version(String(A)),i.command("dev").description("Build and watch for changes.").action(C),i.command("build").option("--files <files>","Files to build","src/**/*").option("--styles <styles>","The styles to build","src/styles/components/index.css").option("-d, --dev","Build development runtime").option("-r, --runtime-only","Do not emit type declarations, only build JS runtime").description("Builds TS files to output in dist/.").action(x),i.command("create <name>").option("--react","Create React component library with Next.js").description("Create a new project.").action(B),i.command("normalize [files]").description(`Rewrites import specifiers in files to ESM-compliant paths.
|
6
|
+
(default: dist/**/*.js)`).action(async({files:n})=>{await j(n)}),i.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(R),i.parse(process.argv);
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import type { GetFormatHook as ModuleGetFormatHook, LoadHook as ModuleLoadHook, ResolveHook as ModuleResolveHook, TransformHook as ModuleTransformSourceHook } from "./types";
|
2
|
+
export declare const resolve: ModuleResolveHook;
|
3
|
+
export declare const load: ModuleLoadHook;
|
4
|
+
/**
|
5
|
+
* @deprecated As of Node 17.
|
6
|
+
*/
|
7
|
+
export declare const getFormat: ModuleGetFormatHook;
|
8
|
+
/**
|
9
|
+
* @deprecated As of Node 17.
|
10
|
+
*/
|
11
|
+
export declare const transformSource: ModuleTransformSourceHook;
|
@@ -0,0 +1,22 @@
|
|
1
|
+
export declare type Promisable<T> = Promise<T> | T;
|
2
|
+
export declare type ModuleSource = string | SharedArrayBuffer | Uint8Array;
|
3
|
+
export declare type ModuleFormat = "builtin" | "commonjs" | "json" | "module" | "wasm";
|
4
|
+
export declare type ResolveHook = (specifier: string, context: {
|
5
|
+
conditions: string[];
|
6
|
+
parentURL?: string;
|
7
|
+
}, fallback: ResolveHook) => Promisable<{
|
8
|
+
url: string;
|
9
|
+
format?: ModuleFormat;
|
10
|
+
}>;
|
11
|
+
export declare type GetFormatHook = (url: string, context: object, fallback: GetFormatHook) => Promisable<{
|
12
|
+
format: ModuleFormat;
|
13
|
+
}>;
|
14
|
+
export declare type TransformHook = (source: ModuleSource, context: Record<"url" | "format", string>, fallback: TransformHook) => Promisable<{
|
15
|
+
source: ModuleSource;
|
16
|
+
}>;
|
17
|
+
export declare type LoadHook = (url: string, context: {
|
18
|
+
format?: ModuleFormat;
|
19
|
+
}, fallback: LoadHook) => Promisable<{
|
20
|
+
format: ModuleFormat;
|
21
|
+
source: ModuleSource;
|
22
|
+
}>;
|
@@ -0,0 +1,28 @@
|
|
1
|
+
export declare const DEVELOPMENT_MODE: boolean;
|
2
|
+
export declare const isTs: RegExp;
|
3
|
+
export declare const isJs: RegExp;
|
4
|
+
export declare const isTsxOrJsx: RegExp;
|
5
|
+
export declare const isJsOrTs: RegExp;
|
6
|
+
export declare const BASE_CONFIG: {
|
7
|
+
format: string;
|
8
|
+
charset: string;
|
9
|
+
sourcemap: string;
|
10
|
+
target: string;
|
11
|
+
minify: boolean;
|
12
|
+
};
|
13
|
+
export declare type ModuleLoaders = {
|
14
|
+
[extension: string]: {
|
15
|
+
[configKey: string]: unknown;
|
16
|
+
};
|
17
|
+
};
|
18
|
+
export declare const MODULE_LOADERS: ModuleLoaders;
|
19
|
+
export declare const POSSIBLE_EXTENSIONS: string[];
|
20
|
+
/**
|
21
|
+
* Force a Unix-like path.
|
22
|
+
*/
|
23
|
+
export declare const normalizeSpecifier: (specifier: string) => string;
|
24
|
+
export declare const fileExists: (fileUrl: string) => string | void;
|
25
|
+
export declare const fileExistsAny: (fileUrls: string[]) => string | void;
|
26
|
+
export declare const checkTsExtensions: (specifier: string) => string | void;
|
27
|
+
export declare const checkJsExtension: (specifier: string) => string | void;
|
28
|
+
export declare const checkExtensions: (specifier: string) => string;
|
package/dist/utils/pkgJson.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
import{readFileSync as
|
1
|
+
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
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@tsmodule/tsmodule",
|
3
3
|
"type": "module",
|
4
|
-
"version": "
|
4
|
+
"version": "20.0.1",
|
5
5
|
"repository": "tsmodule/tsmodule",
|
6
6
|
"description": "TypeScript Module loader and compiler",
|
7
7
|
"license": "MIT",
|
@@ -30,14 +30,14 @@
|
|
30
30
|
},
|
31
31
|
"scripts": {
|
32
32
|
"bootstrap": "node bootstrap.js",
|
33
|
-
"bootload": "node --no-warnings --loader ./dist/loader/index.js src/index.ts build -
|
33
|
+
"bootload": "node --no-warnings --loader ./dist/loader/index.js src/index.ts build -r",
|
34
34
|
"prebuild": "yarn bootstrap && yarn bootload && yarn link -f",
|
35
35
|
"build": "tsmodule build",
|
36
36
|
"dev": "tsmodule dev",
|
37
37
|
"lint": "eslint --fix src",
|
38
|
-
"prepare": "yarn build -
|
38
|
+
"prepare": "yarn build -r",
|
39
39
|
"prepublishOnly": "yarn build && yarn test",
|
40
|
-
"pretest": "yarn build -
|
40
|
+
"pretest": "yarn build -r",
|
41
41
|
"test": "ava --no-worker-threads"
|
42
42
|
},
|
43
43
|
"dependencies": {
|
@@ -13,10 +13,11 @@
|
|
13
13
|
"./*": "./dist/*/index.js"
|
14
14
|
},
|
15
15
|
"scripts": {
|
16
|
+
"dev": "tsmodule dev",
|
16
17
|
"build": "tsmodule build",
|
17
18
|
"test": "ava",
|
18
19
|
"lint": "eslint src --fix",
|
19
|
-
"pretest": "tsmodule build -
|
20
|
+
"pretest": "tsmodule build -r",
|
20
21
|
"prepublishOnly": "yarn build && yarn test"
|
21
22
|
},
|
22
23
|
"ava": {
|
File without changes
|
File without changes
|
@@ -0,0 +1,268 @@
|
|
1
|
+
/* FONTS: Customize */
|
2
|
+
/* Style your serif font here. */
|
3
|
+
.serif {
|
4
|
+
font-family: serif;
|
5
|
+
}
|
6
|
+
|
7
|
+
/* Style your sans font here. */
|
8
|
+
.sans-serif {
|
9
|
+
font-family: sans-serif;
|
10
|
+
}
|
11
|
+
|
12
|
+
/* Style your display font here. */
|
13
|
+
.display {}
|
14
|
+
|
15
|
+
/* Style your interface font here. */
|
16
|
+
.interface {
|
17
|
+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
18
|
+
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
19
|
+
}
|
20
|
+
|
21
|
+
/* LINKS */
|
22
|
+
a {
|
23
|
+
@apply underline;
|
24
|
+
color: inherit;
|
25
|
+
text-decoration: none;
|
26
|
+
}
|
27
|
+
|
28
|
+
h1 a,
|
29
|
+
h2 a,
|
30
|
+
h3 a,
|
31
|
+
h4 a,
|
32
|
+
h5 a,
|
33
|
+
h6 a {
|
34
|
+
color: #0070f3;
|
35
|
+
}
|
36
|
+
|
37
|
+
/* If the user can hover, transition in by default. */
|
38
|
+
@media (hover: hover) {
|
39
|
+
a {
|
40
|
+
transition: 300ms;
|
41
|
+
text-decoration: underline;
|
42
|
+
text-decoration-color: transparent;
|
43
|
+
}
|
44
|
+
|
45
|
+
a:hover {
|
46
|
+
text-decoration-color: inherit;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
/* FONT SIZES */
|
51
|
+
@media (min-width: 769px) {
|
52
|
+
html {
|
53
|
+
font-size: 1.25em;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
@media (min-width: 1081px) {
|
58
|
+
html {
|
59
|
+
font-size: 1.5em;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
@media (min-width: 1441px) {
|
64
|
+
html {
|
65
|
+
font-size: 1.8em;
|
66
|
+
}
|
67
|
+
}
|
68
|
+
|
69
|
+
@media (min-width: 1921px) {
|
70
|
+
html {
|
71
|
+
font-size: 2.5em;
|
72
|
+
}
|
73
|
+
}
|
74
|
+
|
75
|
+
/* HEADINGS */
|
76
|
+
|
77
|
+
h1, .h1,
|
78
|
+
h2, .h2,
|
79
|
+
h3, .h3,
|
80
|
+
h4, .h4,
|
81
|
+
h5, .h5,
|
82
|
+
h6, .h6 {
|
83
|
+
@apply font-bold display;
|
84
|
+
@apply pb-2 leading-snug;
|
85
|
+
}
|
86
|
+
|
87
|
+
h1, .h1 {
|
88
|
+
@apply text-4xl;
|
89
|
+
}
|
90
|
+
|
91
|
+
h2, .h2 {
|
92
|
+
@apply text-2xl;
|
93
|
+
}
|
94
|
+
|
95
|
+
h3, .h3 {
|
96
|
+
@apply text-xl;
|
97
|
+
}
|
98
|
+
|
99
|
+
h4, .h4 {
|
100
|
+
@apply text-lg;
|
101
|
+
}
|
102
|
+
|
103
|
+
h5, .h5 {
|
104
|
+
@apply text-base;
|
105
|
+
}
|
106
|
+
|
107
|
+
h6, .h6 {
|
108
|
+
@apply text-sm;
|
109
|
+
}
|
110
|
+
|
111
|
+
.title {
|
112
|
+
@apply mt-2 display font-bold;
|
113
|
+
}
|
114
|
+
|
115
|
+
.title p {
|
116
|
+
@apply p-0 m-0;
|
117
|
+
}
|
118
|
+
|
119
|
+
/* FLEX */
|
120
|
+
|
121
|
+
/**
|
122
|
+
* A container that expands to fill its parent.
|
123
|
+
*/
|
124
|
+
.expanded {
|
125
|
+
@apply h-full w-full;
|
126
|
+
}
|
127
|
+
/**
|
128
|
+
* A flex container that is filled by its content.
|
129
|
+
*/
|
130
|
+
.filled {
|
131
|
+
@apply flex flex-1 items-stretch;
|
132
|
+
}
|
133
|
+
/**
|
134
|
+
* A pure-flex container will be display: flex.
|
135
|
+
*/
|
136
|
+
.pure-flex {
|
137
|
+
@apply flex;
|
138
|
+
}
|
139
|
+
/**
|
140
|
+
* And its immediate children will have zero padding and margin.
|
141
|
+
*/
|
142
|
+
.pure-flex > * {
|
143
|
+
@apply m-0 p-0;
|
144
|
+
}
|
145
|
+
/*
|
146
|
+
* A flex container centered along both axes.
|
147
|
+
*/
|
148
|
+
.flex-center {
|
149
|
+
@apply flex justify-center items-center;
|
150
|
+
}
|
151
|
+
/**
|
152
|
+
* Center flex and text.
|
153
|
+
*/
|
154
|
+
.center {
|
155
|
+
@apply flex-center text-center;
|
156
|
+
}
|
157
|
+
|
158
|
+
/* CONTENT */
|
159
|
+
|
160
|
+
code {}
|
161
|
+
|
162
|
+
main {
|
163
|
+
/* @apply px-0 py-0; */
|
164
|
+
padding: 0 !important;
|
165
|
+
@apply flex-col center expanded filled gap-16;
|
166
|
+
}
|
167
|
+
|
168
|
+
header {
|
169
|
+
z-index: 9999;
|
170
|
+
}
|
171
|
+
|
172
|
+
footer {
|
173
|
+
@apply flex-center py-4 border-t-2 border-gray-200;
|
174
|
+
}
|
175
|
+
|
176
|
+
article {
|
177
|
+
@apply text-lg serif mx-auto;
|
178
|
+
@apply max-w-screen-sm lg:max-w-screen-lg 2xl:max-w-screen-2xl 4xl:max-w-screen-4xl;
|
179
|
+
}
|
180
|
+
|
181
|
+
/* FORMS */
|
182
|
+
|
183
|
+
button, .button {
|
184
|
+
@apply cursor-pointer;
|
185
|
+
@apply pure-flex flex-center;
|
186
|
+
@apply px-8 py-4;
|
187
|
+
@apply rounded-lg border-2;
|
188
|
+
@apply bg-blue-500 text-white font-bold;
|
189
|
+
|
190
|
+
text-decoration: none !important;
|
191
|
+
}
|
192
|
+
|
193
|
+
label {
|
194
|
+
@apply p-4 font-light;
|
195
|
+
}
|
196
|
+
|
197
|
+
input {
|
198
|
+
@apply border-2 border-gray-300 rounded-lg;
|
199
|
+
@apply p-2;
|
200
|
+
}
|
201
|
+
|
202
|
+
select {
|
203
|
+
@apply bg-white;
|
204
|
+
@apply border-2 border-gray-300 rounded-lg;
|
205
|
+
@apply p-2;
|
206
|
+
}
|
207
|
+
|
208
|
+
/* Buttons already signal that the user can interact by touching. */
|
209
|
+
button, .button {
|
210
|
+
text-decoration: none !important;
|
211
|
+
@apply cursor-pointer;
|
212
|
+
@apply pure-flex flex-center;
|
213
|
+
@apply px-8 py-4;
|
214
|
+
@apply rounded-lg border-2;
|
215
|
+
@apply bg-blue-500 text-white font-bold;
|
216
|
+
}
|
217
|
+
|
218
|
+
/* TABLES */
|
219
|
+
|
220
|
+
table {
|
221
|
+
@apply mx-auto w-full;
|
222
|
+
}
|
223
|
+
|
224
|
+
table tr, table tr div {
|
225
|
+
@apply truncate;
|
226
|
+
}
|
227
|
+
|
228
|
+
table tr:nth-child(even) {
|
229
|
+
/* @apply bg-gray-400; */
|
230
|
+
}
|
231
|
+
|
232
|
+
|
233
|
+
.squish {
|
234
|
+
animation-name: squish;
|
235
|
+
animation-timing-function: ease;
|
236
|
+
animation-duration: 2s;
|
237
|
+
animation-iteration-count: 1;
|
238
|
+
}
|
239
|
+
|
240
|
+
@keyframes squish {
|
241
|
+
0% {
|
242
|
+
transform: scale(1, 1);
|
243
|
+
}
|
244
|
+
|
245
|
+
10% {
|
246
|
+
transform: scale(1.1, 0.9);
|
247
|
+
}
|
248
|
+
|
249
|
+
30% {
|
250
|
+
transform: scale(0.9, 1.1);
|
251
|
+
}
|
252
|
+
|
253
|
+
50% {
|
254
|
+
transform: scale(1.05, 0.95);
|
255
|
+
}
|
256
|
+
|
257
|
+
57% {
|
258
|
+
transform: scale(1, 1);
|
259
|
+
}
|
260
|
+
|
261
|
+
64% {
|
262
|
+
transform: scale(1, 1);
|
263
|
+
}
|
264
|
+
|
265
|
+
100% {
|
266
|
+
transform: scale(1, 1);
|
267
|
+
}
|
268
|
+
}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
/*
|
2
|
+
* Ensure the page fills the viewport. Prevent purgecss from removing this
|
3
|
+
* styling, which it likes to do for the #__next selector.
|
4
|
+
*/
|
5
|
+
/* purgecss start ignore */
|
6
|
+
html, body, main, #__next {
|
7
|
+
@apply m-0 p-0 box-border;
|
8
|
+
@apply min-h-screen;
|
9
|
+
@apply w-full h-full;
|
10
|
+
}
|
11
|
+
/* purgecss end ignore */
|
@@ -1,253 +1,6 @@
|
|
1
|
-
@
|
2
|
-
@
|
3
|
-
@
|
1
|
+
@import 'tailwindcss/base';
|
2
|
+
@import 'tailwindcss/utilities';
|
3
|
+
@import 'tailwindcss/components';
|
4
4
|
|
5
|
-
|
6
|
-
@
|
7
|
-
/* Style your serif font here. */
|
8
|
-
.serif {
|
9
|
-
font-family: serif;
|
10
|
-
}
|
11
|
-
|
12
|
-
/* Style your sans font here. */
|
13
|
-
.sans-serif {
|
14
|
-
font-family: sans-serif;
|
15
|
-
}
|
16
|
-
|
17
|
-
/* Style your display font here. */
|
18
|
-
.display {}
|
19
|
-
|
20
|
-
/* Style your interface font here. */
|
21
|
-
.interface {
|
22
|
-
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
23
|
-
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
24
|
-
}
|
25
|
-
}
|
26
|
-
|
27
|
-
/* DEFAULT BODY FONT */
|
28
|
-
@layer base {
|
29
|
-
html, body {
|
30
|
-
@apply font-size-sm interface;
|
31
|
-
}
|
32
|
-
}
|
33
|
-
|
34
|
-
/* LINKS */
|
35
|
-
@layer base {
|
36
|
-
a {
|
37
|
-
@apply underline;
|
38
|
-
color: inherit;
|
39
|
-
text-decoration: none;
|
40
|
-
}
|
41
|
-
|
42
|
-
h1 a,
|
43
|
-
h2 a,
|
44
|
-
h3 a,
|
45
|
-
h4 a,
|
46
|
-
h5 a,
|
47
|
-
h6 a {
|
48
|
-
color: #0070f3;
|
49
|
-
}
|
50
|
-
|
51
|
-
/* If the user can hover, transition in by default. */
|
52
|
-
@media (hover: hover) {
|
53
|
-
a {
|
54
|
-
transition: 300ms;
|
55
|
-
text-decoration: underline;
|
56
|
-
text-decoration-color: transparent;
|
57
|
-
}
|
58
|
-
|
59
|
-
a:hover {
|
60
|
-
text-decoration-color: inherit;
|
61
|
-
}
|
62
|
-
}
|
63
|
-
}
|
64
|
-
|
65
|
-
/* FONT SIZES */
|
66
|
-
@layer base {
|
67
|
-
.font-size-1 {
|
68
|
-
@apply text-4xl sm:text-5xl 2xl:text-6xl 4xl:text-8xl;
|
69
|
-
}
|
70
|
-
|
71
|
-
.font-size-2 {
|
72
|
-
@apply text-2xl sm:text-4xl 2xl:text-5xl 4xl:text-6xl;
|
73
|
-
}
|
74
|
-
|
75
|
-
.font-size-3 {
|
76
|
-
@apply text-xl sm:text-2xl 2xl:text-4xl 4xl:text-5xl;
|
77
|
-
}
|
78
|
-
|
79
|
-
.font-size-base {
|
80
|
-
@apply text-lg sm:text-xl 2xl:text-2xl 4xl:text-3xl;
|
81
|
-
}
|
82
|
-
|
83
|
-
.font-size-sm {
|
84
|
-
@apply text-base 2xl:text-lg 4xl:text-2xl;
|
85
|
-
}
|
86
|
-
|
87
|
-
.font-size-xs {
|
88
|
-
@apply text-sm 2xl:text-base 4xl:text-lg;
|
89
|
-
}
|
90
|
-
}
|
91
|
-
|
92
|
-
/* HEADINGS */
|
93
|
-
@layer base {
|
94
|
-
h1, .h1,
|
95
|
-
h2, .h2,
|
96
|
-
h3, .h3,
|
97
|
-
h4, .h4,
|
98
|
-
h5, .h5,
|
99
|
-
h6, .h6 {
|
100
|
-
@apply font-bold display;
|
101
|
-
@apply pb-2 leading-snug;
|
102
|
-
}
|
103
|
-
|
104
|
-
h1, .h1 {
|
105
|
-
@apply font-size-1;
|
106
|
-
}
|
107
|
-
|
108
|
-
h2, .h2 {
|
109
|
-
@apply font-size-2;
|
110
|
-
}
|
111
|
-
|
112
|
-
h3, .h3 {
|
113
|
-
@apply font-size-3;
|
114
|
-
}
|
115
|
-
|
116
|
-
h4, .h4 {
|
117
|
-
@apply font-size-base;
|
118
|
-
}
|
119
|
-
|
120
|
-
h5, .h5 {
|
121
|
-
@apply font-size-sm;
|
122
|
-
}
|
123
|
-
|
124
|
-
h6, .h6 {
|
125
|
-
@apply font-size-xs;
|
126
|
-
}
|
127
|
-
|
128
|
-
.title {
|
129
|
-
@apply mt-2 display font-bold;
|
130
|
-
}
|
131
|
-
|
132
|
-
.title p {
|
133
|
-
@apply p-0 m-0;
|
134
|
-
}
|
135
|
-
}
|
136
|
-
|
137
|
-
/* FLEX */
|
138
|
-
@layer base {
|
139
|
-
/**
|
140
|
-
* A container that fills its parent.
|
141
|
-
*/
|
142
|
-
.expanded {
|
143
|
-
@apply h-full w-full;
|
144
|
-
}
|
145
|
-
/**
|
146
|
-
* Flex container that fills its content.
|
147
|
-
*/
|
148
|
-
.filled {
|
149
|
-
@apply flex flex-1 items-stretch;
|
150
|
-
}
|
151
|
-
/**
|
152
|
-
* A pure-flex container will be display: flex.
|
153
|
-
*/
|
154
|
-
.pure-flex {
|
155
|
-
@apply flex;
|
156
|
-
}
|
157
|
-
/**
|
158
|
-
* And its immediate children will have zero padding and margin.
|
159
|
-
*/
|
160
|
-
.pure-flex > * {
|
161
|
-
@apply m-0 p-0;
|
162
|
-
}
|
163
|
-
/*
|
164
|
-
* A flex container centered along both axes.
|
165
|
-
*/
|
166
|
-
.flex-center {
|
167
|
-
@apply flex justify-center items-center;
|
168
|
-
}
|
169
|
-
/**
|
170
|
-
* Center flex and text.
|
171
|
-
*/
|
172
|
-
.center {
|
173
|
-
@apply flex-center text-center;
|
174
|
-
}
|
175
|
-
}
|
176
|
-
|
177
|
-
/* CONTENT */
|
178
|
-
@layer base {
|
179
|
-
code {}
|
180
|
-
|
181
|
-
main {
|
182
|
-
@apply p-8 flex-col filled flex-center;
|
183
|
-
}
|
184
|
-
|
185
|
-
header {
|
186
|
-
z-index: 9999;
|
187
|
-
}
|
188
|
-
|
189
|
-
footer {
|
190
|
-
@apply flex-center py-4 border-t-2 border-gray-200;
|
191
|
-
}
|
192
|
-
|
193
|
-
article {
|
194
|
-
@apply font-size-base serif mx-auto;
|
195
|
-
@apply max-w-screen-sm lg:max-w-screen-lg 2xl:max-w-screen-2xl 4xl:max-w-screen-4xl;
|
196
|
-
}
|
197
|
-
}
|
198
|
-
|
199
|
-
/* FORMS */
|
200
|
-
@layer base {
|
201
|
-
button, .button {
|
202
|
-
text-decoration: none !important;
|
203
|
-
@apply cursor-pointer;
|
204
|
-
@apply pure-flex flex-center;
|
205
|
-
@apply px-8 py-4;
|
206
|
-
@apply rounded-lg border-2;
|
207
|
-
@apply bg-blue-500 text-white font-bold;
|
208
|
-
}
|
209
|
-
|
210
|
-
label {
|
211
|
-
@apply p-4 font-light;
|
212
|
-
}
|
213
|
-
|
214
|
-
input {
|
215
|
-
@apply border-2 border-gray-300 rounded-lg;
|
216
|
-
@apply p-2;
|
217
|
-
}
|
218
|
-
|
219
|
-
select {
|
220
|
-
@apply bg-white;
|
221
|
-
@apply border-2 border-gray-300 rounded-lg;
|
222
|
-
@apply p-2;
|
223
|
-
}
|
224
|
-
|
225
|
-
/* Buttons already signal that the user can interact by touching. */
|
226
|
-
button, .button {
|
227
|
-
text-decoration: none !important;
|
228
|
-
@apply cursor-pointer;
|
229
|
-
@apply pure-flex flex-center;
|
230
|
-
@apply px-8 py-4;
|
231
|
-
@apply rounded-lg border-2;
|
232
|
-
@apply bg-blue-500 text-white font-bold;
|
233
|
-
}
|
234
|
-
}
|
235
|
-
|
236
|
-
/* TABLES */
|
237
|
-
@layer base {
|
238
|
-
table {
|
239
|
-
@apply mx-auto w-full;
|
240
|
-
}
|
241
|
-
|
242
|
-
table tr, table tr div {
|
243
|
-
@apply truncate;
|
244
|
-
}
|
245
|
-
|
246
|
-
table tr:nth-child(even) {
|
247
|
-
/* @apply bg-gray-400; */
|
248
|
-
}
|
249
|
-
}
|
250
|
-
|
251
|
-
@import './elements/index.css';
|
252
|
-
@import './viewport/index.css';
|
253
|
-
@import './custom/index.css';
|
5
|
+
@import './global/index.css';
|
6
|
+
@import './components/index.css';
|
File without changes
|
@@ -1,26 +0,0 @@
|
|
1
|
-
/*
|
2
|
-
* Ensure the page fills the viewport. Prevent purgecss from removing this
|
3
|
-
* styling, which it likes to do for the #__next selector.
|
4
|
-
*/
|
5
|
-
/* purgecss start ignore */
|
6
|
-
html, body, #__next, #root, main {
|
7
|
-
/* Border-box, no padding. */
|
8
|
-
@apply m-0 p-0 box-border;
|
9
|
-
/* Fill screen, flex column, stretch items. */
|
10
|
-
@apply min-h-screen flex-col;
|
11
|
-
}
|
12
|
-
|
13
|
-
html,
|
14
|
-
body {
|
15
|
-
background: #fafafa;
|
16
|
-
|
17
|
-
/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
18
|
-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
19
|
-
sans-serif; */
|
20
|
-
-webkit-font-smoothing: antialiased;
|
21
|
-
-moz-osx-font-smoothing: grayscale;
|
22
|
-
/* background-color: #90d5ec; */
|
23
|
-
/* background-image: linear-gradient(320deg, #fec3c5 20%, #d1ebf6 80%); */
|
24
|
-
}
|
25
|
-
|
26
|
-
/* purgecss end ignore */
|