@cssxjs/babel-plugin-rn-stylename-to-style 0.2.15 → 0.2.17

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.2.17 (Mon Nov 10 2025)
+
+#### 🐛 Bug Fix
+
+- fix(babel-plugin-rn-stylename-to-style): change the default extensions to compile to .cssx.css and .cssx.styl (cray0000@gmail.com)
+
+#### Authors: 1
+
+- Pavel Zhukov (cray0000@gmail.com)
+
+---
+
+# v0.2.16 (Sun Nov 09 2025)
+
+#### 🚀 Enhancement
+
+- feat(babel-plugin-rn-stylename-to-style): Support compiling css file imports in Babel itself ([@cray0000](https://github.com/cray0000))
+
+#### Authors: 1
+
+- Pavel Zhukov ([@cray0000](https://github.com/cray0000))
+
+---
+
 # v0.2.15 (Sun Nov 09 2025)
 
 #### 🐛 Bug Fix

package/README.md

@@ -103,7 +103,7 @@ You must give one or more file extensions inside an array in the plugin options.
 
 #### `extensions`
 
-**Required**
+**Default** `['cssx.css', 'cssx.styl']`
 
 List of css extensions to process (`css`, `styl`, `sass`, etc.)
 
@@ -113,12 +113,19 @@ List of css extensions to process (`css`, `styl`, `sass`, etc.)
 
 Whether to generate ESM `import` instead of CJS `require`.
 
-#### `parseJson`
+#### `compileCssImports`
 
-**Default:** `false`
+**Default:** `true`
+
+Whether to pre-process the css file imports, like `import './index.styl'` by this babel
+plugin itself, instead of passing it further to the bundler to compile.
+Note that if Babel is responsible for compiling these files then the changes in then
+are not gonna be reactive and to see changes made to the separate CSS file
+you would need to restart the whole bundling with an option to clear the Babel cache.
 
-Whether the imported css is expected to be a JSON string or an object.
-If this flag is specified then JSON string is expected and it will do `JSON.parse` on it.
+Storing styles in separate files should be avoided though, you should try to only
+use it when importing some 3rd party libraries or for you global theme definitions,
+so these files shouldn't frequently change.
 
 #### `cache`
 

package/index.js

@@ -1,11 +1,15 @@
 const nodePath = require('path')
+const fs = require('fs')
 const t = require('@babel/types')
 const template = require('@babel/template').default
+const parser = require('@babel/parser')
 const { GLOBAL_NAME, LOCAL_NAME } = require('@cssxjs/runtime/constants')
 const { addNamed } = require('@babel/helper-module-imports')
 
-const COMPILERS = ['css', 'styl', 'pug'] // used in rn-stylename-inline. TODO: move to a shared place
+const COMPILERS = require('@cssxjs/loaders/compilers')
 const RUNTIME_LIBRARY = 'cssxjs/runtime'
+const DEFAULT_PLATFORM = 'web'
+const DEFAULT_EXTENSIONS = ['cssx.css', 'cssx.styl']
 const STYLE_NAME_REGEX = /(?:^s|S)tyleName$/
 const STYLE_REGEX = /(?:^s|S)tyle$/
 const ROOT_STYLE_PROP_NAME = 'style'
@@ -21,18 +25,19 @@ const buildSafeVar = template.expression(`
   typeof %%variable%% !== 'undefined' && %%variable%%
 `)
 
-const buildJsonParse = template(`
-  const %%name%% = JSON.parse(%%jsonStyle%%)
-`)
-
 const buildRuntimeVar = template(`
   const %%name%% = %%imported%%
 `)
 
+const buildConst = template(`
+  const %%variable%% = %%value%%
+`)
+
 module.exports = function (babel) {
   let styleHash = {}
   let cssIdentifier
   let hasObserver
+  let hasFrameworkImport
   let $program
   let usedCompilers
   let runtime
@@ -267,6 +272,7 @@ module.exports = function (babel) {
       styleHash = {}
       cssIdentifier = undefined
       hasObserver = undefined
+      hasFrameworkImport = undefined
       $program = undefined
       usedCompilers = undefined
       runtime = undefined
@@ -282,29 +288,31 @@ module.exports = function (babel) {
           // 2. Run early traversal of everything
           $this.traverse({
             ImportDeclaration ($this, state) {
+              // refactor this to check if we have the magic import and observer in Program:enter
+              // since there is now a race condition - if observer import is after css file import
+              // then it won't be detected
               if (!hasObserver) hasObserver = checkObserverImport($this, state)
+              if (!hasFrameworkImport) hasFrameworkImport = checkHasFrameworkImport($this, state)
 
-              const extensions =
-                Array.isArray(state.opts.extensions) &&
-                state.opts.extensions
+              const extensions = state.opts.extensions ?? DEFAULT_EXTENSIONS
 
-              if (!extensions) {
-                throw new Error(
-                  'You have not specified any extensions in the plugin options.'
-                )
+              if (!Array.isArray(extensions)) {
+                throw Error(`
+                  You have not specified any extensions in the plugin options.
+                  The 'extensions' option must be an array of strings like ['styl', 'css'].
+                  If you don't want to handle any CSS file imports then specify an empty array.
+                `)
               }
 
-              const node = $this.node
+              const source = $this.node.source.value
+              if (!extensions.some(ext => source.endsWith(`.${ext}`))) return
+              const compilerName = source.split('.').pop()
 
-              if (extensions.indexOf(getExt(node)) === -1) {
-                return
-              }
-
-              const anonymousImports = $this.container.filter(n => {
+              const anonymousImports = $this.container.filter(node => {
                 return (
-                  t.isImportDeclaration(n) &&
-                  n.specifiers.length === 0 &&
-                  extensions.indexOf(getExt(n)) > -1
+                  t.isImportDeclaration(node) &&
+                  node.specifiers.length === 0 &&
+                  extensions.some(ext => node.source.value.endsWith(`.${ext}`))
                 )
               })
 
@@ -314,35 +322,50 @@ module.exports = function (babel) {
                 )
               }
 
-              let specifier = node.specifiers[0]
+              let specifier = $this.node.specifiers[0]
 
               if (!specifier) {
                 specifier = t.ImportDefaultSpecifier(
                   $this.scope.generateUidIdentifier('css')
                 )
-                node.specifiers = [specifier]
+                $this.node.specifiers = [specifier]
               }
 
-              cssIdentifier = specifier.local
-
-              // Do JSON.parse() on the css file if we receive it as a json string:
-              // import css from './index.styl'
-              //   v v v
-              // import jsonCss from './index.styl'
-              // const css = JSON.parse(jsonCss)
-              if (state.opts.parseJson) {
-                const lastImportOrRequire = $program
-                  .get('body')
-                  .filter(p => p.isImportDeclaration() || isRequire(p.node))
-                  .pop()
-                const tempCssIdentifier = $this.scope.generateUidIdentifier('jsonCss')
-                node.specifiers[0].local = tempCssIdentifier
-                lastImportOrRequire.insertAfter(
-                  buildJsonParse({
-                    name: cssIdentifier,
-                    jsonStyle: tempCssIdentifier
-                  })
+              const compileCssImports = state.opts.compileCssImports ?? true
+              // if we compile css imports, we need to replace the import with a variable declaration
+              if (compileCssImports) {
+                const localName = specifier.local.name
+                const filename = state.file?.opts?.filename
+                const platform = state.opts?.platform || state.file?.opts?.caller?.platform || DEFAULT_PLATFORM
+                // resolve the full path to the style file relative to the current file
+                const styleFilepath = nodePath.resolve(nodePath.dirname(filename), source)
+                // read the style file content
+                const styleFileContent = fs.readFileSync(styleFilepath, 'utf8')
+                // find the appropriate compiler
+                const compiler = COMPILERS[compilerName]
+                if (!compiler) {
+                  throw $this.buildCodeFrameError(
+                    `No compiler found for imported extension: "${source}"`
+                  )
+                }
+                const compiledString = compiler(
+                  styleFileContent,
+                  styleFilepath,
+                  { platform }
                 )
+                const compiledExpression = parser.parseExpression(compiledString)
+
+                cssIdentifier = t.identifier(localName)
+                const varDeclaration = buildConst({
+                  variable: cssIdentifier,
+                  value: compiledExpression
+                })
+                insertAfterImports($program, varDeclaration)
+                // remove the original import and insert the variable declaration instead
+                $this.remove()
+              } else {
+                // otherwise just keep the import as is
+                cssIdentifier = specifier.local
               }
             },
             JSXOpeningElement: {
@@ -412,14 +435,6 @@ module.exports = function (babel) {
   }
 }
 
-function isRequire (node) {
-  return node?.declarations?.[0]?.init?.callee?.name === 'require'
-}
-
-function getExt (node) {
-  return nodePath.extname(node.source.value).replace(/^\./, '')
-}
-
 function convertStyleName (name) {
   return name.replace(/Name$/, '')
 }
@@ -515,6 +530,11 @@ function checkObserverImport ($import, state) {
   }
 }
 
+function checkHasFrameworkImport ($import, state) {
+  const magicImports = state.opts.magicImports || DEFAULT_MAGIC_IMPORTS
+  return magicImports.includes($import.node.source.value)
+}
+
 // find topmost function (which is not a lowercase named one).
 // .getFunctionParent() returns undefined when we reach Program
 function findReactFnComponent ($jsxAttribute) {
@@ -537,7 +557,6 @@ function findReactFnComponent ($jsxAttribute) {
   return $potentialComponentFn
 }
 
-// Get compilers from the magic import
 function getUsedCompilers ($program, state) {
   const res = new Map()
   const magicImports = state.opts.magicImports || DEFAULT_MAGIC_IMPORTS
@@ -547,8 +566,9 @@ function getUsedCompilers ($program, state) {
     for (const $specifier of $import.get('specifiers')) {
       if (!$specifier.isImportSpecifier()) continue
       const { local, imported } = $specifier.node
-      if (COMPILERS.includes(imported.name)) {
-        res.set(local.name, true)
+      // it's important to use hasOwnProperty here to avoid prototype pollution issues, like 'toString'
+      if (Object.prototype.hasOwnProperty.call(COMPILERS, imported.name)) {
+        res.set(local.name, COMPILERS[imported.name])
         $specifier.remove()
       }
     }
@@ -591,3 +611,16 @@ function addNamedImport ($program, name, sourceName) {
     importPosition: 'after'
   })
 }
+
+function insertAfterImports ($program, expressionStatement) {
+  const lastImport = $program
+    .get('body')
+    .filter($i => $i.isImportDeclaration())
+    .pop()
+
+  if (lastImport) {
+    lastImport.insertAfter(expressionStatement)
+  } else {
+    $program.unshift(expressionStatement)
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cssxjs/babel-plugin-rn-stylename-to-style",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "publishConfig": {
     "access": "public"
   },
@@ -24,15 +24,16 @@
   },
   "dependencies": {
     "@babel/helper-module-imports": "^7.0.0",
+    "@babel/parser": "^7.0.0",
     "@babel/template": "^7.4.0",
     "@babel/types": "^7.0.0",
-    "@cssxjs/runtime": "^0.2.15"
+    "@cssxjs/runtime": "^0.2.17"
   },
   "devDependencies": {
     "@babel/plugin-syntax-jsx": "^7.0.0",
-    "@cssxjs/babel-plugin-react-pug": "^0.2.15",
+    "@cssxjs/babel-plugin-react-pug": "^0.2.17",
     "babel-plugin-tester": "^9.1.0",
     "jest": "^30.0.4"
   },
-  "gitHead": "3ab2ccbdfdd935546be993322c645f216e4768e3"
+  "gitHead": "02b76ae074674c67f8d50a85b091e1190648449d"
 }