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

Comparing version 0.2.2 to 0.2.4

index.js

@@ -6,3 +6,4 @@ const utils = require('./utils')
 const DEFAULT_EXTENSIONS = ['css', 'styl']
-const ADD_CSS_HASH_DELAY = 300
+const DEFAULT_WRAP_IN_MEMO = false
+const ADD_CSS_HASH_DELAY = 800
 const CSSTA_TEMPLATE = 'styled'
@@ -38,3 +39,3 @@ const NEW_TAG_PREFIX = 'Styled'
 
-  function processItem (JSXOpeningElement, className) {
+  function processItem (JSXOpeningElement, className, wrapInMemo) {
     const oldTag = JSXOpeningElement.node.name.name
@@ -64,3 +65,3 @@ let item = processedItems.find(i => (
       const oldTagExpr = getOldTagExpr(item.oldTag, animate)
-      const newTagExpr = getNewTagExpr(item.newTag, oldTagExpr, styles, JSXOpeningElement)
+      const newTagExpr = getNewTagExpr(item.newTag, oldTagExpr, styles, JSXOpeningElement, wrapInMemo)
       lastImport.insertAfter(newTagExpr)
@@ -88,4 +89,4 @@ }
 
-  function getNewTagExpr (newTag, oldTagExpr, styles, path) {
-    const styled = t.taggedTemplateExpression(
+  function getNewTagExpr (newTag, oldTagExpr, styles, path, wrapInMemo) {
+    let styled = t.taggedTemplateExpression(
       t.callExpression(csstaTemplate, [oldTagExpr]),
@@ -99,6 +100,8 @@ t.templateLiteral([
     )
-    const reactIdentifier = utils.getReactImport(t, path)
-    // TODO: Make React.memo() optional through settings
-    const memoed = t.callExpression(t.memberExpression(reactIdentifier, t.identifier('memo')), [styled])
-    const d = t.variableDeclarator(t.identifier(newTag), memoed)
+    if (wrapInMemo == null) wrapInMemo = DEFAULT_WRAP_IN_MEMO
+    if (wrapInMemo) {
+      const reactIdentifier = utils.getReactImport(t, path)
+      styled = t.callExpression(t.memberExpression(reactIdentifier, t.identifier('memo')), [styled])
+    }
+    const d = t.variableDeclarator(t.identifier(newTag), styled)
     return t.variableDeclaration('const', [d])
@@ -129,3 +132,3 @@ }
       hasTransformedClassName = true
-      processItem(JSXOpeningElement, className)
+      processItem(JSXOpeningElement, className, state.opts.wrapInMemo)
     }
@@ -146,6 +149,6 @@ }
         setTimeout(() => {
-          utils.maybeUpdateCssHash(filename)
+          utils.maybeUpdateCssHash(filename, state.opts.extensions || DEFAULT_EXTENSIONS)
         }, ADD_CSS_HASH_DELAY)
       } else {
-        utils.maybeUpdateCssHash(filename)
+        utils.maybeUpdateCssHash(filename, state.opts.extensions || DEFAULT_EXTENSIONS)
       }
@@ -152,0 +155,0 @@ }

package.json

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

README.md

@@ -29,3 +29,4 @@ # babel-plugin-cssta-stylename
     "addCssHash": false,
-    "extensions": [".css", ".styl"]
+    "extensions": [".css", ".styl"],
+    "wrapInMemo": false
   }],
@@ -41,2 +42,3 @@ "babel-plugin-cssta"
 - `extensions` - which style imports to parse. Besides regular css, stylus preprocessor is also supported.
+- `wrapInMemo` - whether to wrap created styled components into React.memo(). Wrapping seems to be breaking HMR on Webpack for some reason. Default: `false`
 
@@ -43,0 +45,0 @@ ## Test

utils.js

@@ -87,9 +87,10 @@ const fs = require('fs')
 // If it does -- check if
-exports.maybeUpdateCssHash = function maybeUpdateCssHash (filename) {
-  let componentName = filename.match(/\/([^/]+)\.(?:styl|css)$/)
+exports.maybeUpdateCssHash = function maybeUpdateCssHash (filename, extensions) {
+  const extensionsOr = '(?:' + extensions.join('|').replace(/\./g, '\\.') + ')'
+  let componentName = filename.match(new RegExp(`\\/([^/]+)\\.${extensionsOr}$`))
   componentName = componentName && componentName[1]
-  const jsFileName = `./${componentName}.js`
+  const jsFileName = filename.replace(/[^\/]+$/, `${componentName}.js`)
   if (!fs.existsSync(jsFileName)) return
   let jsFile = fs.readFileSync(jsFileName, { encoding: 'utf8' })
-  if (!new RegExp(`\\.\\/${componentName}\\.(?:styl|css)['"]`).test(jsFile)) return
+  if (!new RegExp(`\\.\\/${componentName}\\.${extensionsOr}['"]`).test(jsFile)) return
   const content = fs.readFileSync(filename, { encoding: 'utf8' })
@@ -100,3 +101,3 @@ const newHash = hashCode(content)
   if (~~oldHash === ~~newHash) return
-  jsFile = jsFile.replace(new RegExp(`(\\.\\/${componentName}\\.(?:styl|css)['"])[^\\n]*\n`), `$1 // @css_hash_${newHash}\n`)
+  jsFile = jsFile.replace(new RegExp(`(\\.\\/${componentName}\\.${extensionsOr}['"])[^\\n]*\n`), `$1 // @css_hash_${newHash}\n`)
   fs.writeFileSync(jsFileName, jsFile)
@@ -103,0 +104,0 @@ console.log('[babel-plugin-cssta-stylename] updated @css_hash in', jsFileName)

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

18248

increased by3.03%

Lines of code

345

increased by1.17%

Number of lines in readme file

54

increased by3.85%

No dependency changes