How to use the postcss.rule function in postcss

To help you get started, we’ve selected a few postcss 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 arccoza / postcss-layout / index.js View on Github external
function processLayoutConf(css, result, rule, decl, grids, layout) {
  // Look for layout prop in rule.
  if(decl.prop == 'layout') {
    var sels = [];
    layout.childrenRule = null;
    layout.pseudoRule = null;
    layout.values = decl.value.split(/\s*,\s*|\s/);
    layout.container = clone(defaults.container);
    layout.item = clone(defaults.item);
    layout.pseudo = clone(defaults.pseudo);
    
    for (var i = 0; i < rule.selectors.length; i++) {
      sels.push(rule.selectors[i] + ' > *');
    };

    layout.childrenRule = postcss.rule({selector: sels.join(', '), source: decl.source});
    layout.item.selector = sels.join(', ');
    layout.item.source = decl.source;
    sels = [];

    for (var i = 0; i < rule.selectors.length; i++) {
      sels.push(rule.selectors[i] + ':after');
    };

    layout.pseudoRule = postcss.rule({selector: sels.join(', '), source: decl.source});
    layout.pseudo.selector = sels.join(', ');
    layout.pseudo.source = decl.source;

    layout.isSet = true;
    layout.decl = decl;
  }
  // Look for grid prop in rule.
github gucong3000 / postcss-syntax / packages / postcss-jsx / object-parser.js View on Github external
defineRaws(atRule, "params", "", key.suffix, {
						raw: {
							enumerable: true,
							get: () => (
								camelCaseProp(atRule.params)
							),
							set: (value) => {
								atRule.params = unCamelCaseProp(value);
							},
						},
					});
				}
				rule = atRule;
			} else {
				// rule = this.rule(key, keyWrap, node.value, parent);
				rule = postcss.rule({
					selector: key.value,
				});
				defineRaws(rule, "selector", key.prefix, key.suffix);
			}
			raw(rule);
			this.ObjectExpression(node.value, rule);
			return rule;
		}

		const value = this.getNodeValue(node.value, rawValue);

		if (key.value.startsWith("@")) {
			const atRule = postcss.atRule({
				name: unCamelCase(key.value),
				params: value.value,
			});
github AleshaOleg / postcss-sass / index.js View on Github external
root.source = {
            start: node.start,
            end: node.end,
            source: input
        };
        root.raws = DEFAULT_RAWS_ROOT;
        for (var i = 0; i < node.content.length; i++) {
            sassToPostCss(node.content[i], root, source, input, selector);
        }
        return root;
    } else if (node.type === 'ruleset') {
        // Loop to find the deepest ruleset node
        for (var rContent = 0; rContent < node.content.length; rContent++ ) {
            if (node.content[rContent].type === 'block') {
                // Create Rule node
                var rule = postcss.rule();
                // Object to store raws for Rule
                var rRaws = {};

                // Looking for all block nodes in current ruleset node
                for (
                    var rCurrentContent = 0;
                    rCurrentContent < node.content.length;
                    rCurrentContent++
                ) {
                    if (node.content[rCurrentContent].type === 'block') {
                        sassToPostCss(node
                            .content[rCurrentContent], rule, source, input);
                    } else if (node.content[rCurrentContent].type === 'space') {
                        if (!rRaws.between) {
                            rRaws.between = node
                                .content[rCurrentContent].content;
github cssdream / cssgrace / lib / index.js View on Github external
var colorB = pad(parseInt(RegExp.$3).toString(16));
    var colorA = pad(parseInt(RegExp.$4 * 255).toString(16));
    var ARGB   = "'" + "#" + colorA + colorR + colorG + colorB + "'";

    // 插入IE半透明滤镜
    var reBefore = decl.before.replace(reBLANK_LINE, '$1')
    insertDecl(decl, i, {
      before: reBefore,
      prop: 'filter',
      value: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=' + ARGB + ', endColorstr=' + ARGB + ')'
    });

    // IE9 rgba 和滤镜都支持,插入 :root hack 去掉滤镜
    var newSelector = ':root ' + decl.parent.selector;

    var nextrule = postcss.rule({
      selector: newSelector
    });
    decl.parent.parent.insertAfter(decl.parent, nextrule);
    nextrule.append({
      prop: 'filter',
      value: 'none\\9'
    });
  }
}
github css-modules / postcss-modules-extract-imports / index.src.js View on Github external
Object.keys(imports).forEach(path => {
    let pathImports = imports[path]
    console.log(pathImports)
    css.prepend(postcss.rule({
      selector: `:import("${path}")`,
      nodes: Object.keys(pathImports).map(importedSymbol => {
        return postcss.decl({prop: importedSymbol, value: pathImports[importedSymbol]})
      })
    }))
  })
}
github typographist / postcss / transformator / transformAtrules / transformTBase / index.js View on Github external
const createBodyRuleWithDecls = (baseSize, rootSize) => {
  const body = postcss.rule({
    selector: 'body',
  });
  const base = `${toRem(baseSize, rootSize)}rem`;
  body.append(fontSizeDecl(base));

  return body;
};
github makuga01 / dnsFookup / FE / node_modules / postcss-modules-values / src / index.js View on Github external
importAliases.reverse().forEach(({ path, imports }) => {
      const importRule = postcss.rule({
        selector: `:import(${path})`,
        raws: { after: '\n' }
      });
      imports.forEach(({ theirName, importedName }) => {
        importRule.append({
          value: theirName,
          prop: importedName,
          raws: { before: '\n  ' }
        });
      });

      css.prepend(importRule);
    });
  }
github typographist / postcss / lib / transformTRoot.js View on Github external
const rootRule = fontSize => {
  const root = postcss.rule({
    selector: ':root',
  });

  const rootSize = `${percentage(fontSize)}%`;
  root.append(fontSizeDecl(rootSize));

  return root;
};
github iamfrntdv / postcss-functional-css / lib / margin.js View on Github external
rules.forEach(rule => {
    let selector = '';
    if (!global) {
      selector = `.${media.prefix}${media.prefixSeparator}${rule.selector}`;
    } else {
      selector = `.${rule.selector}`;
    }

    const newRule = postcss.rule({
      selector: selector
    });

    rule.decls.forEach(decl => {
      newRule.append(postcss.decl({
        prop: decl.prop,
        value: decl.value
      }))
    });

    newRules.push(newRule);
  });
github sndrs / postcss-atomised / postcss-atomised / src / index.js View on Github external
declAtrules.push(node);
            }
        });

        const hashed = hash.unique(cssStr);
        if (!hashes.some(hash => hash === hashed)) {

            const pseudo = declPseudos.length ? `:${declPseudos.join(':')}` : '';
            const shortClassName = numberToLetter(hashes.length);

            result.atomicMap[parentClassname] = (result.atomicMap[parentClassname] || []);
            result.atomicMap[parentClassname].push(shortClassName);

            newRoot.push(declAtrules.reduce((rule, atrule) => {
                return postcss.atRule({name: atrule.name, params: atrule.params}).append(rule);
            }, postcss.rule({selector: `.${shortClassName}${pseudo}`}).append(decl)));

            hashes.push(hashed);
        }
    });
    result.root.removeAll();