v1.11.0 a few times slower

After upgrade to v1.11.0 from v1.10.7 I noticed that builds became much longer.

Tools:

node: 12.16.0
webpack: 4.44.1

Plugin configuration

  ssr: true,
  pure: true,
  displayName: false,
  fileName: false

Test conditions

Same machine and OS.
Same dependencies except babel-plugin-styled-components version.
No cache on every build.
Result is calculated as average on 4 builds.

Results:

1.10.7	1.11.0
46.4325s	136.11s

Shallow investigation

Try to revert #283. Results became betters, similar to 1.10.7 🎉.

Let's go deeper.

babel-plugin-styled-components/src/utils/detectors.js

Line 17 in ccc15c5

    
           if (!bypassCache && cacheKey in localNameCache && localNameCache[cacheKey] !== CACHE_MISS) {

babel-plugin-styled-components/src/utils/detectors.js

Line 21 in ccc15c5

let localName = state.styledRequired

babel-plugin-styled-components/src/utils/detectors.js

Line 25 in ccc15c5

: CACHE_MISS

babel-plugin-styled-components/src/utils/detectors.js

Line 10 in ccc15c5

VALID_TOP_LEVEL_IMPORT_PATHS.includes(x)

A module doesn't contain styled-components imports? No worries, on next expression we will definitely find them!

Of course I saw the support of css-prop, where the visitor may modify imports. But it in mixed case depending on expressions order it may skip styled. declarations.

`styled`, then `css` prop

input

import React from 'react'

const Title = styled.h1`
  font-size: 10px;
`

const TestComponent = () => (
  <div css={`width: 10px;`}>
    <Title>Title</Title>
  </div>
)

output

import _styled from "styled-components";
import React from 'react';
const Title = styled.h1`
  font-size: 10px;
`;

var _StyledDiv = /*#__PURE__*/_styled("div").withConfig({
  componentId: "dh69fc-0"
})(["width:10px;"]);

const TestComponent = () => /*#__PURE__*/React.createElement(_StyledDiv, null, /*#__PURE__*/React.createElement(Title, null, "Title"));

`css` prop, then `styled

input

import React from 'react'

const TestComponent = () => (
  <div css={`width: 10px;`}>
    <Title>Title</Title>
  </div>
)


const Title = styled.h1`
  font-size: 10px;
`

output

import _styled from "styled-components";
import React from 'react';

var _StyledDiv = /*#__PURE__*/_styled("div").withConfig({
  componentId: "dh69fc-0"
})(["width:10px;"]);

const TestComponent = () => /*#__PURE__*/React.createElement(_StyledDiv, null, /*#__PURE__*/React.createElement(Title, null, "Title"));

const Title = styled.h1`
  font-size: 10px;
`;

sigh was hoping that wouldn't be the case. Can you send a revert PR for the cache miss?

@probablyup Sure, just a second

@probablyup v1.11.1 became fast as before 🎉. Thank you!