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
14
votes
2 answers

CSS architecture with React that also can be themed

I'm currently building out a large React app. Css, has never been my strong point. But now CSS has sass / cssNext / inline styles with React. I've been using BEM with sass, but as my other applications have grown huge even that starts to break down.…
james emanon
  • 11,185
  • 11
  • 56
  • 97
12
votes
2 answers

Change :root variables on different pages with a class

Is it possible to use the :root selector with an ID or Class? I'm trying to flip colors on a different page. :root { --color-one: red; --color-two: blue; } /* Can something like this happen? */ .posts:root { --color-one: green; --color-two:…
cwahlfeldt
  • 580
  • 5
  • 14
8
votes
2 answers

Using css next variables globaly

I have postcss parser set up with http://cssnext.github.io and am trying to figure out a way to set up a variables.css file to contain all my theme settings. So far variable.css looks like this with a couple of vars :root { --color-white: #FFF; …
Ilja
  • 44,142
  • 92
  • 275
  • 498
6
votes
1 answer

How do I get postcss-loader, postcss-cssnext and sass-loader to work together in webpack?

This is my Webpack configs for scss/css files. ... { test: /\.s?css$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 2 } }, { loader: 'postcss-loader', options: { ident:…
hwkd
  • 2,411
  • 3
  • 18
  • 27
4
votes
2 answers

PostCSS css-next - global variables without having to use @import

I have a file variables.css with CSS variables inside a :root{} Right now each time I need to use it in another .css file I use: @import './path/to/variables.css'. I want to know if there is a way to have variables.css available globally without…
sandrina-p
  • 3,794
  • 8
  • 32
  • 60
3
votes
1 answer

Angular 7 - CSS Custom Properties (CSS Variables)

I'm trying to find solution how integrate polyfill/fallback for CSS Variables to project which is using newest version of Angular (7.0.1) with Angular Material (7.0.2). Problem is that ng eject is disabled at this moment, so, I can't edit…
3
votes
3 answers

How can I configure different customProperties in postcss.config.js for different Webpack entry points?

I am using Webpack 4. I have two entry points in my webpack.config.js, for each of which I am generating a separate CSS file using mini-css-extract-plugin. const webpack = require('webpack') const path = require('path') const MiniCssExtractPlugin =…
jetsetw
  • 216
  • 2
  • 7
3
votes
2 answers

PostCSS & Webpack configuration

I'm really disheartened, because I can't find any useful resource on the subject. I merely want to watch my .css files, use post css' plugins to transform them and finally export them to my /public folder as I already do with my .jsx files Here's my…
Rentonie
  • 477
  • 1
  • 10
  • 25
3
votes
2 answers

How can I import fonts from node_modules with webpack and postcss/cssnext

I'm need to use font-awesome. PostCSS tries to find font in source directory but not in node_modules/font-awesome/fonts Error text: Error: Can't resolve '../fonts/fontawesome-webfont.eot?v=4.7.0' in…
FlamyTwista
  • 447
  • 5
  • 17
3
votes
2 answers

css modules & cssnext custom properties in react + webpack

I am just wondering what would be the best approach to using cssnext custom properties like these, alongside css modules in react. Is there a way to share these across modules ? :root{ --primary: pink; --fontSize: 1rem; --fullWidth: 100%; …
user3224271
  • 1,214
  • 3
  • 13
  • 22
2
votes
1 answer

How to keep this CSS code DRY along with satisfying no-descending-specificity

Here's my CSS block: :global { table, .table { border-collapse: collapse; border-spacing: 0; width: 100%; font-size: 0.8em; font-family: var(--font-family-roboto); font-weight: normal; letter-spacing: .25px; …
Mrchief
  • 75,126
  • 20
  • 142
  • 189
2
votes
1 answer

CSSNEXT: how to use variables with media queries in CSS Next

I am trying to use variables to specify breakpoints using the CSSnext plugin. Currently my css looks like this: @media (width <= var(--screen-md-min)) { background-color: var(--brand-purple-dark); } but when i try to run this I get the…
psvj
  • 8,280
  • 8
  • 30
  • 44
1
vote
0 answers

integrating react-toolbox to storybook

I have a problem of creating a simple react-toolbox button story in a storybook. I want to highlight that, all my setup of react-toolbox in application itself works well. Appropriate postcss.config.js file looks like this: const theme =…
Radovan Kuka
  • 1,962
  • 1
  • 17
  • 19
1
vote
1 answer

PostCSS CSSNext @media and color() not working with webpack 2

I'm upgrading a project from webpack 1 to 2, and am seeing some strange behavior with postcss-cssnext where some css next features, most notably color() functions and all my @media queries just aren't working anymore. My webpack config with webpack…
nicholas
  • 14,184
  • 22
  • 82
  • 138
1
vote
0 answers

Importing a cssnext custom properties set in to a CSS module

I have a file, typography.css, containing a cssnext Custom Property (--headingColor), a cssnext Custom Properties Set (--heading), a @value, a global element style (h1) and a CSS class (.heading): :root { --headingColor: #f00; --heading { …
Alasdair McLeay
  • 2,572
  • 4
  • 27
  • 50
1
2 3