/*
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