Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds SCSS support for plugins #19643

Merged
merged 17 commits into from Jun 21, 2018

Conversation

Projects
None yet
7 participants
@tylersmalley
Copy link
Member

commented Jun 4, 2018

Closes: #15274

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

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

This comment has been minimized.

Copy link
@tylersmalley

tylersmalley Jun 4, 2018

Author Member

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

@tylersmalley tylersmalley removed the review label Jun 4, 2018

@tylersmalley

This comment has been minimized.

Copy link
Member Author

commented Jun 4, 2018

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

This comment has been minimized.

Copy link
Member Author

commented Jun 4, 2018

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

This comment has been minimized.

Copy link
Member Author

commented Jun 4, 2018

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

@tylersmalley tylersmalley force-pushed the tylersmalley:sass-15274 branch from 6c5780d to af5aa81 Jun 6, 2018

@elastic elastic deleted a comment from elasticmachine Jun 6, 2018

@elastic elastic deleted a comment from elasticmachine Jun 6, 2018

@elastic elastic deleted a comment from elasticmachine Jun 7, 2018

@elastic elastic deleted a comment from elasticmachine Jun 7, 2018

@tylersmalley tylersmalley force-pushed the tylersmalley:sass-15274 branch 4 times, most recently from 0097594 to 44e815b Jun 13, 2018

@elastic elastic deleted a comment from elasticmachine Jun 13, 2018

@elastic elastic deleted a comment from cjcenizal Jun 13, 2018

@elastic elastic deleted a comment from elasticmachine Jun 13, 2018

@elastic elastic deleted a comment from elasticmachine Jun 13, 2018

@elastic elastic deleted a comment from elasticmachine Jun 13, 2018

@elastic elastic deleted a comment from elasticmachine Jun 13, 2018

@elastic elastic deleted a comment from elasticmachine Jun 13, 2018

@cjcenizal cjcenizal requested review from chandlerprall and cjcenizal Jun 13, 2018

@cjcenizal
Copy link
Contributor

left a comment

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

@elasticmachine

This comment has been minimized.

Copy link

commented Jun 14, 2018

@tylersmalley

This comment has been minimized.

Copy link
Member Author

commented Jun 15, 2018

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

This comment was marked as outdated.

Copy link

commented Jun 21, 2018

@tylersmalley

This comment has been minimized.

Copy link
Member Author

commented Jun 21, 2018

retest

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

@elasticmachine

This comment was marked as outdated.

Copy link

commented Jun 21, 2018

@tylersmalley

This comment has been minimized.

Copy link
Member Author

commented Jun 21, 2018

retest

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

@elasticmachine

This comment has been minimized.

Copy link

commented Jun 21, 2018

@tylersmalley

This comment has been minimized.

Copy link
Member Author

commented Jun 21, 2018

retest

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

@elasticmachine

This comment has been minimized.

Copy link

commented Jun 21, 2018

@tylersmalley

This comment has been minimized.

Copy link
Member Author

commented Jun 21, 2018

retest

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

@tylersmalley

This comment has been minimized.

Copy link
Member Author

commented Jun 21, 2018

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

@elasticmachine

This comment has been minimized.

Copy link

commented Jun 21, 2018

💚 Build Succeeded

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

This comment has been minimized.

Copy link
@spalger

spalger Jun 21, 2018

Member

nit: unnecessary template literal

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

getExportAppSpecs() {

This comment has been minimized.

Copy link
@spalger

spalger Jun 21, 2018

Member

These methods and their tests should be removed.

@spalger
Copy link
Member

left a comment

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

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

This comment has been minimized.

Copy link

commented Jun 21, 2018

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

2 checks passed

CLA Commit author is a member of Elasticsearch
Details
kibana-ci Build finished.
Details

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

Adds SCSS support for plugins (elastic#19643)
Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>
@snide

This comment has been minimized.

Copy link
Contributor

commented Jun 21, 2018

Hooray! Thanks all.

@uboness

This comment has been minimized.

Copy link

commented Jun 22, 2018

❤️!!!

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

Adds SCSS support for plugins (#19643) (#20137)
Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>
@tylersmalley

This comment has been minimized.

Copy link
Member Author

commented Jun 22, 2018

6.4/6.x: a1b5a56

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.