babel-plugin-styled-components
Advanced tools
babel-plugin-styled-components - npm Package Compare versions
Comparing version 2.1.2 to 2.1.3
@@ -8,14 +8,14 @@ "use strict"; | ||
| // The capture group makes sure that the split contains the interpolation index | ||
| const placeholderRegex = /(?:__PLACEHOLDER_(\d+)__)/g; // Alternative regex that splits without a capture group | ||
| const placeholderRegex = /(?:__PLACEHOLDER_(\d+)__)/g; | ||
| // Alternative regex that splits without a capture group | ||
| exports.placeholderRegex = placeholderRegex; | ||
| const placeholderNonCapturingRegex = /__PLACEHOLDER_(?:\d+)__/g; // Generates a placeholder from an index | ||
| const placeholderNonCapturingRegex = /__PLACEHOLDER_(?:\d+)__/g; | ||
| const makePlaceholder = index => `__PLACEHOLDER_${index}__`; // Splits CSS by placeholders | ||
| // Generates a placeholder from an index | ||
| const makePlaceholder = index => `__PLACEHOLDER_${index}__`; | ||
| // Splits CSS by placeholders | ||
| exports.makePlaceholder = makePlaceholder; | ||
| const splitByPlaceholders = ([css, ...rest], capture = true) => [css.split(capture ? placeholderRegex : placeholderNonCapturingRegex), ...rest]; | ||
| exports.splitByPlaceholders = splitByPlaceholders; |
@@ -7,19 +7,10 @@ "use strict"; | ||
| exports.default = _default; | ||
| var _babelPluginSyntaxJsx = _interopRequireDefault(require("babel-plugin-syntax-jsx")); | ||
| var _pure = _interopRequireDefault(require("./visitors/pure")); | ||
| var _minify = _interopRequireDefault(require("./visitors/minify")); | ||
| var _displayNameAndId = _interopRequireDefault(require("./visitors/displayNameAndId")); | ||
| var _templateLiterals = _interopRequireDefault(require("./visitors/templateLiterals")); | ||
| var _assignStyledRequired = _interopRequireDefault(require("./visitors/assignStyledRequired")); | ||
| var _transpileCssProp = _interopRequireDefault(require("./visitors/transpileCssProp")); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function _default({ | ||
@@ -36,10 +27,7 @@ types: t | ||
| }, | ||
| VariableDeclarator(path, state) { | ||
| (0, _assignStyledRequired.default)(t)(path, state); | ||
| } | ||
| }, state); | ||
| }, | ||
| CallExpression(path, state) { | ||
@@ -49,3 +37,2 @@ (0, _displayNameAndId.default)(t)(path, state); | ||
| }, | ||
| TaggedTemplateExpression(path, state) { | ||
@@ -57,5 +44,4 @@ (0, _minify.default)(t)(path, state); | ||
| } | ||
| } | ||
| }; | ||
| } |
@@ -7,9 +7,5 @@ "use strict"; | ||
| exports.stripLineComment = exports.minifyRawValues = exports.minifyRaw = exports.minifyCookedValues = exports.minifyCooked = exports.compressSymbols = void 0; | ||
| var _difference = _interopRequireDefault(require("lodash/difference")); | ||
| var _placeholderUtils = require("../css/placeholderUtils"); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| const injectUniquePlaceholders = strArr => { | ||
@@ -21,19 +17,16 @@ let i = 0; | ||
| }; | ||
| const makeMultilineCommentRegex = newlinePattern => new RegExp('\\/\\*[^!](.|' + newlinePattern + ')*?\\*\\/', 'g'); | ||
| const lineCommentStart = /\/\//g; | ||
| const symbolRegex = /(\s*[;:{},]\s*)/g; // Counts occurences of substr inside str | ||
| const symbolRegex = /(\s*[;:{},]\s*)/g; | ||
| const countOccurences = (str, substr) => str.split(substr).length - 1; // Joins substrings until predicate returns true | ||
| // Counts occurences of substr inside str | ||
| const countOccurences = (str, substr) => str.split(substr).length - 1; | ||
| // Joins substrings until predicate returns true | ||
| const reduceSubstr = (substrs, join, predicate) => { | ||
| const length = substrs.length; | ||
| let res = substrs[0]; | ||
| if (length === 1) { | ||
| return res; | ||
| } | ||
| for (let i = 1; i < length; i++) { | ||
@@ -43,16 +36,13 @@ if (predicate(res)) { | ||
| } | ||
| res += join + substrs[i]; | ||
| } | ||
| return res; | ||
| }; | ||
| return res; | ||
| }; // Joins at comment starts when it's inside a string or parantheses | ||
| // Joins at comment starts when it's inside a string or parantheses | ||
| // effectively removing line comments | ||
| const stripLineComment = line => reduceSubstr(line.split(lineCommentStart), '//', str => !str.endsWith(':') && // NOTE: This is another guard against urls, if they're not inside strings or parantheses. | ||
| const stripLineComment = line => reduceSubstr(line.split(lineCommentStart), '//', str => !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, ')')); | ||
| exports.stripLineComment = stripLineComment; | ||
| const compressSymbols = code => code.split(symbolRegex).reduce((str, fragment, index) => { | ||
@@ -62,23 +52,21 @@ // Even-indices are non-symbol fragments | ||
| return str + fragment; | ||
| } // Only manipulate symbols outside of strings | ||
| } | ||
| // Only manipulate symbols outside of strings | ||
| if (countOccurences(str, "'") % 2 !== 0 || countOccurences(str, '"') % 2 !== 0) { | ||
| return str + fragment; | ||
| } // Preserve whitespace preceding colon, to avoid joining selectors. | ||
| } | ||
| // Preserve whitespace preceding colon, to avoid joining selectors. | ||
| if (/^\s+:/.test(fragment)) { | ||
| return str + ' ' + fragment.trim(); | ||
| } | ||
| return str + fragment.trim(); | ||
| }, ''); // Detects lines that are exclusively line comments | ||
| }, ''); | ||
| // Detects lines that are exclusively line comments | ||
| exports.compressSymbols = compressSymbols; | ||
| const isLineComment = line => line.trim().startsWith('//'); | ||
| const isLineComment = line => line.trim().startsWith('//'); // Creates a minifier with a certain linebreak pattern | ||
| // Creates a minifier with a certain linebreak pattern | ||
| const minify = linebreakPattern => { | ||
@@ -98,3 +86,2 @@ const linebreakRegex = new RegExp(linebreakPattern + '\\s*', 'g'); | ||
| }; | ||
| const minifyRaw = minify('(?:\\\\r|\\\\n|\\r|\\n)'); | ||
@@ -104,9 +91,5 @@ exports.minifyRaw = minifyRaw; | ||
| exports.minifyCooked = minifyCooked; | ||
| const minifyRawValues = rawValues => (0, _placeholderUtils.splitByPlaceholders)(minifyRaw(injectUniquePlaceholders(rawValues)), false); | ||
| exports.minifyRawValues = minifyRawValues; | ||
| const minifyCookedValues = cookedValues => (0, _placeholderUtils.splitByPlaceholders)(minifyCooked(injectUniquePlaceholders(cookedValues)), false); | ||
| exports.minifyCookedValues = minifyCookedValues; |
@@ -7,18 +7,11 @@ "use strict"; | ||
| exports.isWithThemeHelper = exports.isValidTopLevelImport = exports.isUseTheme = exports.isStyled = exports.isPureHelper = exports.isKeyframesHelper = exports.isInjectGlobalHelper = exports.isHelper = exports.isCreateGlobalStyleHelper = exports.isCSSHelper = exports.importLocalName = void 0; | ||
| var _getSequenceExpressionValue = _interopRequireDefault(require("./getSequenceExpressionValue")); | ||
| var _options = require("./options"); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| const VALID_TOP_LEVEL_IMPORT_PATH_MATCHERS = ['styled-components', 'styled-components/no-tags', 'styled-components/native', 'styled-components/primitives'].map(literal => x => x === literal); | ||
| const isValidTopLevelImport = (x, state) => { | ||
| return [...VALID_TOP_LEVEL_IMPORT_PATH_MATCHERS, ...(0, _options.useTopLevelImportPathMatchers)(state)].some(isMatch => isMatch(x)); | ||
| }; | ||
| exports.isValidTopLevelImport = isValidTopLevelImport; | ||
| const localNameCache = {}; | ||
| const importLocalName = (name, state, options = {}) => { | ||
@@ -31,9 +24,8 @@ const { | ||
| const cacheKey = name + state.file.opts.filename + cacheKeyAffix; | ||
| if (!bypassCache && cacheKey in localNameCache) { | ||
| return localNameCache[cacheKey]; // state.customImportName is injected by the babel macro | ||
| return localNameCache[cacheKey]; | ||
| // state.customImportName is injected by the babel macro | ||
| } else if (state.customImportName) { | ||
| return state.customImportName.name; | ||
| } | ||
| let localName = state.styledRequired ? name === 'default' ? 'styled' : name : false; | ||
@@ -46,3 +38,2 @@ state.file.path.traverse({ | ||
| } = path; | ||
| if (isValidTopLevelImport(node.source.value, state)) { | ||
@@ -53,11 +44,8 @@ for (const specifier of path.get('specifiers')) { | ||
| } | ||
| if (specifier.isImportDefaultSpecifier()) { | ||
| localName = specifier.node.local.name; | ||
| } | ||
| if (specifier.isImportSpecifier() && specifier.node.imported.name === name) { | ||
| localName = specifier.node.local.name; | ||
| } | ||
| if (specifier.isImportNamespaceSpecifier()) { | ||
@@ -69,3 +57,2 @@ localName = name === 'default' ? specifier.node.local.name : name; | ||
| } | ||
| } | ||
@@ -76,14 +63,8 @@ }); | ||
| }; | ||
| exports.importLocalName = importLocalName; | ||
| const isStyled = t => (tag, state) => { | ||
| if (t.isCallExpression(tag) && t.isMemberExpression(tag.callee) && tag.callee.property.name !== 'default' | ||
| /** ignore default for #93 below */ | ||
| ) { | ||
| 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 if (t.isCallExpression(tag) && t.isSequenceExpression(tag.callee) && t.isMemberExpression((0, _getSequenceExpressionValue.default)(tag.callee)) && (0, _getSequenceExpressionValue.default)(tag.callee).property.name !== 'default' | ||
| /** ignore default for #93 below */ | ||
| ) { | ||
| } else if (t.isCallExpression(tag) && t.isSequenceExpression(tag.callee) && t.isMemberExpression((0, _getSequenceExpressionValue.default)(tag.callee)) && (0, _getSequenceExpressionValue.default)(tag.callee).property.name !== 'default' /** ignore default for #93 below */) { | ||
| // (..., styled).something() | ||
@@ -109,35 +90,18 @@ return isStyled(t)((0, _getSequenceExpressionValue.default)(tag.callee), state); | ||
| }; | ||
| exports.isStyled = isStyled; | ||
| const isCSSHelper = t => (tag, state) => t.isIdentifier(tag) && tag.name === importLocalName('css', state); | ||
| exports.isCSSHelper = isCSSHelper; | ||
| const isCreateGlobalStyleHelper = t => (tag, state) => t.isIdentifier(tag) && tag.name === importLocalName('createGlobalStyle', state); | ||
| exports.isCreateGlobalStyleHelper = isCreateGlobalStyleHelper; | ||
| const isInjectGlobalHelper = t => (tag, state) => t.isIdentifier(tag) && tag.name === importLocalName('injectGlobal', state); | ||
| exports.isInjectGlobalHelper = isInjectGlobalHelper; | ||
| const isKeyframesHelper = t => (tag, state) => t.isIdentifier(tag) && tag.name === importLocalName('keyframes', state); | ||
| exports.isKeyframesHelper = isKeyframesHelper; | ||
| const isWithThemeHelper = t => (tag, state) => t.isIdentifier(tag) && tag.name === importLocalName('withTheme', state); | ||
| exports.isWithThemeHelper = isWithThemeHelper; | ||
| const isUseTheme = t => (tag, state) => t.isIdentifier(tag) && tag.name === importLocalName('useTheme', state); | ||
| exports.isUseTheme = isUseTheme; | ||
| const isHelper = t => (tag, state) => isCreateGlobalStyleHelper(t)(tag, state) || isCSSHelper(t)(tag, state) || isInjectGlobalHelper(t)(tag, state) || isUseTheme(t)(tag, state) || isKeyframesHelper(t)(tag, state) || isWithThemeHelper(t)(tag, state); | ||
| exports.isHelper = isHelper; | ||
| const isPureHelper = t => (tag, state) => isCreateGlobalStyleHelper(t)(tag, state) || isCSSHelper(t)(tag, state) || isKeyframesHelper(t)(tag, state) || isUseTheme(t)(tag, state) || isWithThemeHelper(t)(tag, state); | ||
| exports.isPureHelper = isPureHelper; |
@@ -7,3 +7,2 @@ "use strict"; | ||
| exports.default = void 0; | ||
| /** | ||
@@ -21,7 +20,10 @@ * Get the name of variable that contains node | ||
| if (path.isAssignmentExpression()) { | ||
| namedNode = path.node.left; // const X = { Y: styled } | ||
| namedNode = path.node.left; | ||
| // const X = { Y: styled } | ||
| } else if (path.isObjectProperty()) { | ||
| namedNode = path.node.key; // class Y { (static) X = styled } | ||
| namedNode = path.node.key; | ||
| // class Y { (static) X = styled } | ||
| } else if (path.isClassProperty()) { | ||
| namedNode = path.node.key; // const X = styled | ||
| namedNode = path.node.key; | ||
| // const X = styled | ||
| } else if (path.isVariableDeclarator()) { | ||
@@ -32,3 +34,5 @@ namedNode = path.node.id; | ||
| return true; | ||
| } // we've got an displayName (if we need it) no need to continue | ||
| } | ||
| // we've got an displayName (if we need it) no need to continue | ||
| // However if this is an assignment expression like X = styled then we | ||
@@ -39,15 +43,13 @@ // want to keep going up incase there is Y = X = styled; in this case we | ||
| // name starts with an underscore. | ||
| if (namedNode && !path.isAssignmentExpression()) return true; | ||
| }); // foo.bar -> bar | ||
| }); | ||
| // foo.bar -> bar | ||
| if (t.isMemberExpression(namedNode)) { | ||
| namedNode = namedNode.property; | ||
| } // identifiers are the only thing we can reliably get a name from | ||
| } | ||
| // identifiers are the only thing we can reliably get a name from | ||
| return t.isIdentifier(namedNode) ? namedNode.name : undefined; | ||
| }; | ||
| exports.default = _default; |
@@ -7,5 +7,3 @@ "use strict"; | ||
| exports.default = void 0; | ||
| var _default = path => path.expressions && path.expressions.length ? path.expressions[path.expressions.length - 1] : undefined; | ||
| exports.default = _default; |
@@ -7,3 +7,2 @@ "use strict"; | ||
| exports.default = void 0; | ||
| /** | ||
@@ -25,3 +24,2 @@ * JS Implementation of MurmurHash2 | ||
| let k; | ||
| while (l >= 4) { | ||
@@ -38,11 +36,7 @@ k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24; | ||
| /* 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: | ||
@@ -54,3 +48,2 @@ h ^= str.charCodeAt(i) & 0xff; | ||
| h ^= h >>> 13; | ||
@@ -61,4 +54,3 @@ h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16); | ||
| } | ||
| var _default = murmurhash2_32_gc; | ||
| exports.default = _default; |
@@ -7,7 +7,4 @@ "use strict"; | ||
| exports.useTranspileTemplateLiterals = exports.useTopLevelImportPathMatchers = exports.useSSR = exports.usePureAnnotation = exports.useNamespace = exports.useMinify = exports.useMeaninglessFileNames = exports.useFileName = exports.useDisplayName = exports.useCssProp = void 0; | ||
| var _picomatch = _interopRequireDefault(require("picomatch")); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function getOption({ | ||
@@ -18,49 +15,27 @@ opts | ||
| } | ||
| const useDisplayName = state => getOption(state, 'displayName'); | ||
| exports.useDisplayName = useDisplayName; | ||
| const useTopLevelImportPathMatchers = state => getOption(state, 'topLevelImportPaths', []).map(pattern => (0, _picomatch.default)(pattern)); | ||
| exports.useTopLevelImportPathMatchers = useTopLevelImportPathMatchers; | ||
| const useSSR = state => getOption(state, 'ssr', true); | ||
| exports.useSSR = useSSR; | ||
| const useFileName = state => getOption(state, 'fileName'); | ||
| exports.useFileName = useFileName; | ||
| const useMeaninglessFileNames = state => getOption(state, 'meaninglessFileNames', ['index']); | ||
| exports.useMeaninglessFileNames = useMeaninglessFileNames; | ||
| const useMinify = state => getOption(state, 'minify'); | ||
| exports.useMinify = useMinify; | ||
| const useTranspileTemplateLiterals = state => getOption(state, 'transpileTemplateLiterals'); | ||
| exports.useTranspileTemplateLiterals = useTranspileTemplateLiterals; | ||
| const useNamespace = state => { | ||
| const namespace = getOption(state, 'namespace', ''); | ||
| if (namespace) { | ||
| return `${namespace}__`; | ||
| } | ||
| return ''; | ||
| }; | ||
| exports.useNamespace = useNamespace; | ||
| const usePureAnnotation = state => getOption(state, 'pure', false); | ||
| exports.usePureAnnotation = usePureAnnotation; | ||
| const useCssProp = state => getOption(state, 'cssProp', true); | ||
| exports.useCssProp = useCssProp; |
@@ -7,5 +7,4 @@ "use strict"; | ||
| exports.default = prefixLeadingDigit; | ||
| function prefixLeadingDigit(str) { | ||
| return str.replace(/^(\d)/, 'sc-$1'); | ||
| } |
@@ -7,8 +7,5 @@ "use strict"; | ||
| exports.default = void 0; | ||
| var _detectors = require("../utils/detectors"); | ||
| var _default = t => (path, state) => { | ||
| let init = path.node.init; | ||
| if (t.isCallExpression(path.node.init) && t.isIdentifier(path.node.init.callee) && init.callee.name === '_interopRequireDefault' && init.arguments && init.arguments[0]) { | ||
@@ -18,8 +15,6 @@ // _interopRequireDefault(require()) | ||
| } | ||
| if (t.isCallExpression(init) && t.isIdentifier(init.callee) && init.callee.name === 'require' && init.arguments && init.arguments[0] && t.isLiteral(init.arguments[0]) && (0, _detectors.isValidTopLevelImport)(init.arguments[0].value, state)) { | ||
| if (t.isCallExpression(init) && t.isIdentifier(init.callee) && init.callee.name === 'require' && init.arguments && init.arguments[0] && t.isStringLiteral(init.arguments[0]) && (0, _detectors.isValidTopLevelImport)(init.arguments[0].value, state)) { | ||
| state.styledRequired = path.node.id.name; | ||
| } | ||
| }; | ||
| exports.default = _default; |
@@ -7,19 +7,10 @@ "use strict"; | ||
| exports.default = void 0; | ||
| var _path = _interopRequireDefault(require("path")); | ||
| var _fs = _interopRequireDefault(require("fs")); | ||
| var _options = require("../utils/options"); | ||
| var _getName = _interopRequireDefault(require("../utils/getName")); | ||
| var _prefixDigit = _interopRequireDefault(require("../utils/prefixDigit")); | ||
| var _hash = _interopRequireDefault(require("../utils/hash")); | ||
| var _detectors = require("../utils/detectors"); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| const addConfig = t => (path, displayName, componentId) => { | ||
@@ -29,15 +20,10 @@ if (!displayName && !componentId) { | ||
| } | ||
| const 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))); | ||
| } | ||
| const existingConfig = getExistingConfig(t)(path); | ||
| if (existingConfig && existingConfig.arguments.length && Array.isArray(existingConfig.arguments[0].properties) && !existingConfig.arguments[0].properties.some(prop => ['displayName', 'componentId'].includes(prop.key.name))) { | ||
@@ -47,3 +33,2 @@ existingConfig.arguments[0].properties.push(...withConfigProps); | ||
| } | ||
| if (path.node.callee && t.isMemberExpression(path.node.callee.callee) && path.node.callee.callee.property && path.node.callee.callee.property.name && path.node.callee.callee.property.name == 'withConfig' && path.node.callee.arguments.length && Array.isArray(path.node.callee.arguments[0].properties) && !path.node.callee.arguments[0].properties.some(prop => ['displayName', 'componentId'].includes(prop.key.name))) { | ||
@@ -53,3 +38,2 @@ path.node.callee.arguments[0].properties.push(...withConfigProps); | ||
| } | ||
| if (path.node.tag) { | ||
@@ -62,3 +46,2 @@ // Replace x`...` with x.withConfig({ })`...` | ||
| }; | ||
| const getExistingConfig = t => path => { | ||
@@ -68,3 +51,2 @@ if (path.node.callee && t.isMemberExpression(path.node.callee.callee) && path.node.callee.callee.property && path.node.callee.callee.property.name && path.node.callee.callee.property.name == 'withConfig') { | ||
| } | ||
| if (path.node.callee && t.isMemberExpression(path.node.callee.callee) && path.node.callee.callee.object && path.node.callee.callee.object.callee && path.node.callee.callee.object.callee.property && path.node.callee.callee.object.callee.property.name === 'withConfig') { | ||
@@ -74,9 +56,6 @@ return path.node.callee.callee.object; | ||
| }; | ||
| const getBlockName = (file, meaninglessFileNames) => { | ||
| const name = _path.default.basename(file.opts.filename, _path.default.extname(file.opts.filename)); | ||
| return meaninglessFileNames.includes(name) ? _path.default.basename(_path.default.dirname(file.opts.filename)) : name; | ||
| }; | ||
| const getDisplayName = t => (path, state) => { | ||
@@ -87,10 +66,7 @@ const { | ||
| const componentName = (0, _getName.default)(t)(path); | ||
| if (file) { | ||
| const blockName = getBlockName(file, (0, _options.useMeaninglessFileNames)(state)); | ||
| if (blockName === componentName) { | ||
| return componentName; | ||
| } | ||
| return componentName ? `${(0, _prefixDigit.default)(blockName)}__${componentName}` : (0, _prefixDigit.default)(blockName); | ||
@@ -101,3 +77,2 @@ } else { | ||
| }; | ||
| const findModuleRoot = filename => { | ||
@@ -107,5 +82,3 @@ if (!filename) { | ||
| } | ||
| let dir = _path.default.dirname(filename); | ||
| if (_fs.default.existsSync(_path.default.join(dir, 'package.json'))) { | ||
@@ -119,26 +92,20 @@ return dir; | ||
| }; | ||
| const FILE_HASH = 'styled-components-file-hash'; | ||
| const COMPONENT_POSITION = 'styled-components-component-position'; | ||
| const separatorRegExp = new RegExp(`\\${_path.default.sep}`, 'g'); | ||
| const getFileHash = state => { | ||
| const { | ||
| file | ||
| } = state; // hash calculation is costly due to fs operations, so we'll cache it per 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 filename = file.opts.filename; | ||
| // find module root directory | ||
| const moduleRoot = findModuleRoot(filename); | ||
| const filePath = moduleRoot && _path.default.relative(moduleRoot, filename).replace(separatorRegExp, '/'); | ||
| const moduleName = moduleRoot && JSON.parse(_fs.default.readFileSync(_path.default.join(moduleRoot, 'package.json'))).name; | ||
| const code = file.code; | ||
| const stuffToHash = [moduleName]; | ||
| if (filePath) { | ||
@@ -149,3 +116,2 @@ stuffToHash.push(filePath); | ||
| } | ||
| const fileHash = (0, _hash.default)(stuffToHash.join('')); | ||
@@ -155,3 +121,2 @@ file.set(FILE_HASH, fileHash); | ||
| }; | ||
| const getNextId = state => { | ||
@@ -162,3 +127,2 @@ const id = state.file.get(COMPONENT_POSITION) || 0; | ||
| }; | ||
| const getComponentId = state => { | ||
@@ -168,9 +132,9 @@ // Prefix the identifier with a character because CSS classes cannot start with a number | ||
| }; | ||
| var _default = t => (path, state) => { | ||
| if (path.node.tag ? (0, _detectors.isStyled)(t)(path.node.tag, state) : | ||
| /* styled()`` */ | ||
| (0, _detectors.isStyled)(t)(path.node.callee, state) && path.node.callee.property && path.node.callee.property.name !== 'withConfig' || // styled(x)({}) | ||
| (0, _detectors.isStyled)(t)(path.node.callee, state) && !t.isMemberExpression(path.node.callee.callee) || // styled(x).attrs()({}) | ||
| (0, _detectors.isStyled)(t)(path.node.callee, state) && t.isMemberExpression(path.node.callee.callee) && path.node.callee.callee.property && path.node.callee.callee.property.name && path.node.callee.callee.property.name !== 'withConfig' || // styled(x).withConfig({}) | ||
| if (path.node.tag ? (0, _detectors.isStyled)(t)(path.node.tag, state) : /* styled()`` */(0, _detectors.isStyled)(t)(path.node.callee, state) && path.node.callee.property && path.node.callee.property.name !== 'withConfig' || | ||
| // styled(x)({}) | ||
| (0, _detectors.isStyled)(t)(path.node.callee, state) && !t.isMemberExpression(path.node.callee.callee) || | ||
| // styled(x).attrs()({}) | ||
| (0, _detectors.isStyled)(t)(path.node.callee, state) && t.isMemberExpression(path.node.callee.callee) && path.node.callee.callee.property && path.node.callee.callee.property.name && path.node.callee.callee.property.name !== 'withConfig' || | ||
| // styled(x).withConfig({}) | ||
| (0, _detectors.isStyled)(t)(path.node.callee, state) && t.isMemberExpression(path.node.callee.callee) && path.node.callee.callee.property && path.node.callee.callee.property.name && path.node.callee.callee.property.name === 'withConfig' && path.node.callee.arguments.length && Array.isArray(path.node.callee.arguments[0].properties) && !path.node.callee.arguments[0].properties.some(prop => ['displayName', 'componentId'].includes(prop.key.name))) { | ||
@@ -181,3 +145,2 @@ const displayName = (0, _options.useDisplayName)(state) && getDisplayName(t)(path, (0, _options.useFileName)(state) && state); | ||
| }; | ||
| exports.default = _default; |
@@ -7,9 +7,5 @@ "use strict"; | ||
| exports.default = void 0; | ||
| var _options = require("../utils/options"); | ||
| var _detectors = require("../utils/detectors"); | ||
| var _minify = require("../minify"); | ||
| var _default = t => (path, state) => { | ||
@@ -24,3 +20,2 @@ if ((0, _options.useMinify)(state) && ((0, _detectors.isStyled)(t)(path.node.tag, state) || (0, _detectors.isHelper)(t)(path.node.tag, state))) { | ||
| }); | ||
| for (let i = 0; i < quasisLength; i++) { | ||
@@ -33,3 +28,2 @@ const element = templateLiteral.quasis[i]; | ||
| }; | ||
| exports.default = _default; |
@@ -7,11 +7,6 @@ "use strict"; | ||
| exports.default = void 0; | ||
| var _helperAnnotateAsPure = _interopRequireDefault(require("@babel/helper-annotate-as-pure")); | ||
| var _options = require("../utils/options"); | ||
| var _detectors = require("../utils/detectors"); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| var _default = t => (path, state) => { | ||
@@ -26,3 +21,2 @@ if ((0, _options.usePureAnnotation)(state)) { | ||
| }; | ||
| exports.default = _default; |
@@ -7,9 +7,5 @@ "use strict"; | ||
| exports.default = void 0; | ||
| var _options = require("../../utils/options"); | ||
| var _transpile = _interopRequireDefault(require("./transpile")); | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| var _default = t => (path, state) => { | ||
@@ -20,3 +16,2 @@ if ((0, _options.useTranspileTemplateLiterals)(state)) { | ||
| }; | ||
| exports.default = _default; |
@@ -7,5 +7,3 @@ "use strict"; | ||
| exports.default = void 0; | ||
| var _detectors = require("../../utils/detectors"); | ||
| var _default = t => (path, state) => { | ||
@@ -24,3 +22,2 @@ if ((0, _detectors.isStyled)(t)(path.node.tag, state) || (0, _detectors.isHelper)(t)(path.node.tag, state)) { | ||
| }; | ||
| exports.default = _default; |
@@ -7,51 +7,43 @@ "use strict"; | ||
| exports.default = void 0; | ||
| var _helperModuleImports = require("@babel/helper-module-imports"); | ||
| var _detectors = require("../utils/detectors"); | ||
| var _options = require("../utils/options"); | ||
| // Most of this code was taken from @satya164's babel-plugin-css-prop | ||
| // @see https://github.com/satya164/babel-plugin-css-prop | ||
| const TAG_NAME_REGEXP = /^[a-z][a-z\d]*(\-[a-z][a-z\d]*)?$/; | ||
| const getName = (node, t) => { | ||
| if (typeof node.name === 'string') return node.name; | ||
| if (t.isJSXMemberExpression(node)) { | ||
| return `${getName(node.object, t)}.${node.property.name}`; | ||
| } | ||
| throw path.buildCodeFrameError(`Cannot infer name from node with type "${node.type}". Please submit an issue at github.com/styled-components/babel-plugin-styled-components with your code so we can take a look at your use case!`); | ||
| }; | ||
| const getNameExpression = (node, t) => { | ||
| if (typeof node.name === 'string') return t.identifier(node.name); | ||
| if (t.isJSXMemberExpression(node)) { | ||
| return t.memberExpression(getNameExpression(node.object, t), t.identifier(node.property.name)); | ||
| } | ||
| throw path.buildCodeFrameError(`Cannot infer name expression from node with type "${node.type}". Please submit an issue at github.com/styled-components/babel-plugin-styled-components with your code so we can take a look at your use case!`); | ||
| }; | ||
| const getLocalIdentifier = path => { | ||
| const identifier = path.scope.generateUidIdentifier('css'); // make it transient | ||
| const identifier = path.scope.generateUidIdentifier('css'); | ||
| // make it transient | ||
| identifier.name = identifier.name.replace('_', '$_'); | ||
| return identifier; | ||
| }; | ||
| var _default = t => (path, state) => { | ||
| if (!(0, _options.useCssProp)(state)) return; | ||
| if (path.node.name.name !== 'css') return; | ||
| const program = state.file.path; // state.customImportName is passed through from styled-components/macro if it's used | ||
| const program = state.file.path; | ||
| // state.customImportName is passed through from styled-components/macro if it's used | ||
| // since the macro also inserts the import | ||
| let importName = state.customImportName || (0, _detectors.importLocalName)('default', state); | ||
| const { | ||
| bindings | ||
| } = program.scope; // Insert import if it doesn't exist yet | ||
| } = program.scope; | ||
| // Insert import if it doesn't exist yet | ||
| if (!importName || !bindings[importName.name] || !bindings[importName]) { | ||
@@ -65,3 +57,2 @@ (0, _helperModuleImports.addDefault)(path, 'styled-components', { | ||
| } | ||
| if (!t.isIdentifier(importName)) importName = t.identifier(importName); | ||
@@ -74,3 +65,2 @@ const elem = path.parentPath; | ||
| let injector; | ||
| if (TAG_NAME_REGEXP.test(name)) { | ||
@@ -80,3 +70,2 @@ styled = t.callExpression(importName, [t.stringLiteral(name)]); | ||
| styled = t.callExpression(importName, [nameExpression]); | ||
| if (bindings[name] && !t.isImportDeclaration(bindings[name].path.parent)) { | ||
@@ -86,5 +75,3 @@ injector = nodeToInsert => (t.isVariableDeclaration(bindings[name].path.parent) ? bindings[name].path.parentPath : bindings[name].path).insertAfter(nodeToInsert); | ||
| } | ||
| let css; | ||
| if (t.isStringLiteral(path.node.value)) { | ||
@@ -112,13 +99,12 @@ css = t.templateLiteral([t.templateElement({ | ||
| } | ||
| if (!css) return; | ||
| if (!css) return; // strip off css prop from final output | ||
| // strip off css prop from final output | ||
| elem.node.attributes = elem.node.attributes.filter(x => t.isJSXSpreadAttribute(x) || (t.isJSXAttribute(x) ? x.name.name !== 'css' : false)); | ||
| elem.node.name = t.jSXIdentifier(id.name); | ||
| if (elem.parentPath.node.closingElement) { | ||
| elem.parentPath.node.closingElement.name = t.jSXIdentifier(id.name); | ||
| } // object syntax | ||
| } | ||
| // object syntax | ||
| if (t.isObjectExpression(css)) { | ||
@@ -136,5 +122,8 @@ /** | ||
| */ | ||
| if (t.isMemberExpression(property.key) || t.isCallExpression(property.key) || // checking for css={{[something]: something}} | ||
| t.isIdentifier(property.key) && path.scope.hasBinding(property.key.name) && ( // but not a object reference shorthand like css={{ color }} | ||
| t.isIdentifier(property.value) ? property.key.name !== property.value.name : true) && // and not a tricky expression | ||
| if (t.isMemberExpression(property.key) || t.isCallExpression(property.key) || | ||
| // checking for css={{[something]: something}} | ||
| t.isIdentifier(property.key) && path.scope.hasBinding(property.key.name) && ( | ||
| // but not a object reference shorthand like css={{ color }} | ||
| t.isIdentifier(property.value) ? property.key.name !== property.value.name : true) && | ||
| // and not a tricky expression | ||
| !t.isMemberExpression(property.value) && !t.isLogicalExpression(property.value) && !t.isConditionalExpression(property.value)) { | ||
@@ -146,3 +135,2 @@ replaceObjectWithPropFunction = true; | ||
| } | ||
| if (t.isObjectExpression(property.value)) { | ||
@@ -154,2 +142,3 @@ // recurse for objects within objects (e.g. {'::before': { content: x }}) | ||
| // handle spread variables and such | ||
| if (t.isObjectExpression(property.argument)) { | ||
@@ -163,5 +152,5 @@ property.argument.properties = property.argument.properties.reduce(propertiesReducer, []); | ||
| } | ||
| acc.push(property); | ||
| } else if ( // if a non-primitive value we have to interpolate it | ||
| } else if ( | ||
| // if a non-primitive value we have to interpolate it | ||
| [t.isBigIntLiteral, t.isBooleanLiteral, t.isNullLiteral, t.isNumericLiteral, t.isStringLiteral].filter(Boolean) // older versions of babel might not have bigint support baked in | ||
@@ -177,6 +166,4 @@ .every(x => !x(property.value))) { | ||
| } | ||
| return acc; | ||
| }, []); | ||
| if (replaceObjectWithPropFunction) { | ||
@@ -196,20 +183,14 @@ css = t.arrowFunctionExpression([p], css); | ||
| } | ||
| return acc; | ||
| }, []); | ||
| } | ||
| if (!injector) { | ||
| let parent = elem; | ||
| while (!t.isProgram(parent)) { | ||
| parent = parent.parentPath; | ||
| } | ||
| injector = nodeToInsert => parent.pushContainer('body', nodeToInsert); | ||
| } | ||
| injector(t.variableDeclaration('var', [t.variableDeclarator(id, t.isObjectExpression(css) || t.isArrowFunctionExpression(css) ? t.callExpression(styled, [css]) : t.taggedTemplateExpression(styled, css))])); | ||
| }; | ||
| exports.default = _default; |
| { | ||
| "version": "2.1.2", | ||
| "version": "2.1.3", | ||
| "name": "babel-plugin-styled-components", | ||
@@ -19,26 +19,21 @@ "description": "Improve the debugging experience and add server-side rendering support to styled-components", | ||
| "devDependencies": { | ||
| "@babel/cli": "^7.16.0", | ||
| "@babel/core": "^7.16.0", | ||
| "@babel/plugin-proposal-class-properties": "^7.16.0", | ||
| "@babel/plugin-transform-modules-commonjs": "^7.16.0", | ||
| "@babel/preset-env": "^7.16.4", | ||
| "babel-core": "7.0.0-bridge.0", | ||
| "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2", | ||
| "babel-test": "^0.2.1", | ||
| "jest": "^27.3.1", | ||
| "@babel/cli": "^7.21.5", | ||
| "@babel/core": "^7.21.8", | ||
| "@babel/plugin-proposal-class-properties": "^7.18.6", | ||
| "@babel/plugin-transform-modules-commonjs": "^7.21.5", | ||
| "@babel/preset-env": "^7.21.5", | ||
| "babel-test": "^0.2.4", | ||
| "jest": "^29.5.0", | ||
| "jest-file-snapshot": "^0.5.0", | ||
| "prettier": "^2.4.1", | ||
| "rimraf": "^3.0.0", | ||
| "styled-components": "^5.3.3" | ||
| "prettier": "^2.8.8", | ||
| "rimraf": "^3.0.2", | ||
| "styled-components": "^5.3.10" | ||
| }, | ||
| "dependencies": { | ||
| "@babel/helper-annotate-as-pure": "^7.16.0", | ||
| "@babel/helper-module-imports": "^7.16.0", | ||
| "@babel/helper-annotate-as-pure": "^7.18.6", | ||
| "@babel/helper-module-imports": "^7.21.4", | ||
| "babel-plugin-syntax-jsx": "^6.18.0", | ||
| "lodash": "^4.17.21", | ||
| "picomatch": "^2.3.0" | ||
| "picomatch": "^2.3.1" | ||
| }, | ||
| "resolutions": { | ||
| "babel-core": "7.0.0-bridge.0" | ||
| }, | ||
| "peerDependencies": { | ||
@@ -45,0 +40,0 @@ "styled-components": ">= 2" |
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
Improved metrics
- Dev dependency count
- decreased by-15.38%
11
- Lines of code
- increased by3.47%
776
Worsened metrics
- Total package byte prevSize
- decreased by-0.7%
42551