Skip to content
This repository has been archived by the owner on Feb 21, 2024. It is now read-only.

feat(sass): added compatibility for sass #40

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

svsalvador
Copy link
Contributor

No description provided.

etarancon
etarancon previously approved these changes Feb 24, 2021
package.json Show resolved Hide resolved
adrigzr
adrigzr previously approved these changes Feb 25, 2021

let digested = content;

if (fileExtension === 'scss') {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

think of adding broccoli-persistent-filter to speed-up the build. This is a simple step, you only have to wrap your tree inside other tree.

outputStyle: 'compressed'
}).css;

template = fs.readFileSync(sassTemplate, 'utf8');
Copy link

@next-joserepresa next-joserepresa Feb 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sync functions are fastest than the async ones, but blocks the main Node thread until ends. Broccoli use promises to manage async work:

const utils = require('utils');
const readFile = util.promisify(fs.readFile);

template = await readFile(sassTemplate, 'utf8');

Using fs-extra is not neccesary to promisify the funcion:

const fs = require('fs-extra');

template = await fs.readFile(sassTemplate, 'utf8');

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!

Allows to import css files in components.
Allows to import css and scss files in components. For sass compiler we use [node-sass](https://sass-lang.com/documentation/js-api).

### `sassTemplate``

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of declare 2 properties to pass the templates, I think it would be easies to define a map where the key is the file extension and the value is the template path:

styleTemplates: {
    css: '......',
    sass: '......'
}

This simplifies your code when retrieving the path and prevent using a lot of arguments if you add support for more templates:

this._getTreeWithImportedStyles(dirname, this.config.styleTemplates)

// ...

const template = await readFile(styleTemplates[fileExtension], 'utf8');;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice one. I have implemented your recommendation. Check it out!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.