feat(plugin): add Vite plugin

packages/vite-loader/.eslintignore

@@ -0,0 +1,3 @@
+*.d.ts
+dist
+node_modules

packages/vite-loader/.eslintrc

@@ -0,0 +1,195 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "rules": {
+    "array-bracket-spacing": [
+      "error",
+      "never"
+    ],
+    "array-callback-return": "error",
+    "arrow-spacing": "error",
+    "brace-style": [
+      "error",
+      "stroustrup"
+    ],
+    "comma-spacing": [
+      "error",
+      {
+        "before": false,
+        "after": true
+      }
+    ],
+    "computed-property-spacing": [
+      "error",
+      "never"
+    ],
+    "cond-assign": "off",
+    "dot-notation": "error",
+    "eol-last": [
+      "error",
+      "always"
+    ],
+    "eqeqeq": "error",
+    "generator-star-spacing": [
+      "error",
+      "after"
+    ],
+    "indent": [
+      "error",
+      2,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "key-spacing": [
+      "error",
+      {
+        "beforeColon": false,
+        "afterColon": true
+      }
+    ],
+    "keyword-spacing": [
+      "error",
+      {
+        "before": true
+      }
+    ],
+    "linebreak-style": [
+      "error",
+      "unix"
+    ],
+    "max-len": [
+      "error",
+      {
+        "code": 100,
+        "tabWidth": 2
+      }
+    ],
+    "named": "off",
+    "no-array-constructor": "error",
+    "no-console": [
+      "warn",
+      {
+        "allow": [
+          "warn",
+          "error",
+          "info"
+        ]
+      }
+    ],
+    "no-dupe-class-members": "error",
+    "no-dupe-keys": "error",
+    "no-else-return": "error",
+    "no-empty": "error",
+    "no-func-assign": "error",
+    "no-label-var": "error",
+    "no-lone-blocks": "error",
+    "no-mixed-spaces-and-tabs": "error",
+    "no-multi-spaces": "error",
+    "no-multi-str": "error",
+    "no-multiple-empty-lines": [
+      "error",
+      {
+        "max": 1,
+        "maxBOF": 0,
+        "maxEOF": 0
+      }
+    ],
+    "no-path-concat": "error",
+    "no-redeclare": [
+      "error",
+      {
+        "builtinGlobals": true
+      }
+    ],
+    "no-script-url": "error",
+    "no-self-compare": "error",
+    "no-shadow": [
+      "error",
+      {
+        "allow": [
+          "done"
+        ]
+      }
+    ],
+    "no-shadow-restricted-names": "error",
+    "no-sync": "error",
+    "no-trailing-spaces": "error",
+    "no-undef": "error",
+    "no-unreachable": "error",
+    "no-unused-labels": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "ignoreRestSiblings": true
+      }
+    ],
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": [
+      "error"
+    ],
+    "no-useless-constructor": "error",
+    "no-var": "error",
+    "object-curly-spacing": [
+      "error",
+      "never"
+    ],
+    "object-shorthand": [
+      "error",
+      "always"
+    ],
+    "prefer-spread": "error",
+    "prefer-template": "error",
+    "quotes": [
+      "error",
+      "backtick",
+      {
+        "allowTemplateLiterals": true
+      }
+    ],
+    "radix": "error",
+    "semi": [
+      "error",
+      "never"
+    ],
+    "space-before-blocks": [
+      "error",
+      "always"
+    ],
+    "space-before-function-paren": [
+      "error",
+      {
+        "anonymous": "always",
+        "named": "never",
+        "asyncArrow": "always"
+      }
+    ],
+    "space-in-parens": [
+      "error",
+      "never"
+    ],
+    "space-infix-ops": "error",
+    "spaced-comment": [
+      "error",
+      "always"
+    ],
+    "template-curly-spacing": [
+      "error",
+      "never"
+    ],
+    "use-isnan": "error",
+    "valid-typeof": "error"
+  }
+}

