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 -[![NPM version](http://img.shields.io/npm/v/cssnext.svg?style=flat)](https://www.npmjs.org/package/cssnext) -[![Travis Build Status](https://img.shields.io/travis/cssnext/cssnext.svg?label=unix%20build)](https://travis-ci.org/cssnext/cssnext) -[![AppVeyor Build Status](https://img.shields.io/appveyor/ci/MoOx/cssnext.svg?label=windows%20build)](https://ci.appveyor.com/project/MoOx/cssnext) -[![Join the chat at https://gitter.im/cssnext/cssnext](https://img.shields.io/badge/gitter%20-join%20chat%20%E2%9E%9E-1dce73.svg)](https://gitter.im/cssnext/cssnext) +[![NPM version](http://img.shields.io/npm/v/postcss-cssnext.svg?style=flat)](https://www.npmjs.org/package/postcss-cssnext) +[![Travis Build Status](https://img.shields.io/travis/MoOx/postcss-cssnext.svg?label=unix%20build)](https://travis-ci.org/cssnext/postcss-cssnext) +[![AppVeyor Build Status](https://img.shields.io/appveyor/ci/MoOx/postcss-cssnext.svg?label=windows%20build)](https://ci.appveyor.com/project/MoOx/postcss-cssnext) +[![Join the chat at https://gitter.im/MoOx/postcss-cssnext](https://img.shields.io/badge/gitter%20-join%20chat%20%E2%9E%9E-1dce73.svg)](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. ---
@@ -32,8 +32,8 @@ title: cssnext - Use tomorrow's CSS syntax, today.

What is cssnext?

- cssnext is a CSS transpiler that allows you to use - the latest CSS syntax today. + PostCSS-cssnext is a PostCSS + plugin that helps you to use the latest CSS syntax today. It transforms new CSS specs into more compatible CSS @@ -168,52 +168,11 @@ title: cssnext - Use tomorrow's CSS syntax, today.

-
-
-
-

Active development

-

- No longer wait for releases. - A fixed bug will be released ASAP. -
- Minor features will never be idle for long. -
- See that by yourself on - cssnext - & - PostCSS. - activities graphs. -
- cssnext uses lots of PostCSS plugins, - so check them out too. -

-
-
-
- -
-
-
-
-

Based on NPM ecosystem

-

- cssnext uses npm packages that should respect semver. -
- Bugfixes are pushed often. - Minor changes won't break your code. - Major releases are, well, major and are not supposed to happen a lot. -
- Codebase is exploded into smart and standalone packages so it's easier to work on something or fix a bug. -

-
-
-
-
@@ -226,7 +185,7 @@ title: cssnext - Use tomorrow's CSS syntax, today. @cssnext to get the latest news or - join the chat on gitter + join the chat on gitter if you have any questions.
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:

- webpack, - browserify, - gulp, - grunt, - brunch, - broccoli, - fly, - connect, - duo + CLI, + webpack, + gulp, + grunt, + browserify, + brunch, + broccoli, + fly, + connect/express, + duo or in Prepros

-### 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 {
Pull requests @@ -124,7 +124,7 @@ export default class Default extends Component { "r-Grid-cell": true, "js-markdownIt-TOCOriginalContainer": true, })} - dangerouslySetInnerHTML={{__html: file.contents}} + dangerouslySetInnerHTML={{ __html: file.contents }} />
- Try cssnext in your browser now. + + Try postcss-cssnext in your browser now. +
} diff --git a/docs/src/layouts/Simple.js b/docs/src/layouts/Simple.js index dc35810..0ae60dd 100644 --- a/docs/src/layouts/Simple.js +++ b/docs/src/layouts/Simple.js @@ -1,4 +1,4 @@ -import React, {Component, PropTypes} from "react" +import React, { Component, PropTypes } from "react" import Html from "../modules/Html" import Head from "../modules/Head" @@ -52,7 +52,7 @@ export default class Simple extends Component { >
diff --git a/docs/src/modules/Analytics/index.js b/docs/src/modules/Analytics/index.js index 73bdee8..ef14cef 100644 --- a/docs/src/modules/Analytics/index.js +++ b/docs/src/modules/Analytics/index.js @@ -1,4 +1,4 @@ -import React, {Component} from "react" +import React, { Component } from "react" import isogram from "isogram" diff --git a/docs/src/modules/Body/index.js b/docs/src/modules/Body/index.js index 0c21ee9..95f2e30 100644 --- a/docs/src/modules/Body/index.js +++ b/docs/src/modules/Body/index.js @@ -1,4 +1,4 @@ -import React, {Component, PropTypes} from "react" +import React, { Component, PropTypes } from "react" import Header from "../Header" import Footer from "../Footer" diff --git a/docs/src/modules/Footer/index.js b/docs/src/modules/Footer/index.js index 4f477be..4f0fa3f 100644 --- a/docs/src/modules/Footer/index.js +++ b/docs/src/modules/Footer/index.js @@ -1,4 +1,4 @@ -import React, {Component, PropTypes} from "react" +import React, { Component, PropTypes } from "react" import SVGIcon from "../SVGIcon" import requireRaw from "../requireRaw" @@ -20,7 +20,7 @@ export default class Footer extends Component { {" is brought to you by "} @MoOx {" & "} - + some other contributors .

@@ -37,7 +37,7 @@ export default class Footer extends Component { {" | "} Edit this page diff --git a/docs/src/modules/Head/index.js b/docs/src/modules/Head/index.js index 8b6464b..4c74efe 100644 --- a/docs/src/modules/Head/index.js +++ b/docs/src/modules/Head/index.js @@ -1,4 +1,4 @@ -import React, {Component, PropTypes} from "react" +import React, { Component, PropTypes } from "react" export default class Head extends Component { diff --git a/docs/src/modules/Header/index.js b/docs/src/modules/Header/index.js index 7df2d7a..ca0aa3c 100644 --- a/docs/src/modules/Header/index.js +++ b/docs/src/modules/Header/index.js @@ -1,4 +1,4 @@ -import React, {Component, PropTypes} from "react" +import React, { Component, PropTypes } from "react" import SVGIcon from "../SVGIcon" import requireRaw from "../requireRaw" @@ -47,10 +47,13 @@ export default class Header extends Component {
- + Support - + GitHub diff --git a/docs/src/modules/Header/link.js b/docs/src/modules/Header/link.js index 5fe4532..a495f6c 100644 --- a/docs/src/modules/Header/link.js +++ b/docs/src/modules/Header/link.js @@ -1,4 +1,4 @@ -import React, {Component, PropTypes} from "react" +import React, { Component, PropTypes } from "react" import cx from "classnames" export default class HeaderLink extends Component { @@ -30,7 +30,7 @@ export default class HeaderLink extends Component { className={cx({ ...( this.props.className - ? {[this.props.className]: true} + ? { [this.props.className]: true } : {} ), "cssnext-Header-nav-item": true, diff --git a/docs/src/modules/Html/index.js b/docs/src/modules/Html/index.js index 586763b..4b56e75 100644 --- a/docs/src/modules/Html/index.js +++ b/docs/src/modules/Html/index.js @@ -1,4 +1,4 @@ -import React, {Component, PropTypes} from "react" +import React, { Component, PropTypes } from "react" export default class Html extends Component { diff --git a/docs/src/modules/SVGIcon/__tests__/index.js b/docs/src/modules/SVGIcon/__tests__/index.js index 44815f1..eedebab 100644 --- a/docs/src/modules/SVGIcon/__tests__/index.js +++ b/docs/src/modules/SVGIcon/__tests__/index.js @@ -1,5 +1,5 @@ import tape from "tape-catch" -import React, {Component} from "react" +import React, { Component } from "react" import SVGIcon from ".." tape("SVGIcon", (test) => { @@ -70,7 +70,7 @@ tape("SVGIcon", (test) => { test.equal( React.renderToStaticMarkup( - + ), `${SVGIconCleanedStart}>` + ``, diff --git a/docs/src/modules/SVGIcon/index.js b/docs/src/modules/SVGIcon/index.js index ec2e41c..0a062e5 100644 --- a/docs/src/modules/SVGIcon/index.js +++ b/docs/src/modules/SVGIcon/index.js @@ -1,4 +1,4 @@ -import React, {Component, PropTypes} from "react" +import React, { Component, PropTypes } from "react" // import styled from "bloody-react-styled" import cx from "classnames" @@ -28,14 +28,9 @@ const cleanups = { // @styled(styles) export default class SVGIcon extends Component { - static defaultProps = { - component: "span", - classSuffix: "-svg", - cleanup: [], - cleanupExceptions: [], - } - static propTypes = { + className: PropTypes.string, + classSuffix: PropTypes.string, component: PropTypes.oneOfType([ PropTypes.string, PropTypes.func, @@ -46,10 +41,18 @@ export default class SVGIcon extends Component { PropTypes.bool, PropTypes.array, ]), + cleanupExceptions: PropTypes.array, width: PropTypes.string, height: PropTypes.string, } + static defaultProps = { + component: "span", + classSuffix: "-svg", + cleanup: [], + cleanupExceptions: [], + } + static cleanupSvg(svg, cleanup = []) { return Object.keys(cleanups) .filter(key => cleanup.includes(key)) @@ -97,7 +100,7 @@ export default class SVGIcon extends Component { height = width } - const props = {...this.props} + const props = { ...this.props } // remove useless props for wrapper delete props.svg delete props.fill diff --git a/docs/src/modules/playground/index.js b/docs/src/modules/playground/index.js index ad0c60e..3ec191a 100644 --- a/docs/src/modules/playground/index.js +++ b/docs/src/modules/playground/index.js @@ -1,6 +1,6 @@ import cssnext from "../../../../src/index" -import {version as cssnextVersion} from "../../../../package" -import messagesStyles from "../../../../src/option.messages.browser.styles" +import { version as cssnextVersion } from "../../../../package" +import messagesStyles from "./messages.styles" const bullet = "›" @@ -40,7 +40,8 @@ function playground(opts) { opts.console.innerHTML = "

" + "If you think it's a bug, please " + - "
report it." + + "" + + "report it." + "
cssnext v" + cssnextVersion + "
" // use createTextNode to escape html entities diff --git a/src/option.messages.browser.styles.js b/docs/src/modules/playground/messages.styles.js similarity index 97% rename from src/option.messages.browser.styles.js rename to docs/src/modules/playground/messages.styles.js index 43c797a..a5e0876 100644 --- a/src/option.messages.browser.styles.js +++ b/docs/src/modules/playground/messages.styles.js @@ -1,7 +1,5 @@ -// not using fs for in browser usage (playground) -// -// source: http://iconmonstr.com/warning-3-icon/ /* eslint-disable max-len */ +// source: http://iconmonstr.com/warning-3-icon/ const svgGradient = ` diff --git a/docs/src/modules/requireRaw.js b/docs/src/modules/requireRaw.js index 7fe4aec..85826e5 100644 --- a/docs/src/modules/requireRaw.js +++ b/docs/src/modules/requireRaw.js @@ -11,7 +11,7 @@ if (fs && fs.readFileSync) { requireRaw = (filename) => { return fs.readFileSync( path.join(__dirname, "..", "..", filename), - {encoding: "utf8"} + { encoding: "utf8" } ) } } diff --git a/package.json b/package.json index 7bc5ed9..2e642be 100644 --- a/package.json +++ b/package.json @@ -1,77 +1,55 @@ { - "name": "cssnext", - "version": "1.8.4", - "description": "Use tomorrow's CSS syntax, today", + "name": "postcss-cssnext", + "version": "2.3.0", + "description": "Use tomorrow’s CSS syntax, today", "keywords": [ - "css", - "w3c", - "cssnext", - "preprocessor", - "postprocessor", - "rework", "postcss", "postcss-plugin", - "autoprefixer", - "babel", - "transpiler" + "css", + "w3c", + "cssnext" ], "author": "Maxime Thirouin", "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/cssnext/cssnext.git" - }, + "repository": "https://github.com/cssnext/postcss-cssnext.git", "homepage": "http://cssnext.io/", - "bugs": { - "url": "https://github.com/cssnext/cssnext/issues" - }, - "main": "dist/index.js", - "bin": { - "cssnext": "dist/bin.js" - }, + "main": "lib/index.js", + "files": [ + "lib", + "src", + "!**/__tests__" + ], "dependencies": { - "autoprefixer-core": "^5.0.0", - "caniuse-api": "^1.3.1", - "chalk": "^1.0.0", - "chokidar": "^1.0.0", - "commander": "^2.3.0", - "cssnano": "^2.6.1", - "exit": "^0.1.2", - "mkdirp": "^0.5.1", - "pixrem": "^1.1.0", - "pleeease-filters": "^1.0.0", - "postcss": "^4.0.2", - "postcss-calc": "^4.0.0", - "postcss-color-function": "^1.1.0", - "postcss-color-gray": "^2.0.0", - "postcss-color-hex-alpha": "^1.1.0", - "postcss-color-hwb": "^1.1.0", - "postcss-color-rebeccapurple": "^1.1.0", - "postcss-color-rgba-fallback": "^1.0.0", - "postcss-custom-media": "^4.0.0", - "postcss-custom-properties": "^4.0.0", - "postcss-custom-selectors": "^2.3.0", - "postcss-font-variant": "^1.0.0", - "postcss-import": "^6.0.0", - "postcss-media-minmax": "^1.1.0", - "postcss-messages": "^0.2.2", - "postcss-pseudo-class-any-link": "^0.2.1", - "postcss-pseudoelements": "^2.1.1", - "postcss-reporter": "^0.1.0", - "postcss-selector-matches": "^1.2.1", - "postcss-selector-not": "^1.0.1", - "postcss-url": "^4.0.1", - "read-file-stdin": "^0.2.0", - "to-slug-case": "^0.1.2", - "to-space-case": "^0.1.3", - "write-file-stdout": "0.0.2" + "autoprefixer": "^6.0.2", + "caniuse-api": "^1.3.2", + "pixrem": "^3.0.0", + "pleeease-filters": "^2.0.0", + "postcss": "^5.0.4", + "postcss-calc": "^5.0.0", + "postcss-color-function": "^2.0.0", + "postcss-color-gray": "^3.0.0", + "postcss-color-hex-alpha": "^2.0.0", + "postcss-color-hwb": "^2.0.0", + "postcss-color-rebeccapurple": "^2.0.0", + "postcss-color-rgba-fallback": "^2.0.0", + "postcss-custom-media": "^5.0.0", + "postcss-custom-properties": "^5.0.0", + "postcss-custom-selectors": "^3.0.0", + "postcss-font-variant": "^2.0.0", + "postcss-initial": "^1.3.1", + "postcss-media-minmax": "^2.1.0", + "postcss-nesting": "^2.0.5", + "postcss-pseudo-class-any-link": "^1.0.0", + "postcss-pseudoelements": "^3.0.0", + "postcss-selector-matches": "^2.0.0", + "postcss-selector-not": "^2.0.0" }, "devDependencies": { - "babel": "^5.4.7", + "babel": "^5.8.23", "babel-core": "^5.4.7", - "babel-eslint": "^3.1.17", + "babel-eslint": "^4.1.1", "babel-loader": "^5.1.3", - "babel-tape-runner": "^1.1.0", + "babel-tape-runner": "^1.2.0", "classnames": "^2.1.1", "css-loader": "^0.13.1", "cssnext-loader": "^1.0.1", @@ -80,7 +58,7 @@ "cssrecipes-grid": "^0.4.0", "cssrecipes-utils": "^0.5.0", "cssrecipes-vertical-rhythm": "^0.6.0", - "eslint": "^1.0.0", + "eslint": "^1.3.1", "eslint-loader": "^1.0.0", "eslint-plugin-react": "^3.0.0", "extract-text-webpack-plugin": "^0.8.0", @@ -100,34 +78,33 @@ "metalsmith-rss": "^1.0.0", "metalsmith-url": "^1.0.0", "metalsmith-watch": "^1.0.1", - "microtime": "^1.2.0", "nano-logger": "^1.0.0", "node-libs-browser": "^0.5.0", "normalize.css": "^3.0.3", "object-assign": "^3.0.0", "opn": "^1.0.2", "react": "^0.13.3", - "rimraf": "^2.3.4", + "rimraf": "^2.4.3", "style-loader": "^0.12.2", - "tape": "^4.0.0", + "tape": "^4.2.0", "webpack": "^1.9.7", "webpack-dev-server": "^1.8.2", - "webpack-nano-logs": "^1.0.0" + "webpack-nano-logs": "^1.0.0", + "to-slug-case": "^0.1.2" }, "scripts": { - "prebabelify": "rimraf dist", - "babelify": "babel src --out-dir dist", + "prebabelify": "rimraf lib", + "babelify": "babel src --out-dir lib", "prepublish": "npm run babelify", - "standalone": "webpack --output-library-target umd --output-library cssnext dist/index.js dist/cssnext.js", "#lint": "even if there is a .eslintignore symlink, we use an explicit command because windows don't like unix symlink", "lint": "eslint --ignore-path .gitignore .", "#tape": "to avoid really slow tests, we run babel once & run tests on the result", - "tape": "tape 'dist/__tests__/*.js'", - "test": "npm run lint && npm run babelify && npm run standalone && npm run tape", + "tape": "tape 'lib/__tests__/*.js'", + "test": "npm run lint && npm run babelify && npm run tape", "docs-build": "babel-node docs/scripts/build", "docs-start": "npm run docs-build -- --dev --dev-server --open", "docs-test": "npm run docs-build -- --production", - "_docs-deploy": "GIT_DEPLOY_DIR=docs/dist ./docs/scripts/deploy-to-gh-pages.sh -v", + "_docs-deploy": "GIT_DEPLOY_DIR=docs/lib ./docs/scripts/deploy-to-gh-pages.sh -v", "docs-deploy": "npm run docs-test && npm run _docs-deploy" } } diff --git a/src/__tests__/api.js b/src/__tests__/api.js deleted file mode 100644 index 479f059..0000000 --- a/src/__tests__/api.js +++ /dev/null @@ -1,49 +0,0 @@ -/** - * Test dependencies - */ -const test = require("tape") - -const utils = require("./utils") -const cssnext = require("..") -const postcss = require("postcss") - -/** - * Global API tests - */ -test("cssnext API", function(t) { - const input = utils.readFixture("cases/example") - const output = utils.readFixture("cases/example.expected") - - // simple API strings + options - t.ok( - typeof cssnext("html{}") === "string", - "should return a string" - ) - t.ok( - typeof cssnext("") === "string", - "should return a string, even if the given string is empty" - ) - utils.compareFixtures( - t, - "cases/example", - "simple example with multiples features should work with cssnext API" - ) - - // as a postcss plugin - const postcssInstance = cssnext() - t.ok( - typeof postcssInstance === "object" && postcssInstance.process, - "should return a postcss instance" - ) - t.equal( - postcss().use(cssnext()).process(input).css, - output, - "simple example with multiples features should work with postcss API" - ) - - const opts = {} - cssnext("html{}", opts) - t.ok(!opts.hasOwnProperty("map"), "doesn't mutate options object") - - t.end() -}) diff --git a/src/__tests__/benchmarks/index.css b/src/__tests__/benchmarks/index.css deleted file mode 100644 index 09f942a..0000000 --- a/src/__tests__/benchmarks/index.css +++ /dev/null @@ -1,54 +0,0 @@ -/* custom properties */ -:root { - --fontSize: 1rem; - --mainColor: #12345678; - --highlightColor: hwb(190, 35%, 20%); -} - -/* custom media queries */ -@custom-media --viewport-medium (width <= 50em); - -/* some var() & calc() */ -body { - color: var(--mainColor); - - font-size: var(--fontSize); - line-height: calc(var(--fontSize) * 1.5); - padding: calc((var(--fontSize) / 2) + 1px); -} - -/* custom media query usage */ -@media (--viewport-medium) { - body { font-size: calc(var(--fontSize) * 1.2); } - /* no need for px here since browsers that supports media queries support rem already */ -} - -/* custom selectors */ -@custom-selector --heading h1, h2, h3, h4, h5, h6; ---heading { margin-top: 0 } - -/* colors stuff */ -a { - color: var(--highlightColor); - transition: color 1s; /* autoprefixed ! */ -} -a:hover { color: gray(255, 50%) } -a:active { color: rebeccapurple } -a:visited { color: color(red blackness(+20%)) } - -/* font stuff */ -h2 { - font-variant-caps: small-caps; -} - -table { - font-variant-numeric: lining-nums; -} - -/* filters */ -.blur { - filter: blur(4px); -} -.sepia { - filter: sepia(.8); -} diff --git a/src/__tests__/benchmarks/index.js b/src/__tests__/benchmarks/index.js deleted file mode 100644 index a959ff5..0000000 --- a/src/__tests__/benchmarks/index.js +++ /dev/null @@ -1,34 +0,0 @@ -const cssnext = require("../") -const t = require("microtime") - -let input = require("fs").readFileSync( - "./src/__tests__/benchmarks.css", - {encoding: "utf8"} -) - -// make a 2MB input -for (let i = 0; i <= 10; i++) { - input += input -} -// check the real input -// require("fs").writeFileSync("./src/__tests__/fixtures/bench.css", input) - -// test each features -const keys = Object.keys(cssnext.features) -const allOff = {} - -keys.forEach(function(k) { - allOff[k] = false -}) - -console.log("Each features is tested on a 2MB input (>100 000 lines)\n") - -keys.forEach(function(k) { - const enable = {...allOff} - enable[k] = true - const start = t.now() - cssnext(input, {features: enable}) - const stop = t.now() - - console.log(k + " takes " + ((stop - start) / 1000000) + "s") // , enable) -}) diff --git a/src/__tests__/cases.js b/src/__tests__/cases.js deleted file mode 100644 index bac0919..0000000 --- a/src/__tests__/cases.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * Test dependencies - */ -const test = require("tape") - -const utils = require("./utils") -const cssnext = require("..") - -/** - * Use cases test - */ -test("use case: color plugins together", function(t) { - t.equal( - cssnext( - utils.readFixture("cases/color"), - {} - ), - utils.readFixture("cases/color.expected"), - "all color plugins should works together" - ) - - t.end() -}) - -test("use case: use plugin options", function(t) { - t.equal( - cssnext( - utils.readFixture("cases/plugin-options"), - { - features: { - customProperties: { - preserve: true, - }, - }, - } - ), - utils.readFixture("cases/plugin-options.expected"), - "should be able to pass options to plugins" - ) - - t.end() -}) diff --git a/src/__tests__/cli.js b/src/__tests__/cli.js deleted file mode 100644 index ba582c7..0000000 --- a/src/__tests__/cli.js +++ /dev/null @@ -1,279 +0,0 @@ -/** - * Test dependencies - */ -import {exec} from "child_process" - -import test from "tape" - -import utils from "./utils" -import cssnext from ".." - -import isBabel from "./utils/isBabel" - -/** - * CLI tests - */ -const input = utils.readFixture("cli") -const output = utils.readFixture("cli.expected") - -// node bin is used to help for windows -const cssnextBin = isBabel ? "babel-node src/bin" : "node dist/bin" - -test("cli", function(t) { - let planned = 0 - - exec( - cssnextBin + - " src/__tests__/fixtures/cli.css" + - " src/__tests__/fixtures/cli.output--io.css", - function(err) { - if (err) { - throw err - } - const res = utils.readFixture("cli.output--io") - t.equal(res, output, "should read from a file and write to a file") - utils.remove("cli.output--io") - } - ) - planned += 1 - - exec( - cssnextBin + - " src/__tests__/fixtures/cli.css" + - " src/__tests__/fixtures/cli/output--io.css", - function(err) { - if (err) { - throw err - } - const res = utils.readFixture("cli/output--io") - t.equal( - res, - "body {\n color: #e00;\n background: url(../url);\n}\n", - "should rebase url" - ) - utils.remove("cli/output--io") - } - ) - planned += 1 - - exec(cssnextBin + " src/__tests__/fixtures/cli.css", function(err, stdout) { - if (err) { - throw err - } - t.equal( - stdout, - output, "should read from a file and write to stdout" - ) - }) - planned += 1 - - const childProcess = exec(cssnextBin, function(err, stdout) { - if (err) { - throw err - } - t.equal(stdout, output, "should read from stdin and write to stdout") - }) - childProcess.stdin.write(new Buffer(input)) - childProcess.stdin.end() - planned += 1 - - exec( - cssnextBin + " src/__tests__/fixtures/cli.dont-exist.css", - function(err, stdout, stderr) { - t.ok( - err && err.code === 1, - "should return an error when input file is unreadable" - ) - t.ok( - utils.contains(stderr, "Unable to read file"), - "should show that the input file is not found" - ) - } - ) - planned += 2 - - exec( - cssnextBin + " src/__tests__/fixtures/cli.error.css", - function(err, stdout, stderr) { - t.ok(err && err.code === 2, "should throw an error") - t.ok( - utils.contains(stderr, "encounters an error"), - "should output a readable error") - t.ok( - utils.contains( - stderr, - "If this error looks like a bug, please report it here" - ), - "should show the url where to report bugs" - ) - }) - planned += 3 - - exec( - cssnextBin + - " --config src/__tests__/fixtures/config.json" + - " src/__tests__/fixtures/config.css", - function(err, stdout) { - if (err) { - throw err - } - t.equal( - stdout, - utils.readFixture("config.expected"), - "should read config file on --config" - ) - }) - planned += 1 - - const noCustomPropInput = ":root{--foo:bar}baz{qux:var(--foo)}" - const childProcessBrowsers = exec( - cssnextBin + " --browsers \"Firefox >= 31\"", - function(err, stdout) { - if (err) { - throw err - } - t.equal(stdout, noCustomPropInput, "should have a --browsers option") - }) - childProcessBrowsers.stdin.write(new Buffer(noCustomPropInput)) - childProcessBrowsers.stdin.end() - planned += 1 - - exec( - cssnextBin + - " --verbose src/__tests__/fixtures/cli.css" + - " src/__tests__/fixtures/cli.output--verbose.css" - , - function(err, stdout) { - if (err) { - throw err - } - t.ok(utils.contains(stdout, "Output written"), "should log on --verbose") - utils.remove("cli.output--verbose") - } - ) - planned += 1 - - exec( - cssnextBin + " --no-import src/__tests__/fixtures/import.css", - function(err, stdout) { - if (err) { - throw err - } - t.equal( - stdout, - utils.readFixture("import"), - "should not import on --no-import" - ) - }) - planned += 1 - - exec( - cssnextBin + " --no-url src/__tests__/fixtures/url.css", - {cwd: process.cwd()}, - function(err, stdout) { - if (err) { - throw err - } - t.equal( - stdout, - utils.readFixture("url/dep"), - "should not adjust url on --no-url" - ) - } - ) - planned += 1 - - exec( - cssnextBin + " --compress src/__tests__/fixtures/compress.css", - function(err, stdout) { - if (err) { - throw err - } - t.equal( - stdout.trim(), - utils.readFixture("compress.default.expected").trim(), - "should compress on --compress" - ) - } - ) - planned += 1 - - exec( - cssnextBin + " --sourcemap src/__tests__/fixtures/sourcemap.css", - function(err, stdout) { - if (err) { - throw err - } - t.ok( - stdout - .indexOf("/*# sourceMappingURL=data:application/json;base64,") - > -1 - , - "should add sourcemap on --sourcemap" - ) - } - ) - planned += 1 - - const toSpace = require("to-space-case") - const toSlug = require("to-slug-case") - const features = Object.keys(cssnext.features) - const no = "--no-" + features.map(function(feature) { - return toSlug(feature) - }).join(" --no-") - features.forEach(function(feature) { - const slug = toSlug(feature) - const featureOutput = utils.readFixture("features/" + slug) - exec( - cssnextBin + " " + no + - " src/__tests__/fixtures/features/" + slug + ".css", - function(err, stdout) { - if (err) { - throw err - } - t.equal( - stdout, - featureOutput, - "should not modify input of '" + toSpace(feature) + - "' fixture if all features are disabled" - ) - } - ) - }) - planned += features.length - - exec( - cssnextBin + " --watch", - function(err, stdout, stderr) { - t.ok(err && err.code === 3, - "should return an error when or are missing when " + - "`--watch` option passed" - ) - t.ok( - utils.contains(stderr, "--watch option need"), - "should show an explanation when or are missing when" + - " `--watch` option passed" - ) - } - ) - planned += 2 - - exec( - cssnextBin + " --watch src/__tests__/fixtures/cli.css", - function(err, stdout, stderr) { - t.ok( - err && err.code === 3, - "should return an error when is missing when `--watch`" + - "option passed" - ) - t.ok( - utils.contains(stderr, "--watch option need"), - "should show an explanation when is missing when `--watch` " + - "option passed" - ) - } - ) - planned += 2 - - t.plan(planned) -}) diff --git a/src/__tests__/cli.watcher.js b/src/__tests__/cli.watcher.js deleted file mode 100644 index ef83dc9..0000000 --- a/src/__tests__/cli.watcher.js +++ /dev/null @@ -1,146 +0,0 @@ -/** - * Test dependencies - */ -import {exec, spawn} from "child_process" -import fs from "fs" - -import test from "tape" - -import utils from "./utils" - -import isBabel from "./utils/isBabel" - -// I don't success to call the kill() process from node and both Travis CI and -// Appveyor so we avoid this test on this environnements -if (!(process.env.TRAVIS || process.env.APPVEYOR)) { - // node bin is used to help for windows - const nodeBin = isBabel ? "babel-node" : "node" - const cssnextBin = isBabel ? "src/bin" : "dist/bin" - - test("cli/watcher", function(t) { - let planned = 0 - - const watchProcess = exec( - `${ nodeBin } ${ cssnextBin }` + - " --watch src/__tests__/fixtures/cli.error.css" + - " src/__tests__/fixtures/cli.output--watch.css", - function(err) { - t.ok( - err && err.signal === "SIGTERM", - "should only be killed by an interrupt when `--watch` option passed" - ) - if (err && !err.killed) { - throw err - } - } - ) - - const msgWatch = "should output error messages when `--watch` option passed" - const watchTimeout = setTimeout(function() { - t.fail(msgWatch) - watchProcess.kill() - }, 5000) - watchProcess.stderr.on("data", function(data) { - if (utils.contains(data, "encounters an error")) { - t.pass(msgWatch) - clearTimeout(watchTimeout) - watchProcess.kill() - } - }) - planned += 2 - - // watch/import tests - const watchOut = "src/__tests__/fixtures/cli.output--watch-import.css" - - const watchImportProcess = spawn( - nodeBin, - [ - cssnextBin, - // "--verbose", - "--watch", - "src/__tests__/fixtures/cli.watch-import.css", - watchOut, - ], - {stdio: "inherit"} - ) - - // watch an empty file doesn't seems to work great, so I am using - // /**/ to get a content - // yeah... - - // trigger a change in cli.import.css to add a new watched file - // cli.import2.css - fs.writeFileSync( - "src/__tests__/fixtures/cli.watch-import.css", - "/**/ " + - "@import 'cli.watch-import-import.css';" + - "@import 'cli.watch-import-import2.css';" - ) - - // we are using setTimeout for the watcher to do his job - setTimeout(function() { - // check the output has been updated (watcher works) - t.equal( - fs.readFileSync( - watchOut, - {encoding: "utf8"} - ), - "/**/ watch{}er{}", - "should update the file" - ) - - // remove this newly imported file - fs.writeFileSync("src/__tests__/fixtures/cli.watch-import.css", "/**/") - - // check the output has been update - setTimeout(function() { - t.equal( - fs.readFileSync( - watchOut, - {encoding: "utf8"} - ), - "/**/", - "should update the file, again" - ) - - setTimeout(function() { - // previously imported file should not be watched anymore - // to check that we read output mtime, modify the file that should not - // be watched and check back that the output file has the same mtime - - // trigger a change in previously imported file - const now = (new Date()).getTime() - fs.utimesSync( - "src/__tests__/fixtures/cli.watch-import-import.css", - now, - now - ) - - // not sure why but it's better with the statSync on the watched file - // in this delayed call - setTimeout(function() { - const outStat = fs.statSync(watchOut) - - setTimeout(function() { - // this time, it should not trigger anything - const outStatAfter = fs.statSync(watchOut) - t.equal( - outStat.mtime.getTime(), - outStatAfter.mtime.getTime(), - "should not modify a file if a previously imported file is " + - "modified" - ) - - utils.remove("cli.output--watch-import") - watchImportProcess.kill() - }, 1000) - }, 1000) - }, 1000) - }, 1000) - }, 1000) - - planned += 3 - - t.plan(planned) - }) -} diff --git a/src/__tests__/fixtures/cases/color.css b/src/__tests__/fixtures/cases/color.css deleted file mode 100755 index c239483..0000000 --- a/src/__tests__/fixtures/cases/color.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - background: rgb(102, 51, 153) linear-gradient(color(rebeccapurple a(50%)), hwb(0, 20%, 40%), color(hwb(0, 20%, 40%, .5) a(+10%)), color(#9d9c a(90%))); -} diff --git a/src/__tests__/fixtures/cases/color.expected.css b/src/__tests__/fixtures/cases/color.expected.css deleted file mode 100755 index 39d9bc5..0000000 --- a/src/__tests__/fixtures/cases/color.expected.css +++ /dev/null @@ -1,4 +0,0 @@ -body { - background: rgb(102, 51, 153) -webkit-linear-gradient(rgba(102, 51, 153, 0.5), rgb(153, 51, 51), rgba(153, 51, 51, 0.55), rgba(153, 221, 153, 0.9)); - background: rgb(102, 51, 153) linear-gradient(rgba(102, 51, 153, 0.5), rgb(153, 51, 51), rgba(153, 51, 51, 0.55), rgba(153, 221, 153, 0.9)); -} diff --git a/src/__tests__/fixtures/cases/example.actual.css b/src/__tests__/fixtures/cases/example.actual.css deleted file mode 100644 index d605897..0000000 --- a/src/__tests__/fixtures/cases/example.actual.css +++ /dev/null @@ -1,86 +0,0 @@ -/* custom properties */ - -/* custom media queries */ - -/* some var() & calc() */ -body { - color: #123456; - color: rgba(18, 52, 86, 0.47059); - - font-size: 16px; - font-size: 1rem; - line-height: 24px; - line-height: 1.5rem; - padding: calc(0.5rem + 1px); -} - -/* custom media query usage */ -@media (max-width: 50em) { - body { font-size: 1.2rem; } - /* no need for px here since browsers that supports media queries support rem already */ -} - -/* custom selectors */ -h1, -h2, -h3, -h4, -h5, -h6 { margin-top: 0 } - -/* colors stuff */ -a { - color: rgb(89, 185, 204); - -webkit-transition: color 1s; - transition: color 1s; /* autoprefixed ! */ -} -a:hover { color: #FFFFFF; color: rgba(255, 255, 255, 0.5) } -a:active { color: rgb(102, 51, 153) } -a:link,a:visited { color: rgb(89, 142, 153) } - -/* font stuff */ -h2 { - -webkit-font-feature-settings: "c2sc"; - -moz-font-feature-settings: "c2sc"; - font-feature-settings: "c2sc"; - font-variant-caps: small-caps; -} - -table { - -webkit-font-feature-settings: "lnum"; - -moz-font-feature-settings: "lnum"; - font-feature-settings: "lnum"; - font-variant-numeric: lining-nums; -} - -/* filters */ -.blur { - filter: url('data:image/svg+xml;charset=utf-8,#filter'); - -webkit-filter: blur(4px); - filter: blur(4px); -} -.sepia { - filter: url('data:image/svg+xml;charset=utf-8,#filter'); - -webkit-filter: sepia(.8); - filter: sepia(.8); -} - -/* pseudo-elements */ -a:before, -a:after { - content: "pseudo-elements" -} - -/* :matches() and :not() */ -p:first-child, p.specific { - color: red; -} -p:not(:first-child):not(.specific) { - background: blue; -} - -/* rgba() fallback */ -.color { - background: #99DD99; - background: rgba(153, 221, 153, 0.8); -} diff --git a/src/__tests__/fixtures/cases/example.css b/src/__tests__/fixtures/cases/example.css deleted file mode 100644 index 2bfa475..0000000 --- a/src/__tests__/fixtures/cases/example.css +++ /dev/null @@ -1,73 +0,0 @@ -/* custom properties */ -:root { - --fontSize: 1rem; - --mainColor: #12345678; - --highlightColor: hwb(190, 35%, 20%); -} - -/* custom media queries */ -@custom-media --viewport-medium (width <= 50em); - -/* some var() & calc() */ -body { - color: var(--mainColor); - - font-size: var(--fontSize); - line-height: calc(var(--fontSize) * 1.5); - padding: calc((var(--fontSize) / 2) + 1px); -} - -/* custom media query usage */ -@media (--viewport-medium) { - body { font-size: calc(var(--fontSize) * 1.2); } - /* no need for px here since browsers that supports media queries support rem already */ -} - -/* custom selectors */ -@custom-selector :--heading h1, h2, h3, h4, h5, h6; -:--heading { margin-top: 0 } - -/* colors stuff */ -a { - color: var(--highlightColor); - transition: color 1s; /* autoprefixed ! */ -} -a:hover { color: gray(255, 50%) } -a:active { color: rebeccapurple } -a:any-link { color: color(var(--highlightColor) blackness(+20%)) } - -/* font stuff */ -h2 { - font-variant-caps: small-caps; -} - -table { - font-variant-numeric: lining-nums; -} - -/* filters */ -.blur { - filter: blur(4px); -} -.sepia { - filter: sepia(.8); -} - -/* pseudo-elements */ -a::before, -a::after { - content: "pseudo-elements" -} - -/* :matches() and :not() */ -p:matches(:first-child, .specific) { - color: red; -} -p:not(:first-child, .specific) { - background: blue; -} - -/* rgba() fallback */ -.color { - background: rgba(153, 221, 153, 0.8); -} diff --git a/src/__tests__/fixtures/cases/example.expected.css b/src/__tests__/fixtures/cases/example.expected.css deleted file mode 100644 index d605897..0000000 --- a/src/__tests__/fixtures/cases/example.expected.css +++ /dev/null @@ -1,86 +0,0 @@ -/* custom properties */ - -/* custom media queries */ - -/* some var() & calc() */ -body { - color: #123456; - color: rgba(18, 52, 86, 0.47059); - - font-size: 16px; - font-size: 1rem; - line-height: 24px; - line-height: 1.5rem; - padding: calc(0.5rem + 1px); -} - -/* custom media query usage */ -@media (max-width: 50em) { - body { font-size: 1.2rem; } - /* no need for px here since browsers that supports media queries support rem already */ -} - -/* custom selectors */ -h1, -h2, -h3, -h4, -h5, -h6 { margin-top: 0 } - -/* colors stuff */ -a { - color: rgb(89, 185, 204); - -webkit-transition: color 1s; - transition: color 1s; /* autoprefixed ! */ -} -a:hover { color: #FFFFFF; color: rgba(255, 255, 255, 0.5) } -a:active { color: rgb(102, 51, 153) } -a:link,a:visited { color: rgb(89, 142, 153) } - -/* font stuff */ -h2 { - -webkit-font-feature-settings: "c2sc"; - -moz-font-feature-settings: "c2sc"; - font-feature-settings: "c2sc"; - font-variant-caps: small-caps; -} - -table { - -webkit-font-feature-settings: "lnum"; - -moz-font-feature-settings: "lnum"; - font-feature-settings: "lnum"; - font-variant-numeric: lining-nums; -} - -/* filters */ -.blur { - filter: url('data:image/svg+xml;charset=utf-8,#filter'); - -webkit-filter: blur(4px); - filter: blur(4px); -} -.sepia { - filter: url('data:image/svg+xml;charset=utf-8,#filter'); - -webkit-filter: sepia(.8); - filter: sepia(.8); -} - -/* pseudo-elements */ -a:before, -a:after { - content: "pseudo-elements" -} - -/* :matches() and :not() */ -p:first-child, p.specific { - color: red; -} -p:not(:first-child):not(.specific) { - background: blue; -} - -/* rgba() fallback */ -.color { - background: #99DD99; - background: rgba(153, 221, 153, 0.8); -} diff --git a/src/__tests__/fixtures/cases/plugin-options.css b/src/__tests__/fixtures/cases/plugin-options.css deleted file mode 100644 index b986d27..0000000 --- a/src/__tests__/fixtures/cases/plugin-options.css +++ /dev/null @@ -1,7 +0,0 @@ -:root { - --prop: value; -} - -selector { - thing: var(--prop); -} diff --git a/src/__tests__/fixtures/cases/plugin-options.expected.css b/src/__tests__/fixtures/cases/plugin-options.expected.css deleted file mode 100644 index 4883470..0000000 --- a/src/__tests__/fixtures/cases/plugin-options.expected.css +++ /dev/null @@ -1,8 +0,0 @@ -:root { - --prop: value; -} - -selector { - thing: value; - thing: var(--prop); -} diff --git a/src/__tests__/fixtures/cli.css b/src/__tests__/fixtures/cli.css deleted file mode 100755 index 6c30a4d..0000000 --- a/src/__tests__/fixtures/cli.css +++ /dev/null @@ -1,8 +0,0 @@ -:root { - --red: #e00; -} - -body { - color: var(--red); - background: url(url); -} diff --git a/src/__tests__/fixtures/cli.error.css b/src/__tests__/fixtures/cli.error.css deleted file mode 100644 index 8b52202..0000000 --- a/src/__tests__/fixtures/cli.error.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - color: var( -} diff --git a/src/__tests__/fixtures/cli.expected.css b/src/__tests__/fixtures/cli.expected.css deleted file mode 100755 index 09fcc0b..0000000 --- a/src/__tests__/fixtures/cli.expected.css +++ /dev/null @@ -1,4 +0,0 @@ -body { - color: #e00; - background: url(url); -} diff --git a/src/__tests__/fixtures/cli.watch-import-import.css b/src/__tests__/fixtures/cli.watch-import-import.css deleted file mode 100644 index 4fa557f..0000000 --- a/src/__tests__/fixtures/cli.watch-import-import.css +++ /dev/null @@ -1 +0,0 @@ -watch{} diff --git a/src/__tests__/fixtures/cli.watch-import-import2.css b/src/__tests__/fixtures/cli.watch-import-import2.css deleted file mode 100644 index 1260e2b..0000000 --- a/src/__tests__/fixtures/cli.watch-import-import2.css +++ /dev/null @@ -1 +0,0 @@ -er{} diff --git a/src/__tests__/fixtures/cli.watch-import.css b/src/__tests__/fixtures/cli.watch-import.css deleted file mode 100644 index 7068cde..0000000 --- a/src/__tests__/fixtures/cli.watch-import.css +++ /dev/null @@ -1 +0,0 @@ -/**/ \ No newline at end of file diff --git a/src/__tests__/fixtures/compress.css b/src/__tests__/fixtures/compress.css deleted file mode 100755 index f47052b..0000000 --- a/src/__tests__/fixtures/compress.css +++ /dev/null @@ -1,5 +0,0 @@ - -/*! sha */ -body { - color : black; -} diff --git a/src/__tests__/fixtures/compress.default.expected.css b/src/__tests__/fixtures/compress.default.expected.css deleted file mode 100644 index c2c6e41..0000000 --- a/src/__tests__/fixtures/compress.default.expected.css +++ /dev/null @@ -1 +0,0 @@ -/*! sha */body{color:#000} diff --git a/src/__tests__/fixtures/compress.options.expected.css b/src/__tests__/fixtures/compress.options.expected.css deleted file mode 100644 index c7e7472..0000000 --- a/src/__tests__/fixtures/compress.options.expected.css +++ /dev/null @@ -1 +0,0 @@ -/*! sha */body{color:black} diff --git a/src/__tests__/fixtures/config.css b/src/__tests__/fixtures/config.css deleted file mode 100644 index 0badc1a..0000000 --- a/src/__tests__/fixtures/config.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - color: var(--color) -} diff --git a/src/__tests__/fixtures/config.expected.css b/src/__tests__/fixtures/config.expected.css deleted file mode 100644 index 03903cc..0000000 --- a/src/__tests__/fixtures/config.expected.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - color: #e00 -} diff --git a/src/__tests__/fixtures/config.json b/src/__tests__/fixtures/config.json deleted file mode 100644 index d0aa524..0000000 --- a/src/__tests__/fixtures/config.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "features": { - "customProperties": { - "variables": { - "--color": "#e00" - } - } - } -} diff --git a/src/__tests__/fixtures/features/autoprefixer.css b/src/__tests__/fixtures/features/autoprefixer.css old mode 100755 new mode 100644 diff --git a/src/__tests__/fixtures/features/autoprefixer.expected.css b/src/__tests__/fixtures/features/autoprefixer.expected.css old mode 100755 new mode 100644 index 175ed52..76c0fd9 --- a/src/__tests__/fixtures/features/autoprefixer.expected.css +++ b/src/__tests__/fixtures/features/autoprefixer.expected.css @@ -1,6 +1,8 @@ * { -webkit-transition: -webkit-transform 1s; - transition: transform 1s; + transition: -webkit-transform 1s; + transition: transform 1s; + transition: transform 1s, -webkit-transform 1s; } @-webkit-keyframes spin { diff --git a/src/__tests__/fixtures/features/calc.css b/src/__tests__/fixtures/features/calc.css old mode 100755 new mode 100644 diff --git a/src/__tests__/fixtures/features/calc.expected.css b/src/__tests__/fixtures/features/calc.expected.css old mode 100755 new mode 100644 diff --git a/src/__tests__/fixtures/features/color-function.css b/src/__tests__/fixtures/features/color-function.css old mode 100755 new mode 100644 diff --git a/src/__tests__/fixtures/features/color-function.expected.css b/src/__tests__/fixtures/features/color-function.expected.css old mode 100755 new mode 100644 diff --git a/src/__tests__/fixtures/features/color-hex-alpha.css b/src/__tests__/fixtures/features/color-hex-alpha.css old mode 100755 new mode 100644 diff --git a/src/__tests__/fixtures/features/color-hex-alpha.expected.css b/src/__tests__/fixtures/features/color-hex-alpha.expected.css old mode 100755 new mode 100644 diff --git a/src/__tests__/fixtures/features/color-hwb.expected.css b/src/__tests__/fixtures/features/color-hwb.expected.css old mode 100755 new mode 100644 diff --git a/src/__tests__/fixtures/features/color-rebeccapurple.css b/src/__tests__/fixtures/features/color-rebeccapurple.css old mode 100755 new mode 100644 diff --git a/src/__tests__/fixtures/features/color-rebeccapurple.expected.css b/src/__tests__/fixtures/features/color-rebeccapurple.expected.css old mode 100755 new mode 100644 diff --git a/src/__tests__/fixtures/features/color-rgba.expected.css b/src/__tests__/fixtures/features/color-rgba.expected.css index 013f935..6fdb8b8 100644 --- a/src/__tests__/fixtures/features/color-rgba.expected.css +++ b/src/__tests__/fixtures/features/color-rgba.expected.css @@ -1,5 +1,5 @@ .foo { - background: #99DD99; + background: #99dd99; background: rgba(153, 221, 153, 0.8); border: solid 1px #646667; border: solid 1px rgba(100,102,103,.3); diff --git a/src/__tests__/fixtures/features/custom-media.css b/src/__tests__/fixtures/features/custom-media.css old mode 100755 new mode 100644 diff --git a/src/__tests__/fixtures/features/custom-media.expected.css b/src/__tests__/fixtures/features/custom-media.expected.css old mode 100755 new mode 100644 diff --git a/src/__tests__/fixtures/features/custom-properties.css b/src/__tests__/fixtures/features/custom-properties.css old mode 100755 new mode 100644 diff --git a/src/__tests__/fixtures/features/custom-properties.expected.css b/src/__tests__/fixtures/features/custom-properties.expected.css old mode 100755 new mode 100644 diff --git a/src/__tests__/fixtures/features/initial.css b/src/__tests__/fixtures/features/initial.css new file mode 100644 index 0000000..b8cbc54 --- /dev/null +++ b/src/__tests__/fixtures/features/initial.css @@ -0,0 +1,14 @@ +a { + all: initial; +} + +a { + animation: initial; + background: initial; + border: initial; + column-rule: initial; + font: initial; + list-style: initial; + outline: initial; + text-decoration: initial; +} diff --git a/src/__tests__/fixtures/features/initial.expected.css b/src/__tests__/fixtures/features/initial.expected.css new file mode 100644 index 0000000..9ba9c29 --- /dev/null +++ b/src/__tests__/fixtures/features/initial.expected.css @@ -0,0 +1,98 @@ +a { + animation: none 0s ease 0s 1 normal none running; + backface-visibility: visible; + background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; + border: medium none currentColor; + border-collapse: separate; + border-image: none; + border-radius: 0; + border-spacing: 0; + bottom: auto; + box-shadow: none; + box-sizing: content-box; + caption-side: top; + clear: none; + clip: auto; + color: inherit; + columns: auto; + column-count: auto; + column-fill: balance; + column-gap: normal; + column-rule: medium none currentColor; + column-span: 1; + column-width: auto; + content: normal; + counter-increment: none; + counter-reset: none; + cursor: auto; + direction: ltr; + display: inline; + empty-cells: show; + float: none; + font: normal normal normal normal medium/normal inherit; + height: auto; + hyphens: none; + left: auto; + letter-spacing: normal; + list-style: disc outside none; + margin: 0; + max-height: none; + max-width: none; + min-height: 0; + min-width: 0; + opacity: 1; + orphans: 0; + outline: medium none invert; + overflow: visible; + overflow-x: visible; + overflow-y: visible; + padding: 0; + page-break-after: auto; + page-break-before: auto; + page-break-inside: auto; + perspective: none; + perspective-origin: 50% 50%; + position: static; + right: auto; + tab-size: 8; + table-layout: auto; + text-align: inherit; + text-align-last: auto; + text-decoration: none solid currentColor; + text-indent: 0; + text-shadow: none; + text-transform: none; + top: auto; + transform: none; + transform-origin: 50% 50% 0; + transform-style: flat; + transition: none 0s ease 0s; + unicode-bidi: normal; + vertical-align: baseline; + visibility: visible; + white-space: normal; + widows: 0; + width: auto; + word-spacing: normal; + z-index: auto; + all: initial; +} + +a { + animation: none 0s ease 0s 1 normal none running; + animation: initial; + background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; + background: initial; + border: medium none currentColor; + border: initial; + column-rule: medium none currentColor; + column-rule: initial; + font: normal normal normal normal medium/normal inherit; + font: initial; + list-style: disc outside none; + list-style: initial; + outline: medium none invert; + outline: initial; + text-decoration: none solid currentColor; + text-decoration: initial; +} diff --git a/src/__tests__/fixtures/features/nesting.css b/src/__tests__/fixtures/features/nesting.css new file mode 100644 index 0000000..f447c01 --- /dev/null +++ b/src/__tests__/fixtures/features/nesting.css @@ -0,0 +1,7 @@ +.foo { + color: red; + + @nest & .bar { + color: white; + } +} diff --git a/src/__tests__/fixtures/features/nesting.expected.css b/src/__tests__/fixtures/features/nesting.expected.css new file mode 100644 index 0000000..5b82fa2 --- /dev/null +++ b/src/__tests__/fixtures/features/nesting.expected.css @@ -0,0 +1,6 @@ +.foo { + color: red +} +.foo .bar { + color: white +} diff --git a/src/__tests__/fixtures/import.css b/src/__tests__/fixtures/import.css deleted file mode 100755 index 24bd542..0000000 --- a/src/__tests__/fixtures/import.css +++ /dev/null @@ -1,5 +0,0 @@ -@import "./import.imported.css"; - -html { - background: #eee; -} diff --git a/src/__tests__/fixtures/import.default.expected.css b/src/__tests__/fixtures/import.default.expected.css deleted file mode 100755 index e64c573..0000000 --- a/src/__tests__/fixtures/import.default.expected.css +++ /dev/null @@ -1,7 +0,0 @@ -html { - color: #111; -} - -html { - background: #eee; -} diff --git a/src/__tests__/fixtures/import.imported.css b/src/__tests__/fixtures/import.imported.css deleted file mode 100755 index 8647ee6..0000000 --- a/src/__tests__/fixtures/import.imported.css +++ /dev/null @@ -1,3 +0,0 @@ -html { - color: #111; -} diff --git a/src/__tests__/fixtures/import.options.expected.css b/src/__tests__/fixtures/import.options.expected.css deleted file mode 100755 index 1237158..0000000 --- a/src/__tests__/fixtures/import.options.expected.css +++ /dev/null @@ -1,9 +0,0 @@ -html { - color: #111; -} - - new {} - -html { - background: #eee; -} diff --git a/src/__tests__/fixtures/sourcemap.css b/src/__tests__/fixtures/sourcemap.css deleted file mode 100644 index 0bb9036..0000000 --- a/src/__tests__/fixtures/sourcemap.css +++ /dev/null @@ -1,5 +0,0 @@ -@import "sourcemap.imported.css"; - -body { - color: red; -} diff --git a/src/__tests__/fixtures/sourcemap.expected-start b/src/__tests__/fixtures/sourcemap.expected-start deleted file mode 100644 index 0a9cbb7..0000000 --- a/src/__tests__/fixtures/sourcemap.expected-start +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["src/__tests__/fixtures/sourcemap.imported.css","src/__tests__/fixtures/sourcemap.css"],"names":[],"mappings": diff --git a/src/__tests__/fixtures/sourcemap.expected.css b/src/__tests__/fixtures/sourcemap.expected.css deleted file mode 100755 index 4012ebc..0000000 --- a/src/__tests__/fixtures/sourcemap.expected.css +++ /dev/null @@ -1,9 +0,0 @@ -html { - background: blue; -} - -body { - color: red; -} - -/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QvZml4dHVyZXMvc291cmNlbWFwLmltcG9ydGVkLmNzcyIsInRlc3QvZml4dHVyZXMvc291cmNlbWFwLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGlCQUFpQjtDQUNsQjs7QUNBRDtFQUNFLFdBQVc7Q0FDWiIsImZpbGUiOiJ0ZXN0L2ZpeHR1cmVzL3NvdXJjZW1hcC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJodG1sIHtcbiAgYmFja2dyb3VuZDogYmx1ZTtcbn1cbiIsIkBpbXBvcnQgXCJzb3VyY2VtYXAuaW1wb3J0ZWQuY3NzXCI7XG5cbmJvZHkge1xuICBjb2xvcjogcmVkO1xufVxuIl19 */ diff --git a/src/__tests__/fixtures/sourcemap.imported.css b/src/__tests__/fixtures/sourcemap.imported.css deleted file mode 100755 index c913323..0000000 --- a/src/__tests__/fixtures/sourcemap.imported.css +++ /dev/null @@ -1,3 +0,0 @@ -html { - background: blue; -} diff --git a/src/__tests__/fixtures/url.css b/src/__tests__/fixtures/url.css deleted file mode 100644 index 78fcc05..0000000 --- a/src/__tests__/fixtures/url.css +++ /dev/null @@ -1 +0,0 @@ -@import 'url/dep.css' diff --git a/src/__tests__/fixtures/url.default.expected.css b/src/__tests__/fixtures/url.default.expected.css deleted file mode 100644 index 13cb09a..0000000 --- a/src/__tests__/fixtures/url.default.expected.css +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - src: url('url/assets/font.woff?v3#dontcare') -} -body { - background: url('url/assets/pixel.gif') -} diff --git a/src/__tests__/fixtures/url.options.expected.css b/src/__tests__/fixtures/url.options.expected.css deleted file mode 100644 index 0605c5a..0000000 --- a/src/__tests__/fixtures/url.options.expected.css +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - src: url('./assets/font.woff?v3#dontcare') -} -body { - background: url('data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAP///wAAACH/C0FET0JFOklSMS4wAt7tACH5BAEAAAIALAAAAAABAAEAAAICVAEAOw==') -} diff --git a/src/__tests__/fixtures/url/assets/font.woff b/src/__tests__/fixtures/url/assets/font.woff deleted file mode 100644 index 34fdfde..0000000 Binary files a/src/__tests__/fixtures/url/assets/font.woff and /dev/null differ diff --git a/src/__tests__/fixtures/url/assets/pixel.gif b/src/__tests__/fixtures/url/assets/pixel.gif deleted file mode 100644 index 46a2cf0..0000000 Binary files a/src/__tests__/fixtures/url/assets/pixel.gif and /dev/null differ diff --git a/src/__tests__/fixtures/url/dep.css b/src/__tests__/fixtures/url/dep.css deleted file mode 100644 index e9081db..0000000 --- a/src/__tests__/fixtures/url/dep.css +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - src: url('./assets/font.woff?v3#dontcare') -} -body { - background: url('./assets/pixel.gif') -} diff --git a/src/__tests__/index.js b/src/__tests__/index.js new file mode 100644 index 0000000..d2b8a4c --- /dev/null +++ b/src/__tests__/index.js @@ -0,0 +1,12 @@ +import tape from "tape" + +import postcssnext from ".." + +tape("postcss-cssnext is a postcss plugin", (t) => { + t.ok( + typeof postcssnext.process === "function", + "should have the postcss process() function available" + ) + + t.end() +}) diff --git a/src/__tests__/messages/index.js b/src/__tests__/messages/index.js deleted file mode 100644 index a9126bf..0000000 --- a/src/__tests__/messages/index.js +++ /dev/null @@ -1,45 +0,0 @@ -import fs from "fs" -import path from "path" - -import opn from "opn" - -import cssnext from "../.." - -console.log("# cssnext renderering test for messages styles") - -const msg = "This is a test message" -const page = path.join("dist", "__tests__styles.html") - -const css = cssnext( - ` -@import url(http://) -:root { - --var: test; -} -@custom-selector --h h1, h2; -body { - color: var(--test); -} - `, - { - plugins: [ - (styles, result) => { - result.warn(msg) - }, - ], - messages: { - browser: true, - }, - } -) - -fs.writeFileSync( - page, - ` -cssnext message rendering test -`, -) - -opn(page) diff --git a/src/__tests__/option.browsers.js b/src/__tests__/option.browsers.js index 5d6e98a..fbb3865 100644 --- a/src/__tests__/option.browsers.js +++ b/src/__tests__/option.browsers.js @@ -1,16 +1,13 @@ -const test = require("tape") +import tape from "tape" -const cssnext = require("..") +import cssnext from ".." -test("cssnext browsers option", function(t) { +tape("cssnext browsers option", function(t) { // no recent browser need pixrem const remInput = "body{font-size:2rem}" t.equal( - cssnext( - remInput, - {browsers: "last 1 version"} - ), + cssnext({ browsers: "last 1 version" }).process(remInput).css, remInput, "should not enable px fallback when all browsers support it" ) @@ -20,21 +17,21 @@ test("cssnext browsers option", function(t) { // fx 30 doesn't handle custom prop t.equal( - cssnext(customPropsInput, {browsers: "Firefox >= 30"}), + cssnext({ browsers: "Firefox >= 30" }).process(customPropsInput).css, customPropsOutput, "should enable custom properties when browsers do not support it" ) // fx 31 handle custom prop t.equal( - cssnext(customPropsInput, {browsers: "Firefox >= 31"}), + cssnext({ browsers: "Firefox >= 31" }).process(customPropsInput).css, customPropsInput, "should NOT enable custom properties when browsers support it" ) // fx 31 support but not IE 8 t.equal( - cssnext(customPropsInput, {browsers: "Firefox >= 31, IE 8"}), + cssnext({ browsers: "Firefox >= 31, IE 8" }).process(customPropsInput).css, customPropsOutput, "should enable custom properties when at least one browsers do not " + "support it" @@ -43,20 +40,20 @@ test("cssnext browsers option", function(t) { t.end() }) -test("cssnext browsers option propagation", function(t) { +tape("cssnext browsers option propagation", function(t) { const input = "body{transition: 1s}" const output = "body{-webkit-transition: 1s;transition: 1s}" // Safari 6 need -webkit prefix t.equal( - cssnext(input, {browsers: "Safari 6"}), + cssnext({ browsers: "Safari 6" }).process(input).css, output, "should propagate browsers option to autoprefixer" ) // Safari 6.1 do not need -webkit prefix t.equal( - cssnext(input, {browsers: "Safari 6.1"}), + cssnext({ browsers: "Safari 6.1" }).process(input).css, input, "should propagate browsers option to autoprefixer" ) diff --git a/src/__tests__/option.compress.js b/src/__tests__/option.compress.js deleted file mode 100644 index f86ec36..0000000 --- a/src/__tests__/option.compress.js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * Test dependencies - */ -const test = require("tape") - -const utils = require("./utils") -const cssnext = require("..") -const postcss = require("postcss") - -test("cssnext compress option", function(t) { - const input = utils.readFixture("compress") - const expected = { - default: utils.readFixture("compress.default.expected").trim(), - options: utils.readFixture("compress.options.expected").trim(), - } - - t.equal( - cssnext( - input, - { - compress: true, - } - ).trim(), - expected.default, - "should be able to compress" - ) - t.equal( - cssnext( - input, - { - compress: { - colormin: false, - }, - } - ).trim(), - expected.options, - "should be able to compress with options" - ) - t.equal( - postcss().use( - cssnext({ - compress: true, - }) - ).process(input).css.trim(), - expected.default, - "should be able to compress even as a postcss plugin" - ) - - t.end() -}) diff --git a/src/__tests__/option.features.js b/src/__tests__/option.features.js index 7f7226a..3ed5a0f 100644 --- a/src/__tests__/option.features.js +++ b/src/__tests__/option.features.js @@ -1,75 +1,60 @@ /** * Test dependencies */ -const test = require("tape") +import test from "tape" +import { join } from "path" -const utils = require("./utils") -const cssnext = require("..") -const cssnextStandalone = require("../cssnext") +import utils from "./utils" +import cssnext, { features } from ".." /** * Features tests */ -const toSlug = require("to-slug-case") +import toSlug from "to-slug-case" const testFeature = function( t, feature, - cssnextInstance, - version, source, input, expected ) { - const options = {from: source, sourcemap: false, features: {}} + const options = { features: { } } // disable all features - Object.keys(cssnextInstance.features).forEach(function(key) { + Object.keys(features).forEach(function(key) { options.features[key] = false }) - const css = cssnextInstance(input, options) + const css = cssnext(options).process(input).css t.notEqual( css, expected, - version + ": should not add " + feature + " support if disabled" + "should not add " + feature + " support if disabled" ) t.equal( css, input, - version + ": should not modify input if " + feature + " is disabled" + "should not modify input if " + feature + " is disabled" ) // enable only the one we want to test... options.features[feature] = true - // ...except "url" because we want to validate its behaviour when integrated - // with "import" - if (feature === "url") { - options.features.import = true - } t.equal( - cssnextInstance(input, options).trim(), + cssnext(options).process(input).css.trim(), expected.trim(), - version + ": should add " + feature + " support" + "should add " + feature + " support" ) } -Object.keys(cssnext.features).forEach(function(name) { +Object.keys(features).forEach(function(name) { const slug = toSlug(name) - const source = utils.fixturePath("features/" + slug) - const input = utils.readFixture("features/" + slug) - const expected = utils.readFixture("features/" + slug + ".expected") + const source = utils.fixturePath(join("features", slug)) + const input = utils.readFixture(join("features", slug)) + const expected = utils.readFixture(join("features", slug + ".expected")) test(slug, function(t) { - testFeature(t, name, cssnext, "node.js", source, input, expected) - - // we do not support @import or url rewriting in the browser - if (name === "import" || name === "url") { - t.end() - return - } - - testFeature(t, name, cssnextStandalone, "browser", source, input, expected) + testFeature(t, name, source, input, expected) t.end() }) diff --git a/src/__tests__/option.import.js b/src/__tests__/option.import.js deleted file mode 100644 index f0ea2ad..0000000 --- a/src/__tests__/option.import.js +++ /dev/null @@ -1,54 +0,0 @@ -/** - * Test dependencies - */ -const test = require("tape") - -const utils = require("./utils") -const cssnext = require("..") -const postcss = require("postcss") - -test("cssnext import option", function(t) { - const input = utils.readFixture("import") - const expected = { - default: utils.readFixture("import.default.expected").trim(), - options: utils.readFixture("import.options.expected").trim(), - } - const opts = {from: "src/__tests__/fixtures/here"} - function transformFn(c) { - return c + "\n new {}" - } - t.equal( - cssnext(input, opts).trim(), - expected.default, - "should be able to import" - ) - t.equal( - cssnext(input, { - from: opts.from, - import: { - transform: transformFn, - }, - }).trim(), - expected.options, - "should be able to import with options" - ) - t.equal( - postcss().use(cssnext()).process(input, opts).css.trim(), - expected.default, - "should be able to import even as a postcss plugin" - ) - const importOpt = { - transform: transformFn, - } - Object.freeze(importOpt) - t.doesNotThrow(function() { - cssnext(input, { - from: opts.from, - import: importOpt, - }).trim() - }, - expected.options, - "should not use original object as option" - ) - t.end() -}) diff --git a/src/__tests__/option.messages.js b/src/__tests__/option.messages.js deleted file mode 100644 index 6170c0e..0000000 --- a/src/__tests__/option.messages.js +++ /dev/null @@ -1,84 +0,0 @@ -import test from "tape" - -import cssnext from ".." - -test("cssnext option: messages", (t) => { - - const msg = "This is a message" - const defaultOptions = { - plugins: [ - (styles, result) => { - result.warn(msg) - }, - ], - messages: true, - } - - t.equal( - cssnext({ - ...defaultOptions, - messages: false, - }) - .process("test{}") - .warnings()[0].text, - msg, - "should pass messages if messages option is off" - ) - - t.ok( - cssnext({ - ...defaultOptions, - messages: { - browser: true, - }, - }) - .process("test{}") - .css - .indexOf(`${ msg }`) > -1 - , - "should add messages in css" - ) - - t.ok( - cssnext({ - ...defaultOptions, - messages: { - browser: false, - }, - }) - .process("test{}") - .css - .indexOf(`content: "${ msg }"`) === -1 - , - "should not add messages in css if key is === false" - ) - - t.ok( - cssnext({ - ...defaultOptions, - messages: {}, - }) - .process("test{}") - .css - .indexOf(`content: "${ msg }"`) === -1 - , - "should not add messages in css if key is not present" - ) - - // we should do the same for "console" value, but we need to test stdout - // and I am lazy atm. Finger crossed. - // t.ok( - // cssnext({ - // ...defaultOptions, - // messages: { - // console: true, - // }, - // }) - // .process("test{}") - // .css - // , - // "should show messages in the console" - // ) - - t.end() -}) diff --git a/src/__tests__/option.plugins.js b/src/__tests__/option.plugins.js deleted file mode 100644 index 6409b6c..0000000 --- a/src/__tests__/option.plugins.js +++ /dev/null @@ -1,25 +0,0 @@ -import test from "tape" - -import cssnext from ".." - -test("cssnext option: plugins", (t) => { - - t.equal( - cssnext( - ":root{} @notOk", - { - plugins: [ - styles => { - styles.eachAtRule(atRule => { - atRule.name = "ok" - }) - }, - ], - } - ), - "@ok", - "should allow to add custom plugins" - ) - - t.end() -}) diff --git a/src/__tests__/option.sourcemap.js b/src/__tests__/option.sourcemap.js deleted file mode 100644 index 9cc256c..0000000 --- a/src/__tests__/option.sourcemap.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * Test dependencies - */ -const test = require("tape") - -const utils = require("./utils") -const cssnext = require("..") - -/** - * Sourcemap tests - */ -test("sourcemap", function(t) { - const options = { - from: "./src/__tests__/fixtures/sourcemap.css", - sourcemap: true, - } - t.ok( - cssnext( - utils.readFixture("sourcemap"), - options - ) - .indexOf("/*# sourceMappingURL=data:application/json;base64,") - > -1, - "should contain a correct inlined sourcemap" - ) - - const result = cssnext( - utils.readFixture("sourcemap"), - { - from: "./src/__tests__/fixtures/sourcemap.css", - map: {inline: false}, - } - ) - - t.ok( - /* eslint-disable max-len */ - result.map.toString() - .indexOf(utils.readFixture("sourcemap.expected-start", "").trim()) - > -1 - , - /* eslint-enable max-len */ - "should contain a correct sourcemap" - ) - - t.end() -}) diff --git a/src/__tests__/option.url.js b/src/__tests__/option.url.js deleted file mode 100644 index c65d39c..0000000 --- a/src/__tests__/option.url.js +++ /dev/null @@ -1,32 +0,0 @@ -const test = require("tape") - -const utils = require("./utils") -const cssnext = require("..") -const postcss = require("postcss") - -test("cssnext url option", function(t) { - const input = utils.readFixture("url") - const expected = { - default: utils.readFixture("url.default.expected").trim(), - options: utils.readFixture("url.options.expected").trim(), - } - const opts = {from: "./src/__tests__/fixtures/url.css"} - - t.equal( - cssnext(input, opts).trim(), - expected.default, - "should be able to adjust url" - ) - t.equal( - cssnext(input, {...opts, url: {url: "inline"}}).trim(), - expected.options, - "should be able to adjust url with options" - ) - t.equal( - postcss().use(cssnext(opts)).process(input, opts).css.trim(), - expected.default, - "should be able to adjust url even as a postcss plugin" - ) - - t.end() -}) diff --git a/src/__tests__/prevent-webpack-usage.js b/src/__tests__/prevent-webpack-usage.js deleted file mode 100644 index 5d39910..0000000 --- a/src/__tests__/prevent-webpack-usage.js +++ /dev/null @@ -1,51 +0,0 @@ -const test = require("tape") - -import {join as joinPath, dirname} from "path" - -import webpack from "webpack" - -test("cssnext-loader recommendation", function(t) { - webpack( - { - entry: { - "prevent-webpack-usage": [ - // we don't care about what file is being used - // because this should throw an error before the input being used - "./package.json", - ], - }, - output: { - // we don't care about the output... - path: "./dist/__tests__/", - filename: "prevent-webpack-usage.tmp-webpack-bundle.js", - }, - module: { - loaders: [ - { - test: /\.json$/, - // use directly cssnext index.js - loader: joinPath(dirname(__filename), "..", "index.js"), - }, - ], - }, - }, - (err, stats) => { - if (err) { - throw err - } - - if (!stats.hasErrors()) { - t.fail( - "doesn't throw an error if cssnext is used directly as webpack loader" - ) - } - else { - t.ok( - stats.compilation.errors[0].message.indexOf("cssnext-loader") > -1, - "should recommand cssnext-loader" - ) - } - - t.end() - }) -}) diff --git a/src/__tests__/utils/index.js b/src/__tests__/utils/index.js index 20ec7cf..12eda95 100644 --- a/src/__tests__/utils/index.js +++ b/src/__tests__/utils/index.js @@ -1,95 +1,33 @@ /** * Module dependencies */ -const fs = require("fs") -const cssnext = require("../..") - -/** - * Check if a string is contained into another - * - * @param {String} string string to look into - * @param {String} piece string to find - * @return {Boolean} returns true if piece is contained in string - */ -function contains(string, piece) { - return Boolean(string.indexOf(piece) + 1) -} - -/** - * get fixture path - * @param {String} name - * @param {String} ext (optional extension, default to ".css") - * @return the fixture filename -*/ -function fixturePath(name, ext) { - ext = (ext !== undefined ? ext : ".css") - return "src/__tests__/fixtures/" + name + ext -} - -/** - * Remove a fixture by `filename`. - * - * @param {String} filename - */ -function remove(filename) { - const file = fixturePath(filename) - if (!fs.existsSync(file)) { - return - } - fs.unlinkSync(file) -} - -/** - * read a fixture - * @param {String} name - * @param {String} ext (optional extension, default to ".css") - * @return the fixture content - */ -function readFixture(name, ext) { - return fs.readFileSync(fixturePath(name, ext), "utf8") -} - -/** - * compare fixtures input with expected output - * @param {Object} t tape test helper - * @param {String} name eg: "cases/color" - * @param {String} message message for tape helper - * @param {Object|Function} options cssnext options - */ -function compareFixtures(t, name, message, options) { - let actual - if (typeof options === "function") { - actual = options(readFixture(name)) - } - else { - options = options || {} - options.from = fixturePath(name) - actual = cssnext(readFixture(name), options) - } - - // handy thing: checkout actual in the *.actual.css file - fs.writeFile(fixturePath(name + ".actual"), actual) - - const expected = readFixture(name + ".expected") - - return t.equal( - actual.trim(), - expected.trim(), - message !== undefined - ? message - : "processed fixture '" + name + "' should be equal to expected output" - ) -} +import fs from "fs" +import { join } from "path" /** * Exposes functions * * @type {Object} */ -module.exports = { - contains: contains, - remove: remove, - compareFixtures: compareFixtures, - fixturePath: fixturePath, - readFixture: readFixture, +export default { + /** + * get fixture path + * @param {String} name + * @param {String} ext (optional extension, default to ".css") + * @return the fixture filename + */ + fixturePath(name, ext) { + ext = (ext !== undefined ? ext : ".css") + return join("src", "__tests__", "fixtures", name + ext) + }, + + /** + * read a fixture + * @param {String} name + * @param {String} ext (optional extension, default to ".css") + * @return the fixture content + */ + readFixture(name, ext) { + return fs.readFileSync(this.fixturePath(name, ext), "utf8") + }, } diff --git a/src/__tests__/utils/isBabel.js b/src/__tests__/utils/isBabel.js deleted file mode 100644 index e0b5f89..0000000 --- a/src/__tests__/utils/isBabel.js +++ /dev/null @@ -1 +0,0 @@ -export default typeof _babelPolyfill !== "undefined" && _babelPolyfill === true diff --git a/src/bin.js b/src/bin.js deleted file mode 100755 index 9d8c626..0000000 --- a/src/bin.js +++ /dev/null @@ -1,224 +0,0 @@ -#!/usr/bin/env node - -import fs from "fs" -import path from "path" - -// until this land in a stable version of node (for a while) -// https://github.com/joyent/node/commit/20176a -// we will this instead of process.exit() -import exit from "exit" - -import mkdirp from "mkdirp" -import color from "chalk" -import program from "commander" - -import cssnext from ".." -import pkg from "../package" - -program - .version(pkg.version) - .usage("[options] [ []]") - .option("-C, --config ", "use the config file") - .option("-b, --browsers ", "browsers list (comma separated)") - .option("-I, --no-import", "do not inline @import") - .option("-U, --no-url", "do not adjust url()") - .option("-c, --compress", "compress output") - .option("-s, --sourcemap", "add sourcemap") - .option("-w, --watch", "watch the input file for changes") - .option("-v, --verbose", "verbose output") - -// register features as flag -const format = require("util").format -const toSlug = require("to-slug-case") -const toSpace = require("to-space-case") -Object.keys(cssnext.features).forEach(function(feature) { - const flag = format("--no-%s", toSlug(feature)) - const desc = format("disable %s support", toSpace(feature)) - program.option(flag, desc) -}) - -/* eslint-disable no-multiple-empty-lines */ -program.on("--help", function() { - console.log(function() {/* - Examples: - - # pass an input and output file - $ cssnext input.css output.css - - - # start cssnext watcher (need input & output) - $ cssnext --watch input.css output.css - - - # using stdin and stdout - $ cat input.css | cssnext > output.css - */ - }.toString().split("\n").slice(1, -2).join("\n")) -}) -/* eslint-enable no-multiple-empty-lines */ - -program.parse(process.argv) - -const config = program.config ? require(path.resolve(program.config)) : {} -if (!config.features) { - config.features = {} -} -// command line flags override config file -Object.keys(cssnext.features).forEach(function(feature) { - if (program[feature] === false) { - config.features[feature] = false - } -}) -if ("browsers" in program) { - config.browsers = program.browsers -} -if ("import" in program) { - config.import = program.import -} -if ("url" in program) { - config.url = program.url -} -if ("sourcemap" in program) { - config.sourcemap = program.sourcemap -} -if ("compress" in program) { - config.compress = program.compress -} -if ("watch" in program) { - config.watch = program.watch -} - -const input = program.args[0] ? path.resolve(program.args[0]) : null -const output = program.args[1] ? path.resolve(program.args[1]) : null -const verbose = program.verbose - -if (input && !fs.existsSync(input)) { - console.error(color.red("Unable to read file"), input) - exit(1) -} - -config.from = input -config.to = output - -if (output) { - mkdirp.sync(path.dirname(output)) -} - -// init & adjust watcher with postcss-import dependencies -let watcher -if (config.watch) { - if (!input || !output) { - console.error( - color.red("--watch option need both & files to work") - ) - exit(3) - } - - watcher = require("chokidar").watch(input, {ignoreInitial: true}) - - if (verbose) { - log(color.cyan("Watching"), input) - } - - // https://github.com/paulmillr/chokidar/issues/288 - // ready event might not be triggered at all - // watcher.on("ready", function() { - // if (verbose) { - // log(color.cyan("Watcher ready"), input) - // } - // }) - - watcher.on("change", transform) - - // watch `@import`ed files - if (config.import) { - // keep a up to date list of imported files - let importedFiles = [input] - const arrayDiff = function(array, array2) { - return array.filter(function(i) { - return array2.indexOf(i) < 0 - }) - } - - const rebaseFile = function(file) { - return path.relative(process.cwd(), file) - } - - const watcherOnImport = function(imported) { - const toUnwatch = arrayDiff(importedFiles, imported) - const toWatch = arrayDiff(imported, importedFiles) - toUnwatch.forEach(function(file) { - watcher.unwatch(rebaseFile(file)) - }) - toWatch.forEach(function(file) { - watcher.add(rebaseFile(file)) - }) - importedFiles = imported - } - - // import need an object so we can pass onImport() cb - if (typeof config.import !== "object") { - config.import = {} - } - - // keep the existing onImport callback if any - if (config.import.onImport) { - config.import.onImport = function(files) { - const originalOnImport = config.import.onImport - watcherOnImport(files) - originalOnImport(files) - } - } - // or just add the watcher updater onImport() cb - else { - config.import.onImport = watcherOnImport - } - } -} - -function transform() { - require("read-file-stdin")(input, function(err, buffer) { - if (err) { - throw err - } - - try { - const css = cssnext(buffer.toString(), config) - - require("write-file-stdout")(output, css) - if (verbose && output) { - log(color.cyan("Output written"), output) - } - } - catch (e) { - console.error() - console.error(color.bold("cssnext encounters an error:")) - console.error() - console.error(color.red(e.message)) - if (e.stack) { - console.error(e.stack.split("\n").slice(1).join("\n").grey) - console.error() - } - console.error("If this error looks like a bug, please report it here:") - console.error(color.grey("❯ ") + color.cyan(pkg.bugs.url)) - console.error() - if (!config.watch) { - exit(2) - } - } - }) -} - -transform() - -/** - * log content prefixed by time - * - * @return {String} output all given parameters prefixed by the current locale - * time - */ -function log() { - const args = [].slice.call(arguments) - args.unshift("[" + color.grey(new Date().toLocaleTimeString()) + "]") - console.log.apply(console.log, args) -} diff --git a/src/features-activation-map.js b/src/features-activation-map.js index afefffa..c59da9e 100644 --- a/src/features-activation-map.js +++ b/src/features-activation-map.js @@ -3,27 +3,28 @@ // // null == always enable (& no caniuse data) export default { - customProperties: ["css-variables"], + customProperties: [ "css-variables" ], // calc() transformation only make sense with transformed custom properties, // don't you think ? // calc: null, // @todo open PR on caniuse repo https://github.com/Fyrd/caniuse - // customMedia: [null], - // mediaQueriesRange: [null], - // customSelectors: [null], - // colorRebeccapurple: [null], // @todo can be done easily - // colorHwb: [null], - // colorGray: [null], - // colorHexAlpha: [null], - // colorFunction:[null], - // fontVariant: [null], + // customMedia: [ null ], + // mediaQueriesRange: [ null ], + // customSelectors: [ null ], + // colorRebeccapurple: [ null ], // @todo can be done easily + // colorHwb: [ null ], + // colorGray: [ null ], + // colorHexAlpha: [ null ], + // colorFunction:[ null], + // fontVariant: [ null ], // @todo can be done using a callback, this is only used for Firefox < 35 - // filter: [null], - rem: ["rem"], - pseudoElements: ["css-gencontent"], - // pseudoClassMatches: [null], - // pseudoClassNot: [null], - colorRgba: ["css3-colors"], + // filter: [ null ], + initial: [ "css-all", "css-initial-value" ], + rem: [ "rem" ], + pseudoElements: [ "css-gencontent" ], + // pseudoClassMatches: [ null ], + // pseudoClassNot: [ null ], + colorRgba: [ "css3-colors" ], // will always be null since autoprefixer does the same game as we do - // autoprefixer: [null] + // autoprefixer: [ null ] } diff --git a/src/features.js b/src/features.js index e2cc122..5400684 100644 --- a/src/features.js +++ b/src/features.js @@ -6,6 +6,9 @@ export default { calc(options) { return require("postcss-calc")(options) }, + nesting(options) { + return require("postcss-nesting")(options) + }, customMedia(options) { return require("postcss-custom-media")(options) }, @@ -36,6 +39,9 @@ export default { filter(options) { return require("pleeease-filters")(options) }, + initial(options) { + return require("postcss-initial")(options) + }, rem(options) { return require("pixrem")(options) }, @@ -55,6 +61,6 @@ export default { return require("postcss-color-rgba-fallback")(options) }, autoprefixer(options) { - return require("autoprefixer-core")(options) + return require("autoprefixer")(options) }, } diff --git a/src/fixes/custom-selectors-missing-colon.js b/src/fixes/custom-selectors-missing-colon.js deleted file mode 100644 index 8864561..0000000 --- a/src/fixes/custom-selectors-missing-colon.js +++ /dev/null @@ -1,41 +0,0 @@ -import postcss from "postcss" - -export default postcss.plugin( - "cssnext", - () => { - const cs = "@custom-selector" - - return (styles, result) => { - let alert = false - styles.eachAtRule("custom-selector", rule => { - if (rule.params.indexOf("--") === 0) { - - // display big warning once - if (!alert) { - alert = true - result.warn( - `Previously ${ cs } were working with and without pseudo ` + - `syntax ':'. Now you must use '${ cs } :--{name}' syntax ` + - `instead of '${ cs } --{name}'. The support of ` + - `syntax without ':' and this warning will be remove in the ` + - `next major release.` - ) - } - - result.warn( - [ - `Incorrect syntax for ${ cs }.`, - ` ${ cs } ${ rule.params }`, - `Should be:`, - ` ${ cs } :${ rule.params }`, - ].join("\n\n"), - {node: rule} - ) - - // fix for postcss-custom-selectors 2.x - rule.params = ":" + rule.params - } - }) - } - } -) diff --git a/src/fixes/index.js b/src/fixes/index.js deleted file mode 100644 index 5703b85..0000000 --- a/src/fixes/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import customSelectorsMissingColon from "./custom-selectors-missing-colon" - -export default { - customSelectorsMissingColon, -} diff --git a/src/index.js b/src/index.js index bb915a8..79bc9ce 100644 --- a/src/index.js +++ b/src/index.js @@ -1,55 +1,14 @@ -import fs from "fs" - -import postCSS from "postcss" -import {isSupported} from "caniuse-api" - -import fixes from "./fixes" +import postcss from "postcss" +import { isSupported } from "caniuse-api" import libraryFeatures from "./features" import featuresActivationMap from "./features-activation-map" -import optionMessages from "./option.messages" - -/** - * Process a CSS `string` - * - * @param {String} string (optional) - * @param {Object} options (optional) - * @return {String} if string is given, or {Object} (postcss instance) - */ -function cssnext(string, options) { - // prevent usage as a webpack loader - // webpack run loader as function with an object as context - // this object contains a "webpack" key set to true if used as a loader - // https://github.com/cssnext/cssnext/issues/61 - if (typeof this === "object" && this.webpack === true) { - throw new Error( - "⚠︎ Don't use directly cssnext as a webpack loader. " + - "Please use `cssnext-loader` instead: " + - "https://github.com/cssnext/cssnext-loader" - ) - } - - if (arguments.length === 0) { - options = {} - } - if (arguments.length === 1 && typeof string === "object") { - options = string - string = undefined - } - else { - options = options || {} - } - +const plugin = postcss.plugin("postcss-cssnext", (options) => { options = { features: {}, - // options.browsers is deliberately undefined by defaut to inherit + // options.browsers is deliberately undefined by default to inherit // browserslist default behavior - // default sourcemap - // if `map` option is passed, `sourcemap` option is ignored - // if `sourcemap` option is passed, a inline map is used - map: (options.sourcemap ? true : null), - messages: true, ...options, } @@ -72,36 +31,10 @@ function cssnext(string, options) { } } - const postcss = postCSS() - - // only enable import & url if fs module is available - if (fs && fs.readFile) { - // @import - if (options.import !== false) { - const plugin = require("postcss-import")( - typeof options.import === "object" - ? {...options.import} - : undefined - ) - postcss.use(plugin) - } - - // url() adjustements - if (options.url !== false) { - const plugin = require("postcss-url")( - typeof options.url === "object" - ? {...options.url} - : undefined - ) - postcss.use(plugin) - } - } - - // tmp fixes - Object.keys(fixes).forEach(key => postcss.use(fixes[key])) + const processor = postcss() // features - Object.keys(cssnext.features).forEach(key => { + Object.keys(libraryFeatures).forEach(key => { // feature is auto enabled if: not disable && (enabled || no data yet || // !supported yet) if ( @@ -122,74 +55,26 @@ function cssnext(string, options) { ) ) ) { - const plugin = cssnext.features[key]( + const plugin = libraryFeatures[key]( typeof features[key] === "object" - ? {...features[key]} + ? { ...features[key] } : undefined ) - postcss.use(plugin) + processor.use(plugin) } }) - if (options.plugins) { - if (!Array.isArray(options.plugins)) { - throw new Error( - "cssnext 'plugins' option expect an array of PostCSS plugins. " + - "You provided " + (typeof options.plugins) - ) - } - - options.plugins.forEach(plugin => postcss.use(plugin)) - } - - // minification - if (options.compress) { - postcss.use( - require("cssnano")( - typeof options.compress === "object" - ? options.compress - : {} - ) - ) - } - - // console plugins MUST be called after others because - // by default it remove messages from the registry - // (which make sense) - if (options.messages) { - optionMessages(options).forEach(plugin => { - postcss.use(plugin) - }) - } - - // classic API if string is passed - if (typeof string === "string") { - const result = postcss.process(string, options) - - // default behavior, cssnext returns a css string if no or inline sourcemap - if (options.map === null || (options.map === true || options.map.inline)) { - return result.css - } - - // if a specific map has been asked, we are returning css + map - return result - } - // or return the postcss instance that can be consumed as a postcss plugin - else { - return postcss - } -} + return processor +}) -/** - * Expose cssnext features - * - * @type {Object} - */ -cssnext.features = libraryFeatures +// according to the way babel transpile es6 module +// we cannot use the following syntax to export features +// +// export { libraryFeatures as features } +// +// babel only add `module.exports = exports["default"];` if there is only one +// thing exported +// so we add `features` as a plugin property +plugin.features = libraryFeatures -/** - * Expose cssnext - * - * @type {Function} - */ -module.exports = cssnext +export default plugin diff --git a/src/option.messages.js b/src/option.messages.js deleted file mode 100644 index 7e6d274..0000000 --- a/src/option.messages.js +++ /dev/null @@ -1,47 +0,0 @@ -import postcssMessagesConsole from "postcss-reporter" -// https://github.com/postcss/postcss-messages/issues/16 -// import postcssMessagesCSS from "postcss-messages" -import postcssMessagesCSS from "./plugins/messages" -import postcssMessageCSSstyles from "./option.messages.browser.styles.js" - -export default (options) => { - // true === all interfaces - if (options.messages === true) { - return [ - postcssMessagesCSS({styles: postcssMessageCSSstyles}), - postcssMessagesConsole, - ] - } - - // object: only the one you want - if (typeof options.messages === "object") { - return [ - ...options.messages.browser - ? [ - postcssMessagesCSS({ - styles: postcssMessageCSSstyles, - ...( - typeof options.messages.browser === "object" - ? options.messages.browser - : {} - ), - }), - ] - : [], - ...options.messages.console - ? [ - postcssMessagesConsole({ - ...( - typeof options.messages.console === "object" - ? options.messages.console - : {} - ), - }), - ] - : [], - ] - } - - // otherwise nothing :) - return [] -} diff --git a/src/plugins/messages.js b/src/plugins/messages.js deleted file mode 100644 index f8fbe8d..0000000 --- a/src/plugins/messages.js +++ /dev/null @@ -1,104 +0,0 @@ -// why this plugin ? -// https://github.com/postcss/postcss-messages/issues/16 - -import postcss from "postcss" -import colors from "chalk" - -// http://www.w3.org/TR/CSS2/syndata.html#characters -// tl;dr: escape as utf-16 all non ascii chars + new lines & quotes -function escapeForCSS(string) { - let newString = "" - for (let i = 0; i < string.length; i++) { - const ch = string.charAt(i) - switch (ch) { - case "\n": - case "\r": - newString += "\\A " - break - - case "\\": - case "\'": - case "\"": - newString += "\\" + ch - break - - default: - // non ascii - if (!ch.match(/^[\x00-\x7F]*$/)) { - let hexCh = string.charCodeAt(i).toString(16) - while (hexCh.length < 4) { - hexCh = "0" + hexCh - } - // space at the end is required - newString += "\\" + hexCh + " " - continue - } - newString += string[i] - } - } - - return newString -} - -export default postcss.plugin( - "postcss-messages", - (options) => { - options = { - ...options, - } - - if (options.disabled) { - return function() {} - } - - const defaultStyles = { - // ... - } - const styles = options.styles - ? options.styles - : defaultStyles - - return (css, result) => { - const messages = result.warnings() - if (messages.length === 0) { - return - } - - let selector = "html::before" - if (options.selector) { - selector = options.selector - } - else { - css.eachRule(rule => { - if ( - rule.selector === "html::before" || - rule.selector === "html:before" - ) { - selector = "html::after" - } - }) - } - - css.append({selector}) - Object.keys(styles).forEach(key => { - css.last.append({ - prop: key, - value: styles[key], - }) - }) - - const bullet = "›" - const content = messages.map(message => message.toString()) - .join(`\n\n\n${ bullet } `) - - css.last.append({ - prop: "content", - value: ( - "\"" + - escapeForCSS(`${ bullet } ${ colors.stripColor(content) }`) + - "\"" - ), - }) - } - } -) diff --git a/webpack.config.js b/webpack.config.js index 289e869..249cf29 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -48,7 +48,7 @@ module.exports = { plugins: ([ new webpack.DefinePlugin(buildConfig), - new ExtractTextPlugin("[name].css", {disable: !buildConfig.__PROD__}), + new ExtractTextPlugin("[name].css", { disable: !buildConfig.__PROD__ }), ].concat( buildConfig.__PROD__ ? [