styled-components / babel-plugin-styled-components

Improve the debugging experience and add server-side rendering support to styled-components
MIT License
1.07k stars 141 forks source link

keyframes do not get minified in output (whitespaces not removed) #284

Open BerndWessels opened 4 years ago

BerndWessels commented 4 years ago

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(),
    ],
  };
});
chloe-samdesk commented 2 years ago

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.

Xiphe commented 2 years ago

Experiencing a similar issue but with css helper and usage without macro

Xiphe commented 2 years ago

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...