zachleat’s avatarzachleat’s Twitter Archive—№ 40,851

  1. is… is this something 😅
    An example showing Eleventy compiling a typescript file into js. Configuration: const ts = require("typescript"); module.exports = function(eleventyConfig) { eleventyConfig.addTemplateFormats("ts"); eleventyConfig.addExtension("ts", { outputFileExtension: "js", compile: function(source) { return function() { let ret = ts.transpileModule(source, { compilerOptions: { module: ts.ModuleKind.CommonJS } }); return ret.outputText; }; } }); };
    On twitter.com Twitter logo zachleat’s avatar ♻️ 5 Retweets ❤️ 61 Favorites Mood 0
    1. …in reply to @zachleat
      I feel like this one might be more popular
      An example of Eleventy compiling scss files to CSS. Configuration file contents: const sass = require("sass"); module.exports = function(eleventyConfig) { eleventyConfig.addTemplateFormats("scss"); eleventyConfig.addExtension("scss", { outputFileExtension: "css", compile: (contents) => { return () => { let ret = sass.renderSync({ data: contents }); return ret.css.toString("utf8"); }; } }); };
      Permalink On twitter.com Twitter logo zachleat’s avatar ♻️ 2 Retweets ❤️ 57 Favorites Mood +5 🙂
      1. …in reply to @zachleat
        imagine using the data cascade to have directory-level customizations for your design tokens—lots of cool ideas here
        Permalink On twitter.com Twitter logo zachleat’s avatar ❤️ 15 Favorites Mood +1 🙂
        1. …in reply to @zachleat
          a few folks have asked for a Sass example that works with @​import so here’s that (works with both inputPath relative imports and imports from the _includes directory)
          config file contents: const sass = require("sass"); module.exports = function(eleventyConfig) { eleventyConfig.addTemplateFormats("scss"); eleventyConfig.addExtension("scss", { outputFileExtension: "css", compile: function (contents, inputPath) { let includePaths = [this.config.dir.includes]; return (data) => { let ret = sass.renderSync({ file: inputPath, includePaths, data: contents }); return ret.css.toString("utf8"); }; } }); };
          Permalink On twitter.com Twitter logo zachleat’s avatar ♻️ 7 Retweets ❤️ 33 Favorites Mood 0
          1. …in reply to @zachleat
            perhaps you want to look for *.cloud2butt files and have Eleventy process those files for you we are having fun
            Config file contents: module.exports = function(eleventyConfig) { eleventyConfig.addTemplateFormats("cloud2butt"); eleventyConfig.addExtension("cloud2butt", { compile: function(contents, inputPath) { return (data) => { return contents.replace(/cloud/gi, "butt"); }; } }) };
            Permalink On twitter.com Twitter logo zachleat’s avatar ♻️ 1 Retweets ❤️ 14 Favorites Mood +5 🙂