Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

babel-plugin-styled-components

Package Overview
Dependencies
Maintainers
3
Versions
95
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

babel-plugin-styled-components - npm Package Compare versions

Comparing version 1.5.1 to 1.6.0

lib/utils/prefixDigit.js
lib/visitors/desugarStyled.js
lib/visitors/rewriteStyledImport.js

67

lib/css/placeholderUtils.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,42 +6,13 @@ Object.defineProperty(exports, "__esModule", {

});
// The capture group makes sure that the split contains the interpolation index
var placeholderRegex = /__PLACEHOLDER_(\d+?)__/;
// Alternative regex that splits without a capture group
var placeholderNonCapturingRegex = /__PLACEHOLDER_(?:\d+?)__/;
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
// This matches the global group w/o a selector
var globalRulesetRegex = /^{([^}]*)}/;
function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr); }
var lastInArr = function lastInArr(arr) {
return arr[arr.length - 1];
};
// The capture group makes sure that the split contains the interpolation index
var placeholderRegex = exports.placeholderRegex = /(?:__PLACEHOLDER_(\d+)__)/g;
// Return position of needle in string or Infinity
var findIndex = function findIndex(string, needle) {
var index = string.indexOf(needle);
return index > -1 ? index : Infinity;
};
// Alternative regex that splits without a capture group
var placeholderNonCapturingRegex = /__PLACEHOLDER_(?:\d+)__/g;
// Looks if the CSS partial after mixin needs to be prefixed with a semicolon
var isUnendedMixin = exports.isUnendedMixin = function isUnendedMixin(css) {
var newlinePos = findIndex(css, '\n');
var semicolonPos = findIndex(css, ';');
var colonPos = findIndex(css, ':');
var openParensPos = findIndex(css, '{');
var closingParensPos = findIndex(css, '}');
var isNewlineFirst = isFinite(newlinePos) && newlinePos === Math.min(newlinePos, semicolonPos, colonPos, openParensPos, closingParensPos);
// If newline isn't first, prefixed interpolation can't be a mixin
if (!isNewlineFirst) {
return false;
}
var minCharPos = Math.min(semicolonPos, colonPos, openParensPos, closingParensPos);
// If this is followed by a semicolon or colon, then we don't want to add a semicolon
return isFinite(minCharPos) && minCharPos !== semicolonPos;
};
// Generates a placeholder from an index

