Precompiler Syntactical Error with "="

[africanmatt]

I must say that this is very impressive and exciting tech. Thank you for open sourcing.

I did run into a small syntax issue. I'm using SASS to precompile my stylesheets and it doesn't like your new syntax. Eg:

:container( margin-top = 8px ){}

gulp sass, which is just a wrapper of node sass, will throw a syntax error. It doesn't like to use the "=" operator.

I escaped it as follows:

&:container( margin-top \= 8px ){

and edited the regex to match ""

var SELECTOR_REGEXP = /\.?:container\(\s*"?\s*[a-z-]+(?:(?:\s+|\|)[a-z-]+)?\s*(?:[<>!=\\]=?)\s*[^)]+\s*\)/gi;

However this still does not match the actual element or apply any of the required styles.

What are your thoughts?

[ausi]

There is a section about Sass in the usage documentation:

If your CSS preprocessor has problems with the container query syntax, you can put quotes around the comparison like so:

.element:container("width >= 100px") {
  /* Styles for .element if its container is at least 100px wide */
}

[ausi]

Duplicate: #5

[ausi]

@africanmatt you can also take a look at this Sass function and mixin by @rask: https://gist.github.com/rask/434e96f603e8b439dc64

[africanmatt]

Thank you. Appreciate the assist.

[ausi]

You're welcome. Feel free to open another issue if you have further questions, or ping me on Twitter.