babel-plugin-styled-components
babel-plugin-styled-components copied to clipboard
keyframes do not get minified in output (whitespaces not removed)
Hi
using the latest babel-plugin-styled-components 1.10.7 the keyframes string does not get minified in the output (like whitespaces removed n stuff).
import React, { useCallback, useState } from "react";
import styled, { keyframes } from "styled-components/macro";
const RippleContainer = styled.span`
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
`;
const RippleKeyframes = keyframes`
to {
opacity: 0;
transform: scale(2);
}
`;
// ...
See that the span gets nicely minified
var p=r.span.withConfig({displayName:"RippleContainer"})(["position:absolute;top:0;right:0;bottom:0;left:0;"]),
But the keyframes doesn't
var e,t,r=(e=["\n to {\n opacity: 0;\n transform: scale(2);\n }\n"],
this is my 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 { eslint } from "rollup-plugin-eslint";
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",
exports: "named",
sourcemap: true,
plugins: [terser()],
},
plugins: [
eslint(),
babel({
runtimeHelpers: true,
exclude: "node_modules/**",
plugins: ["babel-plugin-macros"],
presets: ["@babel/preset-env", "@babel/preset-react"],
}),
commonjs(),
autoExternal(),
],
};
});
I'm having the same issue
"styled-components": "^5.3.5", "babel-plugin-styled-components": "^2.0.6",
all other template literals in styled-components are being minified as expected, but the keyframes`` aren't being touched.
Experiencing a similar issue but with css helper and usage without macro
I noted that setting skipPreflightCheck: true on @rollup/babel-plugin changes the behavior... in my case the styled helpers are minified now. Don't know the implications for other plugins though...