babel-plugin-styled-components: Latest version not working with rollup ?

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"
}

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 10
  • Comments: 17 (3 by maintainers)

Most upvoted comments

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

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.