Styles builder

This simple config shows how to assemble CSS using LMD:

// .lmd/index.lmd.json
{
    "root": "../",
    "output": "_index.js"
    "modules": {
        ...
    },
    "styles": [
        "**/*.css"
    ]
}

And if you build it lmd build index LMD will print _index.js and _index.css files. You can also define "styles_output": "_your_name.css" to change default css bundle path.

There is another example.

If you are using component approach and your component or block has CSS you can assemble CSS along with your scripts using LMD. Assume you have a button component. It consists of script with Button constructor, styles for browsers and some style-patches for IE.

components/button/
  +-button.css
  +-button.ie.css
  +-button.js
  +-button.lmd.json
  +-button_state_hover.css

You can define all button requirements in button.lmd.json file.

{
    "name": "button component",
    "styles": [
        "button.css",
        "button_*.css"
    ],
    "bundles": {
        "ie": {
            "styles": [
                "button.ie.css"
            ]
        }
    }
}

And then include this button component into your build with dependencies:

{
    "name": "Build with button",
    "root": "../components",
    "output": "../www/index.js",
    "styles_output": "../www/index.css",
    "modules": {
        "components/button": "button/button.js"
    },
    "depends": "*.lmd.json",
    "bundles": {
        "ie": {
            "styles_output": "../www/index.ie.css"
        }
    }
}

LMD will assemble scripts into ../www/index.js all regular css into ../www/index.css and styles for IE into ../www/index.ie.css file.

Note:

• You can also use glob-style wildcards to match multiply CSS files
• Default styles output path is related to scripts output, but you can define your own
• LMD merges styles from mixins, deps and parent configs.
• LMD excludes CSS duplicates
• LMD optimizes css, using csso (flag "optimize": true)

See also demo and code