Skip to content

Conversation

@akanix42
Copy link
Contributor

@akanix42 akanix42 commented Mar 5, 2017

I'd like to add support for custom CSS modules compilers similar to your support for custom "lang" processors. If there is no custom processor, it defaults to the basic processor I added in #117.
The main reason for this PR is so I can interop with my css-modules build compiler, allowing the user to import other CSS modules files and use all of the configuration options I provide.

The compile call is identical to the one for lang compilers with the addition of passing in the styleTag and sourcemap. I pass in the styleTag because I need to set the autoprefix attribute to off if the user is already using autoprefixer through my package as well as read the module attribute so I can implement support for multiple style tags. I'll need to make another PR eventually since the module attribute should also allow overriding the computed property name.

You'll also note that in handling the result I append to the js variable - this is because CSS modules reference other files via composes (as opposed to including them in the source like sass imports). My plugin therefore outputs require statements so Meteor will load those referenced files.

I wasn't sure how exactly you'd want the cssModules compiler to be specified so for now I used global.vue.cssModules.

Copy link
Collaborator

@Akryum Akryum left a comment

Choose a reason for hiding this comment

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

global.vue.cssModules seems fine to me 👍

@Akryum
Copy link
Collaborator

Akryum commented Mar 6, 2017

Would you mind documenting these changes? 😄
Awesome work BTW.

@akanix42
Copy link
Contributor Author

akanix42 commented Mar 6, 2017

Documentation?! The horror! Yeah, I'll write this up.

@akanix42
Copy link
Contributor Author

I'm hoping to knock this out this weekend, and just wanted to clarify what I'm documenting. So far I've got:

  1. document the module attribute in the vue-component documentation (I'm adding it after the scoped styles section).
  2. mention my community package (which I have to release before I submit this documentation!) 😄

I was planning to document adding your own custom css modules compiler, but I'm not sure where I should put that since I don't see explicit instructions for others (like the lang processors) - I just see pointers to the actual packages.
So before I go much further, what would you like me to document?

@Akryum
Copy link
Collaborator

Akryum commented Mar 15, 2017

You could add the package to the "lang" list, and then document in its README what it does and how to use the features it add to the Vue components.

@akanix42
Copy link
Contributor Author

I found a logging statement leftover from my initial CSS modules PR, so I removed that.
I also added a section on CSS modules usage via the module attribute and put a reference to my package (https://github.com/nathantreid/vue-css-modules) in the community packages section.

@Akryum
Copy link
Collaborator

Akryum commented Mar 19, 2017

Awesome! Thank you for your work!

@Akryum Akryum merged commit 799a57e into meteor-vue:master Mar 19, 2017
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.

2 participants