@@ -52,22 +23,10 @@ var makePlaceholder = exports.makePlaceholder = function makePlaceholder(index) {

// Our temporary classname
var temporaryClassname = exports.temporaryClassname = '__TEMPORARY_CLASSNAME__';
// Splits CSS by placeholders
var splitByPlaceholders = exports.splitByPlaceholders = function splitByPlaceholders(_ref) {
var _ref2 = _toArray(_ref),
css = _ref2[0],
rest = _ref2.slice(1);
// Checks whether the CSS already contains something that matches our placeholders
var containsPlaceholders = exports.containsPlaceholders = function containsPlaceholders(css) {
return !!css.match(placeholderRegex);
};
// Splits CSS by placeholders
var splitByPlaceholders = exports.splitByPlaceholders = function splitByPlaceholders(css) {
var capture = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
return css.split(capture ? placeholderRegex : placeholderNonCapturingRegex);
};
// Remove curly braces around global placeholders
// We need to replace mixin-semicolons with newlines to not break browser CSS parsing
var fixGlobalPlaceholders = exports.fixGlobalPlaceholders = function fixGlobalPlaceholders(css) {
return css.replace(globalRulesetRegex, function (_, p1) {
return p1 ? p1.replace(';', '\n') : '';
});
return [css.split(capture ? placeholderRegex : placeholderNonCapturingRegex)].concat(_toConsumableArray(rest));
};

27

lib/index.js

@@ -13,15 +13,14 @@ 'use strict';

ImportDeclaration(path, state) {
(0, _noParserImport.noParserImportDeclaration)(path, state);
(0, _rewriteStyledImport2.default)(t)(path, state);
},
CallExpression(path, state) {
(0, _uglifyPure2.default)(path, state);
(0, _noParserImport.noParserRequireCallExpression)(path, state);
MemberExpression(path, state) {
(0, _desugarStyled2.default)(t)(path, state);
},
TaggedTemplateExpression(path, state) {
(0, _minify2.default)(path, state);
(0, _displayNameAndId2.default)(path, state);
(0, _templateLiterals2.default)(path, state);
(0, _minify2.default)(t)(path, state);
(0, _displayNameAndId2.default)(t)(path, state);
(0, _templateLiterals2.default)(t)(path, state);
},
VariableDeclarator(path, state) {
(0, _assignStyledRequired2.default)(path, state);
(0, _assignStyledRequired2.default)(t)(path, state);
}

@@ -32,6 +31,2 @@ }

var _uglifyPure = require('./visitors/uglifyPure');
var _uglifyPure2 = _interopRequireDefault(_uglifyPure);
var _minify = require('./visitors/minify');

@@ -41,2 +36,6 @@

var _desugarStyled = require('./visitors/desugarStyled');
var _desugarStyled2 = _interopRequireDefault(_desugarStyled);
var _displayNameAndId = require('./visitors/displayNameAndId');

@@ -54,4 +53,6 @@

var _noParserImport = require('./visitors/noParserImport');
var _rewriteStyledImport = require('./visitors/rewriteStyledImport');
var _rewriteStyledImport2 = _interopRequireDefault(_rewriteStyledImport);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

28

lib/minify/index.js

@@ -8,4 +8,18 @@ 'use strict';

var _difference = require('lodash/difference');
var _difference2 = _interopRequireDefault(_difference);
var _placeholderUtils = require('../css/placeholderUtils');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var injectUniquePlaceholders = function injectUniquePlaceholders(strArr) {
var i = 0;
return strArr.reduce(function (str, val, index, arr) {
return str + val + (index < arr.length - 1 ? (0, _placeholderUtils.makePlaceholder)(i++) : '');
}, '');
};
var makeMultilineCommentRegex = function makeMultilineCommentRegex(newlinePattern) {

@@ -47,3 +61,3 @@ return new RegExp('\\/\\*[^!](.|' + newlinePattern + ')*?\\*\\/', 'g');

return !str.endsWith(':') && // NOTE: This is another guard against urls, if they're not inside strings or parantheses.
countOccurences(str, '\'') % 2 === 0 && countOccurences(str, '\"') % 2 === 0 && countOccurences(str, '(') === countOccurences(str, ')');
countOccurences(str, "'") % 2 === 0 && countOccurences(str, '"') % 2 === 0 && countOccurences(str, '(') === countOccurences(str, ')');
});

@@ -60,3 +74,3 @@ };

// Only manipulate symbols outside of strings
if (countOccurences(str, '\'') % 2 === 0 && countOccurences(str, '\"') % 2 === 0) {
if (countOccurences(str, "'") % 2 === 0 && countOccurences(str, '"') % 2 === 0) {
return str + fragment.trim();

@@ -88,3 +102,7 @@ }

return compressSymbols(newCode);
var eliminatedExpressionIndices = (0, _difference2.default)(code.match(_placeholderUtils.placeholderRegex), newCode.match(_placeholderUtils.placeholderRegex)).map(function (x) {
return parseInt(x.match(/\d+/)[0], 10);
});
return [compressSymbols(newCode), eliminatedExpressionIndices];
};

@@ -97,7 +115,7 @@ };

var minifyRawValues = exports.minifyRawValues = function minifyRawValues(rawValues) {
return (0, _placeholderUtils.splitByPlaceholders)(minifyRaw(rawValues.join((0, _placeholderUtils.makePlaceholder)(123))), false);
return (0, _placeholderUtils.splitByPlaceholders)(minifyRaw(injectUniquePlaceholders(rawValues)), false);
};
var minifyCookedValues = exports.minifyCookedValues = function minifyCookedValues(cookedValues) {
return (0, _placeholderUtils.splitByPlaceholders)(minifyCooked(cookedValues.join((0, _placeholderUtils.makePlaceholder)(123))), false);
return (0, _placeholderUtils.splitByPlaceholders)(minifyCooked(injectUniquePlaceholders(cookedValues)), false);
};

