Merge pull request #207 from wojtekmaj/typescript

Migrate to TypeScript

Author: jacobp100

.babelrc

@@ -14,6 +14,20 @@ jobs:
     name: Lint
     runs-on: ubuntu-24.04-arm
 
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+
+      - name: Run linting
+        run: biome lint
+
+  typescript:
+    name: Type checking
+    runs-on: ubuntu-24.04-arm
+
     steps:
       - name: Checkout
         uses: actions/checkout@v6
@@ -30,8 +44,22 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Run lint
-        run: pnpm lint
+      - name: Run type checking
+        run: pnpm tsc
+
+  format:
+    name: Format
+    runs-on: ubuntu-24.04-arm
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+
+      - name: Run formatting
+        run: biome format
 
   unit:
     name: Unit tests
@@ -54,7 +82,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Run tests
-        run: pnpm test
+        run: pnpm unit
 
   build:
     name: Build

.eslintrc.js

@@ -20,4 +20,4 @@ npm-debug.log
 
 # Built files
 /index.js
-
+/index.d.ts

.github/workflows/ci.yml

@@ -94,10 +94,15 @@ For implementors, there is also a few extra APIs available.
 These are for specific use-cases, and most people should just be using the API above.
 
 ```js
-import { getPropertyName, getStylesForProperty } from 'css-to-react-native';
+import {
+  getPropertyName,
+  getStylesForProperty,
+  transformRawValue,
+} from 'css-to-react-native';
 
 getPropertyName('border-width'); // => 'borderWidth'
 getStylesForProperty('borderWidth', '1px 0px 2px 0px'); // => { borderTopWidth: 1, ... }
+transformRawValue('opacity', '0.5'); // => 0.5
 ```
 
 Should you wish to opt-out of transforming certain shorthands, an array of property names in camelCase can be passed as a second argument to `transform`.
@@ -109,6 +114,8 @@ transform([['border-radius', '50px']], ['borderRadius']);
 
 This can also be done by passing a third argument, `false` to `getStylesForProperty`.
 
+`transformRawValue` is a lower-level helper that parses a single raw value without applying shorthand expansion.
+
 ## License
 
 Licensed under the MIT License, Copyright © 2019 Krister Kari, Jacob Parker, and Maximilian Stoiber.

.gitignore

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.4.9/schema.json",
+  "files": {
+    "includes": ["src/**"]
+  },
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  },
+  "formatter": {
+    "indentStyle": "space"
+  },
+  "linter": {
+    "rules": {
+      "correctness": {
+        "noUnusedImports": "warn",
+        "noUnusedVariables": {
+          "level": "warn",
+          "options": {
+            "ignoreRestSiblings": true
+          }
+        }
+      },
+      "suspicious": {
+        "noConsole": "warn"
+      }
+    }
+  },
+  "css": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "semicolons": "asNeeded",
+      "trailingCommas": "es5"
+    }
+  }
+}

.prettierrc

@@ -4,14 +4,19 @@
   "description": "Convert CSS text to a React Native stylesheet object",
   "main": "index.js",
   "types": "index.d.ts",
+  "sideEffects": false,
   "scripts": {
-    "build": "rollup ./src/index.js -o index.js --f cjs && babel index.js -o index.js",
-    "test": "vitest",
-    "test:watch": "vitest --watch",
-    "lint": "eslint src",
-    "prepublish": "npm run build",
+    "build": "rollup -c",
+    "clean": "node -e \"fs.rmSync('./index.js', { force: true }); fs.rmSync('./index.d.ts', { force: true })\"",
+    "format": "biome format",
+    "lint": "biome lint",
     "precommit": "lint-staged",
-    "lint-staged": "lint-staged"
+    "prebuild": "pnpm clean && pnpm tsc",
+    "prepack": "pnpm build",
+    "test": "pnpm lint && pnpm tsc && pnpm format && pnpm unit",
+    "tsc": "tsc",
+    "unit": "vitest",
+    "unit:watch": "vitest --watch"
   },
   "files": [
     "index.js",
@@ -36,17 +41,14 @@
   },
   "homepage": "https://github.com/styled-components/css-to-react-native#readme",
   "devDependencies": {
-    "@babel/cli": "^7.6.2",
-    "@babel/core": "^7.1.0",
-    "@babel/preset-env": "^7.6.2",
-    "eslint": "^4.17.0",
-    "eslint-config-airbnb-base": "^12.1.0",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-prettier": "^2.6.0",
+    "@types/node": "^24.7.2",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@biomejs/biome": "2.4.9",
     "lint-staged": "^6.1.0",
-    "prettier": "^1.18.2",
-    "rollup": "^1.22.0",
+    "rollup": "^4.40.2",
+    "rollup-plugin-dts": "^6.2.1",
+    "tslib": "^2.8.1",
+    "typescript": "^6.0.2",
     "vitest": "^4.0.1"
   },
   "dependencies": {
@@ -55,8 +57,8 @@
     "postcss-value-parser": "^4.0.2"
   },
   "lint-staged": {
-    "*.js": [
-      "eslint --fix",
+    "*.{js,ts}": [
+      "biome check",
       "git add"
     ]
   },