Merge pull request #25 from front-of-house/css

feat: update build for core package

.changeset/large-foxes-juggle.md

@@ -0,0 +1,5 @@
+---
+"@svbstrate/core": patch
+---
+
+Use esbuild to build library, and use Vite for Vitest only

.changeset/soft-readers-care.md

@@ -0,0 +1,5 @@
+---
+"@svbstrate/css": patch
+---
+
+Initial release

.github/workflows/cd.yml

@@ -18,10 +18,10 @@ jobs:
  - uses: actions/checkout@v1
  - uses: pnpm/action-setup@v2
  with:
- version: 7
+ version: 8
  - uses: actions/setup-node@v3
  with:
- node-version: 15
+ node-version: 16
  cache: "pnpm"
 
  # pnpm stuff

.github/workflows/ci.yml

@@ -16,10 +16,10 @@ jobs:
  - uses: actions/checkout@v1
  - uses: pnpm/action-setup@v2
  with:
- version: 7
+ version: 8
  - uses: actions/setup-node@v3
  with:
- node-version: 15
+ node-version: 16
  cache: "pnpm"
 
  # pnpm stuff

package.json

@@ -19,6 +19,7 @@
  "@commitlint/config-conventional": "^15.0.0",
  "@vitest/coverage-c8": "^0.28.3",
  "commitlint": "^15.0.0",
+ "esbuild": "^0.17.16",
  "husky": "^7.0.4",
  "is-ci": "^3.0.1",
  "prettier": "^2.8.3",

packages/core/package.json

@@ -2,10 +2,11 @@
  "name": "@svbstrate/core",
  "version": "0.0.14",
  "description": "",
- "main": "dist/index.js",
+ "main": "dist/index.cjs.js",
+ "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "scripts": {
- "build": "vite build && pnpm typegen",
+ "build": "node scripts/build && pnpm typegen",
  "test": "vitest run --coverage",
  "test:watch": "vitest --coverage",
  "typecheck": "tsc --noEmit",

packages/core/scripts/build.js

@@ -0,0 +1,21 @@
+const path = require("path");
+
+const options = {
+ sourcemap: true,
+ logLevel: "info",
+ bundle: true,
+};
+
+require("esbuild").buildSync({
+ entryPoints: ["lib/index.ts"],
+ format: "cjs",
+ outfile: path.join(__dirname, "../dist/index.cjs.js"),
+ ...options,
+});
+
+require("esbuild").buildSync({
+ entryPoints: ["lib/index.ts"],
+ format: "esm",
+ outfile: path.join(__dirname, "../dist/index.esm.js"),
+ ...options,
+});

packages/core/vite.config.ts

@@ -1,22 +1,6 @@
 import { defineConfig } from "vitest/config";
