Skip to content

Add support for <style> and the Stylus lang #49

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

Merged
merged 5 commits into from
Jan 24, 2018
Merged

Add support for <style> and the Stylus lang #49

merged 5 commits into from
Jan 24, 2018

Conversation

danielbastos11
Copy link
Contributor

Fixes #38

Copy link
Member

@eddyerburgh eddyerburgh left a comment

Choose a reason for hiding this comment

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

Thanks for the PR 👍

Stylus needs to be added as a devDependency, and could you add some tests for a plain style block, without stylus

@danielbastos11
Copy link
Contributor Author

Thanks for the feedback!
I pushed the changes as you requested.
Please let me know if there's anything else.

@eddyerburgh
Copy link
Member

Thanks 🙂

@eddyerburgh eddyerburgh merged commit 7791d8e into vuejs:master Jan 24, 2018
@danielbastos11 danielbastos11 deleted the styles branch January 24, 2018 13:15
@LinusBorg
Copy link
Member

Great Work!

@danielbastos11
Copy link
Contributor Author

@LinusBorg Thanks! :)

@@ -78,5 +98,20 @@ module.exports = function (src, path) {
}
}

if (Array.isArray(parts.styles) && parts.styles.length > 0) {
const styleStr = parts.styles.map(ast => {
Copy link
Member

Choose a reason for hiding this comment

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

we should only convert style partss that acually have a "module" attribute, right?

Otherwise we would create a $styles object on a component that onnly has "normal" styles like <style lang="scss">.


output += '\n;(function() {' +
'\nvar render = __vue__options__.render' +
'\n__vue__options__.render = function(h) {' + styleStr +
Copy link
Member

@LinusBorg LinusBorg Jan 24, 2018

Choose a reason for hiding this comment

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

Instead of adding it to the render function, I think we should create a beforeCreate() callback that adds the property during intialization of the component.

That's essentially what vue-loader does, it would look something like this:

output += '\n;(function() {' +
      '\nvar existing = __vue__options__.beforeCreate' +
      '\nvar styleFn =  function () { ' + styleStr + ' })' +
      '\n__vue__options__.beforeCreate = existing ? [].concat(existing, styleFn) : [styleFn]' +
      '})()'

This would ensure that the style is also available before render, e.g. to be accessed from within some method or a created() hook.

@danielbastos11
Copy link
Contributor Author

Well, I think since neither one of those are use cases I'm currently in need of, I just didn't remember them...
I'll try to update the PR later today to account for these modifications.

Thanks for the review 👍

@danielbastos11 danielbastos11 restored the styles branch January 24, 2018 21:28
@danielbastos11 danielbastos11 mentioned this pull request Jan 24, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants