`postcss-cssnext` has been deprecated in favor of `postcss-preset-env`.
Home Page: https://moox.io/blog/deprecating-cssnext/
License: MIT License
Read more at https://moox.io/blog/deprecating-cssnext/
PostCSS plugin to use tomorrow’s CSS syntax, today.
PostCSS-cssnext is a PostCSS plugin that helps you to use the latest CSS syntax today. It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.
using postcss-color
is it too long ?
Hey, awesome postprocessor! Love it. But will be provided such things like image-set()? I just seen @pepelsbey' presentation and realized that we can to do it with existing @media queries.
Like so:
source.css
E {
background-image: url(picture.png);
background-image: image-set(
url(small.jpg) 1x,
url(medium.jpg) 2x);
}dist.css
E {
background-image: url(picture.png);
}
@media (min-resolution: 1dppx) {
E {
background-image: url(small.jpg)
}
}
@media (min-resolution: 2dppx) {
E {
background-image: url(medium.jpg)
}
}using postcss-custom-media
Edit: package is ready
Using a list of browser version we should be able to enable/disable a feature.
Note: some feature might require some other (eg: if custom props are disabled (untouched), but color enabled, var() in color() won't be resolved & browser wont be able to resolve it too since color is unsupported (in this case)). Not sure this can happen, we will see how browsers implement stuff :/
Nested media queries are working on latest Firefox, Chrome & Safari 8, but not on IE.
We should make this work by moving rules into new media queries using and.
I'll create a 5$ logo until I want to take time for something better.
Autoprefixer 3.0 brings two API changes:
autoprefixer-core package for plugin development. It has no file system and CLI code and has no fs-extra dependency.options object: autoprefixer({ browsers: browsers }).Async tests are using one unique filename for the output. It's bad and sometimes some tests fail.
There's no documentation about passing options into plugins (e.g., postcss-custom-properties) but it looks like the options are passed to every plugin. That means postcss and all the plugins share the same level of the options and there's a chance for collisions if any of them use properties with the same name.
Maybe make it possible to set the value of a feature to be an options object?
Please comment here what you want to see in v1.0.0 & vote (+1/-1) for the things you want to see/don't see.
browsers option a la autoprefixer (not useful right now, but I hope will be in the future)preserve option that will make output more like autoprefixer (spoiler: dangerous option if we consider how buggy are variables & calc are in Firefox)browsers options, this will probably be disabled by default):matches supportYou can also consider API & available features are enough for v1.0.0 (but I don't think so).
If you see some other things I don't think about, please express yourself :)
What are they for in here?
cssnext input.css > output.cssvar cssnext = require("cssnext")
var out = cssnext("some css{}")using postcss-calc
Edit: package is ready
using postcss-custom-properties
Edit: package is ready
I'm trying to use this as a PostCSS plugin via https://github.com/nDmitry/grunt-postcss
grunt.initConfig({
postcss: {
options: {
map: true,
processors: [
require('cssnext')(),
require('autoprefixer-core')({browsers: 'last 1 version'}).postcss,
require('csswring').postcss
]
},
dist: {
src: 'css/*.css'
}
}
});
Running this task throws this:
Warning: Property '0' of object [object Object] is not a function
Other PostCSS seem to work fine.
Also posted here: nDmitry/grunt-postcss#8
Any ideas?
Some people doesn't follow semver :(
I've made a PR to start the fix colorjs/color-name#2
Ran npm install then npm test and 3 tests failed:
not ok 52 should throw an error
---
operator: ok
expected: true
actual: null
...
not ok 53 should output a readable error
---
operator: ok
expected: true
actual: false
...
not ok 54 should show the url where to report bugs
---
operator: ok
expected: true
actual: false
...
var cssnext = require("cssnext")
typeof cssnext === "function" // should be trueNot sure if this should be the default behavior.
We need make something like autoprefixer to select browser support.
Like rework-font-variant.
Since cssnext only return process().css, sourcemap is only suported when inlined in output. If specific sourcemap options are provided to postcss ( map, from) process() return an object with {css: "output", map: "sourcemap"}
To avoir breaking changes, perhaps cssnext should return an object only if postcss return map prop.
:root {
--base-link-color: #000;
--base-link-color-hover: color(var(--base-link-color) lightness(+10%));
}
a {
color : var(--base-link-color-hover);
}should yields into something like:
a {
color: rgb(255, 51, 51);
}And not throw an error: Error: Unable to parse color from string var(--base-link-color)
body :matches(h1, h2) {
color: red;
}should yields into
body h1, body h2 {
color: red;
}poke @eramdam
ps : will try to submit a fix during my lunch time ;)
https://github.com/postcss/postcss/releases/tag/4.0.0
Plugins to update:
using postcss-import
Edit: package is ready
As is done with autoprefixer and autoprefixer-core. It's nice be able to install just the Node API because any module that wants to use this – or a complicated build process – is unlikely to use this tool's CLI.
@import "header.css"
if file is empty :
>> File "header.css" changed.
Running "cssnext:dist" (cssnext) task
Warning: Cannot set property 'before' of undefined Use --force to continue.
body {
font-size: var(--fontSize;
}Give on the playground
TypeError: balanced(...) is undefined
And with cli
cssnext encounters an error:
Cannot read property 'body' of undefined
at resolveValue (/Users/MoOx/Sync/Development/cssnext/playground/node_modules/cssnext/node_modules/postcss-custom-properties/index.js:96:66)
at /Users/MoOx/Sync/Development/cssnext/playground/node_modules/cssnext/node_modules/postcss-custom-properties/index.js:62:23
at /Users/MoOx/Sync/Development/cssnext/playground/node_modules/cssnext/node_modules/postcss/lib/container.js:402:30
at Rule.Container.each (/Users/MoOx/Sync/Development/cssnext/playground/node_modules/cssnext/node_modules/postcss/lib/container.js:88:20)
at Rule.Container.WithDecls.constructor$1.eachDecl (/Users/MoOx/Sync/Development/cssnext/playground/node_modules/cssnext/node_modules/postcss/lib/container.js:400:21)
at /Users/MoOx/Sync/Development/cssnext/playground/node_modules/cssnext/node_modules/postcss/lib/container.js:331:36
at Root.Container.each (/Users/MoOx/Sync/Development/cssnext/playground/node_modules/cssnext/node_modules/postcss/lib/container.js:88:20)
at Root.Container.WithRules.constructor$0.eachDecl (/Users/MoOx/Sync/Development/cssnext/playground/node_modules/cssnext/node_modules/postcss/lib/container.js:329:21)
at /Users/MoOx/Sync/Development/cssnext/playground/node_modules/cssnext/node_modules/postcss-custom-properties/index.js:55:11
at PostCSS.process (/Users/MoOx/Sync/Development/cssnext/playground/node_modules/cssnext/node_modules/postcss/lib/postcss.js:34:28)
Tested with gulp-cssnext, I noticed that @import rules don't work if the path is being relative to the .css file. Given the following structure
.
├── css
│ ├── import.css
│ └── sub-folder
│ ├── import-abs.css
│ └── import-rel.css
├── gulpfile.js
├── out
│ └── import-abs.css
└── package.json
With import-abs.css having
@import "css/import.css";And import-rel.css having
@import "../import.css";And the gulpfile.js having this
var gulp = require("gulp");
var cssnext = require("gulp-cssnext")
gulp.task("css:relative", function() {
gulp.src("css/sub-folder/import-rel.css")
.pipe(cssnext({
compress : true
}))
.pipe(gulp.dest("./out"))
});
gulp.task("css:absolute", function() {
gulp.src("css/sub-folder/import-abs.css")
.pipe(cssnext({
compress : true
}))
.pipe(gulp.dest("./out"))
});Then, gulp css:relative returns
[11:59:29] Using gulpfile ~/Desktop/cssnext-import-bug/gulpfile.js
[11:59:29] Starting 'css:relative'...
[11:59:29] Finished 'css:relative' after 16 ms
events.js:72
throw er; // Unhandled 'error' event
^
Error: undefined1:1: Failed to find ../import.css
in [
/Users/Damien/Desktop/cssnext-import-bug
]
at resolveFilename (/Users/Damien/Desktop/cssnext-import-bug/node_modules/gulp-cssnext/node_modules/cssnext/node_modules/postcss-import/index.js:133:11)
at readAtImport (/Users/Damien/Desktop/cssnext-import-bug/node_modules/gulp-cssnext/node_modules/cssnext/node_modules/postcss-import/index.js:82:26)
at checkAtRule (/Users/Damien/Desktop/cssnext-import-bug/node_modules/gulp-cssnext/node_modules/cssnext/node_modules/postcss-import/index.js:61:5)
at /Users/Damien/Desktop/cssnext-import-bug/node_modules/gulp-cssnext/node_modules/cssnext/node_modules/postcss/lib/container.js:374:30
at /Users/Damien/Desktop/cssnext-import-bug/node_modules/gulp-cssnext/node_modules/cssnext/node_modules/postcss/lib/container.js:110:26
at Root.Container.each (/Users/Damien/Desktop/cssnext-import-bug/node_modules/gulp-cssnext/node_modules/cssnext/node_modules/postcss/lib/container.js:88:20)
at Root.Container.eachInside (/Users/Damien/Desktop/cssnext-import-bug/node_modules/gulp-cssnext/node_modules/cssnext/node_modules/postcss/lib/container.js:109:21)
at Root.Container.WithRules.constructor$0.eachAtRule (/Users/Damien/Desktop/cssnext-import-bug/node_modules/gulp-cssnext/node_modules/cssnext/node_modules/postcss/lib/container.js:372:21)
at parseStyles (/Users/Damien/Desktop/cssnext-import-bug/node_modules/gulp-cssnext/node_modules/cssnext/node_modules/postcss-import/index.js:56:10)
at /Users/Damien/Desktop/cssnext-import-bug/node_modules/gulp-cssnext/node_modules/cssnext/node_modules/postcss-import/index.js:45:5And of course gulp css:absolute works like expected
[11:59:54] Using gulpfile ~/Desktop/cssnext-import-bug/gulpfile.js
[11:59:54] Starting 'css:absolute'...
[11:59:54] Finished 'css:absolute' after 14 ms🎉
Using the command npm run build on the grid component cssrecipes I get this error:
module.js:340
throw err;
^
Error: Cannot find module 'exit'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.<anonymous> (/Users/mac/Sandbox/grid/node_modules/cssnext/bin/cssnext:9:12)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
I tested with version 0.5.0, it works, but since 0.6.0 I get an error.
I originally filed this over at webcompat/webcompat.com#394.
I used to have:
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
Deleting node_modules and reinstalling I now have:
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
And now grunt cssnext fails with "Cannot read property '_autoprefixerDisabled' of undefined'"
https://github.com/cssnext/cssnext#nodejs-options
prefixes -> autoprefixer
:root {
--fontSize: 3rem;
}
body { font-size: calc(var(--fontSize) * 1.2); }gives
body { font-size: 3.5999999999999996rem; }CSS next :
/* custom media query usage */
@media (--viewport-medium) {
body { font-size: calc(var(--fontSize) * 1.2); }
}
/* custom media query usage */
@media (--viewport-medium) {
p { font-size: calc(var(--fontSize) * 1.2); }
}CSSnext generates
/* custom media query usage */
@media (max-width: 50em) {
body { font-size: 1.2rem; }
}
/* custom media query usage */
@media (max-width: 50em) {
p { font-size: 1.2rem; }
}It would be nice if media queries could be grouped:
/* custom media query usage */
@media (max-width: 50em) {
body { font-size: 1.2rem; }
p { font-size: 1.2rem; }
}No ?
For v1.0 we need all those packages:
Issues
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.