jeudi 14 novembre 2019

How to build CSS/PostCSS only during CSS changes?

Everytime I update .js code in my Ember App (components, tests, etc.) my app.css file is rebuilt, even though I'm not touching any CSS!

I am using PostCSS and TailwindCSS plugin. Every time I save a .js the entire TailwindCSS library is rebuilt and takes 1200-2000ms. This is really unnecessary and I would like to know how to avoid it. If I disable TailwindCSS the rebuild time of PostCSS drops to 191ms on every .js save.

There are a few solution ideas I'd like to explore:

  1. Is it possible to configure Ember rebuild my CSS ONLY when I change CSS?
  2. Is it possible to configure PostCSS to rebuild only when CSS has changed?
  3. How can I configure TailwindCSS to use a static CSS file, and then setup PostCSS to build only my custom tailwind configurations using the tailwind plugin?

ember-cli-build.js

    postcssOptions: {
      compile: {
        plugins: [
          {
            module: require("postcss-import"),
            options: {
              path: ["node_modules"]
            }
          },
          require("tailwindcss")("./config/tailwind.config.js")
        ]
      }
    }

config/tailwind.config.js

module.exports = {
  theme: {
    extend: {
      height: {
        "80": "20rem",
        "screen-80": "80vh",
        "screen-60": "60vh"
      },
      minWidth: {
        "96": "24rem",
        screen: "100vw"
      },
      maxWidth: {
        "min-content": "min-content",
        screen: "100vw"
      },
      screens: {
        xxl: "1920px"
      },
      zIndex: {
        "9999": 9999
      },
      colors: {
        puke: {
          100: "#fff5f7",
          200: "#fed7e2",
          300: "#fbb6ce",
          400: "#f687b3",
          500: "#ed64a6",
          600: "#d53f8c",
          700: "#b83280",
          800: "#97266d",
          900: "#702459"
        }
      },
      backgroundColor: theme => theme("colors"),
      textColor: theme => theme("colors"),
      borderColor: theme => ({
        ...theme("colors"),
        default: theme("colors.gray.300", "currentColor")
      })
    }
  },
  variants: {},
  plugins: []
};




Aucun commentaire:

Enregistrer un commentaire