I'm currently using this plugin in an Angular 2 project, where .css files are local to their components and separated between each other.
The variables configuration option comes very handy for this situation and I was wondering about the possibility of adding them to :root if preserve option is true and a css file path is specified, for instance ./src/styles/main.css.

Is there any way ?

.myTheme {
  --myvar: red;
}

Currently this http://jsbin.com/qefano/2/edit is totally not the behavior we got (working on latest firefox).
We need to look at !important & choose which value to use.

This is actually a cssnext issue but it's the interoperability between postcss-custom-properties and postcss-custom-media that fails. Not sure where the code change should be but posting this in all 3 repositories.

Using variables inside a media query doesn't get processed.
Test case: postcss -u postcss-cssnext var.css

<h1 class="mobile">MOBILE</h1>
<h1 class="desktop">DESKTOP</h1>

:root {
  --with-var: 640px;
}
.desktop { display: none; }
@media screen and (min-width: var(--with-var)) {
  .mobile {
    display: none;
  }
  .desktop { display: block; }
}

Should output:

.desktop { display: none; }
@media screen and (min-width: 640px) {
  .mobile {
    display: none;
  }
  .desktop { display: block; }
}

Instead it outputs

Warning {
  type: 'warning',
  text: 'Missing @custom-media definition for \'--with-var\'. The entire rule has been removed from the output.',
  line: 5,
  column: 1,
  node: 
   AtRule {
     raws: 
      { before: '\n',
        between: ' ',
        afterName: ' ',
        semicolon: false,
        after: '\n' },
     type: 'atrule',
     name: 'media',
     parent: undefined,
     source: { start: [Object], input: [Object], end: [Object] },
     params: 'screen and (min-width: varundefined)',
     nodes: [ [Object], [Object] ] },
  plugin: 'postcss-custom-media' } 0 [ Warning {
    type: 'warning',
    text: 'Missing @custom-media definition for \'--with-var\'. The entire rule has been removed from the output.',
    line: 5,
    column: 1,
    node: 
     AtRule {
       raws: [Object],
       type: 'atrule',
       name: 'media',
       parent: undefined,
       source: [Object],
       params: 'screen and (min-width: varundefined)',
       nodes: [Object] },
    plugin: 'postcss-custom-media' } ]

Variable:

:root {
--Button.onDisabled-opacity: 0.6;
}

Template definition:

.Button.onDisabled {
  cursor: default;
  opacity: var(--Button.onDisabled-opacity);
}

Rendering

.Button.onDisabled {
  opacity: .onDisabled-opacity;
}

I asked on SO if periods are allowed per the specification

To reproduce the above description:

git clone git clone [email protected]:superfly-css/superfly-css-component-button.git
cd superfly-css-component-button
npm install
gulp build:css
cat target/main/css/index.css

I think we can simplify the usage of those 3 options as one: strict.

strict set to true will

• add all fallbacks according to the specs
• preserve original author code as future proof code
• append user variables at the end to reflect make sense with previous points.
  in order to be more close to specs

strict will be default to false in order to reduce output (and because I am sure some will whine :p)

poke watchers + @simonsmith @hgl what do you think about that ?

Using the default configuration, I'm getting a duplicate property with an empty value.

Before:

a {
    color: var( --global-color-links );
}

After:

a {
    color:  ;
    color: #c53e3e;
}

Any plans to support fallback value for cascading variables? Without the fallback values, you have to define and import every variable in root for every component in your application.

.component .header {
  color: var(--header-color, blue);
}

I want to override property like this:

