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

Comparing version 0.1.3 to 0.1.4

index.js

 const utils = require('./utils')
 
 const DEFAULT_CLASS_ATTRIBUTE = 'styleName'
+const DEFAULT_ADD_CSS_HASH = true
+const ADD_CSS_HASH_DELAY = 300
 const CSSTA_TEMPLATE = 'styled'
@@ -91,3 +93,3 @@ const NEW_TAG_PREFIX = 'Styled'
 
-  function processClass (JSXOpeningElement, opts) {
+  function processClass (JSXOpeningElement, state) {
     var className = null
@@ -97,3 +99,3 @@
       JSXAttribute (JSXAttribute) {
-        if (!isTargetAttr(JSXAttribute.node, opts.classAttribute)) return
+        if (!isTargetAttr(JSXAttribute.node, state.opts.classAttribute)) return
 
@@ -104,3 +106,3 @@ if (t.isStringLiteral(JSXAttribute.node.value)) {
           if (classNameValue.length > 1) {
-            // TODO: Throw an error when more than 1 class specified
+            // TODO: Maybe throw an error when more than 1 class specified
             JSXAttribute.get('value').replaceWith(t.stringLiteral(classNameValue.slice(1).join(' ')))
@@ -122,10 +124,2 @@ } else {
     post () {
-      lastImport = null
-      stylesImport = null
-      program = null
-      csstaTemplate = null
-      importAnimated = null
-      hasTransformedClassName = null
-      ast = null
-      processedItems = []
     },
@@ -142,5 +136,3 @@ visitor: {
                 lastImport = p
-                if (p.node.specifiers.length === 0 && /\.css$/.test(p.node.source.value)) {
-                  stylesImport = p
-                }
+                if (/\.css$/.test(p.node.source.value)) stylesImport = p
               }
@@ -161,13 +153,38 @@ })
           const csstaImport = t.importDeclaration([csstaSpecifier], t.stringLiteral('cssta/native'))
-          const [newPath] = path.unshiftContainer('body', csstaImport)
+          const [newPath] = program.unshiftContainer('body', csstaImport)
+
           for (const specifier of newPath.get('specifiers')) {
-            path.scope.registerBinding('module', specifier)
+            program.scope.registerBinding('module', specifier)
           }
+        },
+        exit (path, state) {
+          lastImport = null
+          stylesImport = null
+          program = null
+          csstaTemplate = null
+          importAnimated = null
+          hasTransformedClassName = null
+          ast = null
+          processedItems = []
+
+          // Force update JS file in the same directory with the new css file hash.
+          // This is required for proper development experience on native and web.
+          // TODO: Make this a plugin option and only enabled in dev env.
+          const addCssHash = state.opts.addCssHash != null
+            ? state.opts.addCssHash
+            : DEFAULT_ADD_CSS_HASH
+          if (addCssHash && /\.css$/.test(state.file.opts.filename)) {
+            const filename = state.file.opts.filename
+            // Delay execution to account for Save All delay in IDEs
+            setTimeout(() => {
+              utils.maybeUpdateCssHash(filename)
+            }, ADD_CSS_HASH_DELAY)
+          }
         }
       },
 
-      JSXOpeningElement (path, params) {
+      JSXOpeningElement (path, state) {
         if (!stylesImport) return
         if (!ast) return
-        processClass(path, params.opts)
+        processClass(path, state)
       }
@@ -174,0 +191,0 @@ }

package.json

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

utils.js

@@ -72,1 +72,32 @@ const fs = require('fs')
 }
+
+// Check if .js file with the same name exists.
+// If it does -- check if it uses the css file (filename).
+// If it does -- check if
+exports.maybeUpdateCssHash = function maybeUpdateCssHash (filename) {
+  let componentName = filename.match(/\/([^/]+)\.css$/)
+  componentName = componentName && componentName[1]
+  const jsFileName = `./${componentName}.js`
+  if (!fs.existsSync(jsFileName)) return
+  let jsFile = fs.readFileSync(jsFileName, { encoding: 'utf8' })
+  if (!new RegExp(`\\.\\/${componentName}\\.css['"]`).test(jsFile)) return
+  const content = fs.readFileSync(filename, { encoding: 'utf8' })
+  const newHash = hashCode(content)
+  let oldHash = jsFile.match(/@css_hash_([\d-]+)/)
+  oldHash = oldHash && oldHash[1]
+  if (~~oldHash === ~~newHash) return
+  jsFile = jsFile.replace(new RegExp(`(\\.\\/${componentName}\\.css['"])[^\\n]*\n`), `$1 // @css_hash_${newHash}\n`)
+  fs.writeFileSync(jsFileName, jsFile)
+  console.log('[babel-plugin-cssta-stylename] updated @css_hash in', jsFileName)
+}
+
+function hashCode (source) {
+  let hash = 0
+  if (source.length === 0) return hash
+  for (var i = 0; i < source.length; i++) {
+    const char = source.charCodeAt(i)
+    hash = ((hash << 5) - hash) + char
+    hash = hash & hash // Convert to 32bit integer
+  }
+  return hash
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13380

increased by18.08%

Lines of code

253

increased by21.05%

No dependency changes