Add minification in helpers css, keyframes, and createGlobalStyle

Author: Igorbek

src/__tests__/baselines/minification/minify-css-in-helpers.ts.baseline

@@ -38,14 +38,8 @@ TypeScript after transform:
   declare const keyframes: any;
   declare const css: any;
   declare const theColor: any;
-  const key = keyframes \`
-    to {
-      transform: rotate(360deg);
-    }
-  \`;
-  const color = css \`
-    color: \${theColor};
-  \`;
+  const key = keyframes \`to{transform:rotate(360deg);}\`;
+  const color = css \`color:\${theColor};\`;
   export {};
 
 

src/createTransformer.ts

@@ -19,6 +19,7 @@ import { minifyTemplate } from './minify';
  * styled.tag
  * Component.extend
  * styled(Component)
+ * styled('tag')
  * styledFunction.attrs(attributes)
 */
 function isStyledFunction(node: ts.Node, identifiers: CustomStyledIdentifiers): boolean {
@@ -84,6 +85,30 @@ function isStyledAttrs(node: ts.Node, identifiers: CustomStyledIdentifiers) {
         && isStyledFunction((node as ts.PropertyAccessExpression).expression, identifiers);
 }
 
+function isStyledKeyframesIdentifier(name: string, { keyframes = ['keyframes'] }: CustomStyledIdentifiers) {
+    return keyframes.indexOf(name) >= 0;
+}
+
+function isStyledCssIdentifier(name: string, { css = ['css'] }: CustomStyledIdentifiers) {
+    return css.indexOf(name) >= 0;
+}
+
+function isStyledCreateGlobalStyleIdentifier(name: string, { createGlobalStyle = ['createGlobalStyle'] }: CustomStyledIdentifiers) {
+    return createGlobalStyle.indexOf(name) >= 0;
+}
+
+function isMinifyableStyledFunction(node: ts.Node, identifiers: CustomStyledIdentifiers) {
+    return isStyledFunction(node, identifiers)
+        || (
+            isIdentifier(node)
+            && (
+                isStyledKeyframesIdentifier(node.text, identifiers)
+                || isStyledCssIdentifier(node.text, identifiers)
+                || isStyledCreateGlobalStyleIdentifier(node.text, identifiers)
+            )
+        );
+}
+
 function defaultGetDisplayName(filename: string, bindingName: string | undefined): string | undefined {
     return bindingName;
 }
@@ -135,7 +160,7 @@ export function createTransformer({
                 if (
                     minify
                     && isTaggedTemplateExpression(node)
-                    && isStyledFunction(node.tag, identifiers)
+                    && isMinifyableStyledFunction(node.tag, identifiers)
                 ) {
                     const minifiedTemplate = minifyTemplate(node.template);
                     if (minifiedTemplate && minifiedTemplate !== node.template) {

src/models/Options.ts

@@ -48,4 +48,25 @@ export interface CustomStyledIdentifiers {
      * @defaultValue `['attrs']`
      */
     attrs?: string[];
+
+    /**
+     * Identifiers of `keyframes` function.
+     * 
+     * @defaultValue `['keyframes']`
+     */
+    keyframes?: string[];
+
+    /**
+     * Identifiers of `css` function.
+     * 
+     * @defaultValue `['css']`
+     */
+    css?: string[];
+
+    /**
+     * Identifiers of `createGlobalStyle` function.
+     * 
+     * @defaultValue `['createGlobalStyle']`
+     */
+    createGlobalStyle?: string[];
 }