Skip to content

Commit

Permalink
auto generate sass imports
Browse files Browse the repository at this point in the history
  • Loading branch information
@miguelcobain
miguelcobain committed Nov 26, 2018
1 parent 7b33ac5 commit f71b537
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 119 deletions.
98 changes: 5 additions & 93 deletions app/styles/ember-paper.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,103 +59,15 @@
}
}

// Core styles
// color styles
@import 'color-palette';
@import 'default-theme';
@import './angular-material/core/style/mixins';
@import './angular-material/core/style/variables';
@import './angular-material/core/style/structure';
@import './angular-material/core/style/typography';
@import './angular-material/core/style/layout';
@import './angular-material/core/services/layout/layout';

// Component styles
@import './angular-material/components/content/content';
@import './angular-material/components/content/content-theme';

@import './angular-material/components/card/card';
@import './angular-material/components/card/card-theme';

@import './angular-material/components/button/button';
@import './angular-material/components/button/button-theme';

@import './angular-material/components/checkbox/checkbox';
@import './angular-material/components/checkbox/checkbox-theme';

@import './angular-material/components/radioButton/radio-button';
@import './angular-material/components/radioButton/radio-button-theme';

@import './angular-material/components/switch/switch';
@import './angular-material/components/switch/switch-theme';

@import './angular-material/components/input/input';
@import './angular-material/components/input/input-theme';

@import './angular-material/components/list/list';
@import './angular-material/components/list/list-theme';

@import './angular-material/components/divider/divider';
@import './angular-material/components/divider/divider-theme';

@import './angular-material/components/whiteframe/whiteframe';

@import './angular-material/components/toolbar/toolbar';
@import './angular-material/components/toolbar/toolbar-theme';

@import './angular-material/components/icon/icon';
@import './angular-material/components/icon/icon-theme';

@import './angular-material/components/slider/slider';
@import './angular-material/components/slider/slider-theme';

@import './angular-material/components/subheader/subheader';
@import './angular-material/components/subheader/subheader-theme';

@import './angular-material/components/autocomplete/autocomplete';
@import './angular-material/components/autocomplete/autocomplete-theme';

@import './angular-material/components/progressLinear/progress-linear';
@import './angular-material/components/progressLinear/progress-linear-theme';

@import './angular-material/components/progressCircular/progress-circular';
@import './angular-material/components/progressCircular/progress-circular-theme';

@import './angular-material/components/menu/menu';
@import './angular-material/components/menu/menu-theme';

@import './angular-material/components/select/select';
@import './angular-material/components/select/select-theme';

@import './angular-material/components/gridList/grid-list';

@import './angular-material/components/sidenav/sidenav';
@import './angular-material/components/sidenav/sidenav-theme';

@import './angular-material/components/backdrop/backdrop';
@import './angular-material/components/backdrop/backdrop-theme';

@import './angular-material/components/dialog/dialog';
@import './angular-material/components/dialog/dialog-theme';

@import './angular-material/components/virtualRepeat/virtual-repeater';

@import './angular-material/components/chips/chips';
@import './angular-material/components/chips/chips-theme';

@import './angular-material/components/panel/panel';
@import './angular-material/components/panel/panel-theme';

@import './angular-material/components/tooltip/tooltip';
@import './angular-material/components/tooltip/tooltip-theme';

@import './angular-material/components/toast/toast';
@import './angular-material/components/toast/toast-theme';

@import './angular-material/components/tabs/tabs';
@import './angular-material/components/tabs/tabs-theme';

@import './angular-material/components/fabSpeedDial/fabSpeedDial';
// this is an autogenerated file that imports only the needed styles
@import 'ember-paper-components';

// some overrides that are needed for ember-paper (avoid if possible)
@import './overrides/paper-autocomplete';
@import './overrides/paper-menu';


55 changes: 29 additions & 26 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,16 @@ const Funnel = require('broccoli-funnel');
const AngularScssFilter = require('./lib/angular-scss-filter');
const fastbootTransform = require('fastboot-transform');


