feat: add scrpts and envs

.github/workflows/publish-headlessui-react-native.yml

@@ -0,0 +1,62 @@
+name: Publish Package and Create Release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "20"
+          cache: yarn
+
+      - name: Setup yarn
+        run: npm install -g yarn
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Get package version
+        id: package-version
+        run: echo ::set-output name=version::$(node -p "require('./package.json').version")
+
+      - name: Authenticate with NPM
+        run: |
+          npm set //registry.npmjs.org/:_authToken="${{ secrets.NPM_ACCESS_TOKEN }}"
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
+
+      - name: Publish to NPM
+        run: npm publish --access public
+
+      - name: Package build
+        run: npm pack
+
+      - name: Create Release
+        id: create_release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+        with:
+          tag_name: v${{ steps.package-version.outputs.version }}
+          release_name: Release v${{ steps.package-version.outputs.version }}
+          draft: false
+          prerelease: false
+
+      - name: Upload Release Asset
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: styled-components-animatecss-${{ steps.package-version.outputs.version }}.tgz
+          asset_name: styled-components-animatecss-${{ steps.package-version.outputs.version }}.tgz
+          asset_content_type: application/gzip

.gitignore

@@ -0,0 +1,12 @@
+node_modules
+build
+dist
+index.ts
+
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.DS_Store
+

.swcrc

@@ -0,0 +1,16 @@
+{
+  "minify": true,
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": false,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "target": "es5",
+    "loose": false
+  },
+  "module": {
+    "type": "commonjs"
+  }
+}

build.js

@@ -0,0 +1,51 @@
+const fs = require("fs").promises;
+
+const removeCommon = (text) => {
+  const regex = /:root[\s\S]*?@-webkit-keyframes/;
+  return text.replace(regex, "@-webkit-keyframes");
+};
+
+const removeWebkitKeyframes = (text) => {
+  const regex =
+    /@-webkit-keyframes\s+[\w-]+\s*\{[^{}]*?(?:\{[^{}]*?\}[^{}]*?)*\}/g;
+  return text.replace(regex, "");
+};
+
+const removeCSSClass = (text) => {
+  const regex = /\.[\w-]+(?:\.[\w-]+)*\s*\{[^{}]*?(?:\{[^{}]*?\}[^{}]*?)*\}/g;
+  return text.replace(regex, "");
+};
+
+const convertCSSKeyframesToJS = (text) => {
+  const regex = /@keyframes\s+(\w+)\s*\{([^{}]*?(?:\{[^{}]*?\}[^{}]*?)*)\}/g;
+
+  let result;
+  let output = "";
+
+  while ((result = regex.exec(text)) !== null) {
+    const name = result[1];
+    const keyframes = result[2].trim();
+    output += `export const ${name} = keyframes\`\n${keyframes}\n\`;\n\n`;
+  }
+  return output;
+};
+
+const processCSSFile = async () => {
+  try {
+    const string = await fs.readFile("animate.css", "utf8");
+    const cleanedContent = convertCSSKeyframesToJS(
+      removeCSSClass(removeWebkitKeyframes(removeCommon(string)))
+    );
+    await fs.writeFile(
+      "index.ts",
+      "import { keyframes } from 'styled-components';\n\n" + cleanedContent
+    );
+    console.log(
+      "CSS keyframes have been converted to JavaScript and saved as keyframes.js"
+    );
+  } catch (error) {
+    console.error("Error processing file:", error);
+  }
+};
+
+processCSSFile();

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "styled-components-animatecss",
+  "title": "Styled Components Animatecss",
+  "description": "",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "homepage": "hhttps://github.com/nakzyu/styled-components-animatecss",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nakzyu/styled-components-animatecss.git"
+  },
+  "keywords": [
+    "Styled Components Animatecss",
+    "Styled Components Animation",
+    "animate.css styled components"
+  ],
+  "files": [
+    "/dist"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@swc/cli": "^0.3.12",
+    "@swc/core": "^1.5.3",
+    "@swc/helpers": "^0.5.11",
+    "@types/node": "^22.5.0",
+    "typescript": "^5.4.5"
+  },
+  "peerDependencies": {
+    "styled-components": "*"
+  },
+  "scripts": {
+    "build": "yarn add styled-components && node build.js && swc index.ts -d dist && tsc",
+    "prepublishOnly": "yarn build"
+  },
+  "dependencies": {
+    "styled-components": "^6.1.12"
+  }
+}

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "module": "commonjs",
+    "target": "es5",
+    "jsx": "react",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "strict": true
+  },
+  "include": ["index.ts"]
+}