Allows hubl expressions and hubl statements to be used in their native form in webpack builds.
This is a postcss syntax as specified by the postcss documentation here.
It contains 4 main pieces:
- Parser
- Stringifier
- Tokenizer
- hubl-clean plugin
All of which are extensions of their respective base postcss counterparts.
npm i @spingroup/postcss-hubl
Tell post css to use hubl-parser. During the compile process this will wrap all of your hubl in a special comment. This is necessary to keep valid css so that any other linters and tools that you use in your build process will still work. postcss.config.js
const HublParser = require('@spingroup/postcss-hubl/hubl-parse');
module.exports = {
parser: HublParser,
plugins: []
};
The last step is to add the hubl-clean plugin to webpack.config.js. This plugin fires after webpack has finished compiling assets (after your other build tools have finished running) and will remove the comments from your hubl. You can then upload your dist directory to hubspot.
webpack.config.js
const HublClean = require('@spingroup/postcss-hubl/hubl-clean');
module.exports = {
plugins: [
new HublClean(),
]
};
Styles.css Input
{% if x %}
.test-selector {
display: {{module.test_display}};
}
{% endif %}
Styles.css output
/*~| {% if x %} |~*/
.test-selector {
display: /*~| {{module.test_display}} |~*/;
}
/*~| {% endif %} |~*/
Styles.css output after HublClean
{% if x %}
.test-selector {
display: {{module.test_display}};
}
{% endif %}