segmentio / myth Goto Github PK
View Code? Open in Web Editor NEWA CSS preprocessor that acts like a polyfill for future versions of the spec.
A CSS preprocessor that acts like a polyfill for future versions of the spec.
so that myth < input.css > output.css
works
Hi,
It would be nice if declarations are ordered automatically as proposed in the link below :
http://mdo.github.io/code-guide/#css-declaration-order
The recess project done this work but it does not handle all the functions used by myth like tint
.
Parse error: error evaluating function `tint`: Object #<Object> has no method 'toHSL' on line 490
What do you think ?
Thx
New @import support is working great, but not if I add media queries to it. Variables defined within a imported CSS-file are then being ignored.
Example import.css
/* Basic import */
@import "import.include-sm.css";
/* Media-dependent import */
@import "import.include-lg.css" (min-width: 64em);
import.include-sm.css
:root {
--font-size: 2em;
}
.Section {
font-size: var(--font-size);
}
import.include-lg.css
:root {
--font-size: 3em;
}
.Section {
font-size: var(--font-size);
}
import.out.css
/* Basic import */
.Section {
font-size: 2em;
}
/* Media-dependent import */
@media (min-width: 64em) {
:root {
--font-size: 3em;
}
.Section {
font-size: 2em;
}
}
So I made a sample site for testing Myth:
MythHub
However I have noticed that variables persist across conversions, to replicate this you can delete or rename the variable green and it will still be operational in the converted code.
Effectively the code is doing:
var myth = require('myth');
function updateCSS(css) {
try {
converted = myth(css);
} catch(e) {
...
}
toTextElement.value = converted.trim();
}
Which means somewhere within the myth or library code base those variables are being stored and not removed.
Using a specific command in the CLI
Current version 1.0.3 doesn't support CSS variables inheritance. So if we take the following HTML and CSS code :
<div class="block">
Root Block
</div>
<div class="sidebar">
<div class="block">
Sidebar Block
</div>
</div>
:root {
--large:10px;
}
.sidebar {
--large:20px;
}
.block {
padding:var(--large);
}
The expected output should be something like this :
.block {
padding:10px;
}
.sidebar .block {
padding:20px;
}
This way we respect CSS inheritance, but this may create other issues as it creates more specificity.
Hi. I try to install myth today like this:
But, i have some errors:
2458 error notarget No compatible version found: concat-stream@'visionmedia/node-concat-stream#0.0.1'
2458 error notarget Valid install targets:
2458 error notarget ["0.0.1","0.0.2","0.0.3","0.0.4","0.0.5","0.0.6","0.0.7","0.0.8","0.0.9","0.1.0","0.1.1","1.0.0","1.0.1","1.1.0","1.2.0","1.2.1","1.3.0","1.3.1"]
2458 error notarget
2458 error notarget This is most likely not a problem with npm itself.
2458 error notarget In most cases you or one of your dependencies are requesting
2458 error notarget a package version that doesn't exist.
2459 error System Windows_NT 6.0.6002
2460 error command "G:\ProgrammeInstalled\NodeJs\node.exe" "G:\ProgrammeInstalled\NodeJs\node_modules\npm\bin\npm-cli.js" "install" "-g" "myth"
2461 error cwd C:\Users\Altaïr
2462 error node -v v0.10.24
2463 error npm -v 1.3.21
2464 error code ETARGET
2465 verbose exit [ 1, true ]
Did you have any idea to fix this?
I would like to bring up the issue of implementing draft specifications. It looks like the W3 are going to change the variables syntax from var-
to --
.
One of the stated goals of this project is to provide "future proof CSS", this suggests that when vendors start implementing these specifications my existing code will just work, currently this is very unlikely to happen.
Whilst I think it is great that this project is compiling pollyfills to make these specifications more easily realised, the practicality of the project just (to me) feels wrong.
I propose either:
All of which have their drawbacks (namely backwards compatibility) but I feel this is something that should be addressed before it gets out of hand.
Could we have more information in the readme file about :
-v, --verbose write verbose output
and
# stdin and stdout
$ cat input.css | myth | grep background-color
Thx !
var less = {
relativeUrls: false,
rootpath: appRoot,
postProcessor: function(styles){ console.log(styles); return myth(styles) }
};
Logging out styles
gives me accurate CSS, and simply doing return styles
works fine. Am I missing something somewhere?
Here is the full error:
SyntaxError: 'undefined' is not an object (evaluating 'declarations.forEach')
in init.less
http://localhost:8000/vendors/myth/myth.js:10181:11
forEach@[native code]
http://localhost:8000/vendors/myth/myth.js:10180:29
forEach@[native code]
visit@http://localhost:8000/vendors/myth/myth.js:10171:21
vars@http://localhost:8000/vendors/myth/myth.js:10054:10
use@http://localhost:8000/vendors/myth/myth.js:10879:5
plugin@http://localhost:8000/vendors/myth/myth.js:41:9
use@http://localhost:8000/vendors/myth/myth.js:10879:5
myth@http://localhost:8000/vendors/myth/myth.js:28:9
postProcessor@http://localhost:8000/:27:49
postProcessCSS@http://localhost:8000/vendors/less.js/dist/less-1.7.0.js:7401:41
http://localhost:8000/vendors/less.js/dist/less-1.7.0.js:7895:36
http://localhost:8000/vendors/less.js/dist/less-1.7.0.js:7796:29
finish@http://localhost:8000/vendors/less.js/dist/less-1.7.0.js:696:36
run@http://localhost:8000/vendors/less.js/dist/less-1.7.0.js:6284:29
parse@http://localhost:8000/vendors/less.js/dist/less-1.7.0.js:702:25
http://localhost:8000/vendors/less.js/dist/less-1.7.0.js:7793:40
http://localhost:8000/vendors/less.js/dist/less-1.7.0.js:7751:21
handleResponse@http://localhost:8000/vendors/less.js/dist/less-1.7.0.js:7676:21
doXHR@http://localhost:8000/vendors/less.js/dist/less-1.7.0.js:7696:23
loadFile@http://localhost:8000/vendors/less.js/dist/less-1.7.0.js:7745:10
loadStyleSheet@http://localhost:8000/vendors/less.js/dist/less-1.7.0.js:7769:13
loadStyleSheets@http://localhost:8000/vendors/less.js/dist/less-1.7.0.js:7809:23
refresh@http://localhost:8000/vendors/less.js/dist/less-1.7.0.js:7886:20
http://localhost:8000/vendors/less.js/dist/less-1.7.0.js:7912:13
global code@http://localhost:8000/vendors/less.js/dist/less-1.7.0.js:7921:3
I began seeing unexpected outputs from my color functions, so I peeled them back to the examples given in the docs.
This input:
:root {
var-green: #008752;
}
div {
color: color(var(green) shade(20%));
}
Yields this output:
div {
color: color(#008752 shade(20%));
}
I've checked my syntax enough that I have no idea if it's correct. Even read through Tab's spec here. Is anyone else seeing this behavior?
Suppose my "blue" variable is = rgb(59, 98, 141)
When I try to do this inside of a media query:
color: color(var(blue) saturation(20%) lightness(65%));
I get this:
color: color(rgb(59, 98, 141) saturation(20%) lightness(65%));
Instead of the new rgb value.
with explanation of:
Is this something that would be considered in Myth? Maybe as a flag-only feature or something?
Currently I just got
[gulp] Plumber found unhandled error: [gulp] TypeError in plugin 'gulp-myth': Cannot read property '0' of null
Which is clearly not easy to understand where the fuck I break something.
The stack trace help me to understand it was in rework-inline (I where using rework-npm that doesn't need .css
ext) but I think it can be nice to catch the error somewhere to warn the issue came from @import
. Do you think it's possible ?
Anyway thanks for Myth !
Hey, guys!
I'm taking this out forever in grunt-myth, does anyone know what can be?
Running "myth:dist" (myth) task
Warning: Cannot call method 'toString' of null Use --force to continue.
myth: {
options: {
sourcemap: true
},
dist: {
files: {
'./build/css/<%= pkg.name %>.<%= pkg.version %>.min.css':'./build/css/<%= pkg.name %>.<%= pkg.version %>.min.css'
}
}
}
For the following CSS:
:root {
--breakpoint_a: 32em;
--breakpoint_b: 48em;
--breakpoint_c: 64em;
}
@media screen and (min-width: var(--breakpoint_a)) {
.container {
background-color: red;
}
}
@media screen and (min-width: var(--breakpoint_b)) {
.container {
background-color: blue;
}
}
@media screen and (min-width: var(--breakpoint_c)) {
.container {
background-color: green;
}
}
the following CSS is generated:
@media screen and (min-width: var(--breakpoint_a)) {
.container {
background-color: red;
}
}
@media screen and (min-width: var(--breakpoint_b)) {
.container {
background-color: blue;
}
}
@media screen and (min-width: var(--breakpoint_c)) {
.container {
background-color: green;
}
}
Variables work when used as values inside a media query, but not when part of the actual query statement.
It's a bit misleading. Use the language from rework-vars so that people don't get upset that preprocessor variables aren't dynamic or scoped. Case of don't-feed-the-trolls.
Autoprefixer 0.8 is very old and 1.1 can do much more:
@keyframes
inside CSS Media Queries.::placeholder
and ::selection
support.break-inside
support.touch-action
support.sticky
support for WebKit.text-decoration-*
properties support.-ms-
prefixes.Autoprefixer 1.x is totally new Autoprefixer with a lot of features ;).
I undestand that you prefer Rework version, but PostCSS requires only one addition very fast CSS parse, but will give actual prefixes for your users.
Just like:
css = rework(css).use(others)).toString();
return autoprefixer.compile(css).css;
Any plans to create a grunt plugin? I've been happy using grunt-autoprefixer as part of a dev environment and it'd be nice to get some of the additional myth features, while still being able to keep the grunt workflow.
so we can use that shit
Seems like there would be plugins (and a section in the README) for this.. like as a Stylus lib at the very least.
Check out how easy it was for @Jenius to get Autoprefixer in Stylus https://github.com/jenius/autoprefixer-stylus/blob/master/index.js
CSS spec is cool, but all curly braces must die.
In particular, source maps. Something like:
myth.sourceMap(css, existingSourceMap)
myth(css, options)
for options like compress
This would allow plugins such as grunt-myth to easily support them without depending on rework directly.
Source maps are an option of rework.toString()
Ok I have to ask (OCD). But isn't this a preprocessor? Since we are in fact processing the css before we add it to the html page? Wouldn't postprocessor imply that it processes the file in the browser?
Chapter "Color Manipulation" :
Tab Atkins's soon-to-be-proposed draft
Spec
First up, I'm monitoring Myth with interest and think the premise is very good. Congratulations on what could be a very useful tool.
This issue isn't related to your product but to your site, and I apologise if this is the wrong place to be adding this feedback.
But please please please check your site on any browser on Windows 7 (not VM). Attached is a grab of what it looks like. This isn't a pro Windows anti Apple thing. I run both systems in my own studio. It is just something I'm seeing cropping up a lot on websites, and it is beginning to feel like an accessibility elephant in the room.
Thanks for all your hard work on Myth, and sorry for being the one that brings to your attention this kind of thing :P
I see it's quite common these days to set the font-size on the html
element to 62.5%
– this is to allow for an easier rem declaration with px fallback. For example:
html {
font-size: 62.5%;
}
body {
font-size: 16px;
font-size: 1.6rem;
}
However, when I try to use this with Myth I still see the px fallback value as calculated from a 100%
base.
Is there any way to pass in an option to 'adjust' the calculated px value when using rems?
Thanks
This code doesn't work
:root {
var-brand-primary: #c40c28;
var-brand-primary-darker: color( var(brand-primary) lightness(10%));
}
Any idea how to do this?
http://caniuse.com/#feat=viewport-units
Even though there is good browser support, it is not complete. Not sure how it can be done without JavaScript, though.
How about making it, so that if I run myth input.css
it will just compile it to input.css
or maybe there is an option like a suffix.
So if I set the suffix to nothing, it will overwrite the file, and if I set it to something it will add it. The default could be -compiled
so it would make input-compiled.css
.
With this there could be an option to run myth on a directory. So that it will auto-compile every file in the dir.
I have a breakpoint width defined as variable:
var-small: 20em;
However, it doesn't seem to work in a media query:
@media screen and (min-width: var(small)) {…
Any ideas? tia, Jake
Hi!
I am trying to install myth and when i run "npm install myth" i get an error with dependencies that you can see below.
I am using node.js 0.10.24.
1453 error notarget No compatible version found: concat-stream@'visionmedia/node-concat-stream#0.0.1'
1453 error notarget Valid install targets:
1453 error notarget ["0.0.1","0.0.2","0.0.3","0.0.4","0.0.5","0.0.6","0.0.7","0.0.8","0.0.9","0.1.0","0.1.1","1.0.0","1.0.1","1.1.0","1.2.0","1.2.1"]
1453 error notarget
1453 error notarget This is most likely not a problem with npm itself.
1453 error notarget In most cases you or one of your dependencies are requesting
1453 error notarget a package version that doesn't exist.
1454 error System Windows_NT 6.1.7601
1455 error command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "myth"
1456 error cwd C:\Users\user
1457 error node -v v0.10.24
1458 error npm -v 1.3.21
1459 error code ETARGET
1460 verbose exit [ 1, true ]
How can i solve this problem? Thanks!
Is there a solution to automatically convert the original file after each save ?
Thx
So using IDEs or text editors (Webstorm, sublime text), the myth file's contents are pretty much invalid. Anyone have any solutions for this? Different file extensions, or a myth syntax highlighter?
myth(css); // "css string"
myth(); // [Function]
rework.use(myth())
to win @visionmedia's love back
After changing a thing, a rebuild is triggered as expected.
However, after that no changes trigger nothing nomore . )
that way you get the benefit of piping stuff unix-style but still help confused people
Is there a way to pass options to autoprefixer? I don't see it in the docs. Autoprefixer accepts arguments like so:
autoprefixer("last 1 version", "> 1%", "ie 8", "ie 7")
Couldn't find any reference to this in the documentation.
It would be nice to be able to pass (in the browser) a "modern" CSS string and get back a clean CSS string.
I'm not entirely sure, but it seems I'm unable to get a dependency for some reason. Is this an issue with my work pc?
2734 error notarget No compatible version found: concat-stream@'visionmedia/node-concat-stream#0.0.1'
2734 error notarget Valid install targets:
2734 error notarget ["0.0.1","0.0.2","0.0.3","0.0.4","0.0.5","0.0.6","0.0.7","0.0.8","0.0.9","0.1.0","0.1.1","1.0.0","1.0.1","1.1.0","1.2.0","1.2.1","1.3.0","1.3.1","1.4.0","1.4.1"]
2734 error notarget
2734 error notarget This is most likely not a problem with npm itself.
2734 error notarget In most cases you or one of your dependencies are requesting
2734 error notarget a package version that doesn't exist.
2735 error System Windows_NT 6.1.7601
The syntax for CSS variables has changed recently (Firefox 31) it is now using the double-dash notation --myblack: #fff
. It would be great to have myth handle the new notation. Or both for a while.
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
Hi,
I like the idea behind your work, but at the same time it seems very complex to shim some of the principes behind the spec of custom properties.
Custom properties take the cascade into account, for example:
body {
var-default-font: sans-serif;
}
h1 {
font-family: var(default-font);
}
#awesome {
var-default-font: serif;
}
<h1>This text: sans-serif</h1>
<div id="awesome">
<h1>This text: serif</h1>
</div>
How does Myth polyfill this use case? If it doesn't, can it be specified in the documentation?
https://github.com/klei-dev/rework-calc
since it gotten broken out of the shared repo
Is it just better branded?
Dear Myth developers,
Under the "Color Manipulation" section of the manual, there is a link to http://rawgithub.com/tabatkins/specs/gh-pages/css-color/index.html#modifying-colors
However, this document is now decorated with an intimidating warning: "This specification is obsolete and has been replaced by the document at http://dev.w3.org/csswg/css-color. Do not attempt to implement this specification. Do not refer to this specification except as a historical artifact."
What is Myth policy regarding obsolete specifications support? Are these specs clearly removed from the engine? (Thus breaking down some Myth's users code, from time to time...) Would this be possible to put a tag on specs that are considered by Myth, in order to help users choose between wannabe/tentative/nearly accepted/accepted but not well-supported/etc. categories? (One could be inspired by Node.js "stability levels"...)
Thanks in advance for your attention.
Best regards,
David.
I'd like to use this in dev like I do LESS because compiling every time really slows down workflow. Will this be possible?
Not sure if this is within scope/spec or not, but if I have a file called theme.css
that contains
:root {
var-accent: #f00;
}
and a style.css
with:
@import url(theme.css);
a {
color: var(accent)
}
myth is not able to compile the output-file since the variable accent
is defined in the imported css-file.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.