namesake

README.md

@@ -1,23 +1,21 @@
 # Flakecss
 
-A minimalist css in javascript renderer. Our mission
-is to be as small as possible while supporting all of the important use cases.
+A zero cost css-in-js solution that compiles itself away.
 
 ## Features
 
-- media queries
-- pseudo-classes/pseudo-selectors
-- your favorite css properties
-- SSR
-- no dependencies
-- written in typescript
+- no dependencies, and weighs less than **800B**.
+- flexible component styling
+- classic css-in-js behavior during development, compile to a plain css file for production.
+- Supports advanced CSS features like:
+  - media queries
+  - pseudo-classes/pseudo-selectors
+  - your favorite css properties
 
 ## Installation
 
 ```shell
-$ npm i @sightread/flake
-or
-$ yarn add @sightread/flake
+$ npm install @sightread/flake
 ```
 
 ## Usage
@@ -85,13 +83,8 @@ const classes = css({
       color: "blue",
       "&:hover": {
         color: "black",
-        textDecoration: "underline"
-      },
-      "&:focus": {
-        color: "black"
       }
     }
-
   },
 })
 ```
@@ -206,4 +199,4 @@ Currently, the css is compiled each time an app is hot reloaded. This will cause
 
 ## License
 
-MIT
+MIT

cli/index.js

@@ -0,0 +1,62 @@
+// import esbuild from "esbuild";
+// import * as flake from "../dist/index.mjs";
+// import fs from "fs/promises";
+const esbuild = require("esbuild");
+const flake = require("../dist/index.cjs.js");
+const fs = require("fs/promises");
+
+/**
+ * @param {string} file
+ */
+async function getCssFromEntryPoint(file) {
+  const bundleStart = Date.now();
+  const result = await esbuild.build({
+    write: false,
+    bundle: true,
+    entryPoints: [file],
+    external: ["@sightread/flake", "crypto"],
+    loader: { ".js": "jsx" },
+    sourcemap: "inline",
+    sourcesContent: true,
+    plugins: [
+      {
+        name: "__filename",
+        setup(build) {
+          build.onLoad({ filter: /\.js$/, namespace: "" }, async (file) => {
+            const contents = await fs.readFile(file.path, "utf-8");
+            console.log(file.path);
+            return {
+              contents: contents.replace(/css\(/g, `css("${file.path}",`),
+              loader: "jsx",
+            };
+          });
+        },
+      },
+    ],
+    watch: {
+      onRebuild(fail, result) {
+        console.log("Rebuild took");
+      },
+    },
+  });
+  console.log(`Initial bundling took: ${Date.now() - bundleStart}`);
+  console.log(getCss(result));
+}
+
+function getCss(result) {
+  const evalStart = Date.now();
+  const output = result.outputFiles[0].text.replace(
+    `require("@sightread/flake")`,
+    `flake`
+  );
+  eval(output);
+  console.log(`Eval took: ${Date.now() - evalStart}`);
+  console.log(JSON.stringify(flake.getGlobalStyles()));
+}
+
+/* TODO:
+ * 1. Handle multiple entrypoints without duplication.
+ * 2. Potentially figure out how to make this less hacky...although currently have no ideas.
+ * 3.
+ */
+getCssFromEntryPoint("./examples/nextjs/pages/index.js");

examples/nextjs/package.json

@@ -8,7 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@sightread/flake": "../../../flakecss",
+    "@sightread/flake": "../../",
     "next": "10.1.3",
     "react": "17.0.2",
     "react-dom": "17.0.2"

examples/nextjs/pages/index.js

@@ -1,5 +1,5 @@
 import Head from 'next/head'
-import { css, mediaQuery } from "@sightread/flake";
+import { css, mediaQuery as m } from "@sightread/flake";
 
 const classes = css({
   container: {
@@ -73,7 +73,7 @@ const classes = css({
     flexWrap: "wrap",
     maxWidth: 800,
     marginTop: "3rem",
-    [mediaQuery.down(600)]: {
+    [m.down(600)]: {
       width: "100%",
       flexDirection: "column"
     }