eleventy-plugin-sass-lightningcss

eleventy-plugin-sass-lightningcss copied to clipboard

I may have my .eleventy.js file misconfigured (although it is converting the Sass files to CSS), but how do I get it to autoprefix? I'm seeing some bizarre effects when I go from one browser and operating system to another that I suspect may have something to do with it not auto-prefixing anything.

const striptags = require("striptags");
const he = require('he');
const prettier = require('./src/transforms/prettier.js');
const sass = require("sass");
const browserslist = require("browserslist");
const { transform, browserslistToTargets } = require("lightningcss");
const eleventySass = require("@11tyrocks/eleventy-plugin-sass-lightningcss");

// Call this once per build.
let targets = browserslistToTargets(browserslist('>= 0.25%'));

// Use `targets` for each file you transform.

module.exports = function (eleventyConfig) {

  eleventyConfig.setServerOptions({
    showAllHosts: true,
  })

  // eleventyConfig.addPassthroughCopy('src/assets/js');
  // eleventyConfig.addPassthroughCopy({ 'src/assets/css': 'css/' });
  eleventyConfig.addPassthroughCopy({ 'src/fonts': 'fonts/' });
  eleventyConfig.addPassthroughCopy({ 'src/img': 'img/' });

  eleventyConfig.addPlugin(eleventySass);

  eleventyConfig.setQuietMode(true);

  eleventyConfig.addFilter("dateOnly", function (dateVal, locale = "en-US") {
    var theDate = new Date(dateVal);
    const options = { year: 'numeric', month: 'short', day: 'numeric', timeZone: 'UTC' };
    return theDate.toLocaleDateString(locale, options);
  });

  eleventyConfig.addFilter("longDate", function (dateVal, locale = "en-US") {
    var theDate = new Date(dateVal);
    const options = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
    return theDate.toLocaleDateString(locale, options);
  });

  eleventyConfig.addFilter("apaDate", function (dateVal, locale = "en-US") {

    const months = ['January', 'February', 'March', 'April',
      'May', 'June', 'July', 'August',
      'September', 'October', 'November', 'December'];

    var year = dateVal.getUTCFullYear();
    var month = dateVal.getUTCMonth();
    var day = dateVal.getDate() + 1;

    var retDate = `${year}, ${months[month]} ${day}`;

    return retDate;
  });

  eleventyConfig.addFilter("stripHTMLTags", function (data) {
    return striptags(data);
  });

  eleventyConfig.addFilter("decodeHTML", function (data) {
    return he.decode(data);
  });


  eleventyConfig.addShortcode("folderDepth", function (depth) {
    var depthPrefix = "";

    if (depth > 0) {
      for (var i = 0; i < depth; i++) {
        depthPrefix = depthPrefix + "../"
      }
    }

    return depthPrefix;
  });

  eleventyConfig.addTransform("prettier", prettier);

  return {
    dir: {
      input: 'src',
      output: 'build',
      data: '_data',
      includes: 'partials'
    },
    templateFormats: ["md", "njk", "11ty.js"],
    markdownTemplateEngine: "njk"
  }
}