:root {
  --main-color: #333;
  --main-color: var(--main-color, #666);
}
h1 {
  color: var(--main-color);
}

Current output is

h1 {
  color: #666;
}

But I expect

h1 {
  color: #333;
}

Ref
MoOx/postcss-cssnext#37
csstools/postcss-custom-media#4

Without inlining imports, variables defined in another file then @imported are considered undefined.

I want to use css-loader's modules, @import a file that defines my variables, then use those variables in a variety of modules. Currently my compiled css is correct, but I see warnings for my variables ___ is undefined and used without a fallback.

This is not the correct expected output:

The fallback should only be used as the value of the property when the variable is not defined. It should not appear in the output if the variable was defined.

Right now it throws if there is a syntax error. Or a lot more annoying, if the referenced variable was not found.

I have the defines and the usages in different files. If I concat those before running postcss-custom-properties, all is fine. If I want to process them individually (nlz is doing that), it throws.
It shouldn’t. It should just leave the properties as they are.

Have you thought at all about how we might be able to support custom properties being modified at runtime? That would get us closer to a higher fidelity transpilation/polyfill.

ref reworkcss/rework-vars#30

Hello all,

Just started looking at using this module, so far, so good.

I'm also using postcss-import to merge my css files into a single CSS file. I have a number of different settings.*.css files which declare custom properties, so for example:

settings.fonts.css:

:root {
  --primary-font-family: 'Open Sans', sans-serif;
  --base-font-size: 16px;
}

settings.layout.css:

:root {
  --document-width: 960px
}

etc. Ignore the content, just an example.

When I run my gulp task, I get an output basically like:

:root {
  --primary-font-family: 'Open Sans', sans-serif;
  --base-font-size: 16px;
}
:root {
  --document-width: 960px
}

...rest of CSS here...

I'm not sure if it's the place of this module or another one to concatenate those property declarations to something like:

:root {
  --primary-font-family: 'Open Sans', sans-serif;
  --base-font-size: 16px;
  --document-width: 960px
}

Any help/advice on this would be appreciated!

cheers

See reworkcss/rework-vars#38

Thinking that JS-supplied custom properties should override whatever is in the CSS - simple fix would be to apply them after the map is constructed from what is in the CSS.

How do you specify the options in a postcss json file? I’ve tried

{
  "use": [
    "postcss-import",
    "postcss-custom-properties",
    "postcss-cssnext"
  ],
  "postcss-custom-properties": {
    "warnings": false
  },
  "postcss-cssnext": {
    "browsers": [
      "ie >= 10",
      "ie_mob >= 10",
      "ff >= 30",
      "chrome >= 34",
      "safari >= 7",
      "opera >= 23",
      "ios >= 7",
      "android >= 4.4",
      "bb >= 10"
    ]
  }
}

...but it still outputs warnings when custom properties are not scoped to :root element.

I know you don't process custom properties outside :root but you could defer those to the UA instead of breaking them. Take the following example:

:root {
    --foo: yellow;
}

div {
    --foo: red;
}

div p {
    color: var(--foo);
}

The output is:

div {
    --foo: red;
}

div p {
    color: yellow;
}

Which makes <p>s inside divs yellow instead of the correct red. It's easy to tweak the output to preserve the variables, and then sit back and watch CSS cascade and graceful error handling do their job. Something like this:

:root {
    --foo: yellow; /* preserve var declarations */
}

div {
    --foo: red;
}

div p {
    color: yellow;
    color: var(--foo); /* preserve var(), just add your value as a fallback */
}

This way you get the best of both worlds: Same rewriting, and correct behavior in CSS variable supporting browsers.

sorry, wrong repo!

Hey,

if I am not mistaken the following should be possible (currently works in chrome).

.class{
  --color: red;
  color: var(--color);
}

However it is currently not supported in this plugin. Any reason? Could you support it? This would be awesome for conditional styling, e.g. notices with states like .error, .warning, etc.

Hi, I'm trying to use this module to create a webpack loader. The goal of the webpack loader is to take in a CSS file containing variables, and output JSON with the variables. Sort of like sass-variables-loader, but for CSS.

Input:

/* colors.css */

:root {
  --myRed: red;
  --myBlue: blue;
  --myPrimary: var(--myBlue)
  --myWidth: 20;
}

Output:

{
  "myRed": "red",
  "myBlue": "blue",
  "myPrimary": "blue",
  "myWidth": 20
}

Is there a way to extract a JavaScript object mapping from variable names to values?

* {
  background: linear-gradient(var(--a), var(--b));
}

gives

* {
  background: linear-gradient(linear-gradient(var(--a), var(--b)), , var(--b)));
}

This is totally unexpected :(

Hi,

I have the following:

:root {
/* 2a */
  --font-size-root: 16px;
}
html {
/* 2b */
  font-size: var(--font-size-root);
}

After processing it looks like this:

:root {
/* 2a */
}
html {
/* 2b */
  font-size: 16px;
}

The gulptask I'm using looks like this (In case it makes a difference):

var processors = [postcss_import, autoprefixer, postcss_calc, postcss_custom_properties, postcss_color_function];

gulp.task('build:css', ['clean'], function() {
  return gulp.src(PLI.SRC_MAIN_CSS)
    .pipe(postcss(processors))
    .pipe(gulp.dest(PLI.target.main.css));
});

I know, this issue it's weird, but if you write:

:root {
  --base-link-color : #21201E,
  --base-link-color-hover : #ff3333 ;
}

There is no error, maybe should ?

is it possible to deactivate this warning, "used without a fallback " ?
thanks

See pascalduez/postcss-apply#11

This could be the spec, but here's example.

:root {
  --BorderStyle: solid;
  --BorderWidth: 2px;

 --DefaultBorderProperties: {
     border: var(--BorderWidth) var(--BorderStyle);
     border-radius: var(--BorderRadius);
  }
}

Outputs exactly how you'd expect:

    border: 2px solid;

But:

:root
 --FallbackFontFamily: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",  sans-serif;
 --LightFontFamily: "Helvetica Neue Light", HelveticaNeue-Light;

.buttonLabel {
  font-family: var(--LightFontFamily) var(--FallbackFontFamily);
}

Output:

.buttonLabel {
    font-family: --FallbackFontFamily;  ❌ 
    font-family: "Helvetica Neue Light", HelveticaNeue-Light;

Would it be possible to add an option like postcss-mixins mixinsDir?

My use case is:

property-definitions.css

--Font_Size-base: 16px;
--Line_Height-base: calc(var(--Font_Size-base) + 10px);

If i was to use the variables option i wouldn't be able to use calc() to create certain properties :)

:root {
  --test: "test";
}

element::before {
  content: "(" var(--test) ")";
}

produces:

element::before {
  content: "(" "test" ")";
}

when it should probably (?) produce:

element::before {
  content: "(test)";
}

This causes an issue for me with URLs:

:root {
  --test: "path/to/";
}

element {
  background-image: url( var(--test) "image.svg" );
}

As far as I understand, CSS Modules Values syntax is designed to not break CSS.

Its main syntax (to define a value) is @value my-color: #ff0000; or @value my-color: #ff0000;. The idea is that variables can be preprocessed into these value definitions, as follows:

:root {
  --my-red: #ff0000;
}
@value my-color: var(--my-red);

In this example postcss-custom-properties fails to recognize and parse the var(--my-red).

We should follow this http://dev.w3.org/csswg/css-extensions/#custom-property

Need to more fully support Custom Properties (and eventually remove them from the variable spec entirely, since they’ll be defined here).

By default, custom properties are optimized for use as var() values—they inherit, have an empty initial value, don’t do any syntax checking, and don’t animate. All of these should be adjustable somehow.

    @custom-property --foo {
      scope: [ inherit | local ];
      initial: <any-value>*;
      value: <length> <length> <color>;
      /* Literally, define a simplistic definition syntax.
         OR FULL CSS PROPERTY GRAMMAR?!? */
    }

If you provide a "value" field with animatable types, we can animate in the most direct fashion automatically. We could also let you hook into that: you register a callback, and whenever a property starts animating, we call it with the starting and ending values. You have to return a function which takes a progress value (between 0 and 1) and returns a value for your property; we’ll call it as we animate the value. (How can we hook into Web Anim here? Can you just return an Animation object?)

Do we need a hook for computed values? Interesting. We could just hand your callback a set of property values for the element and its parent (maybe siblings, if you ask for it?), and you can return a new value for the property. This is probably an advanced feature for a later date.

Definitely need a way to listen for elements receiving and changing property values, so you can efficiently polyfill things and make your own properties. Unsure how it would look at the moment.

input:

:root {
  --color: blue;
}
div {
  --color: green;
}
#alert {
  --color: red;
}
* {
  color: var(--color);
}

output(equate):

:root {
  color: blue;
}
div {
  color: green;
}
#alert {
  color: red;
}

