babel-plugin-emotion - npm Package Compare versions

Comparing version 9.0.0 to 9.0.1

lib/babel-utils.js

@@ -10,7 +10,14 @@ 'use strict';
 exports.getName = getName;
+exports.getLabel = getLabel;
 exports.createRawStringFromTemplateLiteral = createRawStringFromTemplateLiteral;
 exports.omit = omit;
 
+var _path = require('path');
+
+var _path2 = _interopRequireDefault(_path);
+
 var _index = require('./index');
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function getDeclaratorName(path, t) {
@@ -23,2 +30,3 @@ // $FlowFixMe
 }
+
 function getIdentifierName(path, t) {
@@ -92,2 +100,11 @@ var classParent = void 0;
 
+function getLabel(identifierName, autoLabel, labelFormat, filename) {
+  if (!identifierName || !autoLabel) return null;
+  if (!labelFormat) return identifierName.trim();
+
+  var parsedPath = _path2.default.parse(filename);
+  var normalizedFilename = parsedPath.name.replace('.', '-');
+  return labelFormat.replace(/\[local\]/gi, identifierName.trim()).replace(/\[filename\]/gi, normalizedFilename);
+}
+
 function createRawStringFromTemplateLiteral(quasi) {
@@ -94,0 +111,0 @@ var strs = quasi.quasis.map(function (x) {

lib/index.js

@@ -189,7 +189,5 @@ 'use strict';
                     path.addComment('leading', '#__PURE__');
-                    if (state.opts.autoLabel) {
-                      var identifierName = (0, _babelUtils.getIdentifierName)(path, t);
-                      if (identifierName) {
-                        path.node.arguments.push(t.stringLiteral('label:' + identifierName.trim() + ';'));
-                      }
+                    var label = (0, _babelUtils.getLabel)((0, _babelUtils.getIdentifierName)(path, t), state.opts.autoLabel, state.opts.labelFormat, state.file.opts.filename);
+                    if (label) {
+                      path.node.arguments.push(t.stringLiteral('label:' + label + ';'));
                     }
@@ -349,4 +347,6 @@ }
 
-    path.replaceWith(t.callExpression(identifier, new _astObject2.default((0, _babelUtils.minify)(_src), path.node.quasi.expressions, t).toExpressions().concat(state.opts.autoLabel && identifierName ? [t.stringLiteral('label:' + identifierName.trim() + ';')] : [])));
+    var label = (0, _babelUtils.getLabel)(identifierName, state.opts.autoLabel, state.opts.labelFormat, state.file.opts.filename);
 
+    path.replaceWith(t.callExpression(identifier, new _astObject2.default((0, _babelUtils.minify)(_src), path.node.quasi.expressions, t).toExpressions().concat(label ? [t.stringLiteral('label:' + label + ';')] : [])));
+
     if (state.opts.hoist) {
@@ -434,4 +434,6 @@ hoistPureArgs(path);
 
-  if (state.opts.autoLabel && identifierName) {
-    labelProperty = t.objectProperty(t.identifier('label'), t.stringLiteral(identifierName.trim()));
+  var label = (0, _babelUtils.getLabel)(identifierName, state.opts.autoLabel, state.opts.labelFormat, state.file.opts.filename);
+
+  if (label) {
+    labelProperty = t.objectProperty(t.identifier('label'), t.stringLiteral(label));
   }
@@ -453,5 +455,6 @@
   var objectProperties = [targetProperty];
+  var label = (0, _babelUtils.getLabel)(identifierName, state.opts.autoLabel, state.opts.labelFormat, state.file.opts.filename);
 
-  if (state.opts.autoLabel && identifierName) {
-    objectProperties.push(t.objectProperty(t.identifier('label'), t.stringLiteral(identifierName.trim())));
+  if (label) {
+    objectProperties.push(t.objectProperty(t.identifier('label'), t.stringLiteral(label)));
   }
@@ -458,0 +461,0 @@

package.json

 {
   "name": "babel-plugin-emotion",
-  "version": "9.0.0",
+  "version": "9.0.1",
   "description": "A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.",
@@ -21,3 +21,3 @@ "main": "lib/index.js",
     "convert-source-map": "^1.5.0",
-    "emotion-utils": "^9.0.0",
+    "emotion-utils": "^9.0.1",
     "find-root": "^1.1.0",
@@ -24,0 +24,0 @@ "source-map": "^0.5.7",

README.md

@@ -93,2 +93,3 @@ # babel-plugin-emotion
         "autoLabel": false,
+        "labelFormat": "[local]",
         "extractStatic": false,
@@ -201,3 +202,3 @@ "importedNames": {
 ```javascript
-const brownStyles = /*#__PURE__*/ css({ color: 'blue' }, 'label:brownStyles;')
+const brownStyles = /*#__PURE__*/ css({ color: 'brown' }, 'label:brownStyles;')
 ```
@@ -207,2 +208,38 @@
 
+### `labelFormat`
+
+`string`, defaults to `"[local]"`.
+
+This option only works when `autoLabel` is set to `true`. It allows you to
+define the format of the resulting `label`. The format is defined via string where
+variable parts are enclosed in square brackets `[]`.
+For example `labelFormat: "my-classname--[local]"`, where `[local]` will be replaced
+with the name of the variable the result is assigned to.
+
+Allowed values:
+* `[local]` - the name of the variable the result of the `css` or `styled` expression is assigned to.
+* `[filename]` - name of the file (without extension) where `css` or `styled` expression is located.
+
+This format only affects the label property of the expression, meaning that `css` prefix and hash will
+be prepended automatically.
+
+#### css
+
+**In**
+
+```javascript
+// BrownView.js
+// autoLabel: true
+// labelFormat: [filename]--[local]
+const brownStyles = css({ color: 'brown' })
+```
+
+**Out**
+
+```javascript
+const brownStyles = /*#__PURE__*/ css({ color: 'brown' }, 'label:BrownView--brownStyles;')
+```
+
+`BrownView--brownStyles`'s value would be `css-1q8eu9e-BrownView--brownStyles`
+
 #### styled
@@ -209,0 +246,0 @@

src/babel-utils.js

 // @flow
+import nodePath from 'path'
 import { hashArray } from './index'
@@ -103,2 +104,18 @@ import type { BabelPath, EmotionBabelPluginPass } from './index'
 
+export function getLabel(
+  identifierName?: string,
+  autoLabel: boolean,
+  labelFormat?: string,
+  filename: string
+) {
+  if (!identifierName || !autoLabel) return null
+  if (!labelFormat) return identifierName.trim()
+
+  const parsedPath = nodePath.parse(filename)
+  const normalizedFilename = parsedPath.name.replace('.', '-')
+  return labelFormat
+    .replace(/\[local\]/gi, identifierName.trim())
+    .replace(/\[filename\]/gi, normalizedFilename)
+}
+
 export function createRawStringFromTemplateLiteral(quasi: {
@@ -105,0 +122,0 @@ quasis: Array<{ value: { cooked: string } }>

src/index.js

@@ -11,3 +11,4 @@ // @flow
   createRawStringFromTemplateLiteral,
-  minify
+  minify,
+  getLabel
 } from './babel-utils'
@@ -109,2 +110,9 @@ import type {
 
+    const label = getLabel(
+      identifierName,
+      state.opts.autoLabel,
+      state.opts.labelFormat,
+      state.file.opts.filename
+    )
+
     path.replaceWith(
@@ -115,7 +123,3 @@ t.callExpression(
           .toExpressions()
-          .concat(
-            state.opts.autoLabel && identifierName
-              ? [t.stringLiteral(`label:${identifierName.trim()};`)]
-              : []
-          )
+          .concat(label ? [t.stringLiteral(`label:${label};`)] : [])
       )
@@ -221,6 +225,13 @@ )
 
-  if (state.opts.autoLabel && identifierName) {
+  const label = getLabel(
+    identifierName,
+    state.opts.autoLabel,
+    state.opts.labelFormat,
+    state.file.opts.filename
+  )
+
+  if (label) {
     labelProperty = t.objectProperty(
       t.identifier('label'),
-      t.stringLiteral(identifierName.trim())
+      t.stringLiteral(label)
     )
@@ -256,9 +267,12 @@ }
   const objectProperties = [targetProperty]
+  const label = getLabel(
+    identifierName,
+    state.opts.autoLabel,
+    state.opts.labelFormat,
+    state.file.opts.filename
+  )
 
-  if (state.opts.autoLabel && identifierName) {
+  if (label) {
     objectProperties.push(
-      t.objectProperty(
-        t.identifier('label'),
-        t.stringLiteral(identifierName.trim())
-      )
+      t.objectProperty(t.identifier('label'), t.stringLiteral(label))
     )
@@ -489,9 +503,10 @@ }
                   path.addComment('leading', '#__PURE__')
-                  if (state.opts.autoLabel) {
-                    const identifierName = getIdentifierName(path, t)
-                    if (identifierName) {
-                      path.node.arguments.push(
-                        t.stringLiteral(`label:${identifierName.trim()};`)
-                      )
-                    }
+                  const label = getLabel(
+                    getIdentifierName(path, t),
+                    state.opts.autoLabel,
+                    state.opts.labelFormat,
+                    state.file.opts.filename
+                  )
+                  if (label) {
+                    path.node.arguments.push(t.stringLiteral(`label:${label};`))
                   }
@@ -498,0 +513,0 @@ }

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

80156

increased by3.48%

Lines of code

1849

increased by2.21%

Number of lines in readme file

360

increased by11.46%

Dependency changes

• Updatedemotion-utils@^9.0.1