callstack / linaria

Zero-runtime CSS in JS library
https://linaria.dev
MIT License
11.49k stars 414 forks source link

Painfully slow builds #507

Closed grebenyuksv-preply closed 4 years ago

grebenyuksv-preply commented 4 years ago

Dear maintainers, I'm trying to migrate a mid-size NextJS project from styled-components. Things work, but the builds (both initial and incremental) take me many minutes, which prevents me from using the lib. Could you give me a hint? What am I doing wrong? I don't have a good reproducible example because it's only happening in my project, much bigger than the boilerplates I could find.

Additional info:

There's just 1 file barely using linaria:

// src/pages/search/components/SearchHead/SearchHead.styles.tsx

import { styled } from 'linaria/react';
import { spaces, colors, responsive } from '@preply/ui';

export const HeadWrapper = styled.div`
    position: relative;
    max-width: 1280px;
    margin: auto;
    padding: ${spaces.m} ${spaces.l} 0;
    color: ${colors.grey.g1};
    z-index: 0;
    @media screen and (max-width: ${responsive.mobile.normal}) {
        padding: ${spaces.m} ${spaces.m} 0;
    }
    @media screen and (max-width: ${responsive.mobile.sm}) {
        padding: ${spaces.s} ${spaces.s} 0;
    }
    @media screen and (max-width: ${responsive.mobile.xs}) {
        padding: ${spaces.xs} ${spaces.xs} 0;
    }
`;

After I put a console.log(this.filename, options); here in evaluate.js https://github.com/callstack/linaria/blob/master/src/babel/evaluate.js#L158, I got nothing but the same output repeating many times in my console:

/Users/sergii/preply/apollo-ssr-boost-dev/node-ssr/src/pages/search/components/SearchHead/SearchHead.styles.tsx { displayName: false, evaluate: true, ignore: /node_modules/ }
{
  metadata: { 'react-intl': { messages: [] } },
  options: {
    sourceType: 'unambiguous',
    caller: { name: 'linaria', evaluate: true },
    filename: '/Users/sergii/preply/apollo-ssr-boost-dev/node-ssr/src/pages/search/components/SearchHead/SearchHead.styles.tsx',
    babelrc: false,
    configFile: false,
    passPerPreset: false,
    envName: 'development',
    cwd: '/Users/sergii/preply/apollo-ssr-boost-dev/node-ssr',
    root: '/Users/sergii/preply/apollo-ssr-boost-dev/node-ssr',
    plugins: [
      [Plugin], [Plugin], [Plugin], [Plugin],
      [Plugin], [Plugin], [Plugin], [Plugin],
      [Plugin], [Plugin], [Plugin], [Plugin],
      [Plugin], [Plugin], [Plugin], [Plugin],
      [Plugin], [Plugin], [Plugin], [Plugin],
      [Plugin], [Plugin], [Plugin], [Plugin],
      [Plugin], [Plugin], [Plugin], [Plugin],
      [Plugin], [Plugin], [Plugin], [Plugin],
      [Plugin], [Plugin], [Plugin], [Plugin],
      [Plugin], [Plugin], [Plugin], [Plugin],
      [Plugin], [Plugin], [Plugin], [Plugin],
      [Plugin], [Plugin], [Plugin], [Plugin],
      [Plugin], [Plugin], [Plugin], [Plugin],
      [Plugin], [Plugin], [Plugin]
    ],
    presets: [],
    parserOpts: {
      sourceType: 'unambiguous',
      sourceFileName: '/Users/sergii/preply/apollo-ssr-boost-dev/node-ssr/src/pages/search/components/SearchHead/SearchHead.styles.tsx',
      plugins: [Array]
    },
    generatorOpts: {
      filename: '/Users/sergii/preply/apollo-ssr-boost-dev/node-ssr/src/pages/search/components/SearchHead/SearchHead.styles.tsx',
      auxiliaryCommentBefore: undefined,
      auxiliaryCommentAfter: undefined,
      retainLines: undefined,
      comments: true,
      shouldPrintComment: undefined,
      compact: 'auto',
      minified: undefined,
      sourceMaps: false,
      sourceRoot: undefined,
      sourceFileName: 'SearchHead.styles.tsx'
    }
  },
  ast: null,
  code: '"use strict";\n' +
    '\n' +
    'var _ui = require("@preply/ui");\n' +
    '\n' +
    '{\n' +
    '  module.exports = _ui.spaces.m;\n' +
    '}',
  map: null,
  sourceType: 'script'
}

Hardly something interesting in my configs:

// .babelrc
{
    "presets": [
        "next/babel",
        "linaria/babel"
    ],
    "plugins": [
    // ...
    ]
}
// next.config.js
// ...
config.module.rules.push({
    test: /\.(jsx?|tsx?)$/,
    exclude: [/node_modules/],
    use: [
        {
            loader: 'linaria/loader',
            options: {
                sourceMap: process.env.NODE_ENV !== 'production',
            },
        },
    ],
});
// ...

Does that mean that linaria is parsing the same code multiple times? Am I doing something wrong? I would appreciate any help.

thymikee commented 4 years ago

Looks like a duplicate of #392. Also, feel free to try latest beta: https://github.com/callstack/linaria/releases/tag/v1.4.0-beta.0. Folks seem to observe a build perf improvement over there.