html:

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id='alert'>
While I got red set directly on me!
  <p>I’m red too, because of inheritance!</p>
</div>

http://dev.w3.org/csswg/css-variables/#syntax example 5

http://www.w3.org/TR/css-variables/#invalid-variables

postcss-at-rules-variables is all about making custom properties work inside things like @if, but it goes looking through :root rules to fill them in, rather than depending on this plugin’s knowledge of the variables that there are. This is troublesome because variables that are created through the options (customProperties({variables:{foo:'bar'}})) are completely inaccessible to it.

Scrum/postcss-at-rules-variables#153 is about this from postcss-at-rules-variables’ side.

-- is a CSS thing.
Having to use that in the options is kind of weird.
We should prepend -- automatically if not present already.

poke @bloodyowl.

I'm guessing this make sense according to the limitation.
This should create warning for all non root :root usage (in mq or in other selector)

With this variables option:

{
  "--border-color": "#aaa",
  "--background-color": "color(var(--border-color) alpha(0.2))"
}

It would be great if cssnext could give back a variables option that have all values preprocessed:

{
  "--border-color": "#aaa",
  "--background-color": "rgba(170, 170, 170, 0.2)"
}

Otherwise it's very hard to consume the values for other js code.

I wonder what might be the best way to output this option? Should it be handled at cssnext level or this plugin here?

In my experience, it's only possible to have one :root declaration, and that usually means one file (doesn't seem to work with postcss-imports). Am I missing something?

See: reworkcss/rework-vars#17. I still think this is inherently problematic (like plugins that consolidate media queries), but worth exploring to get an answer.

Example input:

:root { --fontSize: 2em; }
.Section { font-size: var(--fontSize); }

@media (min-width: 64em) {
  :root { --font-size: 3em; }
}

Example output:

.Section { font-size: 2em; }

@media (min-width: 64em) {
  .Section { font-size: 3em; }
}

Complications could include:

