Questions tagged [postcss]

PostCSS is a tool for transforming styles with JavaScript plugins. These plugins can support variables, mixins, transpile future CSS syntax, inline images, and more.

PostCSS is used by industry leaders including Google, Twitter, Alibaba, and Shopify. The Autoprefixer PostCSS plugin is one of the most popular CSS processors.

PostCSS can do the same work as preprocessors like Sass, Less, and Stylus. But PostCSS is modular, 3-30 times faster, and much more powerful.

1028 questions
0
votes
1 answer

Webpack2-React. Imported classNames do not target the component class after bundling

If the elements are refernced directly by tag refernce (, ...) the styles are applied, otherwise not. If we explore the DOM in the chrome console it visible that the styles where loaded: Component layout import React, { Component } from…
volna
  • 2,452
  • 4
  • 25
  • 61
0
votes
1 answer

Cannot install postcss-loader

I'm really new to webpack, react, babel, etc. I had this working at one time, but I screwed something up and now I can't seem to fix it back. I have tried to get this to work for days now. The only guidance I have been able to find says update npm…
Danny Ellis Jr.
  • 1,674
  • 2
  • 23
  • 38
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
1 answer

react-toolbox 2.0-beta.6 themeprovider not working

i've been trying to override the color-primary and color-accent vars in react-toolbox using react-toolbox-themr but i've been unsuccessful. i've put together a simple git repo to demonstrate. here's my react-toolbox-themr.config.json { …
rkstar
  • 1,178
  • 14
  • 27
0
votes
0 answers

How to use autoprefixer with Webpack 1.x.x?

I'm writing an Angular 1.5.x app with components that embed their own style. The component define a linear-gradient background which works fine on Firefox but need the vendor prefix in Chromium. Here is what I have done so…
0
votes
1 answer

postcss - create custom properties in a loop

I just moved from SCSS to PostCSS with Webpack and I'm wondering if it's possible to create custom properties dynamically. A simple example: /* input */ :root { @for $i from 1 to 3 { --layout-flex-$(i): { flex: $i; } …
sandrina-p
  • 3,794
  • 8
  • 32
  • 60
0
votes
1 answer

Can I bundle sass and css under bower_components with using gulp

I use gulp-compass and gulp-postcss. I couldn't find best way to locate css files and the dependencies files public folder like webroot/css with gulp. I show partial gulpfile.js bellow. var postcss = require('gulp-postcss'); var cssnano =…
tkowt
  • 185
  • 1
  • 13
0
votes
1 answer

path wildcards in npm tasks (windows vs. linux)

I am having an issue with the following npm task that runs autoprefixer against a wildcard path: "css:autoprefix": "postcss -u autoprefixer --autoprefixer.browsers \"Last 2 versions\" -r src/frontend/app/**/*.css" The command works perfectly on…
JRulle
  • 7,448
  • 6
  • 39
  • 61
0
votes
0 answers

What is wrong with how I am using media queries in css-next?

I seem to be having trouble seeing an issue with the way I am trying to add my media query. I have read the specs and it seems correct. I'm using the postcss-cssnext package. I must have something slightly wrong as it is not being applied, any…
nickmcblain
  • 155
  • 1
  • 2
  • 12
0
votes
1 answer

Vue single file component and SugarSS from PostCSS with Webpack

I'm trying to use SugarSS in Vue single file components and Webpack 2, but no luck so far. Here's my component file: