Adds SCSS support for plugins #19643

tylersmalley · 2018-06-04T06:28:19Z

This adds styleSheetPath as an option for UIExport app

styleSheetPath: Absolute path to the stylesheet within the plugins public directory. When provided, this will be used to when the plugin is active. When an SCSS file is provide, it will be transpiled into CSS. If a CSS file is provide, it will be loaded when the plugin is active.

Example:

index.js:

return new kibana.Plugin({
  require: ['kibana', 'elasticsearch'],
  uiExports: {
    app: {
      title: 'Timelion',
      order: -1000,
      description: 'Time series expressions for everything',
      icon: 'plugins/timelion/icon.svg',
      main: 'plugins/timelion/app',
      styleSheetPath: `${__dirname}/public/timelion.scss`,
    },
    ...

The same is for external plugins, However styleSheetToCompile needs to be specified in .kibana-plugin-helpers.json and is relative to the root of the plugin.

Example:

index.js:

return new kibana.Plugin({
  require: ['elasticsearch'],
  name: 'my-test-plugin',
  uiExports: {
    app: {
      title: 'My Test Plugin',
      description: 'An awesome Kibana plugin',
      main: 'plugins/my-test-plugin/app',
      styleSheetPath: `${__dirname}/public/main.scss`,
    },
  },
  ...

.kibana-plugin-helpers.json:

{
  "styleSheetToCompile": "public/main.scss"
}

Testing

For core plugins, I would suggest modifying one to use SCSS.

Adding styleSheetPath to the Timelion UiExports app configuration. Kibana will need to correctly pick these settings up.

return new kibana.Plugin({
  require: ['kibana', 'elasticsearch'],
  uiExports: {
    app: {
      title: 'Timelion',
      order: -1000,
      description: 'Time series expressions for everything',
      icon: 'plugins/timelion/icon.svg',
      main: 'plugins/timelion/app',
      styleSheetPath: `${__dirname}/public/timelion.scss`,
    },
    ...

Next, create src/core_plugins/timelion/public/timelion.scss and add a style. For demonstration, I am using the following:

body {
  background-color: blue;
}

When in development mode, a message will be logged when we transpile the SCSS into CSS.

managr   info   [00:36:01.280] [scss] Compiled CSS: /Users/tyler/elastic/kibana/src/core_plugins/timelion/public/timelion.scss

Errors are expected to be logged. Removing one of the brackets in the example will cause this.

managr   error  [00:36:42.559] [scss] Compiling CSS failed: /Users/tyler/elastic/kibana/src/core_plugins/timelion/public/timelion.scss
managr   error  [00:36:42.560] [scss] Error: Invalid CSS after "...d-color: green;": expected "}", was ""
    at Object.module.exports.renderSync (/Users/tyler/elastic/kibana/node_modules/node-sass/lib/index.js:439:16)
    at SassBuilder.build (/Users/tyler/elastic/kibana/src/cli/cluster/sass_builder.js:70:33)
    at SassBuilder.buildIfInPath (/Users/tyler/elastic/kibana/src/cli/cluster/sass_builder.js:58:18)
    at FSWatcher.watcher.on (/Users/tyler/elastic/kibana/src/cli/cluster/cluster_manager.js:171:36)
    at emitTwo (events.js:126:13)
    at FSWatcher.emit (events.js:214:7)
    at FSWatcher.<anonymous> (/Users/tyler/elastic/kibana/node_modules/chokidar/index.js:192:38)
    at FSWatcher._emit (/Users/tyler/elastic/kibana/node_modules/chokidar/index.js:233:5)
    at FSWatcher.<anonymous> (/Users/tyler/elastic/kibana/node_modules/chokidar/lib/fsevents-handler.js:204:14)
    at addOrChange (/Users/tyler/elastic/kibana/node_modules/chokidar/lib/fsevents-handler.js:210:7)
    at FSWatcher.<anonymous> (/Users/tyler/elastic/kibana/node_modules/chokidar/lib/fsevents-handler.js:236:16)
    at filteredListener (/Users/tyler/elastic/kibana/node_modules/chokidar/lib/fsevents-handler.js:58:7)
    at /Users/tyler/elastic/kibana/node_modules/chokidar/lib/fsevents-handler.js:83:11
    at Array.forEach (<anonymous>)
    at FSEvents.<anonymous> (/Users/tyler/elastic/kibana/node_modules/chokidar/lib/fsevents-handler.js:82:34)
    at emitThree (events.js:136:13)
    at FSEvents.emit (events.js:217:7)
    at Immediate._onImmediate (/Users/tyler/elastic/kibana/node_modules/fsevents/fsevents.js:47:11)
    at runCallback (timers.js:794:20)
    at tryOnImmediate (timers.js:752:5)
    at processImmediate [as _immediateCallback] (timers.js:729:5)

During development, the CSS file will be generated with source-maps when an SCSS file is modified and served when the plugin is active. This CSS file is in addition to the plugins CSS file created by the optimizer, however, that will be phased out as we migrate to SCSS.

When building a plugin outside of Kibana, you need to also set styleSheetToCompile in the .kibana-plugin-helpers.json.

For testing of external plugins, node scripts/generate_plugin.js will setup SCSS support based on your response to the question Should SCSS be used?.

tylersmalley · 2018-06-04T06:28:53Z

src/plugin_discovery/plugin_spec/plugin_spec.js

@@ -48,6 +48,12 @@ export class PluginSpec {
   * directory for this plugin. The final directory must have the name "public",
   * though it can be located somewhere besides the root of the plugin. Set
   * this to false to disable exposure of a public directory
+   * @param {String|False} [opts.styleSheet] path to the stylesheet within


Thoughts on the naming of these two options? Would styleSheetPath and scssPath be better?

tylersmalley · 2018-06-04T06:33:16Z

Still working on figuring out how we should trigger transpiring the SCSS when running a build for both Kibana and individual plugins. During the plugin build process, we currently don't have a way of accessing the Kibana Plugin options. We might need to resort to calling the index file with babel register.

tylersmalley · 2018-06-04T15:03:15Z

07:06:06    │ proc  [ftr]        └- ✖ fail: "dashboard mode Dashboard View Mode Dashboard viewer shows only the dashboard app link"
07:06:06    │ proc  [ftr]        │        tryForTime timeout: Error: Login is not completed yet

tylersmalley · 2018-06-04T15:04:52Z

Actually, we shouldn't need to transpile SCSS during the build if we required that the CSS be committed. Thoughts?

cjcenizal

🌟 I tested this locally and it works as described. I also read through the code and it seems clear enough. Great job @tylersmalley!

elasticmachine · 2018-06-14T00:32:48Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

tylersmalley · 2018-06-15T21:56:10Z

Spencer notes:

Absolute path for both options - fail is not in public or absolute (ui_apps.js)
Include styleSheetToCompile for external plugins as well
Build when in source and not in dev-mode.

tylersmalley · 2018-06-21T14:12:16Z

retest

Chrome 65.0.3325 (Linux 0.0.0) geohash_layer GeohashGridLayer Shaded Circle Markers FAILED

tylersmalley · 2018-06-21T15:25:46Z

retest

fail: "homepage app sample data should install sample data set"

elasticmachine · 2018-06-21T16:33:19Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

tylersmalley · 2018-06-21T16:57:36Z

retest

this is absurd ... fail: "Monitoring app Elasticsearch shard legends Shard Allocation Per Node "before all" hook"

elasticmachine · 2018-06-21T18:07:16Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

tylersmalley · 2018-06-21T18:09:09Z

retest

fail: "visualize app visualize app vega chart should have some initial vega spec text"

tylersmalley · 2018-06-21T18:13:31Z

^ looks like this is also happening on master. Pinged the viz team.

elasticmachine · 2018-06-21T22:01:07Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

spalger · 2018-06-21T22:08:40Z

packages/kbn-plugin-generator/sao_template/template/index.js

-        main: 'plugins/<%= kebabCase(name) %>/app'
+        main: 'plugins/<%= kebabCase(name) %>/app',
+        <% if (generateScss) { %>
+        styleSheetPath: `${require('path').resolve(__dirname, 'public/app.scss')}`,


nit: unnecessary template literal

spalger · 2018-06-21T22:11:40Z

src/plugin_discovery/plugin_spec/plugin_spec.js

@@ -168,6 +168,36 @@ export class PluginSpec {
    return this._uiExports;
  }

+  getExportAppSpecs() {


These methods and their tests should be removed.

spalger

One nit and some simple removal, but once those are taken care of LGTM!

Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>

elasticmachine · 2018-06-21T23:23:25Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>

snide · 2018-06-21T23:41:28Z

Hooray! Thanks all.

uboness · 2018-06-22T13:34:28Z

❤️!!!

Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>

tylersmalley · 2018-06-22T15:03:46Z

6.4/6.x: a1b5a56

tylersmalley added review Team:Operations Team label for Operations Team v7.0.0 v6.4.0 labels Jun 4, 2018

tylersmalley commented Jun 4, 2018

View reviewed changes

tylersmalley removed the review label Jun 4, 2018

tylersmalley force-pushed the sass-15274 branch from 6c5780d to af5aa81 Compare June 6, 2018 15:02

elastic deleted a comment from elasticmachine Jun 6, 2018

elastic deleted a comment from elasticmachine Jun 7, 2018

tylersmalley force-pushed the sass-15274 branch 4 times, most recently from 0097594 to 44e815b Compare June 13, 2018 16:50

elastic deleted a comment from elasticmachine Jun 13, 2018

elastic deleted a comment from cjcenizal Jun 13, 2018

elastic deleted a comment from elasticmachine Jun 13, 2018

cjcenizal requested review from chandlerprall and cjcenizal June 13, 2018 23:07

cjcenizal approved these changes Jun 14, 2018

View reviewed changes

This comment has been minimized.

Sign in to view

Merge remote-tracking branch 'upstream/master' into sass-15274

d8d9d6f

Merge remote-tracking branch 'upstream/master' into sass-15274

1ce32aa

spalger reviewed Jun 21, 2018

View reviewed changes

spalger approved these changes Jun 21, 2018

View reviewed changes

Address feedback

a8d22b7

Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>

tylersmalley merged commit 699fb25 into elastic:master Jun 21, 2018

tylersmalley added a commit to tylersmalley/kibana that referenced this pull request Jun 21, 2018

Adds SCSS support for plugins (elastic#19643)

7ae96c5

Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>

tylersmalley mentioned this pull request Jun 21, 2018

[6.x] Adds SCSS support for plugins (#19643) #20137

Merged

tylersmalley added the backport pending label Jun 21, 2018

tylersmalley added a commit that referenced this pull request Jun 22, 2018

Adds SCSS support for plugins (#19643) (#20137)

a1b5a56

Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>

tylersmalley removed the backport pending label Jun 22, 2018

snide mentioned this pull request Jul 16, 2018

Support for a global SCSS file #20859

Closed

rudolf mentioned this pull request Mar 28, 2019

[7.0] Generated plugins fails to run after building and installing #34056

Closed

tylersmalley mentioned this pull request May 7, 2019

Minimize the number of CSS files requested #36186

Closed

tylersmalley mentioned this pull request Jul 29, 2019

[discuss] New Platform style support for plugins #42185

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds SCSS support for plugins #19643

Adds SCSS support for plugins #19643

tylersmalley commented Jun 4, 2018 •

edited

tylersmalley Jun 4, 2018

tylersmalley commented Jun 4, 2018

tylersmalley commented Jun 4, 2018 •

edited

tylersmalley commented Jun 4, 2018

cjcenizal left a comment

elasticmachine commented Jun 14, 2018

tylersmalley commented Jun 15, 2018

This comment has been minimized.

tylersmalley commented Jun 21, 2018

This comment has been minimized.

tylersmalley commented Jun 21, 2018

elasticmachine commented Jun 21, 2018

tylersmalley commented Jun 21, 2018

elasticmachine commented Jun 21, 2018

tylersmalley commented Jun 21, 2018

tylersmalley commented Jun 21, 2018

elasticmachine commented Jun 21, 2018

spalger Jun 21, 2018

spalger Jun 21, 2018

spalger left a comment

elasticmachine commented Jun 21, 2018

snide commented Jun 21, 2018

uboness commented Jun 22, 2018

tylersmalley commented Jun 22, 2018

Adds SCSS support for plugins #19643

Adds SCSS support for plugins #19643

Conversation

tylersmalley commented Jun 4, 2018 • edited

Testing

tylersmalley Jun 4, 2018

Choose a reason for hiding this comment

tylersmalley commented Jun 4, 2018

tylersmalley commented Jun 4, 2018 • edited

tylersmalley commented Jun 4, 2018

cjcenizal left a comment

Choose a reason for hiding this comment

elasticmachine commented Jun 14, 2018

💚 Build Succeeded

tylersmalley commented Jun 15, 2018

This comment has been minimized.

tylersmalley commented Jun 21, 2018

This comment has been minimized.

tylersmalley commented Jun 21, 2018

elasticmachine commented Jun 21, 2018

💔 Build Failed

tylersmalley commented Jun 21, 2018

elasticmachine commented Jun 21, 2018

💔 Build Failed

tylersmalley commented Jun 21, 2018

tylersmalley commented Jun 21, 2018

elasticmachine commented Jun 21, 2018

💚 Build Succeeded

spalger Jun 21, 2018

Choose a reason for hiding this comment

spalger Jun 21, 2018

Choose a reason for hiding this comment

spalger left a comment

Choose a reason for hiding this comment

elasticmachine commented Jun 21, 2018

💚 Build Succeeded

snide commented Jun 21, 2018

uboness commented Jun 22, 2018

tylersmalley commented Jun 22, 2018

tylersmalley commented Jun 4, 2018 •

edited

tylersmalley commented Jun 4, 2018 •

edited