Wisdom-Myth

Myth is a CSS 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.

Wisdom-Myth integrate Myth pre-processing in Wisdom. So, stylesheets (CSS files) containing Myth directives are automatically processed at build time.

It supports the Wisdom Watch Mode, so any change to a CSS file immediately triggers the processing and updates the output file.

Usage

Add the following plugin to you pom.xml file:

<plugin>
    <groupId>org.wisdom-framework</groupId>
    <artifactId>wisdom-myth-maven-plugin</artifactId>
    <version>${project.version}</version>
    <executions>
        <execution>
            <id>compile-myth-files</id>
            <phase>compile</phase>
            <goals>
                <goal>compile-myth</goal>
            </goals>
        </execution>
    </executions>
</plugin>

By default, Myth 0.3.4 is used, but you can set the version to use as follows:

<plugin>
    <groupId>org.wisdom-framework</groupId>
    <artifactId>wisdom-myth-maven-plugin</artifactId>
    <version>${project.version}</version>
    <executions>
            <execution>
                <id>compile-myth-files</id>
                <phase>compile</phase>
                <goals>
                    <goal>compile-myth</goal>
                </goals>
            </execution>
        </executions>
    <configuration>
        <version>0.3.4</version>
    </configuration>
</plugin>

Examples

The process CSS files can be either in src/main/resources/assets (internal resources, packaged within the application), or in src/main/assets (external resources, only packaged within the distribution).

For example, the file src/main/resources/assets/style.css with the following content:

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

a {
    color: var(purple);
}

pre {
    padding: var(large);
}

generates the target/classes/assets/style.css with the following content:

a {
  color: #847AD1;
}

pre {
  padding: 10px;
}

While, the file src/main/assets/style2.css with the following content:

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

a {
    color: var(purple);
}

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

a {
    transition: color .2s;
}

generates the target/wisdom/assets/style2.css with the following content:

a {
  color: #847AD1;
}

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

a {
  -webkit-transition: color .2s;
  transition: color .2s;
}