packages/vite-loader/.npmignore

@@ -0,0 +1,16 @@
+.log
+.editorconfig
+.env
+.env.test
+.eslintrc
+.gitattributes
+.gitignore
+.idea/ 
+.log
+.vscode/
+logs
+node_modules
+npm-debug.log*
+src
+yarn-debug.log*
+yarn-error.log*

packages/vite-loader/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Sultan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/vite-loader/README.md

@@ -0,0 +1,58 @@
+# vite-plugin-stylin
+This is the official Vite plugin for `@stylin/style` package. It supports import from both CSS and SCSS files.
+
+## Installation
+```sh
+npm install --save-dev vite-plugin-stylin
+```
+
+Register your plugin in `vite.config.ts`:
+
+```ts
+import stylin from 'vite-plugin-stylin';
+
+export default defineConfig({
+  plugins: [stylin(), otherPlugin()]
+});
+```
+
+And enjoy! You can now import components from your `.module.css` and `.module.scss` files:
+
+```ts
+import { Button } from '~/components/button.module.scss';
+
+export default function MyCustomButton() {
+  return (
+    <Button variant="success">Custom button</Button>
+  )
+}
+```
+
+**Important note**  
+This plugin only supports importing from **CSS modules.** So make sure your files ends with `.module.css` or `.module.scss`.
+
+## Typescript Support
+This plugin comes with support for Typescript built-in! Modify your `vite.config.ts` as follows:
+
+```ts
+import stylin from 'vite-plugin-stylin';
+import tsStylin from 'vite-plugin-stylin/ts'; // <-- New!
+
+export default defineConfig({
+  plugins: [stylin(), tsStylin(), otherPlugin()]
+});
+```
+
+This plugin detects files that ends with `.module.css` or `.module.scss` in your project and creates matching `.d.ts` files alongside them. For example, if your source code directory has this structure:
+```
+|-- src
+  |-- components
+    |-- button.module.css
+```
+The plugin will create a `button.module.css.d.ts` file next to it:
+```
+|-- src
+  |-- components
+    |-- button.module.css
+    |-- button.module.css.d.ts
+```

packages/vite-loader/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "vite-plugin-stylin",
+  "type": "module",
+  "version": "0.0.0",
+  "description": "Stylin plugin for Vite",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sultan99/stylin",
+    "directory": "packages/vite-loader"
+  },
+  "author": "Yishai Zehavi",
+  "main": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./ts": {
+      "import": "./dist/esm/ts.js",
+      "require": "./dist/cjs/ts.js",
+      "types": "./dist/types/ts.d.ts"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "npm run clean && npm run compile && node ./scripts/prepare-cjs.mjs",
+    "clean": "rm -rf ./dist && npm run copy-files",
+    "compile": "tsc -b ./tsconfig.cjs.json ./tsconfig.esm.json ./tsconfig.types.json",
+    "copy-files": "mkdir -p dist/{esm,cjs} && cp ./src/*.hbs ./dist/esm/ && cp ./src/*.hbs ./dist/cjs/",
+    "lint": "eslint . --ext .tsx,.ts --fix",
+    "prepublishOnly": "npm run build",
+    "watch": "tsc -w"
+  },
+  "devDependencies": {
+    "@rollup/pluginutils": "^5.1.0",
+    "@types/handlebars": "^4.1.0",
+    "@types/node": "^20.12.2",
+    "@types/ramda": "^0.28.11",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "eslint": "^8.13.0",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.7"
+  },
+  "dependencies": {
+    "handlebars": "^4.7.8",
+    "ramda": "^0.28.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/vite-loader/scripts/prepare-cjs.mjs

@@ -0,0 +1,9 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+const cjsOutDir = path.join(import.meta.dirname, '../dist/cjs');
+function createCJSModulePackageJson() {
+  fs.writeFileSync(path.join(cjsOutDir, 'package.json'), '{ "type": "commonjs" }', 'utf-8');
+}
+
+createCJSModulePackageJson();