How to use the postcss-js.objectify function in postcss-js

To help you get started, we’ve selected a few postcss-js 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 andrewdelprete / babel-plugin-tailwind / src / index.js View on Github external
let twConfig = {};
if (fs.existsSync("./tailwind.js")) {
  twConfig = require(process.cwd() + "/tailwind.js");
} else {
  twConfig = require("tailwindcss/defaultConfig")();
}

let twObj = {};
if (fs.existsSync("./tailwind.custom.css")) {
  twObj = fs.readFileSync("./tailwind.custom.css", "utf8");
} else {
  twObj = fs.readFileSync("./node_modules/tailwindcss/dist/tailwind.min.css", "utf8");
}

twObj = postcss.parse(twObj);
twObj = postcssJs.objectify(twObj);
twObj = formatTailwindObj(twObj);

export default function(babel) {
  const { types: t } = babel;

  return {
    name: "tailwind-to-css-in-js", // not required
    visitor: {
      CallExpression(path) {
        const node = path.node;

        if (
          node.callee.name === "tw" &&
          (t.isStringLiteral(node.arguments[0]) || t.isArrayExpression(node.arguments[0]))
        ) {
          let selectors = isArray(node.arguments[0].elements)
github hupe1980 / gatsby-plugin-webfonts / gatsby-plugin-webfonts / src / modules / utils.js View on Github external
export async function parseCss(cssString, { fontDisplay = `swap`, useMerge }) {
  const root = postcss.parse(cssString);

  const cssObject = postcssJs.objectify(root);

  if (cssObject[`@font-face`]) {
    const reducer = fontFaceReducer(fontDisplay, useMerge);
    cssObject[`@font-face`] = Array.isArray(cssObject[`@font-face`])
      ? cssObject[`@font-face`].reduce(reducer, [])
      : reducer([], cssObject[`@font-face`]);
  }

  const { css } = await postcss().process(cssObject, {
    parser: postcssJs,
    from: undefined,
  });

  return css;
}
github stevenvachon / handlebars-react / lib / index.js View on Github external
function transformInlineStyles(styles, options)
{
	return JSON.stringify( postcssJs.objectify( postcss.parse(styles) ) );
}
github reactioncommerce / reaction / server / api / core / ui.js View on Github external
function cssToObject(styles) {
  check(styles, Match.OneOf(String, null, undefined, void 0));

  const parsedStyle = postcss.parse(styles || baseStyles);
  const styleObject = postcssJS.objectify(parsedStyle);

  return styleObject;
}
github mapbox / svg-react-transformer / packages / svg-react-transformer / lib / to-jsx.js View on Github external
function cssToStyleObjectString(css) {
  const root = postcss.parse(css);
  const obj = postcssJs.objectify(root);
  return stringifyObject(obj);
}
github mapbox / jsxtreme-markdown / packages / hast-util-to-jsx / index.js View on Github external
function cssToJs(css) {
  return postcssJs.objectify(postcss.parse(css, { from: undefined }));
}
github axept / prejss / src / postcss-adapter / async / parse.server.js View on Github external
export default async (rawStyles) => {
  const processed = await processParsing(rawStyles)
  return postcssJs.objectify(processed.root)
}
github lttb / postjss / src / common / init-processor.js View on Github external
          .then(res => postcssJs.objectify(res.root))
github ambar / reiconify / packages / reiconify / lib / svg2jsx.js View on Github external
const styleToObject = styleText => {
  const styleObject = postcssJs.objectify(postcss.parse(styleText))
  return JSON5.stringify(styleObject)
}

postcss-js

PostCSS for CSS-in-JS and styles in JS objects

MIT
Latest version published 1 year ago

Package Health Score

72 / 100
Full package analysis