Latest version not working with rollup ?

[BerndWessels]

Hi

I put some console.logs into the babel-plugin-styled-components and it seems to get called but for some reason it does not process and the result is that for example comments and whitespaces are not removed from the css templates output, like in this resulting minified output file:

"use strict";function e(){var n,r,t=(n=["\n  html {\n    // Antialiasing.\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;  }\n"], ........

Can you see if I am doing something wrong or if there is a problem with babel-plugin-styled-components ? Thank you.

I have the following rollup.config.js

import { terser } from "rollup-plugin-terser";
import autoExternal from "rollup-plugin-auto-external";
import babel from "rollup-plugin-babel";
import commonjs from "@rollup/plugin-commonjs";
import glob from "glob";

const components = glob.sync("./packages/*/src/*.js*");

export default components.map((component) => {
  return {
    input: component,
    output: {
      file: component.replace(/\/src\//g, "/lib/"),
      format: "cjs",
      plugins: [terser()],
    },
    plugins: [
      babel({
        exclude: "node_modules/**",
        plugins: ["babel-plugin-styled-components"],
        presets: ["@babel/preset-env", "@babel/preset-react"],
      }),
      commonjs(),
      autoExternal(),
    ],
  };
});

and these are the latest dependencies:

{
  "author": "Design System Components Team",
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 edge version",
      "last 1 explorer version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      "last 1 chrome version",
      "last 1 edge version",
      "last 1 explorer version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "clsx": "^1.1.0",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "styled-components": "^5.1.0"
  },
  "description": "Design System Components",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-react": "^7.9.4",
    "@rollup/plugin-commonjs": "^11.1.0",
    "@rollup/plugin-node-resolve": "^7.1.3",
    "babel-plugin-styled-components": "^1.10.7",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^3.0.0",
    "glob": "^7.1.6",
    "prettier": "^2.0.4",
    "rollup": "^2.6.1",
    "rollup-plugin-auto-external": "^2.0.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-terser": "^5.3.0"
  },
  "eslintConfig": {
    "extends": [
      "airbnb",
      "plugin:jsx-a11y/recommended",
      "prettier",
      "prettier/react"
    ],
    "plugins": [
      "jsx-a11y",
      "prettier"
    ],
    "rules": {
      "react/forbid-prop-types": "off",
      "react/jsx-filename-extension": [
        1,
        {
          "extensions": [
            ".js",
            ".jsx"
          ]
        }
      ],
      "react/jsx-props-no-spreading": "off",
      "sort-imports": "off"
    }
  },
  "license": "ISC",
  "main": "index.js",
  "name": "design-system-components",
  "scripts": {
    "build": "rollup -c",
    "lint": "eslint --fix ./packages/**/src/*",
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "rollup -c -w"
  },
  "version": "1.0.0"
}

[obedparla]

I'm having the same issue. Running a similar setup as OP, and the babel plugin isn't working.

My rollup.config:

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import resolve from 'rollup-plugin-node-resolve';
import url from 'rollup-plugin-url';
import svgr from '@svgr/rollup';

import pkg from './package.json';

export default {
  input: 'src/index.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: pkg.module,
      format: 'esm',
      sourcemap: true,
    },
  ],
  plugins: [
    external(),
    postcss({
      globalModulePaths: [/node_modules\/react-day-picker/],
    }),
    url(),
    svgr(),
    babel(),
    resolve(),
    commonjs(),
  ],
};

"babel-plugin-styled-components": "^1.10.7",

[obedparla]

I fixed it by downgrading to version 1.10.5. I also tried 1.10.7 and 1.10.6 but they won't work. Version 1.10.5 and 1.10.2 works (and probably anywhere in between)

TL;DR: install v 1.10.5 for a fix.

[BerndWessels]

@obedparla thanks, that might be good place to start figuring out which change is breaking it.

Downgrading is not my preferred option ;) Anyways I'll have a look at those changes, but am new to the project, hopefully a more experienced maintainer than me can see the problem and fix right away.

[nickhudkins]

Hey @BerndWessels I have a repro of the issue right here: https://github.com/nickhudkins/sc-repro, it certainly doesn't seem like a babel-plugin-styled-components issue specifically, and is most likely something to do with rollup-plugin-babel, at least... instinctively that is what I believe. I can keep digging in deeper, but a simple repro means "anyone" can dive in more easily.

[nickhudkins]

It appears that as of 1.10.7, isStyled is failing to return true when executed with rollup:

https://github.com/styled-components/babel-plugin-styled-components/blob/master/src/utils/detectors.js#L67-L90

I would guess this has something to do with how rollup is generating the AST, but I am officially out of my depth now.

More importantly: This is the offending commit:https://github.com/styled-components/babel-plugin-styled-components/commit/35a3bb7023433f17555fdeb1e966e7816d9e8f60 is the commit that broke this while using rollup

[nickhudkins]

https://github.com/styled-components/babel-plugin-styled-components/pull/283 If you want to give it a try, have at it. My local project is resolved with this change

[tu4mo]

@nickhudkins, looks like your fix was reverted in v1.11.1, any chances you could revisit this?

[BerndWessels]

+1 please

[Steveeeie]

+1 🙏

[sohonisaurabh]

Hey @probablyup,

This inability of isStyled to return true when run through roll up is causing wide set of issues similar to:

Mismatch of classnames error with react - Occurs as the browser bundle generated by rollup + babel-plugin-styled-components does not contain the displayName and componentId prop.

I know this issue is lying around since v1.10.6, more than a a year back when it was first introduced. Any leads would be helpful either on this plugin or with rollup 🙏

[cbravo]

+1

[felixmagnus]

+1

any updates on this?

[quantizor]

Open to PRs, I don't have any projects using this setup so I probably won't personally be working on it.

[iDVB]

We had bumped into this issue across both our styled-component custom ui library and our many consuming projects. It appears this issues crept up when the following is true: 1) project that uses an external package that uses styled-components 2) external package in question is packaged with rollup 3) both project (gatsby) and external package (rollup) use anything higher than babel-plugin-styled-components@v1.10.5

The fix/workaround, was mentioned here, we just locked the version in our consuming projects and in our lib to babel-plugin-styled-components@v1.10.5.

I've added repo branches for the fix: https://github.com/iDVB/react-components/tree/fixed https://github.com/iDVB/gatsby3_site_issue/tree/fixed

[ktranada]

@probablyup i've created a PR detailing my investigation and proposal : ) https://github.com/styled-components/babel-plugin-styled-components/pull/327

[phucpham94]

+1

[alexgwolff]

Hey, @rollup/plugin-babel looks like handles input and output in different ways. So you need two configs.

import babel, { getBabelOutputPlugin } from '@rollup/plugin-babel';

export default components.map((component) => {
  return {
    input: component,
    output: {
      file: component.replace(/\/src\//g, "/lib/"),
      format: "cjs",
      plugins: [ 
        // babel for output 
        getBabelOutputPlugin({
          filename: 'whatever.js',
          presets: ["@babel/preset-env", "@babel/preset-react"],
          plugins: [['babel-plugin-styled-components', { displayName: true }]],
        }),
        terser() ],
    },
    plugins: [
      commonjs(),
      autoExternal(),

      // babel for input 
      babel({
        exclude: "node_modules/**",
        presets: ["@babel/preset-env", "@babel/preset-react"],
      }),

    ],
  };
});