Last active
April 4, 2023 16:01
-
-
Save Alonski/07552da57ff5507acdf238196fa0944c to your computer and use it in GitHub Desktop.
Setting up Ember CLI + SCSS + PostCSS + TailwindCSS + CSSNano
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const postcssOptions = { | |
compile: { | |
enabled: false // Set compile to false to not run PostCSS *during* compliation | |
}, | |
filter: { | |
enabled: true, // Set filter to true to run PostCSS *after* compilation | |
...require("./postcss.config") | |
} | |
}; | |
module.exports = function (defaults) { | |
const app = new EmberApp(defaults, { | |
sassOptions: { | |
implementation: nodeSass, // Can also use Dart Sass | |
includePaths: ["vendor/some_library/_scss"], | |
onlyIncluded: true | |
}, | |
postcssOptions | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"devDependencies": | |
{ | |
"@fullhuman/postcss-purgecss": "3.0.0", | |
"cssnano": "^4.1.10", | |
"ember-cli-postcss": "^6.0.1", | |
"ember-cli-sass": "^10.0.1", | |
"node-sass": "^4.12.0", // Can also use Dart Sass | |
"tailwindcss": "^1.9.4" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const EmberApp = require("ember-cli/lib/broccoli/ember-app"); | |
const environment = EmberApp.env(); | |
const IS_PROD = environment === "production"; | |
const FORCE_PURGE = process.env.FORCE_PURGE; // Can force PurgeCSS | |
const FORCE_CSS_NANO = process.env.FORCE_CSS_NANO; // Can force CSSNano | |
const SHOULD_PURGE = FORCE_PURGE === "true" || IS_PROD; | |
const SHOULD_CSS_NANO = FORCE_CSS_NANO === "true" || IS_PROD; | |
if (SHOULD_PURGE) { | |
console.log("Purging CSS"); | |
} | |
if (SHOULD_CSS_NANO) { | |
console.log("Minifying CSS with CSSNano"); | |
} | |
const purgeCSS = { | |
content: [ | |
// add extra paths here for components/controllers which include classes | |
"./app/index.html", | |
"./app/templates/**/*.hbs", | |
"./app/components/**/*.{hbs,js}", | |
"./app/controllers/**/*.js", | |
"./app/routes/**/*.js" | |
], | |
safelist: [ | |
/drop-buttons-/, | |
/tooltipster/, | |
/ember-power-select/, | |
/ember-basic-dropdown/, | |
/cp-is-open/, // Ember Collapsible Panel | |
/liquid-/ // Liquid Fire | |
], | |
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [] | |
}; | |
module.exports = { | |
plugins: [ | |
require("tailwindcss")("./config/tailwind/config.js"), | |
...(SHOULD_PURGE ? [require("@fullhuman/postcss-purgecss")(purgeCSS)] : []), | |
...(SHOULD_CSS_NANO ? [require("cssnano")({ preset: ["default", { calc: false }] })] : []) | |
] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment