Merge pull request #5109 from storybooks/ts-migration/babel-typescript

Using Babel for TypeScript instead of tsc
storybookjs · Apr 4, 2019 · 1fd38ca · 1fd38ca
2 parents db7c174 + dc521ca
commit 1fd38ca
Show file tree

Hide file tree

Showing 41 changed files with 341 additions and 190 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -1,14 +1,15 @@
 module.exports = {
   presets: [
     ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage' }],
+    '@babel/preset-typescript',
     '@babel/preset-react',
     '@babel/preset-flow',
   ],
   plugins: [
-    ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
     '@babel/plugin-proposal-export-default-from',
     '@babel/plugin-syntax-dynamic-import',
-    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
     'babel-plugin-macros',
     ['emotion', { sourceMap: true, autoLabel: true }],
   ],
@@ -62,6 +63,13 @@ module.exports = {
           },
         ],
       ],
+      plugins: [
+        'emotion',
+        'babel-plugin-macros',
+        ['@babel/plugin-proposal-class-properties', { loose: true }],
+        '@babel/plugin-proposal-object-rest-spread',
+        '@babel/plugin-proposal-export-default-from',
+      ],
     },
   ],
 };
diff --git a/addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap b/addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap
@@ -78,25 +78,13 @@ exports[`HighlightToggle component should match snapshot 1`] = `
               "toString": [Function],
             },
             "hoverable": Object {
-              "map": undefined,
-              "name": "wpaw6f",
-              "next": undefined,
-              "styles": "
-  transition: all 150ms ease-out;
-  transform: translate3d(0, 0, 0);
-
-  &:hover {
-    transform: translate3d(0, -2px, 0);
-  }
-
-  &:active {
-    transform: translate3d(0, 0, 0);
-  }
-",
+              "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NxQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
+              "name": "1023qba-hoverable",
+              "styles": "transition:all 150ms ease-out;transform:translate3d(0,0,0);&:hover{transform:translate3d(0,-2px,0);}&:active{transform:translate3d(0,0,0);}label:hoverable;",
             },
             "inlineGlow": Object {
-              "map": undefined,
-              "name": "zv3h0s",
+              "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbmltYXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNzQiIsImZpbGUiOiIuLi9zcmMvYW5pbWF0aW9uLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuZXhwb3J0IGNvbnN0IGVhc2luZyA9IHtcbiAgcnViYmVyOiAnY3ViaWMtYmV6aWVyKDAuMTc1LCAwLjg4NSwgMC4zMzUsIDEuMDUpJyxcbn07XG5cbmNvbnN0IHJvdGF0ZTM2MCA9IGtleWZyYW1lc2Bcblx0ZnJvbSB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMGRlZyk7XG5cdH1cblx0dG8ge1xuXHRcdHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG5cdH1cbmA7XG5cbmNvbnN0IGdsb3cgPSBrZXlmcmFtZXNgXG4gIDAlLCAxMDAlIHsgb3BhY2l0eTogMTsgfVxuICA1MCUgeyBvcGFjaXR5OiAuNDsgfVxuYDtcblxuY29uc3QgZmxvYXQgPSBrZXlmcmFtZXNgXG4gIDAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDFweCk7IH1cbiAgMjUlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDBweCk7IH1cbiAgNTAlIHsgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0zcHgpOyB9XG4gIDEwMCUgeyB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMXB4KTsgfVxuYDtcblxuY29uc3QgamlnZ2xlID0ga2V5ZnJhbWVzYFxuICAwJSwgMTAwJSB7IHRyYW5zZm9ybTp0cmFuc2xhdGUzZCgwLDAsMCk7IH1cbiAgMTIuNSUsIDYyLjUlIHsgdHJhbnNmb3JtOnRyYW5zbGF0ZTNkKC00cHgsMCwwKTsgfVxuICAzNy41JSwgODcuNSUgeyAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCg0cHgsMCwwKTsgIH1cbmA7XG5cbmNvbnN0IGlubGluZUdsb3cgPSBjc3NgXG4gIGFuaW1hdGlvbjogJHtnbG93fSAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlO1xuICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGN1cnNvcjogcHJvZ3Jlc3M7XG5gO1xuXG4vLyBob3ZlciAmIGFjdGl2ZSBzdGF0ZSBmb3IgbGlua3MgYW5kIGJ1dHRvbnNcbmNvbnN0IGhvdmVyYWJsZSA9IGNzc2BcbiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGVhc2Utb3V0O1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDAsIDApO1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgLTJweCwgMCk7XG4gIH1cblxuICAmOmFjdGl2ZSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGFuaW1hdGlvbiA9IHtcbiAgcm90YXRlMzYwLFxuICBnbG93LFxuICBmbG9hdCxcbiAgamlnZ2xlLFxuICBpbmxpbmVHbG93LFxuICBob3ZlcmFibGUsXG59O1xuIl19 */",
+              "name": "1euta6d-inlineGlow",
               "next": Object {
                 "name": "animation-r0iffl",
                 "next": undefined,
@@ -105,12 +93,7 @@ exports[`HighlightToggle component should match snapshot 1`] = `
   50% { opacity: .4; }
 }",
               },
