@salty-css/eslint-plugin-core 0.0.1-alpha.12

package/README.md

@@ -0,0 +1,111 @@
+# 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', {
+  base: {
+    display: 'block',
+    padding: '2vw',
+  },
+});
+```
+
+**Button** (`components/button/button.css.ts`)
+
+```tsx
+import { styled } from '@salty-css/react/styled';
+
+export const Button = styled('button', {
+  base: {
+    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/index.cjs

@@ -0,0 +1 @@
+"use strict";require("esbuild");const d=require("winston");require("child_process");require("path");require("fs");require("fs/promises");function y(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const a=y(d);a.createLogger({level:"info",format:a.format.combine(a.format.colorize(),a.format.cli()),transports:[new a.transports.Console({})]});const f=["salty","css","styles","styled"],m=(e=[])=>new RegExp(`\\.(${[...f,...e].join("|")})\\.`),p=(e,r=[])=>m(r).test(e),b={meta:{type:"problem",docs:{description:"Ensure `variants` are not nested inside `base` in styled calls",category:"Errors",recommended:!0},messages:{nestedVariants:"`variants` should not be nested inside `base`."}},create(e){return p(e.filename)?{CallExpression:n=>{try{const{callee:t,arguments:u}=n;if(!(t.type==="Identifier"&&t.name==="styled"))return;const i=u[0];if(!i||!(i.type==="ObjectExpression"))return;const o=i.properties.find(s=>s.type==="Property"&&s.key.type==="Identifier"&&s.key.name==="base");if(!o)return;const{value:l}=o;if(!(l.type==="ObjectExpression"))return;const c=l.properties.find(s=>s.type==="Property"&&s.key.type==="Identifier"&&s.key.name==="variants");if(!c)return;e.report({node:c,messageId:"nestedVariants"})}catch(t){console.log("ESlint error",t);return}}}:{}}},g={rules:{"no-variants-in-base":b}};module.exports=g;

package/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    rules: {
+        'no-variants-in-base': import("eslint").Rule.RuleModule;
+    };
+};
+export default _default;

package/index.js

@@ -0,0 +1,58 @@
+import "esbuild";
+import * as s from "winston";
+import "child_process";
+import "path";
+import "fs";
+import "fs/promises";
+s.createLogger({
+  level: "info",
+  format: s.format.combine(s.format.colorize(), s.format.cli()),
+  transports: [new s.transports.Console({})]
+});
+const d = ["salty", "css", "styles", "styled"], m = (t = []) => new RegExp(`\\.(${[...d, ...t].join("|")})\\.`), p = (t, a = []) => m(a).test(t), f = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Ensure `variants` are not nested inside `base` in styled calls",
+      category: "Errors",
+      recommended: !0
+    },
+    messages: {
+      nestedVariants: "`variants` should not be nested inside `base`."
+    }
+  },
+  create(t) {
+    return p(t.filename) ? {
+      CallExpression: (c) => {
+        try {
+          const { callee: r, arguments: y } = c;
+          if (!(r.type === "Identifier" && r.name === "styled")) return;
+          const n = y[0];
+          if (!n || !(n.type === "ObjectExpression")) return;
+          const i = n.properties.find((e) => e.type === "Property" && e.key.type === "Identifier" && e.key.name === "base");
+          if (!i) return;
+          const { value: o } = i;
+          if (!(o.type === "ObjectExpression")) return;
+          const l = o.properties.find(
+            (e) => e.type === "Property" && e.key.type === "Identifier" && e.key.name === "variants"
+          );
+          if (!l) return;
+          t.report({
+            node: l,
+            messageId: "nestedVariants"
+          });
+        } catch (r) {
+          console.log("ESlint error", r);
+          return;
+        }
+      }
+    } : {};
+  }
+}, I = {
+  rules: {
+    "no-variants-in-base": f
+  }
+};
+export {
+  I as default
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@salty-css/eslint-plugin-core",
+  "version": "0.0.1-alpha.12",
+  "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": [
+    "**/*",
+    "!**/*.tsbuildinfo"
+  ],
+  "nx": {
+    "sourceRoot": "libs/eslint-plugin-core/src",
+    "name": "eslint-plugin-core"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs"
+    }
+  },
+  "peerDependencies": {
+    "@salty-css/core": ">=1.x || >=0.x",
+    "eslint": ">=9.x || >=8.x >=7.x"
+  }
+}

package/rules/no-variants-in-base.d.ts

@@ -0,0 +1,2 @@
+import { Rule } from 'eslint';
+export declare const noVariantsInBase: Rule.RuleModule;