From 9bf2425b8ea6ad7d670117600bcb0c046480d409 Mon Sep 17 00:00:00 2001 From: Wombosvideo Date: Mon, 10 Mar 2025 22:33:50 +0100 Subject: [PATCH] Feat: Wrap CSS file in a Node.js package - Update directory structure - Move and rename CSS file - Add package.json - Update README.md - Add build script (with mkdirp) - Add format script (with prettier) - Add GitHub action for publishing Closes #3 --- .github/workflows/publish.yml | 35 ++++++++++++ .gitignore | 2 + .prettierignore | 2 +- .prettierrc | 4 ++ README.md | 56 ++++++++++++++++--- package-lock.json | 49 ++++++++++++++++ package.json | 36 ++++++++++++ pnpm-lock.yaml | 37 ++++++++++++ .../tailwind-animate.css | 2 +- 9 files changed, 213 insertions(+), 10 deletions(-) create mode 100644 .github/workflows/publish.yml create mode 100644 .gitignore create mode 100644 .prettierrc create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 pnpm-lock.yaml rename tailwindcss-animate.css => src/tailwind-animate.css (99%) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml new file mode 100644 index 0000000..a4135f6 --- /dev/null +++ b/.github/workflows/publish.yml @@ -0,0 +1,35 @@ +name: Publish to npm with pnpm + +on: + push: + tags: + - "v*" # Triggers when pushing tags like v1.0.0 + +jobs: + publish: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + + - name: Set up Node.js and pnpm + uses: actions/setup-node@v4 + with: + node-version: 20 + registry-url: "https://registry.npmjs.org/" + cache: "pnpm" + + - name: Install pnpm + run: corepack enable + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Build package + run: pnpm run build + + - name: Publish to npm + run: pnpm publish --access public + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..de4d1f0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +dist +node_modules diff --git a/.prettierignore b/.prettierignore index f381576..e32d6d8 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1 @@ -tailwindcss-animate.css +src/tailwind-animate.css diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..8973894 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "useTabs": false, + "tabWidth": 2 +} diff --git a/README.md b/README.md index c0cfc8d..65992f1 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,61 @@ -# tailwindcss-animate-v4 +# tailwind-animate-css -TailwindCSS v4.0 compatible replacement for `tailwindcss-animate` ([GitHub](https://github.com/jamiebuilds/tailwindcss-animate/), [npm](https://www.npmjs.com/package/tailwindcss-animate)). +TailwindCSS v4.0 compatible replacement for `tailwindcss-animate` +([GitHub][Original_Plugin_GitHub], [npm][Original_Plugin_NPM]). -## Quick start +Instead of being an old-fashioned JavaScript plugin, this package provides a +CSS file defining custom utilities based on the new +[CSS-first architecture][TailwindCSS_Custom_Utilities]. -1. Download the [`tailwindcss-animate.css`](https://raw.githubusercontent.com/Wombosvideo/tailwindcss-animate-v4/refs/heads/main/tailwindcss-animate.css) file from GitHub and place it next to your `app.css`. -2. Add the following line to your `app.css`: +## Installation + +### NPM + +1. Install the package with `npm`: + + ```bash + npm install tailwind-animate-css + ``` + +2. Add the following line to your `app.css` or `globals.css` file: + + ```css + @import "tailwind-animate-css"; + ``` + + > [!NOTE] + > This works with esbuild, Vite and probably other bundlers too. If you are + > using a different bundler, the syntax may differ. + > [Let me know][Create_Issue] how it works and I'll update the documentation. + +3. Start using the animations! + +### Manual download + +1. Download the [`tailwind-animate.css`][CSS_File] + file from GitHub and place it next to your `app.css`. +2. Add the following line to your `app.css` or `globals.css` file: ```css - @import './tailwindcss-animate.css'; + @import "./tailwind-animate.css"; ``` 3. Start using the animations! ## Usage -Refer to the [original documentation](https://github.com/jamiebuilds/tailwindcss-animate/blob/main/README.md) for more information. +Refer to the [original documentation][Original_Plugin_Docs] for more information. > [!NOTE] -> I use very litte of the original library, so it might not be a 100% compatible drop-in replacement. If you notice any inconsistencies, feel free to contribute to this repository by opening a pull-request. +> I use very litte of the original library, so it might not be a 100% compatible +> drop-in replacement. If you notice any inconsistencies, feel free to contribute +> to this repository by opening a pull-request. + + + +[Original_Plugin_GitHub]: https://github.com/jamiebuilds/tailwindcss-animate +[Original_Plugin_NPM]: https://www.npmjs.com/package/tailwindcss-animate +[Original_Plugin_Docs]: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/README.md +[TailwindCSS_Custom_Utilities]: https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities +[Create_Issue]: https://github.com/Wombosvideo/tailwind-animate-css/issues/new +[CSS_File]: https://raw.githubusercontent.com/Wombosvideo/tailwind-animate-css/refs/heads/main/src/tailwind-animate.css diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..b418b9f --- /dev/null +++ b/package-lock.json @@ -0,0 +1,49 @@ +{ + "name": "tailwind-animate-css", + "version": "1.2.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "tailwind-animate-css", + "version": "1.2.0", + "license": "MIT", + "devDependencies": { + "mkdirp": "^3.0.1", + "prettier": "^3.5.3" + } + }, + "node_modules/mkdirp": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz", + "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==", + "dev": true, + "license": "MIT", + "bin": { + "mkdirp": "dist/cjs/src/bin.js" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/prettier": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz", + "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..2602bcd --- /dev/null +++ b/package.json @@ -0,0 +1,36 @@ +{ + "name": "tailwind-animate-css", + "version": "1.2.0", + "description": "TailwindCSS v4.0 compatible replacement for `tailwindcss-animate`.", + "scripts": { + "build": "mkdirp dist && cp src/tailwind-animate.css dist/", + "format": "prettier --write ." + }, + "main": "dist/tailwind-animate.css", + "exports": { + ".": "./dist/tailwind-animate.css" + }, + "keywords": [ + "tailwindcss-animate", + "tailwindcss", + "animation" + ], + "author": { + "name": "Luca Bosin", + "url": "https://github.com/Wombosvideo" + }, + "license": "MIT", + "homepage": "https://github.com/Wombosvideo/tailwind-animate-css", + "bugs": { + "url": "https://github.com/Wombosvideo/tailwind-animate-css/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/Wombosvideo/tailwind-animate-css.git" + }, + "packageManager": "pnpm@10.5.0", + "devDependencies": { + "mkdirp": "^3.0.1", + "prettier": "^3.5.3" + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml new file mode 100644 index 0000000..1a49283 --- /dev/null +++ b/pnpm-lock.yaml @@ -0,0 +1,37 @@ +lockfileVersion: "9.0" + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + +importers: + .: + devDependencies: + mkdirp: + specifier: ^3.0.1 + version: 3.0.1 + prettier: + specifier: ^3.5.3 + version: 3.5.3 + +packages: + mkdirp@3.0.1: + resolution: + { + integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==, + } + engines: { node: ">=10" } + hasBin: true + + prettier@3.5.3: + resolution: + { + integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==, + } + engines: { node: ">=14" } + hasBin: true + +snapshots: + mkdirp@3.0.1: {} + + prettier@3.5.3: {} diff --git a/tailwindcss-animate.css b/src/tailwind-animate.css similarity index 99% rename from tailwindcss-animate.css rename to src/tailwind-animate.css index 46ed8ed..6d251b9 100644 --- a/tailwindcss-animate.css +++ b/src/tailwind-animate.css @@ -8,7 +8,7 @@ * @license MIT */ -@theme inline { +@theme { --animation-delay-0: 0s; --animation-delay-75: 75ms; --animation-delay-100: 0.1s;