@salty-css/webpack 0.0.1-alpha.2 → 0.0.1-alpha.3

package/dist/README.md

@@ -0,0 +1,107 @@
+# Salty Css
+
+## Basic usage example with Button
+
+### Initial requirements
+
+1. Add `saltyPlugin` to vite or webpack config from `@salty-css/vite` or `@salty-css/webpack`
+2. Create `salty-config.ts` to the root of your project
+3. Import global styles to any regular .css file from `saltygen/index.css` (does not exist during first run, cli command coming later)
+4. Create salty components with styled only inside files that end with `.css.ts`, `.salty.ts` `.styled.ts` or `.styles.ts`
+
+### Code examples
+
+**Salty config**
+
+```tsx
+import { defineConfig } from '@salty-css/core/config';
+
+export const config = defineConfig({
+  variables: {
+    colors: {
+      brand: '#111',
+      highlight: 'yellow',
+    },
+  },
+  global: {
+    html: {
+      backgroundColor: '#f8f8f8',
+    },
+  },
+});
+```
+
+**Your React component file**
+
+```tsx
+import { Wrapper } from '../components/wrapper/wrapper.css';
+import { Button } from '../components/button/button.css';
+
+export const IndexPage = () => {
+  return (
+    <Wrapper>
+      <Button variant="solid" onClick={() => alert('It is a button.')}>
+        Outlined
+      </Button>
+    </Wrapper>
+  );
+};
+```
+
+**Wrapper** (`components/wrapper/wrapper.css.ts`)
+
+```tsx
+import { styled } from '@salty-css/react/styled';
+
+export const Wrapper = styled('div', {
+  display: 'block',
+  padding: '2vw',
+});
+```
+
+**Button** (`components/button/button.css.ts`)
+
+```tsx
+import { styled } from '@salty-css/react/styled';
+
+export const Button = styled('button', {
+  display: 'block',
+  padding: `0.6em 1.2em`,
+  border: '1px solid currentColor',
+  background: 'transparent',
+  color: 'currentColor/40',
+  cursor: 'pointer',
+  transition: '200ms',
+  textDecoration: 'none',
+  '&:hover': {
+    background: 'black',
+    borderColor: 'black',
+    color: 'white',
+  },
+  '&:disabled': {
+    opacity: 0.25,
+    pointerEvents: 'none',
+  },
+  variants: {
+    variant: {
+      outlined: {
+        // same as default styles
+      },
+      solid: {
+        '&:not(:hover)': {
+          background: 'black',
+          borderColor: 'black',
+          color: 'white',
+        },
+        '&:hover': {
+          background: 'transparent',
+          borderColor: 'currentColor',
+          color: 'currentColor',
+        },
+      },
+    },
+  },
+});
+```
+
+More examples coming soon

package/dist/index.cjs

@@ -0,0 +1,4 @@
+"use strict";const _=require("esbuild"),P=require("winston");require("child_process");const a=require("path"),d=require("fs"),q=require("fs/promises");function S(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(s,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return s.default=e,Object.freeze(s)}const E=S(_),f=S(P),F=e=>String.fromCharCode(e+(e>25?39:97)),v=(e,s)=>{let t="",n;for(n=Math.abs(e);n>52;n=n/52|0)t=F(n%52)+t;return t=F(n%52)+t,t.length<s?t=t.padStart(s,"a"):t.length>s&&(t=t.slice(-s)),t},R=(e,s)=>{let t=s.length;for(;t;)e=e*33^s.charCodeAt(--t);return e},x=(e,s=3)=>{const t=R(5381,JSON.stringify(e))>>>0;return v(t,s)};f.createLogger({level:"info",format:f.format.combine(f.format.colorize(),f.format.cli()),transports:[new f.transports.Console({})]});const k=e=>a.join(e,"./saltygen"),z=["salty","css","styles","styled"],C=e=>new RegExp(`\\.(${z.join("|")})\\.`).test(e),N=async(e,s)=>{const t=x(e),n=a.join(s,"js",t+".js");await E.build({entryPoints:[e],minify:!0,treeShaking:!0,bundle:!0,outfile:n,format:"esm",target:["es2022"],keepNames:!0,external:["react"]});const r=Date.now();return await import(`${n}?t=${r}`)},O=async e=>{const s=k(e),t=a.join(s,"salty-config.js"),{config:n}=await import(t);return n},A=async(e,s)=>{try{const t=[],n=a.join(e,"./saltygen"),r=a.join(n,"index.css");if(C(s)){const y=await O(e),m=await N(s,n);Object.entries(m).forEach(([c,u])=>{if(!u.generator)return;const g=u.generator._withBuildContext({name:c,config:y}),p=`${g.hash}-${g.priority}.css`,w=`css/${p}`,j=a.join(n,w);t.push(p),d.writeFileSync(j,g.css)});const o=d.readFileSync(r,"utf8").split(`
+`),h=t.map(c=>`@import url('../saltygen/css/${c}');`),l=[...new Set([...o,...h])].join(`
+`);d.writeFileSync(r,l)}}catch(t){console.error(t)}},H=async(e,s)=>{try{const t=a.join(e,"./saltygen");if(C(s)){let r=d.readFileSync(s,"utf8");r.replace(/^(?!export\s)const\s.*/gm,i=>`export ${i}`)!==r&&await q.writeFile(s,r);const y=await O(e),m=await N(s,t);let o=r;Object.entries(m).forEach(([i,l])=>{var b;if(l.isKeyframes){console.log("value",l);return}if(!l.generator)return;const c=l.generator._withBuildContext({name:i,config:y}),u=new RegExp(`${i}[=\\s]+[^()]+styled\\(([^,]+),`,"g").exec(r);if(!u)return console.error("Could not find the original declaration");const g=(b=u.at(1))==null?void 0:b.trim(),{element:p,variantKeys:w}=c.props,j=`${i} = styled(${g}, "${c.classNames}", "${c._callerName}", ${JSON.stringify(p)}, ${JSON.stringify(w)});`,D=new RegExp(`${i}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`,"g");o=o.replace(D,j)});const h=x(s,6);return y.importStrategy==="component"&&(o=`import '../../saltygen/css/${h}.css';
+${o}`),o=o.replace("{ styled }","{ styledClient as styled }"),o=o.replace("@salty-css/react/styled","@salty-css/react/styled-client"),o}}catch(t){console.error(t)}};async function J(){const{dir:e}=this.getOptions(),{resourcePath:s,hot:t}=this;return t&&await A(e,s),await H(e,s)}module.exports=J;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { LoaderContext } from 'webpack';
+interface SaltyLoaderOptions {
+    dir: string;
+}
+type WebpackLoaderThis = LoaderContext<SaltyLoaderOptions>;
+export default function (this: WebpackLoaderThis): Promise<string | undefined>;
+export {};

package/dist/index.js

@@ -0,0 +1,103 @@
+import * as O from "esbuild";
+import * as p from "winston";
+import "child_process";
+import { join as a } from "path";
+import { writeFileSync as F, readFileSync as C } from "fs";
+import { writeFile as P } from "fs/promises";
+const S = (e) => String.fromCharCode(e + (e > 25 ? 39 : 97)), v = (e, s) => {
+  let t = "", n;
+  for (n = Math.abs(e); n > 52; n = n / 52 | 0) t = S(n % 52) + t;
+  return t = S(n % 52) + t, t.length < s ? t = t.padStart(s, "a") : t.length > s && (t = t.slice(-s)), t;
+}, R = (e, s) => {
+  let t = s.length;
+  for (; t; ) e = e * 33 ^ s.charCodeAt(--t);
+  return e;
+}, N = (e, s = 3) => {
+  const t = R(5381, JSON.stringify(e)) >>> 0;
+  return v(t, s);
+};
+p.createLogger({
+  level: "info",
+  format: p.format.combine(p.format.colorize(), p.format.cli()),
+  transports: [new p.transports.Console({})]
+});
+const A = (e) => a(e, "./saltygen"), H = ["salty", "css", "styles", "styled"], b = (e) => new RegExp(`\\.(${H.join("|")})\\.`).test(e), j = async (e, s) => {
+  const t = N(e), n = a(s, "js", t + ".js");
+  await O.build({
+    entryPoints: [e],
+    minify: !0,
+    treeShaking: !0,
+    bundle: !0,
+    outfile: n,
+    format: "esm",
+    target: ["es2022"],
+    keepNames: !0,
+    external: ["react"]
+  });
+  const r = Date.now();
+  return await import(`${n}?t=${r}`);
+}, D = async (e) => {
+  const s = A(e), t = a(s, "salty-config.js"), { config: n } = await import(t);
+  return n;
+}, J = async (e, s) => {
+  try {
+    const t = [], n = a(e, "./saltygen"), r = a(n, "index.css");
+    if (b(s)) {
+      const y = await D(e), d = await j(s, n);
+      Object.entries(d).forEach(([c, g]) => {
+        if (!g.generator) return;
+        const f = g.generator._withBuildContext({
+          name: c,
+          config: y
+        }), m = `${f.hash}-${f.priority}.css`, h = `css/${m}`, w = a(n, h);
+        t.push(m), F(w, f.css);
+      });
+      const o = C(r, "utf8").split(`
+`), u = t.map((c) => `@import url('../saltygen/css/${c}');`), l = [.../* @__PURE__ */ new Set([...o, ...u])].join(`
+`);
+      F(r, l);
+    }
+  } catch (t) {
+    console.error(t);
+  }
+}, _ = async (e, s) => {
+  try {
+    const t = a(e, "./saltygen");
+    if (b(s)) {
+      let r = C(s, "utf8");
+      r.replace(/^(?!export\s)const\s.*/gm, (i) => `export ${i}`) !== r && await P(s, r);
+      const y = await D(e), d = await j(s, t);
+      let o = r;
+      Object.entries(d).forEach(([i, l]) => {
+        var x;
+        if (l.isKeyframes) {
+          console.log("value", l);
+          return;
+        }
+        if (!l.generator) return;
+        const c = l.generator._withBuildContext({
+          name: i,
+          config: y
+        }), g = new RegExp(`${i}[=\\s]+[^()]+styled\\(([^,]+),`, "g").exec(r);
+        if (!g)
+          return console.error("Could not find the original declaration");
+        const f = (x = g.at(1)) == null ? void 0 : x.trim(), { element: m, variantKeys: h } = c.props, w = `${i} = styled(${f}, "${c.classNames}", "${c._callerName}", ${JSON.stringify(m)}, ${JSON.stringify(
+          h
+        )});`, E = new RegExp(`${i}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`, "g");
+        o = o.replace(E, w);
+      });
+      const u = N(s, 6);
+      return y.importStrategy === "component" && (o = `import '../../saltygen/css/${u}.css';
+${o}`), o = o.replace("{ styled }", "{ styledClient as styled }"), o = o.replace("@salty-css/react/styled", "@salty-css/react/styled-client"), o;
+    }
+  } catch (t) {
+    console.error(t);
+  }
+};
+async function I() {
+  const { dir: e } = this.getOptions(), { resourcePath: s, hot: t } = this;
+  return t && await J(e, s), await _(e, s);
+}
+export {
+  I as default
+};

package/dist/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@salty-css/webpack",
+  "version": "0.0.1-alpha.3",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "typings": "./dist/index.d.ts",
+  "type": "module",
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/margarita-form/salty-css",
+  "bugs": {
+    "url": "https://github.com/margarita-form/salty-css/issues"
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "nx": {
+    "name": "webpack"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs"
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/webpack",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.3",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",