74

lib/utils/detectors.js

@@ -6,10 +6,8 @@ 'use strict';

});
exports.isHelper = exports.isKeyframesHelper = exports.isInjectGlobalHelper = exports.isCSSHelper = exports.isStyled = undefined;
var VALID_TOP_LEVEL_IMPORT_PATHS = ['styled-components', 'styled-components/no-tags', 'styled-components/native', 'styled-components/primitives'];
var _babelTypes = require('babel-types');
var isValidTopLevelImport = exports.isValidTopLevelImport = function isValidTopLevelImport(x) {
return VALID_TOP_LEVEL_IMPORT_PATHS.includes(x);
};
var t = _interopRequireWildcard(_babelTypes);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
var importLocalName = function importLocalName(name, state) {

@@ -24,3 +22,3 @@ var localName = name === 'default' ? 'styled' : name;

if (node.source.value === 'styled-components') {
if (isValidTopLevelImport(node.source.value)) {
var _iteratorNormalCompletion = true;

@@ -68,34 +66,50 @@ var _didIteratorError = false;

var isStyled = exports.isStyled = function isStyled(tag, state) {
if (t.isCallExpression(tag) && t.isMemberExpression(tag.callee) && tag.callee.property.name !== 'default' /** ignore default for #93 below */) {
// styled.something()
return isStyled(tag.callee.object, state);
} else {
return t.isMemberExpression(tag) && tag.object.name === importLocalName('default', state) || t.isCallExpression(tag) && tag.callee.name === importLocalName('default', state) ||
var isStyled = exports.isStyled = function isStyled(t) {
return function (tag, state) {
if (t.isCallExpression(tag) && t.isMemberExpression(tag.callee) && tag.callee.property.name !== 'default' /** ignore default for #93 below */
) {
// styled.something()
return isStyled(t)(tag.callee.object, state);
} else {
return t.isMemberExpression(tag) && tag.object.name === importLocalName('default', state) || t.isCallExpression(tag) && tag.callee.name === importLocalName('default', state) ||
/**
* #93 Support require()
* styled-components might be imported using a require()
* call and assigned to a variable of any name.
* - styled.default.div``
* - styled.default.something()
*/
state.styledRequired && t.isMemberExpression(tag) && t.isMemberExpression(tag.object) && tag.object.property.name === 'default' && tag.object.object.name === state.styledRequired || state.styledRequired && t.isCallExpression(tag) && t.isMemberExpression(tag.callee) && tag.callee.property.name === 'default' && tag.callee.object.name === state.styledRequired;
}
};
};
/**
* #93 Support require()
* styled-components might be imported using a require()
* call and assigned to a variable of any name.
* - styled.default.div``
* - styled.default.something()
*/
state.styledRequired && t.isMemberExpression(tag) && t.isMemberExpression(tag.object) && tag.object.property.name === 'default' && tag.object.object.name === state.styledRequired || state.styledRequired && t.isCallExpression(tag) && t.isMemberExpression(tag.callee) && tag.callee.property.name === 'default' && tag.callee.object.name === state.styledRequired;
}
var isCSSHelper = exports.isCSSHelper = function isCSSHelper(t) {
return function (tag, state) {
return t.isIdentifier(tag) && tag.name === importLocalName('css', state);
};
};
var isCSSHelper = exports.isCSSHelper = function isCSSHelper(tag, state) {
return t.isIdentifier(tag) && tag.name === importLocalName('css', state);
var isCreateGlobalStyleHelper = exports.isCreateGlobalStyleHelper = function isCreateGlobalStyleHelper(t) {
return function (tag, state) {
return t.isIdentifier(tag) && tag.name === importLocalName('createGlobalStyle', state);
};
};
var isInjectGlobalHelper = exports.isInjectGlobalHelper = function isInjectGlobalHelper(tag, state) {
return t.isIdentifier(tag) && tag.name === importLocalName('injectGlobal', state);
var isInjectGlobalHelper = exports.isInjectGlobalHelper = function isInjectGlobalHelper(t) {
return function (tag, state) {
return t.isIdentifier(tag) && tag.name === importLocalName('injectGlobal', state);
};
};
var isKeyframesHelper = exports.isKeyframesHelper = function isKeyframesHelper(tag, state) {
return t.isIdentifier(tag) && tag.name === importLocalName('keyframes', state);
var isKeyframesHelper = exports.isKeyframesHelper = function isKeyframesHelper(t) {
return function (tag, state) {
return t.isIdentifier(tag) && tag.name === importLocalName('keyframes', state);
};
};
var isHelper = exports.isHelper = function isHelper(tag, state) {
return isCSSHelper(tag, state) || isKeyframesHelper(tag, state);
var isHelper = exports.isHelper = function isHelper(t) {
return function (tag, state) {
return isCSSHelper(t)(tag, state) || isKeyframesHelper(t)(tag, state);
};
};

63

lib/utils/getName.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -7,8 +7,2 @@ Object.defineProperty(exports, "__esModule", {

var _babelTypes = require('babel-types');
var t = _interopRequireWildcard(_babelTypes);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
/**

@@ -22,31 +16,36 @@ * Get the name of variable that contains node

exports.default = function (path) {
var namedNode = void 0;
exports.default = function (t) {
return function (path) {
var namedNode = void 0;
path.find(function (path) {
// const X = styled
if (path.isAssignmentExpression()) {
namedNode = path.node.left;
// const X = { Y: styled }
} else if (path.isObjectProperty()) {
namedNode = path.node.key;
// let X; X = styled
} else if (path.isVariableDeclarator()) {
namedNode = path.node.id;
} else if (path.isStatement()) {
// we've hit a statement, we should stop crawling up
return true;
}
path.find(function (path) {
// const X = styled
if (path.isAssignmentExpression()) {
namedNode = path.node.left;
// const X = { Y: styled }
} else if (path.isObjectProperty()) {
namedNode = path.node.key;
// class Y { (static) X = styled }
} else if (path.isClassProperty()) {
namedNode = path.node.key;
// let X; X = styled
} else if (path.isVariableDeclarator()) {
namedNode = path.node.id;
} else if (path.isStatement()) {
// we've hit a statement, we should stop crawling up
return true;
}
// we've got an displayName (if we need it) no need to continue
if (namedNode) return true;
});
// we've got an displayName (if we need it) no need to continue
if (namedNode) return true;
});
// foo.bar -> bar
if (t.isMemberExpression(namedNode)) {
namedNode = namedNode.property;
}
// foo.bar -> bar
if (t.isMemberExpression(namedNode)) {
namedNode = namedNode.property;
}
// identifiers are the only thing we can reliably get a name from
return t.isIdentifier(namedNode) ? namedNode.name : undefined;
// identifiers are the only thing we can reliably get a name from
return t.isIdentifier(namedNode) ? namedNode.name : undefined;
};
};

57

lib/utils/hash.js
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
value: true
});

@@ -18,39 +18,38 @@ /**

function murmurhash2_32_gc(str) {
var l = str.length;
var h = l;
var i = 0;
var k = void 0;
var l = str.length;
var h = l;
var i = 0;
var k = void 0;
while (l >= 4) {
k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
while (l >= 4) {
k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0x5bd1e995 & 0xffff) << 16);
k ^= k >>> 24;
k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0x5bd1e995 & 0xffff) << 16);
k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0x5bd1e995 & 0xffff) << 16);
k ^= k >>> 24;
k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0x5bd1e995 & 0xffff) << 16);
h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16) ^ k;
h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16) ^ k;
l -= 4;
++i;
}
l -= 4;
++i;
} // forgive existing code
/* eslint-disable no-fallthrough */ // forgive existing code
switch (l) {
case 3:
h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
case 2:
h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
case 1:
h ^= str.charCodeAt(i) & 0xff;
h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
}
/* eslint-enable no-fallthrough */
/* eslint-disable no-fallthrough */switch (l) {
case 3:
h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
case 2:
h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
case 1:
h ^= str.charCodeAt(i) & 0xff;
h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
}
/* eslint-enable no-fallthrough */
h ^= h >>> 13;
h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
h ^= h >>> 15;
h ^= h >>> 13;
h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
h ^= h >>> 15;
return (h >>> 0).toString(36);
return (h >>> 0).toString(36);
}
exports.default = murmurhash2_32_gc;

27

lib/utils/options.js

@@ -6,2 +6,14 @@ 'use strict';

});
exports.useNoTags = exports.useTranspileTemplateLiterals = exports.useMinify = exports.useFileName = exports.useSSR = exports.useDisplayName = undefined;
var _semver = require('semver');
var _semver2 = _interopRequireDefault(_semver);
var _package = require('styled-components/package.json');
var _package2 = _interopRequireDefault(_package);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function getOption(_ref, name) {

@@ -18,3 +30,3 @@ var opts = _ref.opts;

var useSSR = exports.useSSR = function useSSR(state) {
return getOption(state, 'ssr', false);
return getOption(state, 'ssr', true);
};

@@ -27,10 +39,13 @@ var useFileName = exports.useFileName = function useFileName(state) {

};
var useCSSPreprocessor = exports.useCSSPreprocessor = function useCSSPreprocessor(state) {
return getOption(state, 'preprocess', false);
}; // EXPERIMENTAL
var useTranspileTemplateLiterals = exports.useTranspileTemplateLiterals = function useTranspileTemplateLiterals(state) {
return getOption(state, 'transpileTemplateLiterals');
};
var useUglifyPure = exports.useUglifyPure = function useUglifyPure(state) {
return getOption(state, 'uglifyPure', false);
/**
* When using the babel plugin, we desugar styled.div to styled('div'), which means we can
* then use a lighter-weight version of s-c (v4+) since those element names don't need to be kept around
* ahead of time.
*/
var useNoTags = exports.useNoTags = function useNoTags() {
return _semver2.default.satisfies(_package2.default.version, '>= 4');
};

16

lib/visitors/assignStyledRequired.js

@@ -7,12 +7,10 @@ 'use strict';

var _babelTypes = require('babel-types');
var _detectors = require('../utils/detectors');
var t = _interopRequireWildcard(_babelTypes);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
exports.default = function (path, state) {
if (t.isCallExpression(path.node.init) && t.isIdentifier(path.node.init.callee) && path.node.init.callee.name === 'require' && path.node.init.arguments && path.node.init.arguments[0] && t.isLiteral(path.node.init.arguments[0]) && path.node.init.arguments[0].value === 'styled-components') {
state.styledRequired = path.node.id.name;
}
exports.default = function (t) {
return function (path, state) {
if (t.isCallExpression(path.node.init) && t.isIdentifier(path.node.init.callee) && path.node.init.callee.name === 'require' && path.node.init.arguments && path.node.init.arguments[0] && t.isLiteral(path.node.init.arguments[0]) && (0, _detectors.isValidTopLevelImport)(path.node.init.arguments[0].value)) {
state.styledRequired = path.node.id.name;
}
};
};

82

lib/visitors/displayNameAndId.js

@@ -7,6 +7,10 @@ 'use strict';

var _babelTypes = require('babel-types');
var _path = require('path');
var t = _interopRequireWildcard(_babelTypes);
var _path2 = _interopRequireDefault(_path);
var _fs = require('fs');
var _fs2 = _interopRequireDefault(_fs);
var _options = require('../utils/options');

@@ -18,10 +22,6 @@

var _path = require('path');
var _prefixDigit = require('../utils/prefixDigit');
var _path2 = _interopRequireDefault(_path);
var _prefixDigit2 = _interopRequireDefault(_prefixDigit);
var _fs = require('fs');
var _fs2 = _interopRequireDefault(_fs);
var _hash = require('../utils/hash');

@@ -35,19 +35,19 @@

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
var addConfig = function addConfig(t) {
return function (path, displayName, componentId) {
if (!displayName && !componentId) {
return;
}
var addConfig = function addConfig(path, displayName, componentId) {
if (!displayName && !componentId) {
return;
}
var withConfigProps = [];
if (displayName) {
withConfigProps.push(t.objectProperty(t.identifier('displayName'), t.stringLiteral(displayName)));
}
if (componentId) {
withConfigProps.push(t.objectProperty(t.identifier('componentId'), t.stringLiteral(componentId)));
}
var withConfigProps = [];
if (displayName) {
withConfigProps.push(t.objectProperty(t.identifier('displayName'), t.stringLiteral(displayName)));
}
if (componentId) {
withConfigProps.push(t.objectProperty(t.identifier('componentId'), t.stringLiteral(componentId)));
}
// Replace x`...` with x.withConfig({ })`...`
path.node.tag = t.callExpression(t.memberExpression(path.node.tag, t.identifier('withConfig')), [t.objectExpression(withConfigProps)]);
// Replace x`...` with x.withConfig({ })`...`
path.node.tag = t.callExpression(t.memberExpression(path.node.tag, t.identifier('withConfig')), [t.objectExpression(withConfigProps)]);
};
};

@@ -60,15 +60,17 @@

var getDisplayName = function getDisplayName(path, state) {
var file = state.file;
var getDisplayName = function getDisplayName(t) {
return function (path, state) {
var file = state.file;
var componentName = (0, _getName2.default)(path);
if (file) {
var blockName = getBlockName(file);
if (blockName === componentName) {
var componentName = (0, _getName2.default)(t)(path);
if (file) {
var blockName = getBlockName(file);
if (blockName === componentName) {
return componentName;
}
return componentName ? `${(0, _prefixDigit2.default)(blockName)}__${componentName}` : (0, _prefixDigit2.default)(blockName);
} else {
return componentName;
}
return componentName ? `${blockName}__${componentName}` : blockName;
} else {
return componentName;
}
};
};

@@ -129,11 +131,13 @@

// Prefix the identifier with a character because CSS classes cannot start with a number
return `${getFileHash(state).replace(/^(\d)/, 's$1')}-${getNextId(state)}`;
return `${(0, _prefixDigit2.default)(getFileHash(state))}-${getNextId(state)}`;
};
exports.default = function (path, state) {
if ((0, _detectors.isStyled)(path.node.tag, state)) {
var displayName = (0, _options.useDisplayName)(state) && getDisplayName(path, (0, _options.useFileName)(state) && state);
exports.default = function (t) {
return function (path, state) {
if ((0, _detectors.isStyled)(t)(path.node.tag, state)) {
var displayName = (0, _options.useDisplayName)(state) && getDisplayName(t)(path, (0, _options.useFileName)(state) && state);
addConfig(path, displayName && displayName.replace(/[^_a-zA-Z0-9-]/g, ''), (0, _options.useSSR)(state) && getComponentId(state));
}
addConfig(t)(path, displayName && displayName.replace(/[^_a-zA-Z0-9-]/g, ''), (0, _options.useSSR)(state) && getComponentId(state));
}
};
};

46

lib/visitors/minify.js

@@ -7,6 +7,4 @@ 'use strict';

var _babelTypes = require('babel-types');
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var t = _interopRequireWildcard(_babelTypes);
var _options = require('../utils/options');

@@ -18,23 +16,33 @@

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
exports.default = function (t) {
return function (path, state) {
if ((0, _options.useMinify)(state) && ((0, _detectors.isStyled)(t)(path.node.tag, state) || (0, _detectors.isHelper)(t)(path.node.tag, state))) {
var templateLiteral = path.node.quasi;
var quasisLength = templateLiteral.quasis.length;
exports.default = function (path, state) {
if ((0, _options.useMinify)(state) && !(0, _options.useCSSPreprocessor)(state) && ((0, _detectors.isStyled)(path.node.tag, state) || (0, _detectors.isHelper)(path.node.tag, state))) {
var templateLiteral = path.node.quasi;
var quasisLength = templateLiteral.quasis.length;
var _minifyRawValues = (0, _minify.minifyRawValues)(templateLiteral.quasis.map(function (x) {
return x.value.raw;
})),
_minifyRawValues2 = _slicedToArray(_minifyRawValues, 1),
rawValuesMinified = _minifyRawValues2[0];
var rawValuesMinified = (0, _minify.minifyRawValues)(templateLiteral.quasis.map(function (x) {
return x.value.raw;
}));
var cookedValuesMinfified = (0, _minify.minifyCookedValues)(templateLiteral.quasis.map(function (x) {
return x.value.cooked;
}));
var _minifyCookedValues = (0, _minify.minifyCookedValues)(templateLiteral.quasis.map(function (x) {
return x.value.cooked;
})),
_minifyCookedValues2 = _slicedToArray(_minifyCookedValues, 2),
cookedValuesMinfified = _minifyCookedValues2[0],
eliminatedExpressionIndices = _minifyCookedValues2[1];
for (var i = 0; i < quasisLength; i++) {
var element = templateLiteral.quasis[i];
eliminatedExpressionIndices.forEach(function (expressionIndex, iteration) {
templateLiteral.expressions.splice(expressionIndex - iteration, 1);
});
element.value.raw = rawValuesMinified[i];
element.value.cooked = cookedValuesMinfified[i];
for (var i = 0; i < quasisLength; i++) {
var element = templateLiteral.quasis[i];
element.value.raw = rawValuesMinified[i];
element.value.cooked = cookedValuesMinfified[i];
}
}
}
};
};

18

lib/visitors/templateLiterals/index.js

@@ -9,6 +9,2 @@ 'use strict';

var _preprocess = require('./preprocess');
var _preprocess2 = _interopRequireDefault(_preprocess);
var _transpile = require('./transpile');

@@ -20,10 +16,8 @@

exports.default = function (path, state) {
// We can only do one or the other, but preprocessing
// disables the normal transpilation, obviously
if ((0, _options.useCSSPreprocessor)(state)) {
(0, _preprocess2.default)(path, state);
} else if ((0, _options.useTranspileTemplateLiterals)(state)) {
(0, _transpile2.default)(path, state);
}
exports.default = function (t) {
return function (path, state) {
if ((0, _options.useTranspileTemplateLiterals)(state)) {
(0, _transpile2.default)(t)(path, state);
}
};
};

36

lib/visitors/templateLiterals/transpile.js

@@ -7,25 +7,25 @@ 'use strict';

var _babelTypes = require('babel-types');
var _detectors = require('../../utils/detectors');
var t = _interopRequireWildcard(_babelTypes);
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
var _detectors = require('../../utils/detectors');
exports.default = function (t) {
return function (path, state) {
if ((0, _detectors.isStyled)(t)(path.node.tag, state) || (0, _detectors.isHelper)(t)(path.node.tag, state)) {
var _path$node = path.node,
callee = _path$node.tag,
_path$node$quasi = _path$node.quasi,
quasis = _path$node$quasi.quasis,
expressions = _path$node$quasi.expressions;
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
var values = t.arrayExpression(quasis.filter(function (quasi) {
return quasi.value.cooked !== undefined;
}).map(function (quasi) {
return t.stringLiteral(quasi.value.cooked);
}));
exports.default = function (path, state) {
if ((0, _detectors.isStyled)(path.node.tag, state) || (0, _detectors.isHelper)(path.node.tag, state)) {
var _path$node = path.node,
callee = _path$node.tag,
_path$node$quasi = _path$node.quasi,
quasis = _path$node$quasi.quasis,
expressions = _path$node$quasi.expressions;
var values = t.arrayExpression(quasis.map(function (quasi) {
return t.stringLiteral(quasi.value.cooked);
}));
path.replaceWith(t.callExpression(callee, [values].concat(_toConsumableArray(expressions))));
}
path.replaceWith(t.callExpression(callee, [values].concat(_toConsumableArray(expressions))));
}
};
};

2

LICENSE.md
MIT License
Copyright (c) 2016 Vladimir Danchenkov and Maximilian Stoiber
Copyright (c) 2016-present Vladimir Danchenkov and Maximilian Stoiber

@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

24

package.json
{
"version": "1.5.1",
"version": "1.6.0",
"name": "babel-plugin-styled-components",

@@ -8,3 +8,5 @@ "description": "Improve the debugging experience and add server-side rendering support to styled-components",

"Vladimir Danchenkov <vladimir.danchenkov@gmail.com>",
"Max Stoiber <contact@mxstbr.com>"
"Max Stoiber <contact@mxstbr.com>",
"Phil Pluckthun <phil@kitten.sh>",
"Evan Jacobs <probablyup@gmail.com>"
],

@@ -18,8 +20,19 @@ "main": "lib/index.js",

"babel-cli": "^6.24.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.2.2",
"jest": "^17.0.3",
"rimraf": "^2.6.2"
"prettier": "^1.12.1",
"rimraf": "^2.6.2",
"styled-components": "^3.4.5"
},
"dependencies": {
"lodash": "^4.17.10",
"semver": "^5.5.1"
},
"peerDependencies": {
"styled-components": ">= 2"
},
"scripts": {
"clean": "rimraf lib",
"style": "prettier --write src/**/*.js",
"build": "babel src -d lib",

@@ -38,7 +51,2 @@ "test": "jest",

],
"dependencies": {
"@babel/helper-annotate-as-pure": "^7.0.0-beta.37",
"babel-types": "^6.26.0",
"stylis": "^3.0.0"
},
"jest": {

@@ -45,0 +53,0 @@ "snapshotSerializers": [

19

README.md
# `babel-plugin-styled-components`
This plugin adds support for server-side rendering, for minification of styles and gives you a nicer debugging experience when using `styled-components`.
This plugin is a highly recommended supplement to the base styled-components library, offering some useful features:
* consistently hashed component classNames between environments (a must for server-side rendering)
* automatic library usage tweaks that allow for some bytes to be dropped from your bundle
* better debugging through automatic annotation of your styled components based on their context in the file system, etc.
* various types of minification for styles and the tagged template literals styled-components uses
## Quick start

@@ -21,16 +26,14 @@

## [Documentation](https://www.styled-components.com/docs/tooling#babel-plugin)
## Documentation
**The documentation for this plugin lives on [the styled-components website](https://www.styled-components.com/docs/tooling#babel-plugin)!**
- [Usage](https://www.styled-components.com/docs/tooling#usage)
- [Server-side rendering](https://www.styled-components.com/docs/tooling#serverside-rendering)
- [Better debugging](https://www.styled-components.com/docs/tooling#better-debugging)
- [Minification](https://www.styled-components.com/docs/tooling#minification)
- [Preprocessing](https://www.styled-components.com/docs/tooling#preprocessing)
* [Usage](https://www.styled-components.com/docs/tooling#usage)
* [Better debugging](https://www.styled-components.com/docs/tooling#better-debugging)
* [Minification](https://www.styled-components.com/docs/tooling#minification)
## License
Licensed under the MIT License, Copyright © 2016 Vladimir Danchenkov and Maximilian Stoiber.
Licensed under the MIT License, Copyright © 2016-present Vladimir Danchenkov and Maximilian Stoiber.
See [LICENSE.md](./LICENSE.md) for more information.
lib/css/preprocess.js
lib/css/preprocessInjectGlobal.js
lib/css/preprocessKeyframes.js
lib/css/preprocessUtils.js
lib/visitors/noParserImport.js
lib/visitors/templateLiterals/preprocess.js
lib/visitors/uglifyPure.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc