feat: add option.transform #146

brafdlog · 2016-10-27T13:33:34Z

I added the option to pass the name of a function that can make changes to the css before adding it to the html. The function can return false, in which case the css won't be loaded at all.
The relevant use cases for this are changes that that need context that is not available at build time.

For example:

(partial) support for css variables in IE (which is the use case I currently need)
Conditional stylesheet loading (issue Conditional Stylesheet #130)
A similar function can be used for issue Do something after styles have been updated #37 (perhaps a postCssAdded callback)

These things were very hard (impossible?) to do without having a hook that gives control of the css when it is loaded into the browser.

My initial thought was to add another loader but since this transformation needs to run at runtime I need to take css as input and output javascript. So I can't put it before the style loader (which expects css, not js) and cant put it after the style loader (because then I would have to somehow parse it's javascript and change it which is quite brittle and not very elegant)

There is one thing that I don't like about this solution and that is that you need the transformCssOnLoad function to be available on the global scope for this to work. I could not think of a better way to support this, if there is a better idea I would love to hear it.

brafdlog · 2016-10-29T10:21:45Z

@sokra What do you think?

michael-ciniawsky

Namings + Please add Docs for this

michael-ciniawsky · 2017-03-06T17:07:19Z

addStyles.js

@@ -143,6 +143,20 @@ function createLinkElement(options) {
 function addStyle(obj, options) {
 	var styleElement, update, remove;

+	// If a transformCssOnLoad function was defined, run it on the css
+	if (options.transformCssOnLoad && obj.css) {


options.transformCssOnLoad =>options.transform

I chose this name to make it clear that this transformation occurs at load time. I think this name makes it very clear what this function does. Do you think transform is better?

transformCssOnLoad sounds fine to me. transform alone does not communicate the intent.

kk. runtime ? transformOnLoad?

transformOnLoad sounds like a good compromise. Not too long but it also communicates something.

transformOnLoad and transformCssOnLoad both sound good.

@brafdlog Yep the sole transform is to jaded, personally in favour of transformOnLoad, the more precise and short the better 😛 . I will quit bikesheding about naming from this point, choose based on majority and preference :)

michael-ciniawsky · 2017-03-06T17:08:42Z

addStyles.js

@@ -143,6 +143,20 @@ function createLinkElement(options) {
 function addStyle(obj, options) {
 	var styleElement, update, remove;

+	// If a transformCssOnLoad function was defined, run it on the css
+	if (options.transformCssOnLoad && obj.css) {
+		var transformationFunction = self[options.transformCssOnLoad];


var tranformationFunction => const/let transformation

bebraw

This needs docs + tests to cover the functionality. Good after that.

ekulabuhov · 2017-03-06T17:46:22Z

Isn't that what loaders are for - transformation? Why put a loader inside a loader? Wouldn't that be very confusing?

ekulabuhov · 2017-03-06T17:49:18Z

addStyles.js

+	if (options.transformCssOnLoad && obj.css) {
+		var transformationFunction = self[options.transformCssOnLoad];
+		if (!transformationFunction) {
+			throw new Error("A function named " + options.transformCssOnLoad + " needs to be available on the global scope.");


A function on global scope seems dirty. Is it possible to pass a function instead of a name here?

bebraw · 2017-03-06T17:49:25Z

@ekulabuhov If I'm interpreting right, there's a coupling problem since addStyles is something loaded indirectly. That said, if it's possible to push the idea to a separate loader outside of this project, that would be better.

michael-ciniawsky · 2017-03-06T18:12:14Z

The relevant use cases for this are changes that that need context that is not available at build time.

@ekulabuhov Let's wait for a response, I'm also not 💯 yet

joshwiens

Much like the href PR, this feels like something that should be extracted, not included.

Personally, i'd go the route a creating a simple & focused loader and then chaining. Given we now have a simple way to spin that up & a home for all of them, spinning this off into it's own loader is far less a major undertaking than it once was.

brafdlog · 2017-03-06T22:33:11Z

@ekulabuhov @d3viant0ne

My initial thought was to add another loader but since this transformation needs to run at runtime I need to take css as input and output javascript. So I can't put it before the style loader (which expects css, not js) and cant put it after the style loader (because then I would have to somehow parse it's javascript and change it which is quite brittle and not very elegant)

Am I missing something here? How would I do this with another loader?

joshwiens · 2017-03-06T22:56:58Z

@brafdlog - You aren't missing anything with style-loader in it's current state. At the moment, there is no good way to extract this but at the same time, it really should be.

My point, before we just hammer this home I would prefer to try and find a way to not shoehorn a loader into a loader. I get what you are trying to do and why, we just need to find a better way to accomplish it.

ekulabuhov · 2017-03-07T00:11:42Z

@brafdlog - @d3viant0ne explained it pretty well. Just to clarify, I do think it's a great feature to have. But I, as a webpack user, wouldn't expect to find it in a style-loader.

I wonder, could you solve these issues using refs use() / unuse() ? Or would it be too cumbersome?

michael-ciniawsky · 2017-03-07T01:27:14Z

Ok naysayers how would a solution with a different loader look like ? 😛

bebraw · 2017-03-07T07:37:49Z

The tricky bit is that addStyles.js is a script loaded by style-loader. Maybe the question is actually would it be possible to add some kind of an extension point there? This might help with other functionality too.

ekulabuhov · 2017-03-07T11:42:21Z

@michael-ciniawsky: npm i magical-runtime-loader -D :)

But seriously, is it possible to have 2 pitch loaders in one chain?

michael-ciniawsky · 2017-03-07T16:47:22Z

Add the option to inject a addStylesRuntime.js/addStylesContext.js file, but I'm fine with adding a transform/runtime function to addStyles.js

michael-ciniawsky · 2017-03-07T16:48:11Z

But seriously, is it possible to have 2 pitch loaders in one chain?

@ekulabuhov ? 🙃

ekulabuhov · 2017-03-07T17:04:15Z

@michael-ciniawsky https://webpack.github.io/docs/loaders.html#pitching-loader
If I understand correctly, style-loader works by injecting code rather than data. Is it possible to wrap style-loader code within imaginary runtime-transform-loader?

Also found a way to pass an object instead of query string to a loader: https://webpack.github.io/docs/how-to-write-a-loader.html#programmable-objects-as-query-option

liady · 2017-03-09T10:32:44Z

@michael-ciniawsky @brafdlog We can achieve the separation of concerns by doing the following:

Build a new dedicated 'runtime-css-transform' loader - that receives raw css as input and returns a js function (stringified) that, when invoked, returns transformed css.
Extend the style-loader to receive a css string or a stringified js function (that returns css). If it receives a function - it runs it (on runtime, not build time) and operates as usual on the returned css.

Then a user can apply them in this order:
raw css => css-loader => runtime-css-transform-loader (that returns a function)=> style-loader (that runs this function)

What do you think?

(BTW, we can make the 'runtime-css-transform' loader generic, to operate on any arbitrary string, not just css)

michael-ciniawsky · 2017-03-13T20:22:11Z

fixes #152

michael-ciniawsky · 2017-03-26T22:36:11Z

@brafdlog @bebraw @d3viant0ne @ekulabuhov @liady I still think it isn't a bad idea to support passing a transform/runtime function to style-loader directly, we need to find a final agreement on this. Please vote with reactions on this comment ( 👍 / 👎 )

brafdlog · 2017-04-23T09:53:56Z

@bebraw @ekulabuhov @d3viant0ne Are there any other changes we need to make?

bebraw · 2017-04-23T20:08:12Z

README.md

+```js
+module.exports = function(originalCss) {
+    // Here we can change the original css
+    const transformed = css.replace('.classNameA',  '.classNameB');


originalCss over css so that the code works.

Or you can fix the other way around. Then it's consistent with the code below.

css > originalCss please 😛

michael-ciniawsky · 2017-04-28T01:40:13Z

Please rename to options.transform I requested the same in #164 it's simply terser and the css prefix doesn't add any special meaning since this loader only 'processes' CSS anyways.

transform: (css) => {...}

Should be self explanatory and the option is well documented, finally good to go after that 😛

michael-ciniawsky

@brafdlog Thx

michael-ciniawsky requested changes Mar 6, 2017

View reviewed changes

michael-ciniawsky self-assigned this Mar 6, 2017

michael-ciniawsky requested review from bebraw, ekulabuhov and joshwiens March 6, 2017 17:09

michael-ciniawsky mentioned this pull request Mar 6, 2017

Conditional Stylesheet #130

Closed

bebraw suggested changes Mar 6, 2017

View reviewed changes

ekulabuhov reviewed Mar 6, 2017

View reviewed changes

joshwiens reviewed Mar 6, 2017

View reviewed changes

michael-ciniawsky mentioned this pull request Mar 13, 2017

Access styles at runtime #152

Closed

michael-ciniawsky added type: Feature pr: refactor pr_action: Review labels Mar 13, 2017

brafdlog added 4 commits April 19, 2017 00:22

Forgot a few files

80cd6e7

Fix example config of cssTransformation

736f44f

Remove unused files

75f0bf1

Fix naming to be consistent in addStyles.js

ce0d9a8

michael-ciniawsky changed the title ~~feat: support runtime transformation of css~~ feat: add option.cssTransform Apr 19, 2017

michael-ciniawsky added pr_action: Review and removed status: refactor labels Apr 19, 2017

michael-ciniawsky requested review from bebraw, ekulabuhov, michael-ciniawsky and joshwiens April 19, 2017 14:26

michael-ciniawsky approved these changes Apr 19, 2017

View reviewed changes

michael-ciniawsky added type: Feature and removed pr: feature labels Apr 23, 2017

bebraw reviewed Apr 23, 2017

View reviewed changes

michael-ciniawsky added this to the 0.17.0 milestone Apr 23, 2017

Fix transformCss example in readme

b3da8e7

bebraw approved these changes Apr 24, 2017

View reviewed changes

michael-ciniawsky added the priority: 3 (required) label Apr 28, 2017

michael-ciniawsky changed the title ~~feat: add option.cssTransform~~ feat: add option.transform Apr 28, 2017

Rename cssTransformation -> transform

f3a914f

michael-ciniawsky approved these changes Apr 30, 2017

View reviewed changes

michael-ciniawsky merged commit 1c3943f into webpack-contrib:master Apr 30, 2017

michael-ciniawsky removed priority: 3 (required) pr_action: Review labels Apr 30, 2017

michael-ciniawsky modified the milestone: 0.18.0 May 8, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add option.transform #146

feat: add option.transform #146

brafdlog commented Oct 27, 2016

brafdlog commented Oct 29, 2016

michael-ciniawsky left a comment

michael-ciniawsky Mar 6, 2017

brafdlog Mar 6, 2017

bebraw Mar 14, 2017

michael-ciniawsky Mar 26, 2017

bebraw Mar 27, 2017

brafdlog Mar 27, 2017

michael-ciniawsky Mar 27, 2017

michael-ciniawsky Mar 6, 2017

bebraw left a comment

ekulabuhov commented Mar 6, 2017 •

edited

Loading

ekulabuhov Mar 6, 2017

bebraw commented Mar 6, 2017

michael-ciniawsky commented Mar 6, 2017

joshwiens left a comment •

edited

Loading

brafdlog commented Mar 6, 2017

joshwiens commented Mar 6, 2017

ekulabuhov commented Mar 7, 2017

michael-ciniawsky commented Mar 7, 2017

bebraw commented Mar 7, 2017

ekulabuhov commented Mar 7, 2017

michael-ciniawsky commented Mar 7, 2017

michael-ciniawsky commented Mar 7, 2017

ekulabuhov commented Mar 7, 2017 •

edited

Loading

liady commented Mar 9, 2017 •

edited

Loading

michael-ciniawsky commented Mar 13, 2017 •

edited

Loading

michael-ciniawsky commented Mar 26, 2017

brafdlog commented Apr 23, 2017

bebraw Apr 23, 2017

bebraw Apr 23, 2017

michael-ciniawsky Apr 23, 2017

michael-ciniawsky commented Apr 28, 2017 •

edited

Loading

michael-ciniawsky left a comment

feat: add option.transform #146

feat: add option.transform #146

Conversation

brafdlog commented Oct 27, 2016

brafdlog commented Oct 29, 2016

michael-ciniawsky left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bebraw left a comment

Choose a reason for hiding this comment

ekulabuhov commented Mar 6, 2017 • edited Loading

Choose a reason for hiding this comment

bebraw commented Mar 6, 2017

michael-ciniawsky commented Mar 6, 2017

joshwiens left a comment • edited Loading

Choose a reason for hiding this comment

brafdlog commented Mar 6, 2017

joshwiens commented Mar 6, 2017

ekulabuhov commented Mar 7, 2017

michael-ciniawsky commented Mar 7, 2017

bebraw commented Mar 7, 2017

ekulabuhov commented Mar 7, 2017

michael-ciniawsky commented Mar 7, 2017

michael-ciniawsky commented Mar 7, 2017

ekulabuhov commented Mar 7, 2017 • edited Loading

liady commented Mar 9, 2017 • edited Loading

michael-ciniawsky commented Mar 13, 2017 • edited Loading

michael-ciniawsky commented Mar 26, 2017

brafdlog commented Apr 23, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michael-ciniawsky commented Apr 28, 2017 • edited Loading

michael-ciniawsky left a comment

Choose a reason for hiding this comment

ekulabuhov commented Mar 6, 2017 •

edited

Loading

joshwiens left a comment •

edited

Loading

ekulabuhov commented Mar 7, 2017 •

edited

Loading

liady commented Mar 9, 2017 •

edited

Loading

michael-ciniawsky commented Mar 13, 2017 •

edited

Loading

michael-ciniawsky commented Apr 28, 2017 •

edited

Loading