• inlined @import statements in media queries
• not knowing the relationship between different media queries (might generate extra CSS rules that aren't needed, e.g., what if the MQ is @media screen (min-width:0)?)
• generating large amounts of extra CSS
• specificity/cascade issues - moving/generating rules is always going to hit the problem where earlier styles are unintentionally overridden.

<div class="One Two">Text</div>

Input:

:root { --fontSize: 2em; }
.One { font-size: var(--fontSize); }
.Two { font-size: 6em; }

@media (min-width: 64em) {
  :root { --font-size: 3em; }
}

Output (notice One now overrides Two, which it would not with a native solution):

.One { font-size: 2em; }
.Two { font-size: 6em; }

@media (min-width: 64em) {
  .One { font-size: 3em; }
}

SO Summary Here

https://github.com/postcss/postcss-custom-properties#preserve

Would it be beneficial to add a withFallbacks value to the preserve property, where the Custom Property is both replaced and added?

e.g.
Authored:

color: var(--HighlightGreen)

Compiled

color: #3acfb6
color: var(--HighlightGreen)

This is mostly for debug purposes, I suppose, but it could be a nice addition, IMO.

As mentioned in https://gist.github.com/hgl/77f0141eea04817ee0af

I would like to make this plugin also resolve variables used in media queries (including custom media queries).

But I need your opinion on the breaking change to the preserve property I proposed in that gist (tl;dr enabling it doesn't fallback to specified values for resolvable values).

Just upgraded to postcss 4.0 and gulp-postcss 4.0 and now this is happening:

{ [TypeError: Cannot call method 'splice' of undefined]
  name: 'TypeError',
  message: 'Cannot call method \'splice\' of undefined',
  stack: 'TypeError: Cannot call method \'splice\' of undefined\n    at /Users/vinspee/Projects/TeamMate/prototype/node_modules/postcss-custom-properties/index.js:67:23\n    at /Users/vinspee/Projects/TeamMate/prototype/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:192:20\n    at /Users/vinspee/Projects/TeamMate/prototype/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:127:18\n    at Root.Container.each (/Users/vinspee/Projects/TeamMate/prototype/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:105:14)\n    at Root.Container.eachInside (/Users/vinspee/Projects/TeamMate/prototype/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:126:15)\n    at Root.Container.eachRule (/Users/vinspee/Projects/TeamMate/prototype/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:190:15)\n    at Array.2 (/Users/vinspee/Projects/TeamMate/prototype/node_modules/postcss-custom-properties/index.js:29:11)\n    at PostCSS.process (/Users/vinspee/Projects/TeamMate/prototype/node_modules/gulp-postcss/node_modules/postcss/lib/postcss.js:47:35)\n    at DestroyableTransform.transform [as _transform] (/Users/vinspee/Projects/TeamMate/prototype/node_modules/gulp-postcss/index.js:45:26)\n    at DestroyableTransform.Transform._read (/Users/vinspee/Projects/TeamMate/prototype/node_modules/gulp-postcss/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-postcss' }

Same issue as csstools/postcss-custom-media#5

Reproduce steps:

git clone [email protected]:superfly-css/superfly-css-utilities-colors.git
cd superfly-css-utilities-colors
npm install
gulp build:css
cat target/main/css/index.css

The ; is removed from the !important; markup in the src/main/css/index.css file.

If the postcss-custom-properties processor is removed from the list of processors, then the semicolon stays intact. To do this delete the postcss-custom-properties processor from the array of processors like this:

atom node_modules/superfly-css-task-build/src/main/js/index.js 

After deletion the list of processors looks like this:

var processors = [postcss_import, postcss_each, postcss_calc, postcss_color_function, autoprefixer, postcss_reporter({
  clearMessages: true
})];

Run:

gulp clean
gulp build:css
cat target/main/css/index.css

The semicolon is now included in the output.

The usage docs are no longer correct as of 6.0.0. Babel transpiles export default to exports.default, so you have to do require('postcss-custom-properties').default to get the main plugin function.

A few potential solutions:

1. Update the readme to reflect this
2. Remove the babel transpilation step entirely (I'm not sure why it's needed now that this library depends on postcss@6 which has dropped support for non-ES6 versions of node, and nothing >ES6 is used in this codebase that I can see)
3. Manually add module.exports to index.js
4. Use a babel plugin like add-module-exports to do it for you

As a user, I'd prefer anything other than 1, and I personally think 2 is the best. Happy to PR any of the options!

What is the suggested way to reload variables, defined in js and passed to plugin via config in variables attribute, w/ webpack hot-reloadable server? As those vars are passed to webpack config (not required or imported into the bundle), changes to those files are not being picked up by webpack on hot reloading. So I have to restart docker container every time I change those variables.

postcss-simple-vars allows to pass variables as a function, in which files w/ variables are being required. It's kinda works, but not out of the box, and I have to save css file (which contains changed variable) manually. It is quite annoying & confusing, when you forget to do this dummy save and trying to figure out why views are not being updated, but anyway it's better than to restart server or docker container.