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

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# 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

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.)
 

package/index.js

@@ -9,6 +9,7 @@ const { addNamed } = require('@babel/helper-module-imports')
 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'
@@ -293,28 +294,25 @@ module.exports = function (babel) {
               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
-
-              if (extensions.indexOf(getExt(node)) === -1) {
-                return
-              }
-              const extension = getExt(node)
+              const source = $this.node.source.value
+              if (!extensions.some(ext => source.endsWith(`.${ext}`))) return
+              const compilerName = source.split('.').pop()
 
-              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}`))
                 )
               })
 
@@ -324,13 +322,13 @@ 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]
               }
 
               const compileCssImports = state.opts.compileCssImports ?? true
@@ -340,17 +338,14 @@ module.exports = function (babel) {
                 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),
-                  node.source.value
-                )
+                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[extension]
+                const compiler = COMPILERS[compilerName]
                 if (!compiler) {
                   throw $this.buildCodeFrameError(
-                    `No compiler found for imported extension: "${extension}"`
+                    `No compiler found for imported extension: "${source}"`
                   )
                 }
                 const compiledString = compiler(
@@ -440,10 +435,6 @@ module.exports = function (babel) {
   }
 }
 
-function getExt (node) {
-  return nodePath.extname(node.source.value).replace(/^\./, '')
-}
-
 function convertStyleName (name) {
   return name.replace(/Name$/, '')
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cssxjs/babel-plugin-rn-stylename-to-style",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "publishConfig": {
     "access": "public"
   },
@@ -27,13 +27,13 @@
     "@babel/parser": "^7.0.0",
     "@babel/template": "^7.4.0",
     "@babel/types": "^7.0.0",
-    "@cssxjs/runtime": "^0.2.16"
+    "@cssxjs/runtime": "^0.2.17"
   },
   "devDependencies": {
     "@babel/plugin-syntax-jsx": "^7.0.0",
-    "@cssxjs/babel-plugin-react-pug": "^0.2.16",
+    "@cssxjs/babel-plugin-react-pug": "^0.2.17",
     "babel-plugin-tester": "^9.1.0",
     "jest": "^30.0.4"
   },
-  "gitHead": "4b62363af9606001df70548a69afc655545edab7"
+  "gitHead": "02b76ae074674c67f8d50a85b091e1190648449d"
 }