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)
@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 tried1.10.7
and1.10.6
but they won’t work. Version1.10.5
and1.10.2
works (and probably anywhere in between)TL;DR: install v
1.10.5
for a fix.