Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider adding a `variable` and `apendVariables` option #15

Closed
pascalduez opened this issue Sep 16, 2016 · 7 comments

Comments

Projects
None yet
3 participants
@pascalduez
Copy link
Owner

commented Sep 16, 2016

@kevinSuttle

This comment has been minimized.

Copy link

commented Sep 28, 2016

@pascalduez FWIW, the only way I know this would work is if you process and then hoist the output to be at the top-most style tag.

screen shot 2016-09-28 at 4 14 12 pm

It also seems like any time you'd need to share across files you'd need to make every style available in JS, which kind of defeats the purpose of CSS.

postcss/postcss-loader#99 (comment)

@pascalduez

This comment has been minimized.

Copy link
Owner Author

commented Sep 28, 2016

@kevinSuttle Thanks for the feedback.
It might be that I need a good night of sleep, but I don't understand a damn thing at what you're trying to explain... Sorry.

@kevinSuttle

This comment has been minimized.

Copy link

commented Sep 28, 2016

Haha. No worries. If you'd like to do a screenshare or something when you're rested, we can. I'd like to invite @MoOx as well.

@mrtnbroder

This comment has been minimized.

Copy link

commented Feb 20, 2017

I really really really really need this!

I'm using webpack v2 + css modules + nextcss for writing my css. Currently however, I have to import my global.css file (which holds all the @apply rule-sets) in every component-styles.css where I need these rules. This is very explict, but also very annoying. I'd like to have the variables or sets option here to have them available globally.

Any idea when you could work on this?

@pascalduez

This comment has been minimized.

Copy link
Owner Author

commented Feb 20, 2017

@mrtnbroder It's on my "priority list", I might need that feature soon as well ;)

@pascalduez

This comment has been minimized.

Copy link
Owner Author

commented Mar 8, 2017

Available as of postcss-apply@0.6.0. See #22

Just wanted to push a first iteration so that you guys can play a bit with it and give feedback hopefully. @mrtnbroder @AdamJo

I guess there will be things to improve/decide, like how it must work with the preserve option.

@pascalduez

This comment has been minimized.

Copy link
Owner Author

commented Mar 8, 2017

I don't want this to turn into a full blown inJS CSS stuff, but:

currently:

const themes = {
  /* Set names won't be transformed, just `--` will be prepended. */
  'toolbar-theme': {
    /* Declaration properties can either be camel or kebab case. */
    backgroundColor: 'rebeccapurple',
    color: 'white',
    border: '1px solid green',
  },
};

[...]
postcss().use(apply({ sets: themes }))
[...]
/* input */

.Toolbar {
  @apply --toolbar-theme;
}

Maybe we could go with the template trend:

const themes = [
  `--toolbar-theme: { 
    background-color: rebeccapurple;
    color: white;
    border: 1px solid green;
  }`,
];

[...]
postcss().use(apply({ sets: themes }))
[...]

pascalduez added a commit to pascalduez/postcss-cssnext that referenced this issue Apr 18, 2017

Upgrade postcss-apply dependency
- Implement proper property set overrides
- See pascalduez/postcss-apply#10
- Implement from js custom property sets declaration
- See pascalduez/postcss-apply#15
- Added a `preserve` option
- See pascalduez/postcss-apply#14

@pascalduez pascalduez closed this Apr 16, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.