Kendo-angular: Granular CSS distribution

[maximedupre]

Linking "all.css" breaks a lot of stuff if not all the components are up to date. For example, I'm still using an older version of the LayoutModule (for this module, I still have to fetch the style from it's own package, not from kendo-theme-default), but I'm also using the most recent version of the UploadModule. Perhaps there should be a build of the style for each individual module.

Now, I really need the stylesheet for only the UploadModule. Are you able to provide me this stylesheet or what commands should I run to build the style myself?

Thanks!

[gyoshev]

We dismissed the package-only styles in order to enable granular distribution. The kendo-theme-default should include all necessary styles, so there is no need to reference the styles from the layout package. If you want to build the styles for specific components, you should reference them in a SCSS file, like this:

@import "~@progress/kendo-theme-default/scss/panelbar";
@import "~@progress/kendo-theme-default/scss/upload";

Using these, instead of referencing scss/all, will include only the styles for the listed components, as well as their dependencies.

[maximedupre]

I need to reference the styles from the layout package, because I have an older version of this package and the styles are different than the kendo-theme-default package, thus I can't link all.css.

We're not using SASS in our project, how can I build the styles for a specific component into a .css?

Btw when I'm talking about granular CSS distribution, I'm not suggesting that the style for each individual module should go back into it's own package. I'm suggesting that you include granular distributions in @progress/kendo-theme-default/dist. In addition to all.css, there could be upload.css, input.css, layout.css, etc.

[gyoshev]

At this time, in order to build the CSS of a specific component, you need to work with SASS. The reason for this is that components have dependencies, which are listed in each file. SASS mixins ensure that dependencies are loaded just once, even if multiple components request the same file.

Here is an example. Both the panelbar and upload need icons. If we distribute upload.css and layout.css, we can either (1) embed the icons in them, or (2) distribute an additional icons.css. If we decide to embed the icons (1), combining upload.css and layout.css will bloat the CSS output, not to mention that selectors of the same weight might break. If we decide to split all dependencies into separate CSS files (2), then the correct order will need to be documented and will have to be followed by customers, in order to ensure correct behavior. It's much more efficient to let SASS handle this automatically.

If you want to build the CSS without using SASS in your project, clone the theme repo, change the scss/all.scss file to include only the components you need, and run npm run build. The file dist/all.css will contain the required CSS. We will consider providing a build process for this, so that you can build this without changing the theme, I've logged this in the theme repo.

By the way, what is holding you back from updating the layout package?

[maximedupre]

I wish we were using SASS in our project, but it's not an option at this time. There should be something planned for the people that are using plain CSS in there codebase and I think this ticket is a great idea.

I'm going to run the build only with the specific components I need, this is exactly what I was looking for, thanks!

As for the layout package, I'm still at version 0.12.1. See my comments in this ticket: https://github.com/telerik/kendo-angular2/issues/32

[gyoshev]

@maximedupre we have added custom builds to the theme, and the tabstrip has been updated with a configuration option that should solve the blocking issue. Please give it a go and let us know if these changes solve the discussed problems.

[KirilNN]

How to use the custom build tool is documented here: https://github.com/telerik/kendo-theme-default/commit/f3304897f9de5129ac9ac5d30ffa7aba1ad35d4f

[maximedupre]

@gyoshev Sorry for the late feedback. I implemented the new tabstrip option a couple days ago, works fantastic! Same for the custom build. Cheers!

[maximedupre]

Oh and actually I think it created a minor conflict with the Dialog component: https://github.com/telerik/kendo-theme-default/issues/177