babel-plugin-emotion
Advanced tools
babel-plugin-emotion - npm Package Compare versions
Comparing version 8.0.2-5 to 8.0.2-6
@@ -44,3 +44,4 @@ 'use strict'; | ||
| } else { | ||
| cssTemplateExpression = t.callExpression(getCssIdentifer(), [cssPropValue]); | ||
| var args = state.opts.sourceMap ? [cssPropValue, t.stringLiteral((0, _sourceMap.addSourceMaps)(cssPath.node.loc.start, state))] : [cssPropValue]; | ||
| cssTemplateExpression = t.callExpression(getCssIdentifer(), args); | ||
| } | ||
@@ -55,3 +56,9 @@ if (!classNamesValue || t.isStringLiteral(classNamesValue) && !classNamesValue.value) { | ||
| if (t.isJSXExpressionContainer(classNamesValue)) { | ||
| classNamesPath.parentPath.replaceWith(createClassNameAttr(t.callExpression(getMergeIdentifier(), [add(cssTemplateExpression, add(t.stringLiteral(' '), classNamesValue.expression))]))); | ||
| var _args = [add(cssTemplateExpression, add(t.stringLiteral(' '), classNamesValue.expression))]; | ||
| if (state.opts.sourceMap) { | ||
| _args.push(t.stringLiteral((0, _sourceMap.addSourceMaps)(cssPath.node.loc.start, state))); | ||
| } | ||
| classNamesPath.parentPath.replaceWith(createClassNameAttr(t.callExpression(getMergeIdentifier(), _args))); | ||
| } else { | ||
@@ -92,2 +99,4 @@ classNamesPath.parentPath.replaceWith(createClassNameAttr(add(cssTemplateExpression, t.stringLiteral(' ' + (classNamesValue.value || ''))))); | ||
| } | ||
| }; | ||
| }; | ||
| var _sourceMap = require('./source-map'); |
@@ -203,3 +203,3 @@ 'use strict'; | ||
| if (state.opts.sourceMap === true && path.node.quasi.loc !== undefined) { | ||
| src = src + (0, _sourceMap.addSourceMaps)(path.node.quasi.loc.start, state); | ||
| src += (0, _sourceMap.addSourceMaps)(path.node.quasi.loc.start, state); | ||
| } | ||
@@ -217,63 +217,2 @@ | ||
| // babel-plugin-styled-components | ||
| // https://github.com/styled-components/babel-plugin-styled-components/blob/37a13e9c21c52148ce6e403100df54c0b1561a88/src/visitors/displayNameAndId.js#L49-L93 | ||
| var findModuleRoot = function findModuleRoot(filename) { | ||
| if (!filename || filename === 'unknown') { | ||
| return null; | ||
| } | ||
| var dir = (0, _path.dirname)(filename); | ||
| if (_fs2.default.existsSync((0, _path.join)(dir, 'package.json'))) { | ||
| return dir; | ||
| } else if (dir !== filename) { | ||
| return findModuleRoot(dir); | ||
| } else { | ||
| return null; | ||
| } | ||
| }; | ||
| var FILE_HASH = 'emotion-file-hash'; | ||
| var COMPONENT_POSITION = 'emotion-component-position'; | ||
| var getFileHash = function getFileHash(state) { | ||
| var file = state.file; | ||
| // hash calculation is costly due to fs operations, so we'll cache it per file. | ||
| if (file.get(FILE_HASH)) { | ||
| return file.get(FILE_HASH); | ||
| } | ||
| var filename = file.opts.filename; | ||
| // find module root directory | ||
| var moduleRoot = findModuleRoot(filename); | ||
| var filePath = moduleRoot && (0, _path.relative)(moduleRoot, filename).replace(_path.sep, '/'); | ||
| var moduleName = ''; | ||
| if (moduleRoot) { | ||
| var packageJsonContent = _fs2.default.readFileSync((0, _path.join)(moduleRoot, 'package.json')); | ||
| if (packageJsonContent) { | ||
| try { | ||
| moduleName = JSON.parse(packageJsonContent.toString()).name; | ||
| } catch (e) {} | ||
| } | ||
| } | ||
| var code = file.code; | ||
| var fileHash = hashArray([moduleName, filePath, code]); | ||
| file.set(FILE_HASH, fileHash); | ||
| return fileHash; | ||
| }; | ||
| var getNextId = function getNextId(state) { | ||
| var id = state.file.get(COMPONENT_POSITION) || 0; | ||
| state.file.set(COMPONENT_POSITION, id + 1); | ||
| return id; | ||
| }; | ||
| var getComponentId = function getComponentId(state) { | ||
| var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'css'; | ||
| // Prefix the identifier with css- because CSS classes cannot start with a number | ||
| // Also in snapshots with jest-glamor-react the hash will be replaced with an index | ||
| return prefix + '-' + getFileHash(state) + getNextId(state); | ||
| }; | ||
| function buildStyledCallExpression(identifier, tag, path, state, t) { | ||
@@ -292,3 +231,3 @@ var identifierName = (0, _babelUtils.getIdentifierName)(path, t); | ||
| state.insertStaticRules([staticCSSRules]); | ||
| return t.callExpression(t.callExpression(identifier, [tag, t.objectExpression([t.objectProperty(t.identifier('id'), t.stringLiteral(getComponentId(state, (0, _babelUtils.getName)((0, _babelUtils.getIdentifierName)(path, t), 'css')))), t.objectProperty(t.identifier('e'), t.stringLiteral(staticClassName))])]), []); | ||
| return t.callExpression(t.callExpression(identifier, [tag, t.objectExpression([t.objectProperty(t.identifier('e'), t.stringLiteral(staticClassName))])]), []); | ||
| } | ||
@@ -302,5 +241,5 @@ | ||
| if (state.opts.sourceMap === true && path.node.quasi.loc !== undefined) { | ||
| src = src + (0, _sourceMap.addSourceMaps)(path.node.quasi.loc.start, state); | ||
| src += (0, _sourceMap.addSourceMaps)(path.node.quasi.loc.start, state); | ||
| } | ||
| return t.callExpression(t.callExpression(identifier, [tag, t.objectExpression([t.objectProperty(t.identifier('id'), t.stringLiteral(getComponentId(state, (0, _babelUtils.getName)((0, _babelUtils.getIdentifierName)(path, t), 'css'))))])]), new _astObject2.default((0, _babelUtils.minify)(src), path.node.quasi.expressions, t).toExpressions()); | ||
| return t.callExpression(t.callExpression(identifier, [tag]), new _astObject2.default((0, _babelUtils.minify)(src), path.node.quasi.expressions, t).toExpressions()); | ||
| } | ||
@@ -317,3 +256,3 @@ | ||
| return t.callExpression(t.callExpression(identifier, [tag, t.objectExpression([t.objectProperty(t.identifier('id'), t.stringLiteral(getComponentId(state, (0, _babelUtils.getName)((0, _babelUtils.getIdentifierName)(path, t), 'css'))))])]), args); | ||
| return t.callExpression(t.callExpression(identifier, [tag]), args); | ||
| } | ||
@@ -320,0 +259,0 @@ |
| { | ||
| "name": "babel-plugin-emotion", | ||
| "version": "8.0.2-5", | ||
| "version": "8.0.2-6", | ||
| "description": "A recommended babel preprocessing plugin for emotion, the The Next Generation of CSS-in-JS.", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -0,1 +1,3 @@ | ||
| import { addSourceMaps } from './source-map' | ||
| export default function(path, state, t) { | ||
@@ -48,3 +50,9 @@ let cssPath | ||
| } else { | ||
| cssTemplateExpression = t.callExpression(getCssIdentifer(), [cssPropValue]) | ||
| const args = state.opts.sourceMap | ||
| ? [ | ||
| cssPropValue, | ||
| t.stringLiteral(addSourceMaps(cssPath.node.loc.start, state)) | ||
| ] | ||
| : [cssPropValue] | ||
| cssTemplateExpression = t.callExpression(getCssIdentifer(), args) | ||
| } | ||
@@ -62,11 +70,15 @@ if ( | ||
| if (t.isJSXExpressionContainer(classNamesValue)) { | ||
| const args = [ | ||
| add( | ||
| cssTemplateExpression, | ||
| add(t.stringLiteral(' '), classNamesValue.expression) | ||
| ) | ||
| ] | ||
| if (state.opts.sourceMap) { | ||
| args.push(t.stringLiteral(addSourceMaps(cssPath.node.loc.start, state))) | ||
| } | ||
| classNamesPath.parentPath.replaceWith( | ||
| createClassNameAttr( | ||
| t.callExpression(getMergeIdentifier(), [ | ||
| add( | ||
| cssTemplateExpression, | ||
| add(t.stringLiteral(' '), classNamesValue.expression) | ||
| ) | ||
| ]) | ||
| ) | ||
| createClassNameAttr(t.callExpression(getMergeIdentifier(), args)) | ||
| ) | ||
@@ -73,0 +85,0 @@ } else { |
106
src/index.js
| // @flow weak | ||
| import fs from 'fs' | ||
| import { | ||
| basename, | ||
| dirname, | ||
| join as pathJoin, | ||
| sep as pathSep, | ||
| relative | ||
| } from 'path' | ||
| import { basename } from 'path' | ||
| import { touchSync } from 'touch' | ||
@@ -59,3 +53,3 @@ import { | ||
| if (state.opts.sourceMap === true && path.node.quasi.loc !== undefined) { | ||
| src = src + addSourceMaps(path.node.quasi.loc.start, state) | ||
| src += addSourceMaps(path.node.quasi.loc.start, state) | ||
| } | ||
@@ -82,63 +76,2 @@ | ||
| // babel-plugin-styled-components | ||
| // https://github.com/styled-components/babel-plugin-styled-components/blob/37a13e9c21c52148ce6e403100df54c0b1561a88/src/visitors/displayNameAndId.js#L49-L93 | ||
| const findModuleRoot = filename => { | ||
| if (!filename || filename === 'unknown') { | ||
| return null | ||
| } | ||
| let dir = dirname(filename) | ||
| if (fs.existsSync(pathJoin(dir, 'package.json'))) { | ||
| return dir | ||
| } else if (dir !== filename) { | ||
| return findModuleRoot(dir) | ||
| } else { | ||
| return null | ||
| } | ||
| } | ||
| const FILE_HASH = 'emotion-file-hash' | ||
| const COMPONENT_POSITION = 'emotion-component-position' | ||
| const getFileHash = state => { | ||
| const { file } = state | ||
| // hash calculation is costly due to fs operations, so we'll cache it per file. | ||
| if (file.get(FILE_HASH)) { | ||
| return file.get(FILE_HASH) | ||
| } | ||
| const filename = file.opts.filename | ||
| // find module root directory | ||
| const moduleRoot = findModuleRoot(filename) | ||
| const filePath = | ||
| moduleRoot && relative(moduleRoot, filename).replace(pathSep, '/') | ||
| let moduleName = '' | ||
| if (moduleRoot) { | ||
| const packageJsonContent = fs.readFileSync( | ||
| pathJoin(moduleRoot, 'package.json') | ||
| ) | ||
| if (packageJsonContent) { | ||
| try { | ||
| moduleName = JSON.parse(packageJsonContent.toString()).name | ||
| } catch (e) {} | ||
| } | ||
| } | ||
| const code = file.code | ||
| const fileHash = hashArray([moduleName, filePath, code]) | ||
| file.set(FILE_HASH, fileHash) | ||
| return fileHash | ||
| } | ||
| const getNextId = state => { | ||
| const id = state.file.get(COMPONENT_POSITION) || 0 | ||
| state.file.set(COMPONENT_POSITION, id + 1) | ||
| return id | ||
| } | ||
| const getComponentId = (state, prefix: string = 'css') => { | ||
| // Prefix the identifier with css- because CSS classes cannot start with a number | ||
| // Also in snapshots with jest-glamor-react the hash will be replaced with an index | ||
| return `${prefix}-${getFileHash(state)}${getNextId(state)}` | ||
| } | ||
| export function buildStyledCallExpression(identifier, tag, path, state, t) { | ||
@@ -161,8 +94,2 @@ const identifierName = getIdentifierName(path, t) | ||
| t.objectExpression([ | ||
| t.objectProperty( | ||
| t.identifier('id'), | ||
| t.stringLiteral( | ||
| getComponentId(state, getName(getIdentifierName(path, t), 'css')) | ||
| ) | ||
| ), | ||
| t.objectProperty(t.identifier('e'), t.stringLiteral(staticClassName)) | ||
@@ -180,16 +107,6 @@ ]) | ||
| if (state.opts.sourceMap === true && path.node.quasi.loc !== undefined) { | ||
| src = src + addSourceMaps(path.node.quasi.loc.start, state) | ||
| src += addSourceMaps(path.node.quasi.loc.start, state) | ||
| } | ||
| return t.callExpression( | ||
| t.callExpression(identifier, [ | ||
| tag, | ||
| t.objectExpression([ | ||
| t.objectProperty( | ||
| t.identifier('id'), | ||
| t.stringLiteral( | ||
| getComponentId(state, getName(getIdentifierName(path, t), 'css')) | ||
| ) | ||
| ) | ||
| ]) | ||
| ]), | ||
| t.callExpression(identifier, [tag]), | ||
| new ASTObject(minify(src), path.node.quasi.expressions, t).toExpressions() | ||
@@ -210,16 +127,3 @@ ) | ||
| return t.callExpression( | ||
| t.callExpression(identifier, [ | ||
| tag, | ||
| t.objectExpression([ | ||
| t.objectProperty( | ||
| t.identifier('id'), | ||
| t.stringLiteral( | ||
| getComponentId(state, getName(getIdentifierName(path, t), 'css')) | ||
| ) | ||
| ) | ||
| ]) | ||
| ]), | ||
| args | ||
| ) | ||
| return t.callExpression(t.callExpression(identifier, [tag]), args) | ||
| } | ||
@@ -226,0 +130,0 @@ |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-8.42%
48873
- Lines of code
- decreased by-8.98%
1297
No dependency changes