cms-react-boilerplate icon indicating copy to clipboard operation
cms-react-boilerplate copied to clipboard

HubspotAutoUploadPlugin parsing CSS as HubL.

Open qonl opened this issue 5 years ago • 0 comments

Hello, I am using this boilerplate for a website build, and have run into an issue where a css ID inside of a pre-compiled SCSS file is being parsed as a HubL. Example:

Here is the SCSS with a mixin I've created for media queries:

#container { @include bp(large) { h1 { font-size: 2rem !important;}}}

which is pre-compiled to the CSS:

@media (min-width: 1024px){#container h1{font-size:2rem !important}}

When this is uploaded to the Hubspot developer file system, the {# is being parsed as a HubL comment and breaking the rest of the CSS beyond that point. The same issue occurred with {{ }} delimiters within bundled React code which I referenced in another comment here (https://github.com/HubSpot/cms-react-boilerplate/issues/14#issuecomment-719544941), and the only solve was to comment out that line within node_modules which is obviously a really bad practice.

Are there any plans to fix this in the near future? This is a critical bug that can only be solved by not importing the file in question causing the issue. This means that I cannot use CSS ids anywhere in the SCSS files as this compiles to the string causing the error.

qonl avatar Jan 13 '21 16:01 qonl