Include css normalize in style output

Author: opsb

bin/style-elements.js

@@ -5,7 +5,7 @@ var pkg = require("../package.json");
 var program = require("commander");
 var fs = require("fs");
 var chalk = require("chalk");
-var requiredOptions = ["stylesheetModule", "stylesheetFunction", "output"];
+var requiredOptions = ["stylesheetModule", "stylesheetFunction", "mode", "output"];
 var utils = require("../js/utils");
 var writeFile = utils.writeFile;
 var assertKeysPresent = utils.assertKeysPresent;
@@ -14,7 +14,8 @@ var options = getOptions(process.argv, program);
 
 styleElements({
   stylesheetModule: options.stylesheetModule,
-  stylesheetFunction: options.stylesheetFunction
+  stylesheetFunction: options.stylesheetFunction,
+  mode: options.mode
 })
   .then(result => writeFile(options.output, result))
   .then(() => {
@@ -32,12 +33,18 @@ function getOptions(argv, program) {
       "(optional) file to write the CSS to",
       "out.css"
     )
+    .option(
+      "-m, --mode [layout/viewport]",
+      "(optional) whether to render stylesheet for 'layout' or 'viewport'",
+      "layout"
+    )
     .parse(argv);
 
   var options = {
     stylesheetModule: program.args[0],
     stylesheetFunction: program.args[1],
-    output: program.output
+    output: program.output,
+    mode: program.mode
   };
 
   assertKeysPresent(options, requiredOptions, _missingOptions => {

index.js

@@ -7,7 +7,7 @@ var writeFile = utils.writeFile;
 var withTmpDir = utils.withTmpDir;
 var assertKeysPresent = utils.assertKeysPresent;
 
-var requiredOptions = ["stylesheetModule", "stylesheetFunction"];
+var requiredOptions = ["stylesheetModule", "stylesheetFunction", "mode"];
 
 function generateCss(opts) {
   assertKeysPresent(opts, requiredOptions, missingOptions => {
@@ -19,7 +19,8 @@ function generateCss(opts) {
     var emitterWorkerFile = path.join(tmpDirPath, "style-elements-emitter.js");
     var emitterTemplate = buildEmitterTemplate(
       opts.stylesheetModule,
-      opts.stylesheetFunction
+      opts.stylesheetFunction,
+      opts.mode
     );
 
     return writeFile(emitterSourceFile, emitterTemplate)
@@ -28,32 +29,41 @@ function generateCss(opts) {
   });
 }
 
-function buildEmitterTemplate(stylesheetModule, stylesheetFunction) {
+function buildEmitterTemplate(stylesheetModule, stylesheetFunction, mode) {
   return unindent(
     `
     port module StyleElementsEmitter exposing (..)
 
     import ${stylesheetModule}
+    import Element
 
 
     port result : String -> Cmd msg
 
 
-    stylesheet =
-        ${stylesheetModule}.${stylesheetFunction}
+    styles =
+        Element.${renderFunction(mode)} ${stylesheetModule}.${stylesheetFunction}
 
 
     main : Program Never () Never
     main =
         Platform.program
-            { init = ( (), result stylesheet.css )
+            { init = ( (), result styles )
             , update = \\_ _ -> ( (), Cmd.none )
             , subscriptions = \\_ -> Sub.none
             }
     `
   );
 }
 
+function renderFunction(mode) {
+  switch (mode) {
+    case "viewport": return "toViewportCss";
+    case "layout": return "toLayoutCss";
+    default: throw new Error(`Invalid mode: ${mode}, must be either 'layout' or 'viewport'`);
+  }
+}
+
 function compile(src, options) {
   return new Promise(function(resolve, reject) {
     compileElm(src, options).on("close", function(exitCode) {

src/Element.elm

@@ -62,6 +62,8 @@ module Element
         , layout
         , viewport
         , toHtml
+        , toLayoutCss
+        , toViewportCss
         , embedStylesheet
         , Device
         , classifyDevice
@@ -196,7 +198,7 @@ Some convient elements for working with forms.
 
 ## Advanced Rendering
 
-@docs toHtml, embedStylesheet
+@docs toHtml, embedStylesheet, toLayoutCss, toViewportCss
 
 
 ### Deprecated
@@ -1252,6 +1254,20 @@ toHtml stylesheet el =
         (Render.render stylesheet el)
 
 
+{-| Renders the stylesheet used by 'layout' to css
+-}
+toLayoutCss : StyleSheet style variation -> String
+toLayoutCss stylesheet =
+    Render.normalize ++ stylesheet.css
+
+
+{-| Renders the stylesheet used by 'viewport' to css
+-}
+toViewportCss : StyleSheet style variation -> String
+toViewportCss stylesheet =
+    Render.normalizeFull () ++ stylesheet.css
+
+
 {-| Embed a stylesheet.
 -}
 embedStylesheet : StyleSheet style variation -> Html msg