How to use postcss-custom-properties - 5 common examples

To help you get started, we’ve selected a few postcss-custom-properties 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 topcoat / resin / src / lib / index.js View on Github external
const additionalPlugins = options.plugins || false;
  let inline = true;

  if ({}.hasOwnProperty.call(options, 'sourcemapInline')) {
    inline = options.sourcemapInline;
  }

  const importOptions = {};
  if (prepend) {
    importOptions.prepend = prepend;
  }

  const plugins = [atImport(importOptions)];

  if (useVars) {
    plugins.push(vars({ strict: false }));
  }
  plugins.push(dedupe());
  if (useExtend) {
    plugins.push(inherit());
  }
  if (namespace) {
    plugins.push(namespace(ns));
  }
  if (urlPrefix) {
    plugins.push(url({ url: (urlString) =>
      `${urlPrefix}${urlString}`,
    }));
  }
  if (autopre) {
    plugins.push(autoprefixer({ browsers }));
  }
github VisualComposer / builder / public / editor / services / stylesManager / service.js View on Github external
this.get().forEach((style) => {
      let hasher = objectHash({ sort: true, coerce: true }).hash
      let hash = hasher(style)

      if (typeof cssHashes[ hash ] !== 'undefined' && typeof cssHashes[ hash ].result !== 'undefined') {
        return iterations.push(cssHashes[ hash ].result)
      }

      let use = []
      if (style.hasOwnProperty('variables')) {
        use.push(postcssAdvancedVars({
          variables: style.variables
        }))
        use.push(postcssCustomProps(style.variables))
      } else {
        use.push(postcssAdvancedVars())
        use.push(postcssCustomProps())
      }
      cssHashes[ hash ] = {}

      let viewports = this.getViewports()
      if (style.hasOwnProperty('viewports')) {
        viewports = style.viewports
      }
      use.push(postcssMedia({
        importFrom: { customMedia: viewports }
      }))

      if (style.path) {
        use.push(postcssPrefixUrl({
github VisualComposer / builder / public / editor / services / assets-manager / service.js View on Github external
let stylePromise = new Promise((resolve, reject) => {
          postcss()
            .use(postcssVars())
            .process(styles[ tagName ].editorCss)
            .then((result) => {
              resolve(result.css)
            })
        })
        iterations.push(stylePromise)
github preactjs / preact-www / preact.config.js View on Github external
c.use.filter(d => d.loader == 'postcss-loader').forEach(x => {
			x.options.plugins.push(customProperties({ preserve: true }));
		});
	});
github VisualComposer / builder / public / editor / services / stylesManager / service.js View on Github external
let hasher = objectHash({ sort: true, coerce: true }).hash
      let hash = hasher(style)

      if (typeof cssHashes[ hash ] !== 'undefined' && typeof cssHashes[ hash ].result !== 'undefined') {
        return iterations.push(cssHashes[ hash ].result)
      }

      let use = []
      if (style.hasOwnProperty('variables')) {
        use.push(postcssAdvancedVars({
          variables: style.variables
        }))
        use.push(postcssCustomProps(style.variables))
      } else {
        use.push(postcssAdvancedVars())
        use.push(postcssCustomProps())
      }
      cssHashes[ hash ] = {}

      let viewports = this.getViewports()
      if (style.hasOwnProperty('viewports')) {
        viewports = style.viewports
      }
      use.push(postcssMedia({
        importFrom: { customMedia: viewports }
      }))

      if (style.path) {
        use.push(postcssPrefixUrl({
          useUrl: true,
          prefix: style.path
        }))

postcss-custom-properties

Use Custom Properties Queries in CSS

MIT-0
Latest version published 20 days ago

Package Health Score

98 / 100
Full package analysis

Popular postcss-custom-properties functions