babel-preset-cssxjs 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# v0.2.0 (Tue Nov 04 2025)
+
+#### 🚀 Enhancement
+
+- feat: refactor all babel plugins to perform early transformation of all code in Program.enter block ([@cray0000](https://github.com/cray0000))
+- feat(runtime): implement support for both React Native and pure Web ([@cray0000](https://github.com/cray0000))
+- feat: make it work for pure web through a babel plugin [#2](https://github.com/startupjs/cssx/pull/2) ([@cray0000](https://github.com/cray0000))
+
+#### Authors: 1
+
+- Pavel Zhukov ([@cray0000](https://github.com/cray0000))

package/README.md

@@ -0,0 +1,22 @@
+# babel-preset-startupjs
+> Babel preset for compiling StartupJS app on server, web, native
+
+## Usage in StartupJS projects
+
+StartupJS projects include this configuration by default. **You don't need to install it separately in StartupJS projects.**
+
+## Usage outside of StartupJS
+
+If you want to use this preset in a custom project, just plug it in `.babelrc`:
+
+```json
+{
+  presets: ['startupjs']
+}
+```
+
+## License
+
+MIT
+
+(c) Decision Mapper - http://decisionmapper.com

package/index.js

@@ -0,0 +1,60 @@
+module.exports = (api, { platform } = {}) => {
+  return {
+    overrides: [{
+      test: isJsxSource,
+      plugins: [
+        // support JSX syntax
+        require('@babel/plugin-syntax-jsx')
+      ]
+    }, {
+      test: isTypeScriptSource,
+      plugins: [
+        // support TypeScript syntax
+        require('@babel/plugin-syntax-typescript')
+      ]
+    }, {
+      test: isTsxSource,
+      plugins: [
+        // support TypeScript + JSX syntax
+        [require('@babel/plugin-syntax-typescript'), {
+          isTSX: true
+        }]
+      ]
+    }, {
+      plugins: [
+        // transform pug to jsx. This generates a bunch of new AST nodes
+        // (it's important to do this first before any dead code elimination runs)
+        [require('@cssxjs/babel-plugin-react-pug'), {
+          classAttribute: 'styleName'
+        }],
+        // inline CSS modules (styl`` in the same JSX file -- similar to how it is in Vue.js)
+        [require('@cssxjs/babel-plugin-rn-stylename-inline'), {
+          platform
+        }],
+        // CSS modules (separate .styl/.css file)
+        [require('@cssxjs/babel-plugin-rn-stylename-to-style'), {
+          extensions: ['styl', 'css'],
+          useImport: true
+        }]
+      ].filter(Boolean)
+    }]
+  }
+}
+
+// all files which are not .ts or .tsx are considered to be pure JS with JSX support
+function isJsxSource (fileName) {
+  if (!fileName) return false
+  return !isTypeScriptSource(fileName) && !isTsxSource(fileName)
+}
+
+function isTypeScriptSource (fileName) {
+  if (!fileName) return false
+  return fileName.endsWith('.ts')
+}
+
+// NOTE: .tsx is the default when fileName is not provided.
+//       This is because we want to support the most overarching syntax by default.
+function isTsxSource (fileName) {
+  if (!fileName) return true
+  return fileName.endsWith('.tsx')
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "babel-preset-cssxjs",
+  "version": "0.2.0",
+  "description": "Babel preset for compiling CSSX",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "echo 'No tests yet' && exit 0"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@babel/plugin-syntax-jsx": "^7.0.0",
+    "@babel/plugin-syntax-typescript": "^7.23.3",
+    "@cssxjs/babel-plugin-react-pug": "^0.2.0",
+    "@cssxjs/babel-plugin-rn-stylename-inline": "^0.2.0",
+    "@cssxjs/babel-plugin-rn-stylename-to-style": "^0.2.0"
+  },
+  "gitHead": "a80a44b4d14c116871ca03997ce772b6beabf5d8"
+}