diff --git a/.eslintrc b/.eslintrc index 1b4bd1c..440906a 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,5 +1,8 @@ --- -# babel support more syntax stuff than eslint for now +root: true +extends: eslint:recommended + +# babel-eslint support more syntax stuff than eslint for now parser: babel-eslint ecmaFeatures: @@ -27,31 +30,34 @@ plugins: # 0: off, 1: warning, 2: error rules: + no-console: 0 + indent: [2, 2] # 2 spaces indentation max-len: [2, 80, 4] - no-multiple-empty-lines: [2, {"max": 1}] quotes: [2, "double"] + jsx-quotes: [2, "prefer-double"] semi: [2, "never"] + no-multiple-empty-lines: [2, {"max": 1}] brace-style: [2, "stroustrup"] comma-dangle: [2, "always-multiline"] comma-style: [2, "last"] - computed-property-spacing: [2, "never"] dot-location: [2, "property"] - no-var: [2] - no-bitwise: [2] one-var: [2, "never"] + no-var: [2] prefer-const: [2] + no-bitwise: [2] + + object-curly-spacing: [2, "always"] + array-bracket-spacing: [2, "always"] + #computed-property-spacing: [2, "always"] - array-bracket-spacing: [2, "never"] - object-shorthand: [2, "methods"] - object-curly-spacing: [2, "never"] + space-unary-ops: [2, {"words": true, "nonwords": false}] space-after-keywords: [2, "always"] space-before-blocks: [2, "always"] space-before-function-paren: [2, "never"] space-in-parens: [2, "never"] - space-unary-ops: [2, {"words": true, "nonwords": false}] spaced-comment: [2, "always"] # see globals @@ -60,7 +66,6 @@ rules: # eslint-plugin-react rules react/jsx-boolean-value: 2 react/jsx-no-undef: 2 - react/jsx-quotes: 2 #react/jsx-sort-prop-types: 2 #react/jsx-sort-props: 2 react/jsx-uses-react: 2 diff --git a/.gitignore b/.gitignore index b0ecf2b..06b6d80 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,6 @@ +# npm node_modules -dist +# build +lib docs/dist diff --git a/CHANGELOG.md b/CHANGELOG.md index c63fde7..265f560 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,47 @@ +# 2.3.0 - 2015-12-16 + +- Added: we use latest version of pixrem(@^3) +([6d44410](https://github.com/MoOx/postcss-cssnext/commit/6d4441023f30895211f010776b142d02359f4d0a)) +So now `rem` have +[2 new parameters](https://github.com/robwierzbowski/node-pixrem#options): + - ``rootValue`` to define the root element font-size manually + - ``unitPrecision`` for rounded values + +# 2.2.0 - 2015-10-21 + +- Added: [postcss-nesting](https://github.com/jonathantneal/postcss-nesting) +([b31f167](https://github.com/MoOx/postcss-cssnext/commit/b31f167d7659a18a14fce65a7a94da07560e6a59)). +Supports nesting via the `@nest` syntax. See postcss-nesting documentation. + +# 2.1.0 - 2015-09-16 + +- Added: [postcss-initial](https://github.com/maximkoretskiy/postcss-initial) +([a907881](https://github.com/MoOx/postcss-cssnext/commit/a90788153801a3f898f6cc1ade189d4de2af3367)). +Supports `initial` value for all properties. Also it supports `all: initial`. +_Does not support `all: unset` and `all: inherit`._ +Plugin can be useful for creating isolated components. + - `all` specification: https://drafts.csswg.org/css-cascade/#all-shorthand + - `all` browsers support: http://caniuse.com/#feat=css-all + - `initial` value specification: https://drafts.csswg.org/css-cascade/#initial-value + - `initial` value browser support: http://caniuse.com/#feat=css-initial-value + +# 2.0.1 - 2015-09-14 + +- Fixed: plugin can be consumed correctly from es5 environment +([7d6d3c0](https://github.com/MoOx/postcss-cssnext/commit/7d6d3c018d8ca17091d4cfe3d5d61e246ad8775d)). + +# 2.0.0 - 2015-09-14 + +- Added: support for PostCSS v5.x +- Removed: support for PostCSS v4.x +([b5ece99...8907c13](https://github.com/MoOx/postcss-cssnext/compare/b5ece99c1e1b5e4cdfd6c25f856946bbcbc2247c...8907c13d31662a2cb393edb0387144dfbba81659)). + +--- + +**pre 2.0.0 information was related to `cssnext` package.** + +--- + # 1.8.4 - 2015-08-24 - Fixed: `compress` option now works again correctly. A recent update in cssnano @@ -5,7 +49,7 @@ has introduced some minor breaking changes the way cssnext changed plugins metadata (`pluginName`). A direct minor change is that `messages` (in console or in css output) now show real origin (postcss plugin name) instead of a vague "cssnext" origin. -([#195](https://github.com/cssnext/cssnext/issues/195)) +([#195](https://github.com/MoOx/postcss-cssnext/issues/195)) # 1.8.3 - 2015-08-06 @@ -15,28 +59,28 @@ severals fixes. # 1.8.2 - 2015-07-23 - Fixed: CLI watcher now works watchs correctl multiples `@import` -([#123](https://github.com/cssnext/cssnext/issues/123)) +([#123](https://github.com/MoOx/postcss-cssnext/issues/123)) # 1.8.1 - 2015-07-15 - Added: cssnext now throw an error if used as a webpack loader to prevent unexpected usage with a recommendation for -[cssnext-loader](https://github.com/cssnext/cssnext-loader) -([#61](https://github.com/cssnext/cssnext/issues/61)) +[cssnext-loader](https://github.com/MoOx/postcss-cssnext-loader) +([#61](https://github.com/MoOx/postcss-cssnext/issues/61)) # 1.8.0 - 2015-06-29 - Fixed: replacement of `postcss-log-warnings` (deprecated) by `postcss-reporter` -([#162](https://github.com/cssnext/cssnext/issues/162)) +([#162](https://github.com/MoOx/postcss-cssnext/issues/162)) - Fixed: CLI now add `to` option automatically -([#159](https://github.com/cssnext/cssnext/issues/159)) +([#159](https://github.com/MoOx/postcss-cssnext/issues/159)) If you were happy with the previous CLI behavior (which was not rebasing url), you should probably just add the `--no-url` to keep the CSS as it was. - Changed: `compress` option now use cssnano v2.x -([#166](https://github.com/cssnext/cssnext/issues/166)) +([#166](https://github.com/MoOx/postcss-cssnext/issues/166)) - Added: CLI output file dirname is now automatically created (using `mkdirp`) -([#146](https://github.com/cssnext/cssnext/issues/146)) +([#146](https://github.com/MoOx/postcss-cssnext/issues/146)) # 1.7.1 - 2015-06-19 @@ -52,28 +96,28 @@ Now you must use `@custom-selector :--{name}` syntax instead of `@custom-selector --{name}` The support of syntax without : and the warning message will be remove in the next major release -([#97](https://github.com/cssnext/cssnext/issues/97)) +([#97](https://github.com/MoOx/postcss-cssnext/issues/97)) - Added: `plugins` option that allows you to pipe your own transformations -([#118](https://github.com/cssnext/cssnext/issues/118)) +([#118](https://github.com/MoOx/postcss-cssnext/issues/118)) - Added: `messages` option that allows you to see messages of transformations -([#88](https://github.com/cssnext/cssnext/issues/88)) +([#88](https://github.com/MoOx/postcss-cssnext/issues/88)) - Added: `:any-link` pseudo class support # 1.6.0 - 2015-06-02 - Added: prevent mutability issues with frozen options objects -([#147](https://github.com/cssnext/cssnext/pull/147)) +([#147](https://github.com/MoOx/postcss-cssnext/pull/147)) # 1.5.2 - 2015-05-27 - Fixed: support for autoprefixer 5.2 -([#131](https://github.com/cssnext/cssnext/issues/131)) +([#131](https://github.com/MoOx/postcss-cssnext/issues/131)) # 1.5.1 - 2015-05-25 - Fixed: when printing a bug report in CLI, url was not printed, due to a replacement of colors lib by chalk in 1.5.0 -([#129](https://github.com/cssnext/cssnext/pull/129)) +([#129](https://github.com/MoOx/postcss-cssnext/pull/129)) # 1.5.0 - 2015-05-23 @@ -121,7 +165,7 @@ files anymore # 1.0.1 - 2015-02-18 - Fixed: cssnext binary doesn't exit on an error if --watch is enabled -([#69](https://github.com/cssnext/cssnext/pull/69)) +([#69](https://github.com/MoOx/postcss-cssnext/pull/69)) # 1.0.0 - 2015-02-06 @@ -162,7 +206,7 @@ autoprefixer # 0.6.6 - 2014-12-22 - Fixed: `Cannot find module 'exit'` error when an error came out -([#54](https://github.com/cssnext/cssnext/issues/54)) +([#54](https://github.com/MoOx/postcss-cssnext/issues/54)) # 0.6.5 - 2014-12-16 @@ -216,7 +260,7 @@ v3.0.0 have by default `{inline: true, sourceContent: true}` # 0.4.3 - 2014-11-09 - Added: font-variant support -([#42](https://github.com/cssnext/cssnext/issues/42)) +([#42](https://github.com/MoOx/postcss-cssnext/issues/42)) # 0.4.2 - 2014-11-02 @@ -225,17 +269,17 @@ v3.0.0 have by default `{inline: true, sourceContent: true}` - Added: echo a warning when using a non root custom properties ([#13](https://github.com/postcss/postcss-custom-properties/issues/13)) - Added: cssnext can return a postcss instance of no string given -([#3](https://github.com/cssnext/cssnext/issues/3)) +([#3](https://github.com/MoOx/postcss-cssnext/issues/3)) # 0.4.1 - 2014-11-01 - Added: gray() support -([#44](https://github.com/cssnext/cssnext/issues/44)) +([#44](https://github.com/MoOx/postcss-cssnext/issues/44)) # 0.4.0 - 2014-10-23 - Changed: color feature has been exploded to multiples features -([#40](https://github.com/cssnext/cssnext/issues/40)). +([#40](https://github.com/MoOx/postcss-cssnext/issues/40)). Before @@ -271,7 +315,7 @@ var output = cssnext(input, { - Changed: cssnext options are not passed to all plugins anymore. You know need to specify feature options by passing object to `features` properties -([#39](https://github.com/cssnext/cssnext/issues/39)). +([#39](https://github.com/MoOx/postcss-cssnext/issues/39)). Before @@ -306,7 +350,7 @@ This change have been made to avoid collision between options # 0.3.1 - 2014-08-27 - Fixed: nested custom properties usages -([#25](https://github.com/cssnext/cssnext/issues/25)) +([#25](https://github.com/MoOx/postcss-cssnext/issues/25)) # 0.3.0 - 2014-08-26 @@ -316,7 +360,7 @@ This change have been made to avoid collision between options # 0.2.3 - 2014-08-26 - Fixed: support empty files -([#24](https://github.com/cssnext/cssnext/issues/24)) +([#24](https://github.com/MoOx/postcss-cssnext/issues/24)) # 0.2.2 - 2014-08-22 diff --git a/README.md b/README.md index 6e3cdce..701831e 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,17 @@ -# cssnext +# postcss-cssnext -[](https://www.npmjs.org/package/cssnext) -[](https://travis-ci.org/cssnext/cssnext) -[](https://ci.appveyor.com/project/MoOx/cssnext) -[](https://gitter.im/cssnext/cssnext) +[](https://www.npmjs.org/package/postcss-cssnext) +[](https://travis-ci.org/cssnext/postcss-cssnext) +[](https://ci.appveyor.com/project/MoOx/postcss-cssnext) +[](https://gitter.im/MoOx/postcss-cssnext) -> Use tomorrow's CSS syntax, today. +> Use tomorrow’s CSS syntax, today. -cssnext is a CSS transpiler that allows 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. +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. + +--- ## Check out [cssnext website](http://cssnext.io/) @@ -17,13 +19,14 @@ It transforms CSS specs into more compatible CSS so you don’t need to wait for - [Setup](http://cssnext.io/setup/) - [Usage](http://cssnext.io/usage/) - [Playground](http://cssnext.io/playground/) +- [Migration to postcss-cssnext](http://cssnext.io/postcss/) For questions and support please visit the -[gitter room](https://gitter.im/cssnext/cssnext). +[gitter room](https://gitter.im/MoOx/postcss-cssnext). --- -_The [issue tracker](https://github.com/cssnext/cssnext/issues) is exclusively for bug reports and feature requests._ +_The [issue tracker](https://github.com/MoOx/postcss-cssnext/issues) is exclusively for bug reports and feature requests._ --- diff --git a/appveyor.yml b/appveyor.yml index be1c2ed..336e1af 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -9,6 +9,8 @@ environment: version: "{build}" build: off deploy: off +matrix: + fast_finish: true install: - ps: Install-Product node $env:nodejs_version @@ -17,5 +19,4 @@ install: test_script: - node --version - npm --version - - ps: "npm test # PowerShell" - - cmd: "npm test" + - npm test diff --git a/docs/content/features.md b/docs/content/features.md index 68125bc..7e1d000 100644 --- a/docs/content/features.md +++ b/docs/content/features.md @@ -1,5 +1,5 @@ --- -title: cssnext features +title: postcss-cssnext features subtitle: Discover the future of CSS backgroundModifier: darkRoad @@ -337,30 +337,13 @@ body { _Note that according to your [browser scope](#nodejs-options) some might be not transpiled to avoid extra useless output._ -## Bonus features - -_The features below are considered as bonus since it's totally not -related to CSS specs._ - -### `@import` - -`@import` inline local files and modules - `node_modules` or `web_modules` -([⇗](https://github.com/postcss/postcss-import)) to output a bundled CSS file. -`url()` referenced are also rebased. - -### minification - -minification/compression is available ([⇗](https://github.com/ben-eb/cssnano)) -if you want to compress the output for production. - - ## @todo Any omissions of the CSS specifications (even in draft) that are subject to be handled by cssnext are not intentional. -You can take a look at the [list of features that are waiting to be implemented](https://github.com/cssnext/cssnext/issues?q=is%3Aopen+is%3Aissue+label%3A%22type%3A+feature+request%22). +You can take a look at the [list of features that are waiting to be implemented](https://github.com/MoOx/postcss-cssnext/issues?q=is%3Aopen+is%3Aissue+label%3A%22type%3A+feature+request%22). Feel free to work on a feature ready to be added, or -[open a new issue](https://github.com/cssnext/cssnext/issues/new) +[open a new issue](https://github.com/MoOx/postcss-cssnext/issues/new) if you find something that should be handled. Keep in mind that, as of right now, this project is intended to support new CSS *syntax* only. diff --git a/docs/content/index.md b/docs/content/index.md index c0140d6..46c5e2d 100644 --- a/docs/content/index.md +++ b/docs/content/index.md @@ -1,17 +1,17 @@ --- template: Simple -title: cssnext - Use tomorrow's CSS syntax, today. +title: cssnext - Use tomorrow’s CSS syntax, today. ---
diff --git a/docs/content/postcss.md b/docs/content/postcss.md new file mode 100644 index 0000000..9674b46 --- /dev/null +++ b/docs/content/postcss.md @@ -0,0 +1,194 @@ +--- +title: Using postcss-cssnext +subtitle: How to migrate from cssnext to postcss-cssnext +--- + +## Why **postcss-cssnext**? What is the difference with **cssnext**? + +### Short answer: PostCSS + +If you're using [PostCSS](https://github.com/postcss/postcss) +in your build process, and were using `cssnext`, +you can quickly switch to only `postcss-cssnext` +(check the [Migration](#migration) section here below). + +### Wait? What is PostCSS? + +cssnext was at first designed to be a complete tool, before PostCSS became +popular; thus, includes some options that don't really belong in a PostCSS +plugin focused on the future of CSS +(e.g., `import`, `url`, `compress`, `plugins`...) . + +These days, most people use [PostCSS](https://github.com/postcss/postcss) +directly (so they can easily adjust and choose their CSS transformations) +so we decided to make integration and of cssnext more simple by providing a +simple (real) plugin. + +Also, having to maintain severals cssnext and PostCSS runners that does almost +the same is not optimal. + +### Migration + +If you were using cssnext with some options here is what you need to know: + +#### Options + +##### Options `import`, `url`, `compress`, `messages` + +- `import` options is just + [`postcss-import`](https://github.com/postcss/postcss-import) +- `url` option is just + [`postcss-url`](https://github.com/postcss/postcss-url) +- `compress` option is just + [`cssnano`](https://github.com/ben-eb/cssnano) +- `messages`: was a combination of + [`postcss-reporter`](https://github.com/postcss/postcss-reporter) + and + [`postcss-browser-reporter`](https://github.com/postcss/postcss-browser-reporter). + Just pick up the one you want (or both). + +##### Option `plugins` + +Just add the plugins directly in your PostCSS list. + +##### Options `sourcemap`, `map`, `to`, `from` + +These options were just proxy to [PostCSS source map options](https://github.com/postcss/postcss/blob/master/docs/source-maps.md). + +#### Examples + +If you were using cssnext with default options, you might just need this: + +```console +$ npm uninstall cssnext [--save[-dev]] +$ npm install postcss postcss-import postcss-url postcss-cssnext postcss-browser-reporter postcss-reporter [--save[-dev]] +``` + +With the previous lines you might thing that you are going backward by having a +more complex boilerplate. But if you look carefully, you will notice that you +might not be interested by some options. + +Now that you have the appropriate plugins, here are some examples with some runners +and previous default cssnext behavior. + +##### [postcss-cli](https://www.npmjs.com/package/postcss-cli) + +```console +$ npm install postcss-cli --save-dev +``` + +Here is an example of the json config you might use with something like +``$ postcss-cli -c postcss.config.json``. + +```js +{ + "use": [ + "postcss-import", + "postcss-url", + "postcss-cssnext", + // add your "plugins" here + // ... + // and if you want to compress + // "cssnano", + "postcss-browser-reporter", + "postcss-reporter", + ] +} +``` + +##### [grunt-postcss](https://www.npmjs.com/package/grunt-postcss) + +```console +$ npm uninstall grunt-cssnext --save-dev +$ npm install grunt-postcss --save-dev +``` + +```js +grunt.initConfig({ + postcss: { + options: { + processors: [ + require("postcss-import")(), + require("postcss-url")(), + require("postcss-cssnext")(), + // add your "plugins" here + // ... + // and if you want to compress + // require("cssnano")(), + require("postcss-browser-reporter")(), + require("postcss-reporter")(), + ] + }, + dist: { + src: 'css/*.css' + } + } +}); +``` + +##### [gulp-postcss](https://www.npmjs.com/package/gulp-postcss) + +```console +$ npm uninstall gulp-cssnext --save-dev +$ npm install gulp-postcss --save-dev +``` + +```js +var gulp = require('gulp') +var postcss = require('gulp-postcss') + +gulp.task('css', function () { + return ( + gulp.src('./src/*.css') + .pipe(postcss([ + require("postcss-import")(), + require("postcss-url")(), + require("postcss-cssnext")(), + // add your "plugins" here + // ... + // and if you want to compress + // require("cssnano")(), + require("postcss-browser-reporter")(), + require("postcss-reporter")(), + ])) + .pipe(gulp.dest('./dest')) + ) +}) +``` + +##### [postcss-loader](https://www.npmjs.com/package/postcss-loader) + +```console +$ npm uninstall cssnext-loader --save-dev +$ npm install postcss-loader --save-dev +``` + +```js +module.exports = { + module: { + loaders: [ + { + test: /\.css$/, + loader: "style-loader!css-loader!postcss-loader" + } + ] + }, + postcss: function (webpack) { + return [ + require("postcss-import")({ addDependencyTo: webpack }), + require("postcss-url")(), + require("postcss-cssnext")(), + // add your "plugins" here + // ... + // and if you want to compress, + // just use css-loader option that already use cssnano under the hood + require("postcss-browser-reporter")(), + require("postcss-reporter")(), + ] + } +} +``` + +**With those examples, you got it. +Feel free to adjust the configuration with the appropriate +[PostCSS runner](/setup/#usage).** diff --git a/docs/content/setup.md b/docs/content/setup.md index 3007377..9e8066f 100644 --- a/docs/content/setup.md +++ b/docs/content/setup.md @@ -1,149 +1,46 @@ --- -title: Install & setup cssnext -subtitle: How to use cssnext in your workflow +title: Install & setup postcss-cssnext +subtitle: How to use postcss-cssnext in your workflow backgroundModifier: darkTeam -incomplete: true --- - @[toc] - ## Installation -cssnext is available on -[github](https://github.com/cssnext/cssnext) -and [npm](https://www.npmjs.org/package/cssnext). - -```console -$ npm install cssnext -``` - -You can install it: - -- locally (`--save` or `--save-dev`), to use it through [npm scripts](https://www.npmjs.org/doc/misc/npm-scripts.html) (`npm run`) or via `.node_modules/.bin/cssnext` -- globally (`-g`), to use it through the [CLI](cli) _(not recommended)_ -- by using [other plugins & tools](#usage) like -[gulp-cssnext](https://github.com/cssnext/gulp-cssnext) -or -[cssnext-loader](https://github.com/cssnext/cssnext-loader) - -The main package offers -[a CLI](https://github.com/cssnext/cssnext#cli) and -[a Node.js/io.js API](https://github.com/cssnext/cssnext#nodejs-api"). - -### Install from git - -In order to install cssnext from the git repository (eg: if you want to try -the _master_ branch of the git repository), -you will need to build the package after the installation from git repository. -You can easily do this: +postcss-cssnext is available on [npm](https://www.npmjs.org/package/postcss-cssnext) ```console -$ npm i -D cssnext/cssnext && cd node_modules/cssnext && npm i && cd ../.. +$ npm install postcss postcss-cssnext ``` ## Usage -You can use cssnext using [CLI](#cli), -as [a JavaScript library](#nodejs-api), -as a [PostCSS](https://github.com/postcss/postcss) plugin -or through others tools below: +You can use directly PostCSS API but you will probably want to choose and use a +PostCSS runner that suits your workflow: -### CLI - -cssnext offers a command-line interface. -Here's how to compile a file and print it to stdout: - -```console -$ cssnext index.css -``` - -To create an output file, you can just add a second argument - -```console -$ cssnext index.css output.css -``` - -Or use CLI std(in|out) redirection(s) - -```console -$ cat input.css | cssnext > output.css -``` - -#### CLI options - -If you don't care about a certain feature, such as custom media queries, you can omit support for them like so: - -```console -$ cssnext --no-custom-media index.css -``` - -To enable source maps for these files, add the `--sourcemap` flag. - -_To see all CLI options_ - -```console -$ cssnext --help -``` - -### Node.js API - -cssnext can be used with its own API or as a PostCSS plugin. - -#### As a JavaScript library - -`var string = cssnext(string, options)` - -cssnext accepts 2 arguments: a css string and an object of options. - -```js -var fs = require("fs") -var cssnext = require("cssnext") - -var input = fs.readFileSync("index.css", "utf8") - -var output = cssnext(input) -fs.writeFileSync("dist/index.css", output) -``` - -**`/!\` Note: if you are using non inlined sourcemaps, cssnext will return an object: `{css: string, map: sourcemap}`** - -See -[sourcemap](/usage/#sourcemap) & -[map](/usage/#map) -options for more informations. - -#### As a PostCSS plugin +--- -`var postcssPlugin = cssnext(options)` +## Wait? What were is previous cssnext interface? -cssnext can be used as a postcss plugin: +[`cssnext` is dead. Long live to `postcss-cssnext`.](/postcss/) -```js -var fs = require("fs") -var postcss = require("postcss") -var cssnext = require("cssnext") -var input = fs.readFileSync("index.css", "utf8") +## Wait? What is PostCSS? -var output = postcss() - .use(cssnext()) - .use(/* your other postcss plugin */) - .process(input) -fs.writeFileSync("dist/index.css", output) -``` +[Here is what you are looking for.](https://github.com/postcss/postcss#readme) diff --git a/docs/content/usage.md b/docs/content/usage.md index 222ef26..4688252 100644 --- a/docs/content/usage.md +++ b/docs/content/usage.md @@ -1,7 +1,6 @@ --- -title: Using cssnext -subtitle: How to configure cssnext options -incomplete: true +title: Using postcss-cssnext +subtitle: How to configure postcss-cssnext options --- @[toc] @@ -102,148 +101,3 @@ To know all available options, please check corresponding postcss plugin: [(=> autoprefixer-core)](https://www.npmjs.com/package/autoprefixer-core) _Note: order is important to get everything working correctly._ - -## `import` - -_(default: `true`)_ - -Allows you to inline local `@import` files -(thanks to [postcss-import](https://github.com/postcss/postcss-import#readme)): - -* you can refer to - * `node_modules` packages - * `web_modules` packages - * `bower_components` packages - * local packages or files -* for packages, this will automatically - * look for `"style"` entry in `package.json` - * or will try to call `index.css` -* you can omit `.css` extension of filename - -_Note: you can pass -[postcss-import options](https://github.com/postcss/postcss-import#readme) -directly if needed._ - -## `url` - -_(default: `true`)_ - -By default, `url()` are rebased according to `from` (and `to`) option(s). -This is convenient especially for `@import`ed files. - -_Note: you can pass -[postcss-url options](https://github.com/postcss/postcss-url#options) -directly in order to inline or have more control over urls._ - -## `plugins` - -_(default: `[]`)_ - -Allows you to pass your own array of transformations. You can just pass your own -[PostCSS](https://github.com/postcss/postcss) plugins. - -```js -{ - plugins: [ - require("postcss-stuff"), - require("postcss-more-stuff"), - // custom transformation code - function(cssAst, result) { - // see https://github.com/postcss/postcss - }, - ], -} -``` - -## `compress` - -_(default: `false`)_ - -Allows you to compress the output -(using [cssnano](https://github.com/ben-eb/cssnano)). -You can enable minification by passing `true` or by providing an object -containing [cssnano options](http://cssnano.co/options/). - -## `messages` - -_(default: `true`)_ - -Allows you to show/hide some warnings messages. -Passing a boolean will enable/disable messages on all interfaces -(console + browser). -You can also pass a object to enable or disable some interfaces only: - - -```js -{ - messages: { - // if you want only messages in CSS - browser: true - - // if you want only messages in console - console: true, - } -} -``` - -By default, messages are removed when they have been displayed. -If you want, you can pass option to the PostCSS plugins used - -```js -{ - messages: { - browser: { - // see https://github.com/postcss/postcss-messages - } - - console: { - // see https://github.com/postcss/postcss-reporter - }, - } -} -``` - -## `sourcemap` - -_(default: `false`)_ - -This option is a shortcut to enable inlined sourcemap in the output. -Just pass `true` to get the sourcemap at the end of the output. - -- _If you want an accurate sourcemap, please also use the `from` option._ -- _If you want more control on the sourcemap, please use the `map` option -instead._ - -## `map` - -_(default: _depends on `sourcemap`: `undefined` if `sourcemap` is `false`, -`inline` if `sourcemap` it true)__ - -If you want better control on sourcemap, you are at the right place. -This is the -[postcss `map` option](https://github.com/postcss/postcss#source-map), -so checkout the related documentation directly. - -_If you specify this option, `sourcemap` value will be ignored._ - -**`/!\` Using this option might change the return value of `cssnext()` (`object` -instead of css `string` if map is not inlined. The object will be like -`{css: "{css string}", map: {sourcemap object}})`** - -## `from` - -(default: `null`) - -Source of the file. Required for accurate sourcemap. - -```js -var cssnext = require("cssnext") -var fs = require("fs") - -var source = "./index.css" -var output = cssnext( - fs.readFileSync(source, "utf8"), - {from: source} -) -fs.writeFileSync("dist/index.css", output) -``` diff --git a/docs/scripts/build.js b/docs/scripts/build.js index 1d89d75..bb56245 100644 --- a/docs/scripts/build.js +++ b/docs/scripts/build.js @@ -1,6 +1,6 @@ import path from "path" -import {sync as rm} from "rimraf" +import { sync as rm } from "rimraf" import color from "chalk" import Metalsmith from "metalsmith" @@ -30,7 +30,7 @@ const log = nanoLogger("./build") JSON.stringify(buildConfig, null, 2).split("\n").forEach(l => log(l)) -const mdToHtmlReplacement = [/\.md$/, ".html"] +const mdToHtmlReplacement = [ /\.md$/, ".html" ] // We clean ./dist by hand mainly for prod, in order to be able to build // assets with webpack before metalsmith build. @@ -63,7 +63,7 @@ smith .use( url([ mdToHtmlReplacement, - [/index\.html?$/, ""], + [ /index\.html?$/, "" ], ]) ) // wrap .html into react `template:` @@ -87,9 +87,9 @@ smith rename([ mdToHtmlReplacement, // no .html at the end of urls - [/\.html$/, "/index.html"], + [ /\.html$/, "/index.html" ], // ensure we only have index.html, no index/index - [/index\/index\.html$/, "index.html"], + [ /index\/index\.html$/, "index.html" ], ]) ) diff --git a/docs/scripts/webpack.js b/docs/scripts/webpack.js index 43e59ba..9de629e 100644 --- a/docs/scripts/webpack.js +++ b/docs/scripts/webpack.js @@ -9,13 +9,19 @@ export default (webpackConfig, log, cb) => { if (stats.hasErrors()) { stats.compilation.errors.forEach( - item => log(...[color.red("Error:"), ...item.message.split("\n")]) + item => log(...[ + color.red("Error:"), + ...item.message.split("\n"), + ]) ) throw new Error("webpack build failed with errors") } if (stats.hasWarnings()) { stats.compilation.warnings.forEach( - item => log(...[color.yellow("Warning:"), ...item.message.split("\n")]) + item => log(...[ + color.yellow("Warning:"), + ...item.message.split("\n"), + ]) ) } diff --git a/docs/src/assets/flux.jpg b/docs/src/assets/flux.jpg deleted file mode 100644 index 0510614..0000000 Binary files a/docs/src/assets/flux.jpg and /dev/null differ diff --git a/docs/src/index.css b/docs/src/index.css index 9331b51..1f4dbc6 100644 --- a/docs/src/index.css +++ b/docs/src/index.css @@ -98,6 +98,11 @@ h6 { font-weight: 400; } +hr { + opacity: .4; + margin: 4rem 0 !important; /* yeah... */ +} + /** * customise recipes */ @@ -265,22 +270,6 @@ h6 { url("assets/fast.jpg") no-repeat 50% 50%/cover ; } - .cssnext-Jumbotron--darkFlux { - background: linear-gradient(160deg, - color(var(--cssnext-Color-blue) a(.7)), - color(var(--cssnext-Color-purple) a(.9)) - ), - url("assets/flux.jpg") no-repeat 50% 50%/cover - ; - } - .cssnext-Jumbotron--lightTeam { - background: linear-gradient(160deg, - color(var(--cssnext-Color-purple) l(90%) a(.95)), - color(var(--cssnext-Color-blue) l(90%) a(.95)) - ), - url("assets/team.jpg") no-repeat 50% 50%/cover - ; - } .cssnext-Jumbotron--darkTeam { background: linear-gradient(160deg, color(var(--cssnext-Color-blue) a(.95)), diff --git a/docs/src/layouts/Default.js b/docs/src/layouts/Default.js index 6104261..951a4c4 100644 --- a/docs/src/layouts/Default.js +++ b/docs/src/layouts/Default.js @@ -1,4 +1,4 @@ -import React, {Component, PropTypes} from "react" +import React, { Component, PropTypes } from "react" import cx from "classnames" import dashify from "../modules/dashify" @@ -102,7 +102,7 @@ export default class Default extends Component {