-import { resolve } from "path";
 
 export default defineConfig({
- define: {
- ENV: JSON.stringify("development"),
- },
- build: {
- target: "esnext",
- minify: "esbuild",
- lib: {
- entry: [
- resolve(__dirname, "lib/index.ts"),
- resolve(__dirname, "lib/presets.ts"),
- resolve(__dirname, "lib/utils.ts"),
- ],
- formats: ["cjs"],
- },
- },
  test: {
  coverage: {
  reporter: ["text", "lcov"],

packages/css/.npmignore

@@ -0,0 +1,5 @@
+lib
+scripts
+coverage
+dist/__tests__
+tsconfig.json

packages/css/README.md

@@ -0,0 +1,7 @@
+# @svbstate/css
+
+Generate CSS with Svbstrate.
+
+### License
+
+MIT License © [Front of House](https://github.com/front-of-house)

packages/css/lib/__tests__/index.test.ts

@@ -0,0 +1,20 @@
+import { test, expect } from "vitest";
+
+import { create } from "../";
+
+test("works", () => {
+ const sv = create({
+ breakpoints: ["400px", "800px"],
+ });
+ const cn = sv.css({
+ color: "red",
+ padding: [0, 1, 2],
+ });
+ const sheet = sv.flush();
+
+ expect(sheet).toContain("color:red");
+ expect(sheet).toContain("padding:0px");
+ expect(sheet).toContain("padding:1px");
+ expect(sheet).toContain("padding:2px");
+ expect(cn).toBeTruthy();
+});

packages/css/lib/index.ts

@@ -0,0 +1,61 @@
+import { create as nano } from "nano-css";
+import { addon as cache } from "nano-css/addon/cache";
+// @ts-expect-error
+import { addon as nesting } from "nano-css/addon/nesting";
+import { addon as keyframes } from "nano-css/addon/keyframes";
+import { addon as rule } from "nano-css/addon/rule";
+import { addon as globalAddon } from "nano-css/addon/global";
+import { addon as hydrate } from "nano-css/addon/hydrate";
+import * as svbstrate from "@svbstrate/core";
+
+function createCss() {
+ const n = nano();
+
+ cache(n);
+ nesting(n);
+ keyframes(n);
+ rule(n);
+ globalAddon(n);
+ hydrate(n);
+
+ return n;
+}
+
+export function create(theme?: Partial<svbstrate.ThemeConfig>) {
+ const t = theme ? svbstrate.createTheme(theme) : svbstrate.createTheme();
+ let css = createCss();
+
+ return {
+ explode(styles: svbstrate.SvbstrateStyleObject) {
+ return svbstrate.explode(styles, t);
+ },
+ style(styles: svbstrate.SvbstrateStyleObject) {
+ return svbstrate.style(styles, t);
+ },
+ pick<T>(props: Parameters<typeof svbstrate.pick<T>>[0]) {
+ return svbstrate.pick(props, t);
+ },
+ css(styles: svbstrate.SvbstrateStyleObject) {
+ const s = svbstrate.style(styles, t);
+ return Object.keys(s).length && css.rule ? css.rule(s) : "";
+ },
+ createGlobal(styles: svbstrate.SvbstrateStyleObject) {
+ const css = createCss();
+ css.global && css.global(svbstrate.style(styles, t));
+ return css.raw;
+ },
+ injectGlobal(styles: svbstrate.SvbstrateStyleObject) {
+ css.global && css.global(svbstrate.style(styles, t));
+ },
+ keyframes: css.keyframes,
+ flush() {
+ const raw = css.raw;
+ css = createCss();
+ console.log({ raw });
+ return raw;
+ },
+ get theme() {
+ return t;
+ },
+ };
+}

packages/css/package.json

@@ -0,0 +1,29 @@
+{
+ "name": "@svbstrate/css",
+ "version": "0.0.0",
+ "description": "",
+ "main": "dist/index.cjs.js",
+ "module": "dist/index.esm.js",
+ "types": "dist/index.d.ts",
+ "scripts": {
+ "build": "node scripts/build && pnpm typegen",
+ "test": "vitest run --coverage",
+ "test:watch": "vitest --coverage",
+ "typecheck": "tsc --noEmit",
+ "typegen": "tsc --emitDeclarationOnly"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+ssh://[email protected]/front-of-house/monorepo.git"
+ },
+ "author": "estrattonbailey",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/front-of-house/monorepo/issues"
+ },
+ "homepage": "https://github.com/front-of-house/monorepo#readme",
+ "dependencies": {
+ "@svbstrate/core": "workspace:^0.0.14",
+ "nano-css": "^5.3.5"
+ }
+}

packages/css/scripts/build.js

@@ -0,0 +1,21 @@
+const path = require("path");
+
+const options = {
+ sourcemap: true,
+ logLevel: "info",
+ bundle: true,
+};
+
+require("esbuild").buildSync({
+ entryPoints: ["lib/index.ts"],
+ format: "cjs",
+ outfile: path.join(__dirname, "../dist/index.cjs.js"),
+ ...options,
+});
+
+require("esbuild").buildSync({
+ entryPoints: ["lib/index.ts"],
+ format: "esm",
+ outfile: path.join(__dirname, "../dist/index.esm.js"),
+ ...options,
+});

packages/css/tsconfig.json

@@ -0,0 +1,8 @@
+{
+ "extends": "../../tsconfig.json",
+ "include": ["lib"],
+ "compilerOptions": {
+ "declarationDir": "dist",
+ "lib": ["dom", "ES2021"]
+ }
+}

packages/css/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+ test: {
+ coverage: {
+ reporter: ["text", "lcov"],
+ },
+ },
+});