/**
* Component dependencies, extracted from ember-bootstrap
* https://github.com/kaliber5/ember-bootstrap/blob/master/index.js
/**
* Component dependencies, extracted from ember-bootstrap
* https://github.com/kaliber5/ember-bootstrap/blob/master/index.js
*/
const componentDependencies = {

'paper-autocomplete': [
'paper-autocomplete-trigger',
'paper-autocomplete-options',
'paper-autocomplete-highlight',
'paper-autocomplete-trigger',
'paper-autocomplete-options',
'paper-autocomplete-highlight',
'paper-autocomplete-content'
],
'paper-autocomplete-content': [
Expand All @@ -32,12 +31,12 @@ const componentDependencies = {
'paper-icon'
],
'paper-card': [
'paper-card-title',
'paper-card-content',
'paper-card-actions',
'paper-card-header',
'paper-card-image',
'paper-card-media',
'paper-card-title',
'paper-card-content',
'paper-card-actions',
'paper-card-header',
'paper-card-image',
'paper-card-media'
],
'paper-card-actions': [
'paper-card-icon-actions'
Expand All @@ -56,16 +55,16 @@ const componentDependencies = {
],
'paper-card-header-text': [
'paper-card-header-title',
'paper-card-header-subhead',
'paper-card-header-subhead'
],
'paper-chips': ['paper-autocomplete', 'paper-icon'],
'papar-contact-chips': ['paper-autocomplete', 'paper-icon'],
'paper-dialog': [
'paper-dialog-actions',
'paper-backdrop',
'paper-backdrop',
'paper-dialog-container',
'paper-dialog-content',
'paper-dialog-inner',
'paper-dialog-content',
'paper-dialog-inner'
],
'paper-form': [
'paper-input',
Expand Down Expand Up @@ -93,7 +92,7 @@ const componentDependencies = {
],
'paper-menu-content': [
'paper-menu-content-inner',
'paper-backdrop',
'paper-backdrop'
],
'paper-menu-content-inner': [
'paper-menu-item'
Expand Down Expand Up @@ -177,7 +176,7 @@ module.exports = {
}

this.emberPaperOptions = Object.assign({}, app.options['ember-paper']);

app.import('vendor/ember-paper/register-version.js');
app.import('vendor/hammerjs/hammer.js');
app.import('vendor/propagating-hammerjs/propagating.js');
Expand All @@ -200,15 +199,15 @@ module.exports = {

let whitelist = this.emberPaperOptions.whitelist || [];
let blacklist = this.emberPaperOptions.blacklist || [];

let links = '<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">';

let paperIconNotWhitelisted = whitelist.length && !whitelist.includes('paper-icon');
let paperIconBlacklisted = blacklist.length && blacklist.includes('paper-icon');
if ( paperIconNotWhitelisted || paperIconBlacklisted ) {

if (paperIconNotWhitelisted || paperIconBlacklisted) {
return links;
}
}

return `${links} <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">`;

Expand Down Expand Up @@ -261,10 +260,10 @@ module.exports = {
treeForStyles(tree) {
let scssFiles = [
// core styles
'core/style/typography.scss',
'core/style/mixins.scss',
'core/style/variables.scss',
'core/style/structure.scss',
'core/style/typography.scss',
'core/style/layout.scss',
'core/services/layout/layout.scss',

Expand Down Expand Up @@ -365,7 +364,12 @@ module.exports = {

angularScssFiles = new AngularScssFilter(angularScssFiles);

let mergedTrees = new BroccoliMergeTrees([angularScssFiles, tree], { overwrite: true });
let importer = writeFile(
'ember-paper-components.scss',
scssFiles.map((path) => `@import './angular-material/${path}';`).join('\n')
);

let mergedTrees = new BroccoliMergeTrees([angularScssFiles, tree, importer], { overwrite: true });
return this._super.treeForStyles(mergedTrees);
},

Expand Down Expand Up @@ -400,7 +404,6 @@ module.exports = {
return this._super.treeForAddonTemplates.call(this, tree);
},


filterComponents(tree) {
let whitelist = this.generateWhitelist(this.emberPaperOptions.whitelist);
let blacklist = this.emberPaperOptions.blacklist || [];
Expand Down

0 comments on commit f71b537

Please sign in to comment.