grafana/toolkit: Add support for extensions styling (#17938)

* Add support for static files

* Use url-loader in single css setup

* Add postcss setup

* Expose emotion to plugins and externalise it in toolkit

* Add readme note about emotion

packages/grafana-toolkit/README.md

@@ -80,8 +80,8 @@ Adidtionaly, you can also provide additional Jest config via package.json file.
 - [`snapshotSerializers`](https://jest-bot.github.io/jest/docs/configuration.html#snapshotserializers-array-string)
 
 
-## Working with CSS
-We support pure css, SASS and CSS in JS approach (via Emotion).
+## Working with CSS & static assets
+We support pure css, SASS and CSS in JS approach (via Emotion). All static assets referenced in your code (i.e. images) should be placed under `src/static` directory and referenced using relative paths.
 
 1. Single css/sass file
 Create your css/sass file and import it in your plugin entry point (typically module.ts):
@@ -91,13 +91,37 @@ import 'path/to/your/css_or_sass
 ```
 The styles will be injected via `style` tag during runtime.
 
-2. Theme css/sass files
-If you want to provide different stylesheets for Dark/Light theme, create `dark.[css|scss]` and `light.[css|scss]` files in `src/styles` directory of your plugin. Based on that we will generate stylesheets that will end up in `dist/styles` directory.
+Note, that imported static assets will be inlined as base64 URIs. *This can be a subject of change in the future!*
+
+2. Theme specific css/sass files
+If you want to provide different stylesheets for dark/light theme, create `dark.[css|scss]` and `light.[css|scss]` files in `src/styles` directory of your plugin. Based on that we will generate stylesheets that will end up in `dist/styles` directory.
 
 TODO: add note about loadPluginCss
 
 3. Emotion
-TODO
+Starting from Grafana 6.2 our suggested way of styling plugins is by using [Emotion](https://emotion.sh). It's a css-in-js library that we use internaly at Grafana. The biggest advantage of using Emotion is that you will get access to Grafana Theme variables.
+
+To use start using Emotion you first need to add it to your plugin dependencies:
+
+```
+  yarn add "@emotion/core"@10.0.14
+```
+
+Then, import `css` function from emotion:
+
+```import { css } from 'emotion'```
+
+And start implementing your styles:
+
+```tsx
+const MyComponent = () => {
+  return <div className={css`background: red;`} />
+}
+```
+
+Using themes: TODO, for now please refer to [internal guide](../../style_guides/themes.md)
+
+> NOTE: We do not support Emotion's `css` prop. Use className instead!
 
 ## Prettier [todo]
 

packages/grafana-toolkit/package.json

@@ -38,6 +38,7 @@
     "copy-webpack-plugin": "5.0.3",
     "css-loader": "^3.0.0",
     "execa": "^1.0.0",
+    "file-loader": "^4.0.0",
     "glob": "^7.1.4",
     "html-loader": "0.5.5",
     "inquirer": "^6.3.1",
@@ -49,6 +50,9 @@
     "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "ora": "^3.4.0",
+    "postcss-flexbugs-fixes": "4.1.0",
+    "postcss-loader": "3.0.0",
+    "postcss-preset-env": "6.6.0",
     "prettier": "^1.17.1",
     "react-dev-utils": "^9.0.1",
     "replace-in-file": "^4.1.0",
@@ -65,6 +69,7 @@
     "tslint": "5.14.0",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "3.5.1",
+    "url-loader": "^2.0.1",
     "webpack": "4.35.0"
   },
   "resolutions": {

packages/grafana-toolkit/src/config/utils/pluginValidation.test.ts

+import { getPluginJson, validatePluginJson } from './pluginValidation';
+
+describe('pluginValdation', () => {
+  describe('plugin.json', () => {
+    test('missing plugin.json file', () => {
+      expect(() => getPluginJson(`${__dirname}/mocks/missing-plugin-json`)).toThrow('plugin.json file is missing!');
+    });
+  });
+
+  describe('validatePluginJson', () => {
+    test('missing plugin.json file', () => {
+      expect(() => validatePluginJson({})).toThrow('Plugin id is missing in plugin.json');
+    });
+  });
+});

packages/grafana-toolkit/src/config/utils/pluginValidation.ts

+import path = require('path');
+
+interface PluginJSONSchema {
+  id: string;
+}
+
+export const validatePluginJson = (pluginJson: any) => {
+  if (!pluginJson.id) {
+    throw new Error('Plugin id is missing in plugin.json');
+  }
+};
+
+export const getPluginJson = (root: string = process.cwd()): PluginJSONSchema => {
+  let pluginJson;
+
+  try {
+    pluginJson = require(path.resolve(root, 'src/plugin.json'));
+  } catch (e) {
+    throw new Error('plugin.json file is missing!');
+  }
+
+  validatePluginJson(pluginJson);
+
+  return pluginJson as PluginJSONSchema;
+};

packages/grafana-toolkit/src/config/webpack.plugin.config.ts

@@ -6,7 +6,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 import * as webpack from 'webpack';
-import { hasThemeStylesheets, getStyleLoaders, getStylesheetEntries } from './webpack/loaders';
+import { hasThemeStylesheets, getStyleLoaders, getStylesheetEntries, getFileLoaders } from './webpack/loaders';
 
 interface WebpackConfigurationOptions {
   watch?: boolean;
@@ -82,8 +82,8 @@ const getCommonPlugins = (options: WebpackConfigurationOptions) => {
         { from: '../LICENSE', to: '.' },
         { from: 'img/*', to: '.' },
         { from: '**/*.json', to: '.' },
-        { from: '**/*.svg', to: '.' },
-        { from: '**/*.png', to: '.' },
+        // { from: '**/*.svg', to: '.' },
+        // { from: '**/*.png', to: '.' },
         { from: '**/*.html', to: '.' },
       ],
       { logLevel: options.watch ? 'silent' : 'warn' }
@@ -131,6 +131,7 @@ export const getWebpackConfig: WebpackConfigurationGetter = options => {
       filename: '[name].js',
       path: path.join(process.cwd(), 'dist'),
       libraryTarget: 'amd',
+      publicPath: '/',
     },
 
     performance: { hints: false },
@@ -139,6 +140,7 @@ export const getWebpackConfig: WebpackConfigurationGetter = options => {
       'jquery',
       'moment',
       'slate',
+      'emotion',
       'prismjs',
       'slate-plain-serializer',
       'slate-react',
@@ -146,6 +148,7 @@ export const getWebpackConfig: WebpackConfigurationGetter = options => {
       'react-dom',
       'rxjs',
       'd3',
+      'angular',
       '@grafana/ui',
       '@grafana/runtime',
       '@grafana/data',
@@ -190,6 +193,7 @@ export const getWebpackConfig: WebpackConfigurationGetter = options => {
             loader: 'html-loader',
           },
         },
+        ...getFileLoaders(),
       ],
     },
     optimization,

packages/grafana-toolkit/src/config/webpack/loaders.ts

+import { getPluginJson } from '../utils/pluginValidation';
+
+const path = require('path');
 const fs = require('fs');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
@@ -30,7 +33,7 @@ export const getStylesheetEntries = (root: string = process.cwd()) => {
 };
 
 export const hasThemeStylesheets = (root: string = process.cwd()) => {
-  const stylesheetsPaths = [`${root}/src/styles/light`, `${root}/src/styles/dark`];
+  const stylesheetsPaths = getStylesheetPaths(root);
   const stylesheetsSummary: boolean[] = [];
 
   const result = stylesheetsPaths.reduce((acc, current) => {
@@ -68,25 +71,66 @@ export const getStyleLoaders = () => {
   const executiveLoader = shouldExtractCss
     ? {
         loader: MiniCssExtractPlugin.loader,
+        options: {
+          publicPath: '../',
+        },
       }
     : 'style-loader';
 
-  const cssLoader = {
-    loader: 'css-loader',
-    options: {
-      importLoaders: 1,
-      sourceMap: true,
+  const cssLoaders = [
+    {
+      loader: 'css-loader',
+      options: {
+        importLoaders: 1,
+        sourceMap: true,
+      },
     },
-  };
+    {
+      loader: 'postcss-loader',
+      options: {
+        plugins: () => [
+          require('postcss-flexbugs-fixes'),
+          require('postcss-preset-env')({
+            autoprefixer: { flexbox: 'no-2009', grid: true },
+          }),
+        ],
+      },
+    },
+  ];
 
   return [
     {
       test: /\.css$/,
-      use: [executiveLoader, cssLoader],
+      use: [executiveLoader, ...cssLoaders],
     },
     {
       test: /\.scss$/,
-      use: [executiveLoader, cssLoader, 'sass-loader'],
+      use: [executiveLoader, ...cssLoaders, 'sass-loader'],
+    },
+  ];
+};
+
+export const getFileLoaders = () => {
+  const shouldExtractCss = hasThemeStylesheets();
+  // const pluginJson = getPluginJson();
+
+  return [
+    {
+      test: /\.(png|jpe?g|gif|svg)$/,
+      use: [
+        shouldExtractCss
+          ? {
+              loader: 'file-loader',
+              options: {
+                outputPath: 'static',
+                name: '[name].[hash:8].[ext]',
+              },
+            }
+          : // When using single css import images are inlined as base64 URIs in the result bundle
+            {
+              loader: 'url-loader',
+            },
+      ],
     },
   ];
 };

public/app/features/plugins/plugin_loader.ts

@@ -27,6 +27,7 @@ import { BackendSrv, getBackendSrv } from 'app/core/services/backend_srv';
 import impressionSrv from 'app/core/services/impression_srv';
 import builtInPlugins from './built_in_plugins';
 import * as d3 from 'd3';
+import * as emotion from 'emotion';
 import * as grafanaData from '@grafana/data';
 import * as grafanaUI from '@grafana/ui';
 import * as grafanaRuntime from '@grafana/runtime';
@@ -90,6 +91,7 @@ exposeToPlugin('slate-react', slateReact);
 exposeToPlugin('slate-plain-serializer', slatePlain);
 exposeToPlugin('react', react);
 exposeToPlugin('react-dom', reactDom);
+exposeToPlugin('emotion', emotion);
 
 exposeToPlugin('app/features/dashboard/impression_store', {
   impressions: impressionSrv,