Questions tagged [cssnext]

cssnext is a plugin for PostCSS that modernizes CSS syntax. It transforms modern CSS into CSS compatible with older browsers.

Prior to 2015, CSS was frustrating by not having any specification for features we were looking for. No variables, no math, no color manipulation & no customization. Things are going to change soon since a lot of work has been made by the W3C to write new specs to make our life easier. With cssnext, you can start using some new features today!

In a near future, browsers will implement new CSS specifications. As time passes, cssnext will remove some transformations that won't be necessary anymore. And maybe one day, you will be able to completely remove cssnext from your workflow without touching your CSS.

cssnext uses PostCSS which has a way faster CSS parser. It's a good competitor to libsass, a bit faster than LESS and Stylecow, and way faster than Myth or original Ruby Sass.

The official name is cssnext, which should never be capitalized, especially not at the start of a sentence, unless it is being displayed in a location that is customarily all-caps (such as the title of man pages).

36 questions
0
votes
1 answer

Postcss - color function plugin - "Unable to parse color from string"

Using the following postcss plugins: postcss-cssnext postcss-nested postcss-color-function I constantly hit the following error, when using the following color function. Unable to parse color from string "l(-20%)" styles.css @import…
Chris
  • 54,599
  • 30
  • 149
  • 186
0
votes
2 answers

Reuse variables in all css files - using postcss-cssnext and specifically postcss-custom-properties with css-modules

I am using css-modules along with postcss-cssnext , and specifically its postcss-custom-properties feature I am also using react-boilerplate (https://github.com/mxstbr/react-boilerplate/) and this very nice boilerplate comes with these modules used…
dowjones123
  • 3,695
  • 5
  • 40
  • 83
0
votes
1 answer

Mix css modules classes and boostrap active

In a project I am working on we use css modules with postcss (also postcss-cssnext and postcss-include). We also have bootstrap as a dependency which is globally provided. In a given component I do have a custom class for a button. So my button has…
George Karanikas
  • 1,244
  • 1
  • 12
  • 38
0
votes
3 answers

how to add a browser list to cssnext

I am using postcss-cssnext and in my webpack.config I removed autoprefixer postcss: [autoprefixer({ browsers: ['last 2 versions'] }) ], and included cssnext. I understand that cssnext already includes autoprefixer so we don't need both included. I…
svnm
  • 22,878
  • 21
  • 90
  • 105
0
votes
2 answers

Converting from cssnext to postcss-cssnext in webpack

I'm having trouble converting my webpack config from using the now deprecated cssnext and cssnext-loader to postcss-cssnext and the postcss-loader. Doc's state clearly that the functionality I'm trying to recreate has been delegated to function…
Kevin
  • 388
  • 7
  • 23
-4
votes
1 answer

How to assigned a css-next variable into another one?

Can someone confirm me if this works : in my .css file, I have: --pink-1000: #5A003C; --old-pink: var(--pink-1000); Will --old-pink have #5A003C as value ? I'm using : "postcss-cssnext": "~3.0.2", Thanks
Emidomenge
  • 1,172
  • 17
  • 26
1 2
3