Socket
Socket
Sign inDemoInstall

postcss-constants

Package Overview
Dependencies
23
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-constants

PostCSS plugin to process imported constants from a file.


Version published
Maintainers
1
Weekly downloads
513
increased by80.63%

Weekly downloads

Readme

Source

PostCSS Constants Build Status

PostCSS plugin to process imported constants from a file.

constants.js

module.exports = {
  colors: {
    primary: '#8EE7D3',
  },
};

input

~colors: "./constants.js";
.foo {
  color: ~colors.primary;
}

output

.foo {
  color: #8EE7D3;
}
Within static values

constants.js

module.exports = {
  borders: {
    weight: '2px',
    style: 'solid',
  },
};

input

~borders: "./constants.js";
.foo {
  border: ~borders.weight ~borders.style black;
}

output

.foo {
  border: 2px solid black;
}
Nested values

constants.js

module.exports = {
  theme: {
    orange: {
      color: 'orange',
      icons: {
        color: 'green',
      },
    },
  },
};

input

~theme: "./constants.js";
.icon {
  background: ~theme.orange.icons.color;
}
@ Rules

constants.js

module.exports = {
  queries: {
    maxWidth: '200px',
  },
}

input

~queries: "./constants.js";

@media (max-width: ~queries.maxWidth) {
  color: blue;
}

output

@media (max-width: 200px) {
  color: blue;
}

Usage

postcss([ require('postcss-constants') ])

You can pass a default set of constants (that can be overriden), if you want to update default constants in webpack hot reload:

postcss([
  constants({
    defaults: {
      colors: {
        primary: 'blue',
      },
    }
  })
])

Call postcss-constants before any plugins that will compute values stored in constants. See PostCSS docs for examples for your environment.

Keywords

FAQs

Last updated on 30 Jun 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc