How to use the postcss-selector-parser.attribute function in postcss-selector-parser

To help you get started, we’ve selected a few postcss-selector-parser examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github vuejs / component-compiler-utils / lib / stylePlugins / scoped.ts View on Github external
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)
github salesforce / lwc / packages / @lwc / style-compiler / src / selector-scoping / transform.ts View on Github external
// 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);
            }
        }
    }
}
github salesforce / lwc / packages / @lwc / style-compiler / src / selector-scoping / transform.ts View on Github external
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);
github vuejs / rollup-plugin-vue / src / style / css.js View on Github external
}

                        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
            }))
        })
    })
github codesandbox / codesandbox-client / src / sandbox / eval / transpilers / vue / style-compiler / plugins / scope-id.js View on Github external
// /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;
github imdreamrunner / browser-vue-loader / src / processors / css / postcss-plugins / scope-id.js View on Github external
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)
github youzan / zent / packages / zent / plugins / postcss-plugin-version-attribute.js View on Github external
selector.walk(node => {
        const { type } = node;
        if (
          type === parseSelector.CLASS ||
          type === parseSelector.ID ||
          type === parseSelector.ATTRIBUTE ||
          type === parseSelector.TAG
        ) {
          interestedNode = node;
          return false; /* break */
        }
      });
      if (interestedNode) {
        interestedNode.parent.insertAfter(
          interestedNode,
          parseSelector.attribute({
            attribute: `data-zv="${pkg.version}"`,
          })
        );
      }
    }
  });
}
github meteor-vue / vue-meteor / packages / vue-component / plugin / post-css.js View on Github external
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,
        }))
      })
    }).process(node.selector).result
github vuejs / vueify / lib / style-rewriter.js View on Github external
selectors.each(function (selector) {
          var node = null
          selector.each(function (n) {
            if (n.type !== 'pseudo') node = n
          })
          selector.insertAfter(node, selectorParser.attribute({
            attribute: currentId
          }))
        })
      }).process(node.selector).result
github vuejs / systemjs-plugin-vue / lib / style-rewriter.js View on Github external
selectors.each(function (selector) {
          var node = null
          selector.each(function (n) {
            if (n.type !== 'pseudo') node = n
          })
          selector.insertAfter(node, selectorParser.attribute({
            attribute: currentId
          }))
        })
      }).process(node.selector).result