stylify / packages

💎 Monorepository for Stylify packages. Stylify uses CSS-like selectors to generate Extremely optimized utility-first CSS dynamically based on what you write 💎.
https://stylifycss.com
MIT License
429 stars 9 forks source link

Content not mangled #251

Closed Machy8 closed 1 year ago

Machy8 commented 1 year ago

Describe the bug

This code isn't mangled correctly. https://stackblitz.com/edit/stylify-remix-example-eqmg9w?file=index.txt

/*
stylify-components
    'modal--backdrop': `u-overflow-x:hidden u-overflow-y:hidden u-opacity:0.7`
/stylify-components
*/

//
//
// This file contains several cases and most of them do not work well
// Especially for the build with "rewriteSelectorInFiles" (dynamic class, conditional class) in file or 
// components.
// 
// In defaultPreset React for example, regexes (selectorAreas) must be taken into account because they are 
// common use cases.
//
// All the cases listed here should work by default (selectorAreas). It supports conditional or dynamic classes
//
//

const Index = () => {
  const modalBackdropElement = document.getElementsByClassName("a") // build work here -- modal--backdrop
  const _class = "stylify"
  const dynamicClass = (value) => // conditional/dynamic class
    _class === value
      ? "u-bg:blue u-color:white" //////// build not work here or not work well
      : "u-clear:both u-color:black" //////// build not work here or not work well

    return (
        <div className="a"> // build work here
            <div className="header" onClick={...}>
                <div
          //////// build not work here but regex work on regex101 (with regex options or not)
                    className={somethingMethod("u-font-size:15px", {
                        "u-text-uppercase": true, 
                        "u-font-weight:bold": true 
                    })}

          //////// build not work here with backtick (multilines)
                    className={somethingMethod(`u-font-size:15px`, {
                        "u-text-transform:uppercase": true,
                    })}

          //////// build not work here with backtick (multilines/multiple selectors)
                    className={somethingMethod(`
            u-font-size:15px
          `, {
                        "u-text-transform:uppercase u-font-weight:bold": true,
                    })}

          //////// build not work here multiple back to the line (multilines)
          className={somethingMethod(
            "u-display:flex u-align-items:baseline u-justify-content:space-between u-width:100%",
            {
              "u-justify-content:center": true
            }
          )}

          //////// build not work here (inline/backtick)
                    className={`somethingMethod("u-font-size:15px")`}

          //////// another case ↓
                    className={somethingMethod(
                        {
                            "u-m-t:40px": true,
                            "u-m-b:40px": false,
                            "u-transform:translate(0px,-5px) u-border:1px_solid_blue u-box-shadow:0px_0px_6px_0px_blue)": true
                        },
                        ` // backtick
                        u-box-shadow:0px_0px_0px_0px_black
                        u-width:270px u-margin:auto
                        u-font-size:15px u-transition:transform_0.3s_ease hover:transform:translate(0,-5px)
                    ` // backtick
                    )}
                >
                    ...
                </div>
            </div>

            <div className="b"> // build work here
                ...
            </div>
        </div>
    )
}

export default Index

Reproduction

.

Logs

.

System Info

.
Machy8 commented 1 year ago

This was fixed in https://github.com/stylify/packages/commit/edd5d7c08e970f816b6f56d482b9497fdbb360a4