Skip to content

Instantly share code, notes, and snippets.

@maxfenton
Created May 1, 2023 19:15
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maxfenton/318a7760d8aea2a1d55afd607a3da760 to your computer and use it in GitHub Desktop.
Save maxfenton/318a7760d8aea2a1d55afd607a3da760 to your computer and use it in GitHub Desktop.
PostCSS config for a legacy SASS project
module.exports = {
parser: "postcss-scss",
plugins: [
require("postcss-easy-import")({ // Enables globs in @import. See style.css.
prefix: false,
skipDuplicates: false,
warnOnEmpty: false,
}),
require("postcss-advanced-variables"), // Sass-style @ vars, looping, and @import
require("postcss-custom-media"), // Custom reusable media queries
require("postcss-nested"), // Sass-style rule nesting
require("postcss-preset-env") ({ // Automatically polyfill modern CSS features
features: {
"nesting-rules": false, // disables CSS nesting in favor of Sass-style nesting (postcss-nested)
},
}),
require("postcss-pxtorem"), // Converts units to rems (defaults to only font properties @ 16px base size)
require("postcss-assets"), // Filename resolver for images
require('postcss-discard-comments'), // Removes all comments (/* */)
],
};
@maxfenton
Copy link
Author

maxfenton commented May 1, 2023

Separate config from a non-SASS non-legacy project as reference for postcss-pxtorem
https://www.npmjs.com/package/postcss-pxtorem

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 16,
      unitPrecision: 5,
      propList: [
        'font', 'font-size', 'line-height', 'letter-spacing',
        'margin*', 'padding*', 'max-*', 'min-*', 'gap*'
      ],
      selectorBlackList: [],
      replace: true,
      mediaQuery: true,
      minPixelValue: 0,
      exclude: /node_modules/i
    }, // Converts units to rems (defaults to only font properties @ 16px base size)
    ...(process.env.NODE_ENV === 'production' ? {cssnano: {}} : {})
  },
}

Example output:

@media (min-width: 75rem) {
  .min-\[1200px\]\:ml-\[10\%\] {
    margin-left: 10%
  }
}

@media (min-width: 80rem) {
  .xl\:max-w-\[260px\] {
    max-width: 16.25rem
  }
}

@maxfenton
Copy link
Author

Note that apparently there is a newly maintained fork of postcss-pxtorem at https://github.com/hemengke1997/postcss-pxtorem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment