Skip to content
This repository has been archived by the owner on Aug 22, 2023. It is now read-only.

Act more like a fallback #64

Open
1 of 7 tasks
MoOx opened this issue May 23, 2014 · 5 comments
Open
1 of 7 tasks

Act more like a fallback #64

MoOx opened this issue May 23, 2014 · 5 comments

Comments

@MoOx
Copy link
Contributor

MoOx commented May 23, 2014

Edit: let's go for it


What about adding the possibility to keep original sources & just add rules as fallback before the other ?
If I take you example on the homepage:

:root {
  --purple: #847AD1;
  --large: 10px;
}

a {
  color: var(--purple);
}
a:hover {
  color: color(var(--purple) tint(20%));
}

pre {
  padding: var(--large);
  margin: calc(var(--large) * 2);
}

should yield into

:root {
  --purple: #847AD1;
  --large: 10px;
}

a {
  color: #847AD1;
  color: var(--purple);
}
a:hover {
  color: rgb(157, 149, 218);
  color: color(var(--purple) tint(20%));
}

pre {
  padding: 10px;
  padding: var(--large);

  margin: 20px;
  margin: calc(var(--large) * 2);
}

but instead give (note that the homepage include :root in the output while it's not here)

a {
  color: #847AD1;
}

a:hover {
  color: rgb(157, 149, 218);
}

pre {
  padding: 10px;
  margin: 20px;
}
@ianstormtaylor
Copy link
Contributor

For those cases I don't think there is a benefit to acting as a fallback? Since the values don't change at runtime in those cases, so it would just be duplicate code?

@MoOx
Copy link
Contributor Author

MoOx commented May 25, 2014

It's a bit like having prefixed & non prefixed version. And for example Firefox 31+ already support custom property (so variables too), this will be nice to be able to debug in the inspector using variable name & not "rendered" version.
See reworkcss/rework-vars#28

MoOx added a commit to reworkcss/rework-calc that referenced this issue May 26, 2014
Setting `preserve` to `true` will preserve  `calc()` in the output, so
that they can be used by supporting browsers.
Useful now that browsers are starting to implement vars (eg Firefox
31+) & it’s even better for debug [to see real
rules](http://cl.ly/image/3W3O0E41173X).

I’ve refactored the code a little bit to make it easier to use the
`options.preserve` in the main function (& also use rework-visit which
is more bullet proof).

This should be a major update since now calc need to be called as a
function (like rework-vars for example) to be able to pass options. So
this should be tagged as 0.3 (or maybe it’s time to ship 1.0 :) ?)

I also quickly refactor tests to make it more understandable
(plugins.js near preserve.css was confusing imo).

I hope it’s ok.

FWI, I did this since I’m more seeing rework-vars & rework-calc as
fallback than replacement.
See reworkcss/rework-vars#28
reworkcss/rework-vars#29 &
segmentio/myth#64
@MoOx
Copy link
Contributor Author

MoOx commented May 26, 2014

Here is why I would like to be able to use myth as a fallback (at least during debug ?)

rework-vars & rework-calc have PRs (reworkcss/rework-vars#29 & reworkcss/rework-calc#3) & that hopefully will be merged should soon.
@ianstormtaylor are you interested to get a PR for the color part ? I'll be very happy to bring that possibility for this part of myth too.

@ianstormtaylor
Copy link
Contributor

Interesting, yeah I think I'd be down for a pull request. It might be something we want to put behind a flags like fallbacks: true? and keep it off by default since it will increase the output?

@MoOx
Copy link
Contributor Author

MoOx commented May 26, 2014

Sure. What about preserve (default to false for now)

MoOx added a commit to reworkcss/rework-calc that referenced this issue May 28, 2014
Setting `preserve` to `true` will preserve  `calc()` in the output, so
that they can be used by supporting browsers.
Useful now that browsers are starting to implement vars (eg Firefox
31+) & it’s even better for debug [to see real
rules](http://cl.ly/image/3W3O0E41173X).

I’ve refactored the code a little bit to make it easier to use the
`preserve` in the main function (& also use rework-visit which
is more bullet proof) like rework-vars.

This should be a major update since now calc need to be called as a
function (like rework-vars for example) to be able to pass options. So
this should be tagged as 0.3 (or maybe it’s time to ship 1.0 :) ?)

I also quickly refactor tests to make it more understandable
(plugins.js near preserve.css was confusing imo).

I also add some error reporting like we have in rework-vars. Btw, maybe we can
expand the use of balanced-match to rewrite other parts of the plugin.

I hope it’s ok.

FWI, I did this since I’m more seeing rework-vars & rework-calc as
fallback than replacement.
See reworkcss/rework-vars#28
reworkcss/rework-vars#29 &
segmentio/myth#64
@MoOx MoOx added the feature label Jun 21, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants