babel-plugin-cssta-stylename - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

index.js

@@ -12,4 +12,3 @@ const utils = require('./utils')
 
-module.exports = (babel) => {
-  const t = babel.types
+module.exports = ({ types: t }) => {
   let lastImport
@@ -19,18 +18,7 @@ let stylesImport
   let csstaTemplate
-  let importAnimated  // TODO: Add Animated import automatically
+  let importAnimated // TODO: Add Animated import automatically
   let hasTransformedClassName
   let ast
-  const processedItems = []
+  let processedItems = []
 
-  function isRequire (node) {
-    return (
-      node &&
-      node.declarations &&
-      node.declarations[0] &&
-      node.declarations[0].init &&
-      node.declarations[0].init.callee &&
-      node.declarations[0].init.callee.name === 'require'
-    )
-  }
-
   function getUniqueStyledTag (className) {
@@ -94,3 +82,6 @@ const capitalized = className.charAt(0).toUpperCase() + className.slice(1)
       t.templateLiteral([
-        t.templateElement({ raw: '\n' + styles + '\n' })
+        t.templateElement({
+          raw: `\n${styles}\n`.replace(/\\|`|\${/g, '\\$&'),
+          cooked: `\n${styles}\n`
+        })
       ], [])
@@ -131,3 +122,10 @@ )
     post () {
+      lastImport = null
+      stylesImport = null
+      program = null
+      csstaTemplate = null
+      importAnimated = null
       hasTransformedClassName = null
+      ast = null
+      processedItems = []
     },
@@ -137,29 +135,38 @@ visitor: {
         enter (path, state) {
+          if (stylesImport) return
+
+          path
+            .get('body')
+            .forEach(p => {
+              if (p.isImportDeclaration()) {
+                lastImport = p
+                if (p.node.specifiers.length === 0 && /\.css$/.test(p.node.source.value)) {
+                  stylesImport = p
+                }
+              }
+            })
+
+          if (!stylesImport) return
           program = path
           csstaTemplate = path.scope.generateUidIdentifier(CSSTA_TEMPLATE)
 
-          // Find the last import to start writing cssta components after it
-          lastImport = path
-            .get('body')
-            .filter(p => p.isImportDeclaration() || isRequire(p.node))
-            .pop()
-        },
-        exit (path, state) {
+          try {
+            ast = utils.parseAst(state.file.opts.filename, stylesImport.node.source.value)
+          } catch (e) {
+            throw new Error('Error parsing CSS file "' + state.file.opts.filename + '": ' + e.message || e)
+          }
+
+          const csstaSpecifier = t.importDefaultSpecifier(csstaTemplate)
+          const csstaImport = t.importDeclaration([csstaSpecifier], t.stringLiteral('cssta/native'))
+          const [newPath] = path.unshiftContainer('body', csstaImport)
+          for (const specifier of newPath.get('specifiers')) {
+            path.scope.registerBinding('module', specifier)
+          }
         }
       },
-      ImportDeclaration (path, state) {
-        // Find css file import and parse its AST
-        if (!(path.node.specifiers.length === 0 && /\.css$/.test(path.node.source.value))) return
-        stylesImport = path
-        ast = utils.parseAst(state.file.opts.filename, path.node.source.value)
-        path.insertBefore(t.importDeclaration([
-          t.importDefaultSpecifier(csstaTemplate)
-        ], t.stringLiteral('cssta/native')))
-      },
-      JSXElement (path, params) {
-        path.traverse({
-          JSXOpeningElement (path) {
-            processClass(path, params.opts)
-          }
-        })
+
+      JSXOpeningElement (path, params) {
+        if (!stylesImport) return
+        if (!ast) return
+        processClass(path, params.opts)
       }
@@ -166,0 +173,0 @@ }

package.json

 {
   "name": "babel-plugin-cssta-stylename",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Transform css imports into cssta template components",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -5,17 +5,20 @@ # babel-plugin-cssta-stylename
 
-**POC**. Not ready for production yet
-
 ## Idea
 
-- Use `styleName` attribute is to get the styles for a particular class from the css file.
+- Use `styleName` attribute to get the styles for a particular class from the css file.
 - Attributes in CSS are written using regular syntax (without `@`). `@` gets added during the compilation. The reason to get rid of `@` in css is because of the poor syntax highlighting. Also in future it makes sense to make removal of css-only attributes optional in `cssta`. And instead let them flow through into the underlying component.
 - Other than that, pretty much all the functionality and syntax of `cssta` should stay the same.
 
+To see an example check the `__tests__/__fixtures__` folder.
+
 ## Installation
 
-Plug in babel plugins in the following order:
+```
+npm i --save-dev babel-plugin-cssta-stylename babel-plugin-cssta
+```
 
+Specify babel plugins in the following order and before any other plugins you might already have:
+
 ```json
 [
-  "@babel/plugin-syntax-jsx",
   "babel-plugin-cssta-stylename",
@@ -22,0 +25,0 @@ "babel-plugin-cssta"

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11331

increased by3.46%

Lines of code

209

increased by1.95%

Number of lines in readme file

39

increased by8.33%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes