Cloud Defense Logo

Products

Solutions

Company

Book A Live Demo

Top 10 Examples of "postcss-selector-parser in functional component" in JavaScript

Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'postcss-selector-parser' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.

root.each(function rewriteSelector (node) {
    if (!node.selector) {
      // handle media queries
      if (node.type === 'atrule') {
        if (node.name === 'media' || node.name === 'supports') {
          node.each(rewriteSelector)
        } else if (/-?keyframes$/.test(node.name)) {
          // register keyframes
          keyframes[node.params] = node.params = node.params + '-' + id
        }
      }
      return
    }
    node.selector = selectorParser(selectors => {
      selectors.each(selector => {
        let node = null
        selector.each(n => {
          // ">>>" combinator
          if (n.type === 'combinator' && n.value === '>>>') {
            n.value = ' '
            n.spaces.before = n.spaces.after = ''
            return false
          }
          // /deep/ alias for >>>, since >>> doesn't work in SASS
          if (n.type === 'tag' && n.value === '/deep/') {
            const prev = n.prev()
            if (prev && prev.type === 'combinator' && prev.value === ' ') {
              prev.remove()
            }
            n.remove()
}

          if (n.type === 'pseudo') {
            // deep: inject [id] attribute at the node before the ::v-deep
            // combinator.
            if (n.value === '::v-deep') {
              if (n.nodes.length) {
                // .foo ::v-deep(.bar) -> .foo[xxxxxxx] .bar
                // replace the current node with ::v-deep's inner selector
                selector.insertAfter(n, n.nodes[0])
                // insert a space combinator before if it doesn't already have one
                const prev = selector.at(selector.index(n) - 1)
                if (!prev || !isSpaceCombinator(prev)) {
                  selector.insertAfter(
                    n,
                    selectorParser.combinator({
                      value: ' '
                    })
                  )
                }
                selector.removeChild(n)
              } else {
                // DEPRECATED usage
                // .foo ::v-deep .bar -> .foo[xxxxxxx] .bar
                console.warn(
                  `[@vue/compiler-sfc] ::v-deep usage as a combinator has ` +
                    `been deprecated. Use ::v-deep() instead.`
                )
                const prev = selector.at(selector.index(n) - 1)
                if (prev && isSpaceCombinator(prev)) {
                  selector.removeChild(prev)
                }
) {
            annotation.remove()
            return
        }

        if (node.parent && node.parent.type === 'atrule' && node.parent.name === 'keyframes') {
            return
        }

        if (this.hasIgnoreAnnotation(node)) {
            return
        }

        let keepSelector = true

        node.selector = selectorParser(selectorsParsed => {
            selectorsParsed.walk(selector => {
                const selectorsInRule = []
                if (selector.type === 'selector') {
                    // if inside :not pseudo class, ignore
                    if (
                        selector.parent &&
                        selector.parent.value === ':not' &&
                        selector.parent.type === 'pseudo'
                    ) {
                        return
                    }
                    for (const { type, value } of selector.nodes) {
                        if (
                            SELECTOR_STANDARD_TYPES.includes(type) &&
                            typeof value !== 'undefined'
                        ) {
resolvedNestedSelector(selector, rule).forEach(resolvedSelector => {
          // Process each resolved selector with `checkSelector` via postcss-selector-parser
          selectorParser(s => checkSelector(s, rule)).process(resolvedSelector)
        })
      })
node = n
          }
        })

        if (node) {
          node.spaces.after = ''
        } else {
          // For deep selectors & standalone pseudo selectors,
          // the attribute selectors are prepended rather than appended.
          // So all leading spaces must be eliminated to avoid problems.
          selector.first.spaces.before = ''
        }

        selector.insertAfter(
          node,
          selectorParser.attribute({
            attribute: id
          })
        )
      })
    }).processSync(node.selector)
// Compound selectors containing :host have a special treatment and should not be scoped
        // like the rest of the complex selectors.
        const containsHost = compoundSelector.some(isHostPseudoClass);

        if (!containsSingleDirSelector && !containsHost) {
            let nodeToScope: Node | undefined;

            // In each compound selector we need to locate the last selector to scope.
            for (const node of compoundSelector) {
                if (!isPseudoElement(node)) {
                    nodeToScope = node;
                }
            }

            const shadowAttribute = attribute({
                attribute: SHADOW_ATTRIBUTE,
                value: undefined,
                raws: {},
            });

            if (nodeToScope) {
                // Add the scoping attribute right after the node scope
                selector.insertAfter(nodeToScope, shadowAttribute);
            } else {
                // Add the scoping token in the first position of the compound selector as a fallback
                // when there is no node to scope. For example: ::after {}
                selector.insertBefore(compoundSelector[0], shadowAttribute);
            }
        }
    }
}
function transformHost(selector: Selector) {
    // Locate the first :host pseudo-class
    const hostNode = findNode(selector, isHostPseudoClass) as Pseudo | undefined;

    if (hostNode) {
        // Store the original location of the :host in the selector
        const hostIndex = selector.index(hostNode);

        // Swap the :host pseudo-class with the host scoping token
        const hostAttribute = attribute({
            attribute: HOST_ATTRIBUTE,
            value: undefined,
            raws: {},
        });
        hostNode.replaceWith(hostAttribute);

        // Generate a unique contextualized version of the selector for each selector pass as argument
        // to the :host
        const contextualSelectors = hostNode.nodes.map((contextSelectors: Selector) => {
            const clonedSelector = selector.clone({}) as Selector;
            const clonedHostNode = clonedSelector.at(hostIndex) as Tag;

            // Add to the compound selector previously containing the :host pseudo class
            // the contextual selectors.
            contextSelectors.each(node => {
                trimNodeWhitespaces(node);
}

                        n.remove()
                        return false
                    } else if (isInvalidTag(n.value)) {
                        return
                    }
                }

                if (n.type !== 'pseudo' && n.type !== 'combinator') {
                    target = n
                }
            })
            /* eslint-enable complexity */

            target && selector.insertAfter(target, selectorParser.attribute({
                attribute: scopeID
            }))
        })
    })
// /deep/ alias for >>>, since >>> doesn't work in SASS
            if (n.type === 'tag' && n.value === '/deep/') {
              var next = n.next();
              if (next.type === 'combinator' && next.value === ' ') {
                next.remove();
              }
              n.remove();
              return false;
            }
            if (n.type !== 'pseudo' && n.type !== 'combinator') {
              node = n;
            }
          });
          selector.insertAfter(
            node,
            selectorParser.attribute({
              attribute: opts.id,
            })
          );
        });
      }).process(node.selector).result;
return false
          }
          // /deep/ alias for >>>, since >>> doesn't work in SASS
          if (n.type === 'tag' && n.value === '/deep/') {
            const prev = n.prev()
            if (prev && prev.type === 'combinator' && prev.value === ' ') {
              prev.remove()
            }
            n.remove()
            return false
          }
          if (n.type !== 'pseudo' && n.type !== 'combinator') {
            node = n
          }
        })
        selector.insertAfter(node, selectorParser.attribute({
          attribute: id
        }))
      })
    }).processSync(node.selector)

Is your System Free of Underlying Vulnerabilities?
Find Out Now