Stack Overflow
Stack Overflow

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
1
vote
0 answers

gulp postcss cssnext autoprefixer not working

gulp file: var gulp = require('gulp'); var postcss = require('gulp-postcss'); var autoprefixer = require('autoprefixer'); var cssnext = require('postcss-cssnext'); var precss = require('precss'); var csswring = require('csswring'); var concat =…
Jordan Carter
  • 1,276
  • 3
  • 19
  • 43
0
votes
2 answers

CSSNext postcss-custom-media - unable to import medias from file with 'importFrom' option

I'm trying to add customMedia option to my postcss-cssnext features config with importFrom file location, but that doesnt work and I dont have any errors on project build, only final Missing @custom-media definition for '--small-viewport'. The…
godblessstrawberry
  • 4,556
  • 2
  • 40
  • 58
0
votes
1 answer

Parse Error When Trying To Use theme() Inside calc()

I'm using Tailwind CSS with PostCSS via Gulp. Just about everything works great. I'm trying to reference values from the config theme object in my CSS. I'm able to do the following just fine: height: theme('spacing.12'); However, when I try to use…
jbyrd
  • 5,287
  • 7
  • 52
  • 86
0
votes
1 answer

@import not applied using PostCSS/CSSNext

I am using React with Webpack 4. I am trying to import the BassCSS classes in my index.css: @import "basscss" @import "basscss-colors" @import "basscss-background-colors" However, it seems like the imports are not applied. Webpack does not throw…
mitchkman
  • 6,201
  • 8
  • 39
  • 67
0
votes
0 answers

Does Styled Components have cssnext baked in?

I just realized while setting up a new React project today that Styled Components has autoprefixer backed in — does it also have cssnext baked in, or do I need to install postcss-cssnext?
J.C. Hiatt
  • 176
  • 1
  • 10
0
votes
1 answer

gulp: PostCSS failing - postcss version higher than version of postcss-import

Im trying to transform my css with PostCss using Gulp. When I add the cssnext plugin to PostCss I get the following error: Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.19, but postcss-import uses 4.1.16. Perhaps this is…
xooback
  • 523
  • 6
  • 14
0
votes
1 answer

How can I save a class property in a variable with PostCSS?

I want to save a dynamic property in a variable and then I want to use that variable with calc() I have a class with a dynamic height .cuerpo-detalle { height: x; } I want to assign a variable with the height property of the class…
Juan Pablo Andaluz
  • 25
  • 2
0
votes
1 answer

Is it possible to pass PostCSS cssnext customProperties variables from `css` file

When using PostCSS with webpack, I'm using postcss-cssnext with this options for custom properties: pcssNext({ features: { customProperties: { variables: { 'button-border-radius': '10px' …
udidu
  • 8,269
  • 6
  • 48
  • 68
0
votes
1 answer

Parsing cssnext to JSON

I have a cssnext file containing global colours, example: // ../properties.css :root{ --colourOne:#000000 --colourTwo:#000001 } I wish to parse these to a JSON object so that editing the colours may automatically update the styleguide where…
Jareth
  • 123
  • 1
  • 9
0
votes
1 answer

multi-level nest in postcss doesn't work

when I use postcss-loader and postcss-cssnext plugin, the css-class can be effect in the front of the second nest, in the third nest will doesn't work style.css .root { background-color: #ccc; & .header { height:…
taven
  • 543
  • 1
  • 5
  • 10
0
votes
1 answer

Expected a trailing semicolon (declaration-block-trailing-semicolon)

Trying to use nesting rules via postcss, but getting warnings below. What rules I need to add in stylelint file to fix these warnings? Here is the css: .count-sec { height: 520px; & p { color:#fff; margin: 0; …
FarazShuja
  • 2,287
  • 2
  • 23
  • 34
0
votes
1 answer

i use gulp-postcss and postcss-cssnext to translate css，and got problems

i use cssnext to write my css :root{ --ellipsis: { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }; }; and use @apply --ellipsis in 3 places .div1{ @apply --ellipsis } .div2{ @apply…
jiuri
  • 11
  • 2
0
votes
1 answer

PostCSS-cssnext does not compile CSS-input

I have a problem with postcss-cssnext: It does not compile my CSS the way I expect it to. This is my CSS-input: :root { --bgcolor: #fbc547; } body { background-color: var(--bgcolor); } Unfortunately the output looks exactly the same — however…
Patrick
  • 1
  • 2
0
votes
3 answers

Should I use twitter bootstrap or javascript to hide a div?

I am using reactJS and I would like to hide a div on smaller screen (width<768px). I have two options here: First Method: { !!isSmallerScreen ?
Icon
:
Name
} Description: isSmallScreen is…
Muhammad Ateeq Azam
  • 1,009
  • 1
  • 12
  • 26
0
votes
1 answer

postcss-cssnext not processing output

I'm trying to setup postcss-cssnext and must be missing something because when I run npm run postcss my output file is created but it looks like the input file (except for some whitepace differences). My postcss.config.js file is being loaded but…
ryanve
  • 50,076
  • 30
  • 102
  • 137
1
2
3