segmentio / myth

A CSS preprocessor that acts like a polyfill for future versions of the spec.

Myth

CSS the way it was imagined.

Myth is a preprocessor that lets you write pure CSS without having to worry about slow browser support, or even slow spec approval. It's like a CSS polyfill.

Installation

$ npm install -g myth

Usage

$ myth input.css output.css
# Generated output.css from input.css

Community

• mnmly/builder-myth: component-builder plugin
• gulp-myth: Gulp plugin
• grunt-myth: Grunt plugin
• duo-myth: Duo plugin
• myth-loader: Webpack Loader
• meteor-myth: Meteor plugin
• myth-transformer: Dart transformer

Why?

Myth lets you write pure CSS while still giving you the benefits of tools like LESS and Sass. You can still use variables and math functions, just like you do in preprocessors. It's like a polyfill for future versions of the spec.

Some of the features in CSS require runtime calculations, which neither Myth nor preprocessors handle, but what Myth does is let you write your code today in the future syntax, so that your code is future-proof. When browsers finally support these features you won't need to rewrite anything, just start using the cascade!

Taking plain CSS as an input also means you can use Myth to re-process anyone else's CSS (or another preprocessors output), adding the browser support you need, without having to re-write the code in a completely different syntax.

Myth is built with Rework so it's incredibly fast, and has a nice Javascript API in addition to the CLI.

Example

An example is the easiest way to explain it. If you write spec-compliant CSS:

:root {
  --green: #a6c776;
}

@custom-media --narrow-window screen and (max-width: 30em);

@media (--narrow-window) {
  html {
    font-size: 1.2rem;
  }
}

a {
  color: var(--green);
  font-variant: all-small-caps;
  transition: color 1s;
}

a:hover {
  color: color(var(--green) shade(20%));
}

::placeholder {
  opacity: .4;
  transition: opacity 1s;
}

:focus::placeholder {
  opacity: .2;
}

... Myth will transform it for you, into browser-compliant CSS:

@media screen and (max-width: 30em) {
  html {
    font-size: 1.2rem;
  }
}

a {
  color: #a6c776;
  -webkit-font-feature-settings: "smcp", "c2sc";
  -moz-font-feature-settings: "smcp", "c2sc";
  font-feature-settings: "smcp", "c2sc";
  font-variant: all-small-caps;
  -webkit-transition: color 1s;
  transition: color 1s;
}

a:hover {
  color: rgb(133, 159, 94);
}

::-webkit-input-placeholder {
  opacity: .4;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

::-moz-placeholder {
  opacity: .4;
  transition: opacity 1s;
}

:-ms-input-placeholder {
  opacity: .4;
  transition: opacity 1s;
}

::placeholder {
  opacity: .4;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

:focus::-webkit-input-placeholder {
  opacity: .2;
}

:focus::-moz-placeholder {
  opacity: .2;
}

:focus:-ms-input-placeholder {
  opacity: .2;
}

:focus::placeholder {
  opacity: .2;
}

Features

Variables

Using the same syntax as the CSS spec. Just like future CSS, but without the cascade. Thanks to rework-vars.

:root {
  --purple: #847AD1;
}

a {
  color: var(--purple);
}

Math

Using the same syntax as the CSS spec. Just like future CSS, but without runtime interpolation. Thanks to rework-calc.

pre {
  margin: calc(50px * 2);
}

Custom media queries

Using the same syntax as the CSS spec. Thanks to rework-custom-media.

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  /* narrow window styles */
}

@media (--narrow-window) and (script) {
  /* special styles for when script is allowed */
}

Color Manipulation

Using the same syntax as the CSS spec. Thanks to rework-color-function.

a {
  color: #847AD1;
}

a:hover {
  color: color(#847AD1 tint(20%));
}

No Prefixes

The prefixes from the most-common and most-recent browsers are supported, so you never need to worry about what the current browser support landscape is. Big thanks to autoprefixer!

.button {
  background: linear-gradient(to bottom, black, white);
  transition: transform .25s;
}

And more...

• 4-digit and 8-digit hex color support. Spec - Thanks
• Font-variant shorthands. Spec - Thanks

API

Command Line

Usage: myth [<input>] [<output>]

Options:

  -h, --help          output usage information
  -V, --version       output the version number
  -c, --compress      compress output
  -w, --watch         watch the input file for changes
  -s, --sourcemap     add source map
  -v, --verbose       log verbose output for debugging

  --no-import         disable import support
  --no-variables      disable variables support
  --no-custom-media   disable custom media support
  --no-hex-alpha      disable hex alpha support
  --no-color          disable color support
  --no-calc           disable calc support
  --no-font-variant   disable font variant support
  --no-rebeccapurple  disable rebeccapurple support
  --no-prefixes       disable prefixes support

Examples:

  # pass an input and output file:
  $ myth input.css output.css

  # watch the input file for changes:
  $ myth --watch input.css output.css

  # unix-style piping to stdin and stdout:
  $ cat input.css | myth | grep background-color

Node.js

var myth = require('myth');
var fs = require('fs');

var css = fs.readFileSync('index.css', 'utf8');
var converted = myth(css);

fs.writeFileSync('converted.css', converted);

Or use it directly as a Rework plugin:

var myth = require('myth');
var rework = require('rework');
var fs = require('fs');

var css = fs.readFileSync('index.css', 'utf8');
var converted = rework(css)
  .use(myth())
  .toString();

fs.writeFileSync('converted.css', converted);

Available options:

Key	Type	Description
browsers	Array	An array of browsers and versions to support.
compress	Boolean	Whether to compress the CSS output.
features	Object	A dictionary of features to disable. All features are enabled by default. Available features: calc, color, customMedia, fontVariant, hexAlpha, import, prefixes, rebeccapurple, variables.
preserve	Boolean	Whether to preserve variables in the output.
source	String	The full path to the source CSS file. This is required if you want Myth to concatenate @import rules in your CSS.
sourcemap	Boolean	Whether to embed a source map.
variables	Object	A dictionary of CSS variables to use.

License

The MIT License (MIT)

Copyright (c) 2015, Segment <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

myth's Issues

Option to convert units for rem/px fallback from base <html>

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

Variables in a media query?

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

swap to new calc

https://github.com/klei-dev/rework-calc

since it gotten broken out of the shared repo

What is the difference between this and pure-css?

Is it just better branded?

Broken links (readme)

Chapter "Color Manipulation" :

• Tab Atkins's soon-to-be-proposed draft
• 4-digit and 8-digit hex color support. Spec

CSS nesting support

Is this something that would be considered in Myth? Maybe as a flag-only feature or something?

Windows 7 font rendering on site

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

add flexbox support

so we can use that shit

CSS custom properties (variables) polyfill?

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:

CSS

body {
    var-default-font: sans-serif;
}
h1 {
    font-family: var(default-font);
}
#awesome {
    var-default-font: serif;
}

HTML

<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?

SyntaxError: 'undefined' is not an object (evaluating 'declarations.forEach')

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

Update Autoprefixer

Autoprefixer 0.8 is very old and 1.1 can do much more:

• Myth now generates a lot of outdated prefixes, because it has no browsers updates.
• Prefixes @keyframes inside CSS Media Queries.
• Better ::placeholder and ::selection support.
• Correct break-inside support.
• Add touch-action support.
• Add sticky support for WebKit.
• Add text-decoration-* properties support.
• Better Flexbox support.
• Fix a lot of issues in gradient support.
• Better CSS 3 cursors support.
• Geneates less unnecessary -ms- prefixes.
• Better hacks detects.
• Readble browsers names.

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;

Support new CSS Variables Syntax

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

development version?

I'd like to use this in dev like I do LESS because compiling every time really slows down workflow. Will this be possible?

Fix documentation

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.

Support CSS variables inheritance

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.

rework options in myth api

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()

postprocessor

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?

Color function not outputting as spec'd

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?

CSS variables persisting

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.

Be able to output a minified file

Using a specific command in the CLI

allow returning the rework plugins as a group

myth(css); // "css string"
myth(); // [Function]

rework.use(myth())

to win @visionmedia's love back

Manipulating colors inside media queries

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.

Better error message when @import fail

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 !

Documentation

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 !

--watch stops watching/rebuilding after first change

After changing a thing, a rebuild is triggered as expected.
However, after that no changes trigger nothing nomore . )

Run myth without output.css

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.

Not working

I installed myth, but...

What am I doing wrong? In file example from Readme.md

Grunt Myth error "toString"

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.

My config

myth: {
      options: {
          sourcemap: true
      },
      dist: {
        files: {
            './build/css/<%= pkg.name %>.<%= pkg.version %>.min.css':'./build/css/<%= pkg.name %>.<%= pkg.version %>.min.css'
        }
      }
    }

Ability to define variables in @Imported CSS-file

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.

Passing options to autoprefixer

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")

grunt-myth

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.

FR: support viewport units

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.

fix stdio support

so that myth < input.css > output.css works

Error installing myth : No compatible version found

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!

Specification changes

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:

• making it very obvious a syntax is draft in the documentation and leave it up to the author to decide whether to actually use the syntax
• using a prefix for draft syntax such as -myth- (potentially another kettle of fish)
• only implement recommendation syntax (maybe have an --experimental flag when compiling?)

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.

Plugins?

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.

Declaration order

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

Bug with Windows.

Hi. I try to install myth today like this:

• installing node.js for windows (node-v0.10.24-x86.msi)
• restart windows
• execute cmd.exe then npm install -g myth

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?

Unable to install due to dependency?

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

Define variables in media-dependent @import

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;
  }
}

add a site

with explanation of:

• intro to what it is
• preprocessor features supported
• install instructions
• why the heck its cool

help without input and stdin

that way you get the benefit of piping stuff unix-style but still help confused people

Why refering to an obsolete specification in the manual?

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.

Is there a browser side work planned?

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.

var() doesn’t work when used in media query statement

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.

add CLI tests

Automatically convert the original file

Is there a solution to automatically convert the original file after each save ?

Thx

Color function for a variable

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?

add a watcher

cuz people luuuv watchers

Using different file extensions for Myth?

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?