-              "styles": "
-  animation: animation-r0iffl 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
-  color: transparent;
-  cursor: progress;
-",
+              "styles": "animation:animation-r0iffl 1.5s ease-in-out infinite;color:transparent;cursor:progress;label:inlineGlow;",
             },
             "jiggle": Object {
               "anim": 1,

diff --git a/addons/centered/angular.d.ts b/addons/centered/angular.d.ts
@@ -1,6 +1,22 @@
 // tslint:disable-next-line:no-implicit-dependencies
-import { IStory } from '@storybook/angular';
+export interface ICollection {
+  [p: string]: any;
+}
+
+export interface NgModuleMetadata {
+  declarations?: any[];
+  entryComponents?: any[];
+  imports?: any[];
+  schemas?: any[];
+  providers?: any[];
+}
 
+export interface IStory {
+  props?: ICollection;
+  moduleMetadata?: Partial<NgModuleMetadata>;
+  component?: any;
+  template?: string;
+}
 declare module '@storybook/addon-centered/angular' {
   export function centered(story: IStory): IStory;
 }
diff --git a/addons/storyshots/storyshots-core/src/frameworks/angular/loader.js b/addons/storyshots/storyshots-core/src/frameworks/angular/loader.js
@@ -1,9 +1,15 @@
+import 'core-js';
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
 import hasDependency from '../hasDependency';
 import configure from '../configure';
 
 function setupAngularJestPreset() {
   // Needed to prevent "Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten."
+  require.requireActual('core-js');
   require.requireActual('core-js/modules/es6.promise');
+  // require.requireActual('core-js/es6/reflect');
+  // require.requireActual('core-js/es7/reflect');
 
   // Angular + Jest + Storyshots = Crazy Shit:
   // We need to require 'jest-preset-angular/setupJest' before any storybook code

diff --git a/addons/storyshots/storyshots-core/tsconfig.json b/addons/storyshots/storyshots-core/tsconfig.json
@@ -3,8 +3,8 @@
   "include": [
     "src/**/*.ts"
   ],
-  "compileOnSave": false,
   "compilerOptions": {
-    "rootDir": "./src"
+    "rootDir": "./src",
+    "experimentalDecorators": true
   }
 }
diff --git a/app/angular/index.d.ts b/app/angular/index.d.ts
@@ -1,5 +1,28 @@
-import { NgModuleMetadata, ICollection } from './dist/client/preview/angular/types';
-export { moduleMetadata } from './dist/client/preview/angular/decorators';
+/*
+ * ATTENTION:
+ * - moduleMetadata
+ * - NgModuleMetadata
+ * - ICollection
+ *
+ * These typings are coped out of decorators.d.ts and types.d.ts in order to fix a bug with tsc
+ * It was imported out of dist before which was not the proper way of exporting public API
+ *
+ * This can be fixed by migrating app/angular to typescript
+ */
+export declare const moduleMetadata: (
+  metadata: Partial<NgModuleMetadata>
+) => (storyFn: () => any) => any;
+
+export interface NgModuleMetadata {
+  declarations?: any[];
+  entryComponents?: any[];
+  imports?: any[];
+  schemas?: any[];
+  providers?: any[];
+}
+export interface ICollection {
+  [p: string]: any;
+}
 
 export interface IStorybookStory {
   name: string;
@@ -36,10 +59,16 @@ export interface IApi {
 
 declare module '@storybook/angular' {
   export function storiesOf(kind: string, module: NodeModule): IApi;
+
   export function setAddon(addon: any): void;
+
   export function addDecorator(decorator: any): IApi;
+
   export function addParameters(parameters: any): IApi;
+
   export function configure(loaders: () => void, module: NodeModule): void;
+
   export function getStorybook(): IStoribookSection[];
+
   export function forceReRender(): void;
 }
diff --git a/app/angular/src/client/preview/index.d.ts b/app/angular/src/client/preview/index.d.ts
@@ -1,3 +1,5 @@
+import { IApi, IStoribookSection } from '../../../index';
+
 export function storiesOf(kind: string, module: NodeModule): IApi;
 export function setAddon(addon: any): void;
 export function addDecorator(decorator: any): IApi;

diff --git a/app/angular/src/server/build.js b/app/angular/src/server/build.js
diff --git a/app/angular/src/server/index.js b/app/angular/src/server/index.js
diff --git a/app/angular/tsconfig.json b/app/angular/tsconfig.json
@@ -5,6 +5,14 @@
   ],
   "compileOnSave": false,
   "compilerOptions": {
-    "rootDir": "./src"
+    "outDir": "dist",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "declaration": true,
+    "rootDir": "./src",
+    "lib": [
+      "es2017",
+      "dom"
+    ]
   }
 }
diff --git a/examples/angular-cli/.storybook/webpack.config.ts b/examples/angular-cli/.storybook/webpack.config.ts
@@ -1,6 +1,6 @@
-const path = require('path');
+import { resolve } from 'path';
 
-module.exports = async ({ config }) => {
+module.exports = async ({ config }: { config: any }) => {
   config.module.rules.push({
     test: [/\.stories\.tsx?$/, /index\.ts$/],
     loaders: [
@@ -11,7 +11,7 @@ module.exports = async ({ config }) => {
         },
       },
     ],
-    include: [path.resolve(__dirname, '../src')],
+    include: [resolve(__dirname, '../src')],
     enforce: 'pre',
   });
   return config;

diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
@@ -57,6 +57,6 @@
     "jest-preset-angular": "^6.0.1",
     "protractor": "~5.4.2",
     "ts-node": "~8.0.3",
-    "typescript": "^3.3.3333"
+    "typescript": "^3.4.1"
   }
 }
diff --git a/examples/angular-cli/tsconfig.json b/examples/angular-cli/tsconfig.json
@@ -6,7 +6,6 @@
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
-    "declaration": false,
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,

diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json
@@ -39,6 +39,6 @@
     "react-scripts": "^2.1.3",
     "tslint": "^5.14.0",
     "tslint-config-airbnb": "^5.11.1",
-    "typescript": "^3.3.3333"
+    "typescript": "^3.4.1"
   }
 }
diff --git a/examples/cra-ts-kitchen-sink/tsconfig.json b/examples/cra-ts-kitchen-sink/tsconfig.json
@@ -12,10 +12,12 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true
+    "isolatedModules": true
   },
   "include": [
     "src"
+  ],
+  "exclude": [
+    "src/setupTests.js"
   ]
 }
diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
@@ -7891,7 +7891,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
 .emotion-11.emotion-11 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -7924,7 +7923,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
 .emotion-19.emotion-19 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -7957,7 +7955,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
 .emotion-27.emotion-27 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -7990,7 +7987,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
 .emotion-31.emotion-31 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -8254,7 +8250,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
 .emotion-11.emotion-11 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -8287,7 +8282,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
 .emotion-19.emotion-19 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -8320,7 +8314,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
 .emotion-27.emotion-27 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -8353,7 +8346,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
 .emotion-31.emotion-31 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -12939,7 +12931,6 @@ exports[`Storyshots UI|Sidebar/SidebarItem loading 1`] = `
 .emotion-3.emotion-3 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -13044,7 +13035,6 @@ exports[`Storyshots UI|Sidebar/SidebarItem loading 1`] = `
 .emotion-3.emotion-3 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -15154,7 +15144,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
 .emotion-3.emotion-3 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -15187,7 +15176,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
 .emotion-11.emotion-11 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -15220,7 +15208,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
 .emotion-19.emotion-19 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -15253,7 +15240,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
 .emotion-23.emotion-23 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -15366,7 +15352,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
 .emotion-3.emotion-3 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -15399,7 +15384,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
 .emotion-11.emotion-11 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -15432,7 +15416,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
 .emotion-19.emotion-19 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }
@@ -15465,7 +15448,6 @@ exports[`Storyshots UI|Sidebar/SidebarStories loading 1`] = `
 .emotion-23.emotion-23 > * {
   -webkit-animation: animation-0 1.5s ease-in-out infinite;
   animation: animation-0 1.5s ease-in-out infinite;
-  background: rgba(0,0,0,.1);
   color: transparent;
   cursor: progress;
 }