diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..e1cd968 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +dist +lib +src/__tests__/fixtures diff --git a/.travis.yml b/.travis.yml index fe2622a..3f6ab3f 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,11 +2,11 @@ sudo: false language: node_js node_js: - - '5' - - '4' - - '0.12' + - 10 + - 8 + - 6 -script: - - npm run test - # travis take is weird, disabled for now - #- if [[ $(node --version) != v0.* ]]; then; npm run docs-test; fi +before_install: + - npm i -g npm@latest +install: + - npm ci diff --git a/CHANGELOG.md b/CHANGELOG.md index 4fe4bde..41f9b43 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,80 +1,162 @@ +# 3.1.0 - 2018-01-22 + +* Update postcss-font-family-system-ui to version 3.0 by @JLHwung in + [#443](https://github.com/MoOx/postcss-cssnext/pull/443) +* Update postcss-cli usage example in docs by @RyanZim in + [#444](https://github.com/MoOx/postcss-cssnext/pull/444) + +# 3.0.2 - 2017-07-10 + +* Fixed: remove incorrect "postinstall" npm script + ([#404](https://github.com/MoOx/postcss-cssnext/issues/404) - @MoOx) + +# 3.0.1 - 2017-07-10 + +* Fixed: specify the actual require peer dependency for caniuse database + (caniuse-lite is used since latest caniuse-api latest major bump) (@MoOx) +* Fixed: bump dependencies not updated to PostCSS@6 + ([#401](https://github.com/MoOx/postcss-cssnext/issues/401) - @MoOx) + +# 3.0.0 - 2017-07-05 + +## Removed: support for node 0.12 + +Node 4+ is supported. + +## Changed: upgrade to PostCSS 6 + +All postcss plugins dependencies have been updated to latest version to ensure +full PostCSS 6 compatibility. + +Some breaking (minor) changes: + +* image-set polyfill change 2x from 144dpi to 192dpi +* whitespace changes for image-set polyfill output +* rebeccapurpule is now an hexa number +* custom-selector does not output useless (empty) blocks with a selector with no + rules associated + +You can expect some other since all postcss plugins used have been updated to +latest versions. If you have unexpected regression, please check corresponding +plugins changelog before opening an issue. + +## Added: warning is emitted is you use custom property sets and `@apply` + +This feature won't be included in next the major release of postcss-cssnext. + +This most likely won't get any more support from browser vendors as the spec is +yet considered deprecated and alternative solutions are being discussed. Read +more about the reason here https://github.com/pascalduez/postcss-apply + +# 2.11.0 - 2017-05-15 + +* Added: `image-set()` support (via + [postcss-image-set-polyfill](https://github.com/SuperOl3g/postcss-image-set-polyfill)) + ([#373](https://github.com/MoOx/postcss-cssnext/pull/373) - @SuperOl3g) +* Added: new auto-deactivation rule in features map + ([#369](https://github.com/MoOx/postcss-cssnext/pull/369) - @Semigradsky) + +# 2.10.0 - 2017-03-16 + +* Added: `system-ui` keyword to define current System font-size (via + [postcss-font-family-system-ui](https://github.com/JLHwung/postcss-font-family-system-ui)) + ([#342](https://github.com/MoOx/postcss-cssnext/pull/342) - @JLHwung) +* Added: new auto-deactivation rules in features map + ([#345](https://github.com/MoOx/postcss-cssnext/pull/345) - @Semigradsky) + +# 2.9.0 - 2016-11-28 + +* Added: new rgb() & hsl() functional notation (via + [postcss-color-rgb](https://github.com/dmarchena/postcss-color-rgb) & + [postcss-color-hsl](https://github.com/dmarchena/postcss-color-hsl) ) + ([#330](https://github.com/MoOx/postcss-cssnext/pull/330) - @dmarchena) + +# 2.8.0 - 2016-09-05 + +* Added: attribute case insensitive support (eg: `[data-thing=stuff i] {` to be + able to select all `data-thing` attribute, without having to thing about the + case of the value) ([#306](https://github.com/MoOx/postcss-cssnext/pull/306) - + @Semigradsky) + +# 2.7.0 - 2016-06-28 + +* Added: `＠apply` support (definitions limited to `:root` selector) + ([#291](https://github.com/MoOx/postcss-cssnext/issues/291)) - @pascalduez) + # 2.6.0 - 2016-06-01 -- Added: ``overflow-wrap`` fallback - ([#280](https://github.com/MoOx/postcss-cssnext/pull/280)) - - @MattDiMu +* Added: `overflow-wrap` fallback + ([#280](https://github.com/MoOx/postcss-cssnext/pull/280) - @MattDiMu) # 2.5.2 - 2016-04-04 -- Fixed: pleeease-filters has been udpated to v3, in order to provide a real - PostCSS plugin - ([#274](https://github.com/MoOx/postcss-cssnext/pull/274)) +* Fixed: pleeease-filters has been udpated to v3, in order to provide a real + PostCSS plugin ([#274](https://github.com/MoOx/postcss-cssnext/pull/274)) # 2.5.1 - 2016-03-14 > Oops! -- Fixed: ``"chalk" is undefined``. +* Fixed: `"chalk" is undefined`. ([#266](https://github.com/MoOx/postcss-cssnext/pull/266)) -- Fixed: typo in related warning. +* Fixed: typo in related warning. # 2.5.0 - 2016-03-14 -- Added: cssnext will now warn you when you have duplicates plugins. - This is a really common mistake, people include plugins that are already - included in cssnext and maybe sometimes in an inaccurate position. - **Most tutorial on the internet are wrong (probably 99%) - and show provide duplicates in their examples. - (eg: autoprefixer + cssnext - but cssnext already includes autoprefixer).** +* Added: cssnext will now warn you when you have duplicates plugins. This is a + really common mistake, people include plugins that are already included in + cssnext and maybe sometimes in an inaccurate position. + **Most tutorial on the internet are wrong (probably 99%) and show provide duplicates + in their examples. (eg: autoprefixer + cssnext - but cssnext already includes autoprefixer).** _In order to fix this, here is a warning. You are welcome._ [Read more about this issue](https://github.com/postcss/postcss/issues/764) -- Added: ``rem`` will now adjust its behavior according to browser option - (IE 9 and IE 10 will only have ``px`` in some places, where rem support is - buggy, per caniuse notes) - ([#264](https://github.com/MoOx/postcss-cssnext/issues/264)) +* Added: `rem` will now adjust its behavior according to browser option (IE 9 + and IE 10 will only have `px` in some places, where rem support is buggy, per + caniuse notes) ([#264](https://github.com/MoOx/postcss-cssnext/issues/264)) # 2.4.0 - 2016-01-08 -- Added: documentation is now included in the npm package in +* Added: documentation is now included in the npm package in `postcss-cssnext/docs/content` # 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 +* 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. +* 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 +* 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)). +* 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)). +* Added: support for PostCSS v5.x +* Removed: support for PostCSS v4.x + ([b5ece99...8907c13](https://github.com/MoOx/postcss-cssnext/compare/b5ece99c1e1b5e4cdfd6c25f856946bbcbc2247c...8907c13d31662a2cb393edb0387144dfbba81659)). --- @@ -84,135 +166,133 @@ Plugin can be useful for creating isolated components. # 1.8.4 - 2015-08-24 -- Fixed: `compress` option now works again correctly. A recent update in cssnano -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/MoOx/postcss-cssnext/issues/195)) +* Fixed: `compress` option now works again correctly. A recent update in cssnano + 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/MoOx/postcss-cssnext/issues/195)) # 1.8.3 - 2015-08-06 -- Fixed: `url` option (postcss-url) have been updated in order to benefit from -severals fixes. +* Fixed: `url` option (postcss-url) have been updated in order to benefit from + severals fixes. # 1.8.2 - 2015-07-23 -- Fixed: CLI watcher now works watchs correctl multiples `@import` -([#123](https://github.com/MoOx/postcss-cssnext/issues/123)) +* Fixed: CLI watcher now works watchs correctl multiples `@import` + ([#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/MoOx/postcss-cssnext-loader) -([#61](https://github.com/MoOx/postcss-cssnext/issues/61)) +* 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/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/MoOx/postcss-cssnext/issues/162)) -- Fixed: CLI now add `to` option automatically -([#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/MoOx/postcss-cssnext/issues/166)) -- Added: CLI output file dirname is now automatically created (using `mkdirp`) -([#146](https://github.com/MoOx/postcss-cssnext/issues/146)) +* Fixed: replacement of `postcss-log-warnings` (deprecated) by + `postcss-reporter` + ([#162](https://github.com/MoOx/postcss-cssnext/issues/162)) +* Fixed: CLI now add `to` option automatically + ([#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/MoOx/postcss-cssnext/issues/166)) +* Added: CLI output file dirname is now automatically created (using `mkdirp`) + ([#146](https://github.com/MoOx/postcss-cssnext/issues/146)) # 1.7.1 - 2015-06-19 -- Fixed: bullet for browser messages should be visible on Chrome Windows. -Changed from `〉` to `›` +* Fixed: bullet for browser messages should be visible on Chrome Windows. + Changed from `〉` to `›` # 1.7.0 - 2015-06-17 -- Added: warning to deprecate previous (wrong) custom selectors syntax. -Previously they were working with **and without** pseudo syntax ':' -[which is incorrect according to specs](https://github.com/postcss/postcss-custom-selectors/issues/5#issuecomment-90774654) -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/MoOx/postcss-cssnext/issues/97)) -- Added: `plugins` option that allows you to pipe your own transformations -([#118](https://github.com/MoOx/postcss-cssnext/issues/118)) -- Added: `messages` option that allows you to see messages of transformations -([#88](https://github.com/MoOx/postcss-cssnext/issues/88)) -- Added: `:any-link` pseudo class support +* Added: warning to deprecate previous (wrong) custom selectors syntax. + Previously they were working with **and without** pseudo syntax ':' + [which is incorrect according to specs](https://github.com/postcss/postcss-custom-selectors/issues/5#issuecomment-90774654) + 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/MoOx/postcss-cssnext/issues/97)) +* Added: `plugins` option that allows you to pipe your own transformations + ([#118](https://github.com/MoOx/postcss-cssnext/issues/118)) +* Added: `messages` option that allows you to see messages of transformations + ([#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/MoOx/postcss-cssnext/pull/147)) +* Added: prevent mutability issues with frozen options objects + ([#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/MoOx/postcss-cssnext/issues/131)) +* Fixed: support for autoprefixer 5.2 + ([#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/MoOx/postcss-cssnext/pull/129)) +* 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/MoOx/postcss-cssnext/pull/129)) # 1.5.0 - 2015-05-23 -- Changed: `compress` option use [cssnano](https://github.com/ben-eb/cssnano) -instead of CSSWring. +* Changed: `compress` option use [cssnano](https://github.com/ben-eb/cssnano) + instead of CSSWring. # 1.4.0 - 2015-05-01 -- Added: support for `:matches()` selector pseudo class -- Added: support for `:not()` selector pseudo class level 4 -(transpiled to level 3) +* Added: support for `:matches()` selector pseudo class +* Added: support for `:not()` selector pseudo class level 4 (transpiled to + level 3) # 1.3.1 - 2015-05-01 -- Fixed: CLI `--watch` doesn't make some duplicate rebuild anymore. +* Fixed: CLI `--watch` doesn't make some duplicate rebuild anymore. # 1.3.0 - 2015-04-15 -- Added: hexadecimal fallback for rgba() color +* Added: hexadecimal fallback for rgba() color # 1.2.3 - 2015-04-10 -- Fixed: --watch doesn't output console.log() related to watcherd/unwatched -files anymore +* Fixed: --watch doesn't output console.log() related to watcherd/unwatched + files anymore # 1.2.2 - 2015-04-09 -- Changed: upgrade chokidar to stable 1.0.0 (used for cssnext --watch) +* Changed: upgrade chokidar to stable 1.0.0 (used for cssnext --watch) # 1.2.1 - 2015-03-02 -- Fixed: remove some deprecation notice related to postcss 4.1 -([postcss#272](https://github.com/postcss/postcss/issues/272)) +* Fixed: remove some deprecation notice related to postcss 4.1 + ([postcss#272](https://github.com/postcss/postcss/issues/272)) # 1.2.0 - 2015-04-02 -- Added: pseudoElements single colon fallback for pseudoElements double colons -- Added: `--watch` CLI option now checks for changes in imported files +* Added: pseudoElements single colon fallback for pseudoElements double colons +* Added: `--watch` CLI option now checks for changes in imported files # 1.1.0 - 2015-03-05 -- Added: `--config` CLI option -- Added: `--browsers`CLI option +* Added: `--config` CLI option +* Added: `--browsers`CLI option # 1.0.1 - 2015-02-18 -- Fixed: cssnext binary doesn't exit on an error if --watch is enabled -([#69](https://github.com/MoOx/postcss-cssnext/pull/69)) +* Fixed: cssnext binary doesn't exit on an error if --watch is enabled + ([#69](https://github.com/MoOx/postcss-cssnext/pull/69)) # 1.0.0 - 2015-02-06 -- Changed: upgraded to postcss v4.x -- Changed: `import` is not considered as a `feature` anymore, but is now -directly an option for the API. -It is still enabled by default. +* Changed: upgraded to postcss v4.x +* Changed: `import` is not considered as a `feature` anymore, but is now + directly an option for the API. It is still enabled by default. Before @@ -223,7 +303,7 @@ cssnext({ root: "./src" } } -}) +}); ``` After @@ -233,93 +313,95 @@ cssnext({ import: { root: "./src" } -}) +}); ``` -- Added: `url` option: non absolute url() are now rebased according to `from` -(and `to` options if provided). Enabled by default. -- Added: `compress` option now accept CSSWring options directly. -- Added: `browsers` option can enable or disable features and is propagated to -autoprefixer -- Added: px fallback for `rem` unit +* Added: `url` option: non absolute url() are now rebased according to `from` + (and `to` options if provided). Enabled by default. +* Added: `compress` option now accept CSSWring options directly. +* Added: `browsers` option can enable or disable features and is propagated to + autoprefixer +* Added: px fallback for `rem` unit # 0.6.6 - 2014-12-22 -- Fixed: `Cannot find module 'exit'` error when an error came out -([#54](https://github.com/MoOx/postcss-cssnext/issues/54)) +* Fixed: `Cannot find module 'exit'` error when an error came out + ([#54](https://github.com/MoOx/postcss-cssnext/issues/54)) # 0.6.5 - 2014-12-16 -- Added: [media queries range](http://dev.w3.org/csswg/mediaqueries/#mq-ranges) -feature ([ref](https://github.com/postcss/postcss-media-minmax)) -- Added: [filter](http://www.w3.org/TR/filter-effects/) feature -([ref](https://github.com/iamvdo/pleeease-filters)) +* Added: [media queries range](http://dev.w3.org/csswg/mediaqueries/#mq-ranges) + feature ([ref](https://github.com/postcss/postcss-media-minmax)) +* Added: [filter](http://www.w3.org/TR/filter-effects/) feature + ([ref](https://github.com/iamvdo/pleeease-filters)) # 0.6.4 - 2014-12-11 -- Changed: upgrade postcss-import to 4.0.0 for windows compatibility -- Added: Windows compatibility (by building test on AppVeyor) +* Changed: upgrade postcss-import to 4.0.0 for windows compatibility +* Added: Windows compatibility (by building test on AppVeyor) # 0.6.3 - 2014-12-09 -- Changed: upgrade to csswring v2.0.0 (postcss 3 ready). This is removing the -boring warnings. -- Changed: update postcss-custom-selectors reference (with an S) +* Changed: upgrade to csswring v2.0.0 (postcss 3 ready). This is removing the + boring warnings. +* Changed: update postcss-custom-selectors reference (with an S) # 0.6.2 - 2014-12-04 -- Added: [custom selectors](http://dev.w3.org/csswg/css-extensions/#custom-selectors) feature ([ref](https://github.com/postcss/postcss-custom-selector)). +* Added: + [custom selectors](http://dev.w3.org/csswg/css-extensions/#custom-selectors) + feature ([ref](https://github.com/postcss/postcss-custom-selector)). # 0.6.1 - 2014-12-01 -- Changed: update to postcss-calc v3 (which add `precision` & `preserve`) & -some useless minor updates -- Changed: standalone version is now uglified (`dist/cssnext.js`) +* Changed: update to postcss-calc v3 (which add `precision` & `preserve`) & some + useless minor updates +* Changed: standalone version is now uglified (`dist/cssnext.js`) # 0.6.0 - 2014-11-24 -- Changed: upgrade to postcss-import v3 which allow to easily consume -node_modules -- Changed: "prefixes" feature is now "autoprefixer" -- Added: cssnext can be used as a postcss plugin +* Changed: upgrade to postcss-import v3 which allow to easily consume + node_modules +* Changed: "prefixes" feature is now "autoprefixer" +* Added: cssnext can be used as a postcss plugin # 0.5.0 - 2014-11-13 -- Fixed: cssnext returns a string only if the first parameter is a real string -(typeof === string) -- Changed: upgrade to postcss 3 -- Changed: if sourcemap is set to true, default map is now true since postcss -v3.0.0 have by default `{inline: true, sourceContent: true}` -- Changed: upgrade read-file-stdin from 0.0.4 to 0.2.0 +* Fixed: cssnext returns a string only if the first parameter is a real string + (typeof === string) +* Changed: upgrade to postcss 3 +* Changed: if sourcemap is set to true, default map is now true since postcss + v3.0.0 have by default `{inline: true, sourceContent: true}` +* Changed: upgrade read-file-stdin from 0.0.4 to 0.2.0 # 0.4.4 - 2014-11-11 -- Fixed: bug introduced by `options` mutations -([gulp-cssnext#1](https://github.com/cssnext/gulp-cssnext/issues/1)) +* Fixed: bug introduced by `options` mutations + ([gulp-cssnext#1](https://github.com/cssnext/gulp-cssnext/issues/1)) # 0.4.3 - 2014-11-09 -- Added: font-variant support -([#42](https://github.com/MoOx/postcss-cssnext/issues/42)) +* Added: font-variant support + ([#42](https://github.com/MoOx/postcss-cssnext/issues/42)) # 0.4.2 - 2014-11-02 -- Fixed: support !important for custom properties -([#12](https://github.com/postcss/postcss-custom-properties/issues/12)) -- 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/MoOx/postcss-cssnext/issues/3)) +* Fixed: support !important for custom properties + ([#12](https://github.com/postcss/postcss-custom-properties/issues/12)) +* 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/MoOx/postcss-cssnext/issues/3)) # 0.4.1 - 2014-11-01 -- Added: gray() support -([#44](https://github.com/MoOx/postcss-cssnext/issues/44)) +* Added: gray() support + ([#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/MoOx/postcss-cssnext/issues/40)). +* Changed: color feature has been exploded to multiples features + ([#40](https://github.com/MoOx/postcss-cssnext/issues/40)). Before @@ -353,9 +435,9 @@ 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/MoOx/postcss-cssnext/issues/39)). +* 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/MoOx/postcss-cssnext/issues/39)). Before @@ -363,7 +445,7 @@ Before //eg: preserve custom properties var output = cssnext(input, { preserve: true -}) +}); ``` Now @@ -376,43 +458,42 @@ var output = cssnext(input, { preserve: true } } -}) +}); ``` -- Added: more control on sourcemap is possible using the new `map` option -(direct postcss option). -Using this option make `sourcemap` one to be ignored and change the return value - of `cssnext()` (object instead of string) +* Added: more control on sourcemap is possible using the new `map` option + (direct postcss option). Using this option make `sourcemap` one to be ignored + and change the return value of `cssnext()` (object instead of string) -This change have been made to avoid collision between options -(of each features). +This change have been made to avoid collision between options (of each +features). # 0.3.1 - 2014-08-27 -- Fixed: nested custom properties usages -([#25](https://github.com/MoOx/postcss-cssnext/issues/25)) +* Fixed: nested custom properties usages + ([#25](https://github.com/MoOx/postcss-cssnext/issues/25)) # 0.3.0 - 2014-08-26 -- Added: better custom properties fallbacks -(thanks to postcss-custom-properties 0.3.0) +* Added: better custom properties fallbacks (thanks to postcss-custom-properties + 0.3.0) # 0.2.3 - 2014-08-26 -- Fixed: support empty files -([#24](https://github.com/MoOx/postcss-cssnext/issues/24)) +* Fixed: support empty files + ([#24](https://github.com/MoOx/postcss-cssnext/issues/24)) # 0.2.2 - 2014-08-22 -- Fixed: missing `bin` in npm files... +* Fixed: missing `bin` in npm files... # 0.2.1 - 2014-08-22 -- Fixed: missing `bin` in `package.json` for npm +* Fixed: missing `bin` in `package.json` for npm # 0.2.0 - 2014-08-20 -- Changed: `from` option doesn't enable `sourcemap` automatically anymore +* Changed: `from` option doesn't enable `sourcemap` automatically anymore # 0.1.0 - 2014-08-19 diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 4ead0e1..b4441b4 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,13 +1,28 @@ # Contributor Code of Conduct -As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities. +As contributors and maintainers of this project, we pledge to respect all people +who contribute through reporting issues, posting feature requests, updating +documentation, submitting pull requests or patches, and other activities. -We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion. +We are committed to making participation in this project a harassment-free +experience for everyone, regardless of level of experience, gender, gender +identity and expression, sexual orientation, disability, personal appearance, +body size, race, age, or religion. -Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct. +Examples of unacceptable behavior by participants include the use of sexual +language or imagery, derogatory comments or personal attacks, trolling, public +or private harassment, insults, or other unprofessional conduct. -Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team. +Project maintainers have the right and responsibility to remove, edit, or reject +comments, commits, code, wiki edits, issues, and other contributions that are +not aligned to this Code of Conduct. Project maintainers who do not follow the +Code of Conduct may be removed from the project team. -Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers. +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by opening an issue or contacting one or more of the project +maintainers. -This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/) +This Code of Conduct is adapted from the +[Contributor Covenant](http://contributor-covenant.org), version 1.0.0, +available at +[http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index de89f6d..aab2048 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,11 +1,11 @@ # Contributing -_postcss-cssnext uses a lot of [postcss](https://github.com/postcss) plugins, -so you might need to take a look at them if you find an issue or want to create -or enhance a feature._ +_postcss-cssnext uses a lot of [postcss](https://github.com/postcss) plugins, so +you might need to take a look at them if you find an issue or want to create or +enhance a feature._ -Otherwise, fork, work on a branch, install dev-dependencies, -respect coding style & run tests before submitting a bug fix or a feature. +Otherwise, fork, work on a branch, install dev-dependencies, respect coding +style & run tests before submitting a bug fix or a feature. ```console $ git clone https://github.com/YOU/postcss-cssnext.git @@ -14,31 +14,35 @@ $ npm test $ git checkout -b fix.bug423 ``` -`npm test` will compile what is need to be and run all tests. -If you want to work on one test only, you can run something like +`npm test` will compile what is need to be and run all tests. If you want to +work on one test only, you can run something like ```console $ babel-tape-runner src/__tests__/option.browsers.js ``` -_Be sure to have in your PATH `./node_modules/.bin` so you can use local -module directly in console._ +_Be sure to have in your PATH `./node_modules/.bin` so you can use local module +directly in console._ ## Details ### Add a feature -1. Add test files (input + expected output) in [`src/__tests__/fixtures/features`](src/__tests__/features) -- If the feature can affect some others, update [`src/__tests__/fixtures/cases/example.css`](src/__tests__/cases/example.css) to test integration with other features - -- Choose a pretty simple and clear name (that match the specs), if you are not sure, ask using an issue. -- Add the feature in : - - `docs/content/index.md` (http://cssnext.io/) - - `docs/content/features.md` (http://cssnext.io/features/) with an example + link to specs like others features -- Add the dependency in the [`package.json`](package.json) (use `npm install --save postcss-...`) -- Add the feature in the source (in [`src/features.js`](src/features.js)), in the appropriate place (order matter) -For now, use a empty function instead of the right module -- Run test, & check tests are broken (otherwise feature is useless) -Now, call the right plugin in the function you just created -- Run test and be happy -- Add feature on [the playground](docs/content/playground.html) example +1. Add test files (input + expected output) in + [`src/__tests__/fixtures/features`](src/__tests__/features) + +* Choose a pretty simple and clear name (that match the specs), if you are not + sure, ask using an issue. +* Add the feature in : + * `docs/content/index.md` (http://cssnext.io/) + * `docs/content/features.md` (http://cssnext.io/features/) with an example + + link to specs like others features +* Add the dependency in the [`package.json`](package.json) (use + `npm install --save postcss-...`) +* Add the feature in the source (in [`src/features.js`](src/features.js)), in + the appropriate place (order matter) For now, use a empty function instead of + the right module +* Run test, & check tests are broken (otherwise feature is useless) Now, call + the right plugin in the function you just created +* Run test and be happy +* Add feature on [the playground](docs/content/playground.html) example diff --git a/README.md b/README.md index 486e562..65dbc6c 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,17 @@ -# postcss-cssnext +## `postcss-cssnext` has been deprecated in favor of `postcss-preset-env` -[![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) -[![Version](https://img.shields.io/npm/v/postcss-cssnext.svg)](https://github.com/MoOx/postcss-cssnext/blob/master/CHANGELOG.md) -[![Support on gitter chat](https://img.shields.io/badge/support-gitter%20chat-E40255.svg)](https://gitter.im/MoOx/postcss-cssnext) +Read more at https://moox.io/blog/deprecating-cssnext/ +# postcss-cssnext > PostCSS plugin to use tomorrow’s CSS syntax, today. -PostCSS-cssnext is a PostCSS plugin that helps you to use the latest CSS syntax today. -It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support. - ---- - -## Check out [cssnext website](http://cssnext.io/) - -- [Features](http://cssnext.io/features/) -- [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 -[support chat](https://gitter.im/MoOx/postcss-cssnext). - -For offline documentation, check out `postcss-cssnext/docs/content`. +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. --- -## CONTRIBUTING - -* ⇄ Pull requests and ★ Stars are always welcome. -* For bugs and feature requests, please create an issue. -* Pull requests must be accompanied by passing automated tests (`$ npm test`). - ## [Changelog](CHANGELOG.md) ## [License](LICENSE) diff --git a/appveyor.yml b/appveyor.yml index 336e1af..61d0a26 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -2,9 +2,9 @@ environment: matrix: - - nodejs_version: 5 - - nodejs_version: 4 - - nodejs_version: 0.12 + - nodejs_version: 10 + - nodejs_version: 8 + - nodejs_version: 6 version: "{build}" build: off @@ -14,7 +14,8 @@ matrix: install: - ps: Install-Product node $env:nodejs_version - - npm install + - npm install -g npm@latest + - npm ci test_script: - node --version diff --git a/build.config.js b/build.config.js index 8f8e6ec..19ea1c5 100644 --- a/build.config.js +++ b/build.config.js @@ -1,34 +1,34 @@ -const assign = require("object-assign") +const assign = require("object-assign"); -const dev = process.argv.indexOf("--dev") > -1 -const devServer = process.argv.indexOf("--dev-server") > -1 -const production = process.argv.indexOf("--production") > -1 +const dev = process.argv.indexOf("--dev") > -1; +const devServer = process.argv.indexOf("--dev-server") > -1; +const production = process.argv.indexOf("--production") > -1; const config = assign( { __DEV__: dev, __DEV_SERVER__: devServer, __PROD__: production, - __SERVER_PROTOCOL__: "http://", + __SERVER_PROTOCOL__: "http://" }, - ( - production + production ? { - "process.env": { - NODE_ENV: JSON.stringify("production"), - }, - __SERVER_HOSTNAME__: "cssnext.io", - __SERVER_HOST__: "cssnext.io", - } + "process.env": { + NODE_ENV: JSON.stringify("production") + }, + __SERVER_HOSTNAME__: "cssnext.io", + __SERVER_HOST__: "cssnext.io" + } : { - __SERVER_HOSTNAME__: "0.0.0.0", - __SERVER_PORT__: 1985, - __SERVER_HOST__: "0.0.0.0:1985", - __LR_SERVER_PORT__: 1986, - } - ) -) + __SERVER_HOSTNAME__: "0.0.0.0", + __SERVER_PORT__: 1985, + __SERVER_HOST__: "0.0.0.0:1985", + __LR_SERVER_PORT__: 1986 + } +); -config.__SERVER_URL__ = `${config.__SERVER_PROTOCOL__}${config.__SERVER_HOST__}` +config.__SERVER_URL__ = `${config.__SERVER_PROTOCOL__}${ + config.__SERVER_HOST__ +}`; -module.exports = config +module.exports = config; diff --git a/docs/content/features.md b/docs/content/features.md index 6dc33a5..083d0fb 100644 --- a/docs/content/features.md +++ b/docs/content/features.md @@ -8,21 +8,20 @@ backgroundModifier: darkRoad @[toc] **Note that according to your [browser scope](/usage/#browsers) some -transformation can be skipped to avoid extra useless output.** -Eg: if you use don't cover IE 8, rem fallback and rgba fallback might be skipped. +transformations can be skipped to avoid extra useless output.** Eg: if you use +don't cover IE 8, rem fallback and rgba fallback might be skipped. ## automatic vendor prefixes Vendor prefixes are automatically added (and removed if deprecated/useless depending on your browser scope) using -**[autoprefixer](https://github.com/postcss/autoprefixer)**). +**[autoprefixer](https://github.com/postcss/autoprefixer)**. +## custom properties & `var()` -## custom properties & `var()` - -The current transformation for custom properties aims to provide a -future-proof way of using a **limited subset (to top-level `:root` selector)** -of the features provided by native CSS custom properties. +The current transformation for custom properties aims to provide a future-proof +way of using a **limited to `:root` selector** of the features provided by +native CSS custom properties. ```css :root { @@ -34,14 +33,36 @@ a { } ``` -(The transformation is not complete and can't be properly. By injecting selectors -with new computed rules, we will break original cascade & unexpected results -might happen). +⚠️ +[_The definitions are **limited to `:root` selector.**_](https://github.com/postcss/postcss-custom-properties#readme) -[Specification](http://www.w3.org/TR/css-variables/) -| +[Specification](http://www.w3.org/TR/css-variables/) | [Plugin documentation](https://github.com/postcss/postcss-custom-properties) +## custom properties set & `@apply` + +Allows you to store a set of properties in a named custom property, then +reference them in other style rules. + +```css +:root { + --danger-theme: { + color: white; + background-color: red; + } +} + +.danger { + @apply --danger-theme; +} +``` + +⚠️ +[_The definitions are **limited to `:root` selector.**_](https://github.com/postcss/postcss-custom-properties#readme) + +[Specification](https://tabatkins.github.io/specs/css-apply-rule) | +[Plugin documentation](https://github.com/pascalduez/postcss-apply) + ## reduced `calc()` Allows you to use safely calc with custom properties by optimizing previously @@ -57,13 +78,12 @@ h1 { } ``` -[Specification](https://github.com/MoOx/reduce-css-calc#readme) -| +[Specification](https://github.com/MoOx/reduce-css-calc#readme) | [Plugin documentation](https://github.com/postcss/postcss-calc) ## custom media queries -A nice way to have semantic media queries +A nice way to have semantic media queries. ```css @custom-media --small-viewport (max-width: 30em); @@ -74,13 +94,12 @@ A nice way to have semantic media queries } ``` -[Specification](http://dev.w3.org/csswg/mediaqueries/#custom-mq) -| +[Specification](https://drafts.csswg.org/mediaqueries-5/#custom-mq) | [Plugin documentation](https://github.com/postcss/postcss-custom-media) ## media queries ranges -Allows to replace min-/max- with `<=` & `>=` (syntax easier to read) +Allows to replace min-/max- with `<=` & `>=` (syntax easier to read). ```css @media (width >= 500px) and (width <= 1200px) { @@ -95,13 +114,12 @@ Allows to replace min-/max- with `<=` & `>=` (syntax easier to read) } ``` -[Specification](http://dev.w3.org/csswg/mediaqueries/#mq-ranges) -| +[Specification](http://dev.w3.org/csswg/mediaqueries/#mq-ranges) | [Plugin documentation](https://github.com/postcss/postcss-media-minmax) ## custom selectors -Allows you to create your own selectors +Allows you to create your own selectors. ```css @custom-selector :--button button, .button; @@ -111,22 +129,18 @@ Allows you to create your own selectors /* styles for your buttons */ } :--button:--enter { - /* - hover/focus styles for your button - - Read more about :enter proposal - http://discourse.specifiction.org/t/a-common-pseudo-class-for-hover-and-focus/877 - */ + /* hover/focus styles for your button */ + /* Read more about :enter proposal */ + /* http://discourse.specifiction.org/t/a-common-pseudo-class-for-hover-and-focus/877 */ } ``` -[Specification](http://dev.w3.org/csswg/css-extensions/#custom-selectors) -| +[Specification](http://dev.w3.org/csswg/css-extensions/#custom-selectors) | [Plugin documentation](https://github.com/postcss/postcss-custom-selector) ## nesting -Allows you to nest selectors +Allows you to nest selectors. ```scss a { @@ -147,30 +161,45 @@ a { } ``` -[Specification](http://tabatkins.github.io/specs/css-nesting/) -| +[Specification](http://tabatkins.github.io/specs/css-nesting/) | [Plugin documentation](https://github.com/jonathantneal/postcss-nesting) +## `image-set()` function + +Allows you to set different images for each kind of resolution of user device. + +```css +.foo { + background-image: image-set( + url(img/test.png) 1x, + url(img/test-2x.png) 2x, + url(my-img-print.png) 600dpi + ); +} +``` + +[Specification](https://drafts.csswg.org/css-images-3/#image-set-notation) | +[Plugin documentation](https://github.com/SuperOl3g/postcss-image-set-polyfill) + ## `color()` function -A color function to modify colors (transpiled to: `rgba()`) +A color function to modify colors (transpiled to: `rgba()`). ```css a { color: color(red alpha(-10%)); } - a:hover { - color: color(red blackness(80%)); - } +a:hover { + color: color(red blackness(80%)); +} ``` There is a [lot of color modifiers available](https://github.com/postcss/postcss-color-function#list-of-color-adjuster), so be sure to check them ! -[Specification](http://dev.w3.org/csswg/css-color/#modifying-colors) -| +[Specification](http://dev.w3.org/csswg/css-color/#modifying-colors) | [Plugin documentation](https://github.com/postcss/postcss-color-function) ## `hwb()` function @@ -183,14 +212,13 @@ body { } ``` -[Specification](http://dev.w3.org/csswg/css-color/#the-hwb-notation) -| +[Specification](http://dev.w3.org/csswg/css-color/#the-hwb-notation) | [Plugin documentation](https://github.com/postcss/postcss-color-hwb) ## `gray()` function -Allows you to use more than 50 shades of gray (transpiled to: `rgba()`). -For the first argument, you can use a number between 0 and 255 or a percentage. +Allows you to use more than 50 shades of gray (transpiled to: `rgba()`). For the +first argument, you can use a number between 0 and 255 or a percentage. ```css .foo { @@ -202,13 +230,12 @@ For the first argument, you can use a number between 0 and 255 or a percentage. } ``` -[Specification](http://dev.w3.org/csswg/css-color/#grays) -| +[Specification](http://dev.w3.org/csswg/css-color/#grays) | [Plugin documentation](https://github.com/postcss/postcss-color-gray) ## `#rrggbbaa` colors -Allows use to use 4 or 8 digits hexadecimal notation (transpiled to: `rgba()`). +Allows you to use 4 or 8 digits hexadecimal notation (transpiled to: `rgba()`). ```css body { @@ -216,14 +243,13 @@ body { } ``` -[Specification](http://dev.w3.org/csswg/css-color/#hex-notation) -| +[Specification](http://dev.w3.org/csswg/css-color/#hex-notation) | [Plugin documentation](https://github.com/postcss/postcss-color-hex-alpha) ## `rgba` function (`rgb` fallback) -Add solid colors fallback for rgba colors -(if your browser scope cover old browsers, eg: IE8). +Add solid colors fallback for rgba colors (if your browser scope covers old +browsers, eg: IE8). ```css body { @@ -232,14 +258,13 @@ body { } ``` -[Specification](http://www.w3.org/TR/css3-color/) -| +[Specification](http://www.w3.org/TR/css3-color/) | [Plugin documentation](https://github.com/postcss/postcss-color-rgba-fallback) ## `rebeccapurple` color Allows you to use the new color keyword as a homage to -[Eric Meyer’s daughter](https://github.com/postcss/postcss-color-rebeccapurple#why-this-plugin-) +[Eric Meyer’s daughter](https://github.com/postcss/postcss-color-rebeccapurple#why-this-plugin-). ```css body { @@ -247,13 +272,12 @@ body { } ``` -[Specification](http://dev.w3.org/csswg/css-color/#valdef-color-rebeccapurple) -| +[Specification](http://dev.w3.org/csswg/css-color/#valdef-color-rebeccapurple) | [Plugin documentation](https://github.com/postcss/postcss-color-rebeccapurple) ## `font-variant` property -properties (fallback: `font-feature-settings`) +properties (fallback: `font-feature-settings`). ```css h2 { @@ -269,9 +293,7 @@ table { at the support of [font feature settings](http://caniuse.com/#feat=font-feature). - -[Specification](http://dev.w3.org/csswg/css-fonts/#propdef-font-variant) -| +[Specification](http://dev.w3.org/csswg/css-fonts/#propdef-font-variant) | [Plugin documentation](https://github.com/postcss/postcss-font-variant) ## `filter` property @@ -281,23 +303,21 @@ for Firefox < 35. ```css .blur { - filter: blur(4px); + filter: blur(4px); } ``` -[Specification](http://www.w3.org/TR/filter-effects/) -| +[Specification](http://www.w3.org/TR/filter-effects/) | [Plugin documentation](https://github.com/iamvdo/pleeease-filters) ## `initial` value -Allow you to use `initial` value for any value. This value represents the value +Allows you to use `initial` value for any property. This value represents the value specified as the property’s initial value. **It does not mean browser default.** For example, for the `display` property, `initial` always means `inline`, -because that’s the designated initial value of the property. -As an example, using `div { display: initial }`, will **not** be `block`, but -`inline`. +because that’s the designated initial value of the property. As an example, +using `div { display: initial }`, will **not** be `block`, but `inline`. ```css div { @@ -313,14 +333,12 @@ div { } ``` -[Specification](http://www.w3.org/TR/css3-values/#common-keywords) -| +[Specification](http://www.w3.org/TR/css3-values/#common-keywords) | [Plugin documentation](https://github.com/maximkoretskiy/postcss-initial) ## `rem` unit (`px` fallback) -`rem` fallback to `px` -(if your browser scope cover old browsers, eg: IE8). +`rem` fallback to `px` (if your browser scope covers old browsers, eg: IE8). ```css h1 { @@ -328,8 +346,7 @@ h1 { } ``` -[Specification](http://www.w3.org/TR/css3-values/#rem-unit) -| +[Specification](http://www.w3.org/TR/css3-values/#rem-unit) | [Plugin documentation](https://github.com/robwierzbowski/node-pixrem) ## `:any-link` pseudo-class @@ -342,11 +359,9 @@ nav :any-link { } ``` -[Specification](http://dev.w3.org/csswg/selectors/#any-link-pseudo) -| +[Specification](http://dev.w3.org/csswg/selectors/#any-link-pseudo) | [Plugin documentation](https://github.com/jonathantneal/postcss-pseudo-class-any-link) - ## `:matches` pseudo-class Allows you to use `:matches()`. @@ -357,15 +372,13 @@ p:matches(:first-child, .special) { } ``` -[Specification](http://dev.w3.org/csswg/selectors-4/#matches) -| +[Specification](http://dev.w3.org/csswg/selectors-4/#matches) | [Plugin documentation](https://github.com/postcss/postcss-selector-matches) - ## `:not` pseudo-class Allows you to use `:not()` level 4 (which allows multiples selector). -Transformed to `:not()` level 3 (which allow only one selector)`. +Transformed to `:not()` level 3 (which allows only one selector). ```css p:not(:first-child, .special) { @@ -373,14 +386,12 @@ p:not(:first-child, .special) { } ``` -[Specification](http://dev.w3.org/csswg/selectors-4/#negation) -| +[Specification](http://dev.w3.org/csswg/selectors-4/#negation) | [Plugin documentation](https://github.com/postcss/postcss-selector-NOT) ## `::` pseudo syntax (`:` fallback) -Adjust `::` to `:` -(if your browser scope cover old browsers, eg: IE8). +Adjust `::` to `:` (if your browser scope covers old browsers, eg: IE8). ```css a::before { @@ -388,13 +399,13 @@ a::before { } ``` -[Specification](http://www.w3.org/TR/css3-selectors/#pseudo-elements) -| +[Specification](http://www.w3.org/TR/css3-selectors/#pseudo-elements) | [Plugin documentation](https://github.com/axa-ch/postcss-pseudoelements) ## `overflow-wrap` property (`word-wrap` fallback) -Converts `overflow-wrap` to `word-wrap` (many browser support only the old [word-wrap](http://caniuse.com/#feat=wordwrap) property). +Converts `overflow-wrap` to `word-wrap` (many browsers only support the old +[word-wrap](http://caniuse.com/#feat=wordwrap) property). ```css body { @@ -402,17 +413,82 @@ body { } ``` -[Specification](https://drafts.csswg.org/css-text-3/#propdef-word-wrap) -| +[Specification](https://drafts.csswg.org/css-text-3/#propdef-word-wrap) | [Plugin documentation](https://github.com/MattDiMu/postcss-replace-overflow-wrap) +## attribute case insensitive + +Allows you to use case insensitive attributes. + +```css +[frame="hsides" i] { + border-style: solid none; +} +``` + +[Specification](https://www.w3.org/TR/selectors4/#attribute-case) | +[Plugin documentation](https://github.com/Semigradsky/postcss-attribute-case-insensitive) + +## `rgb()` function (functional-notation) + +Allows you to use its new syntax consisting of space-separated arguments and an +optional slash-separated opacity. + +You can also use number for color channels. + +The alpha value accepts percentage as well as number and has been added to +`rgb()` as optional argument. As a result, `rgb()` and `rgba()` are now aliases +of each other. + +```css +div { + background-color: rgb(100 222.2 100.9 / 30%); +} +``` + +[Specification](https://drafts.csswg.org/css-color/#rgb-functions) | +[Plugin documentation](https://github.com/dmarchena/postcss-color-rgb) + +## `hsl()` function (functional-notation) + +Allows you to use its new syntax consisting of space-separated arguments and an +optional slash-separated opacity. + +`hsl()` now accepts angles (`deg`, `grad`, `rad`, `turn`) as well as numbers for +hues and an optional percentage or number for alpha value. So, `hsl()` and +`hsla()` are now aliases of each other too. + +```css +div { + color: hsl(90deg 90% 70%); + background-color: hsl(300grad 25% 15% / 70%); +} +``` + +[Specification](https://drafts.csswg.org/css-color/#the-hsl-notation) | +[Plugin documentation](https://github.com/dmarchena/postcss-color-hsl) + +## `system-ui` font-family + +Allows you to use `system-ui` generic font-family. The current transformation +provides a practical font-family list as fallback. + +```css +body { + font-family: system-ui; +} +``` + +[Specification](https://drafts.csswg.org/css-fonts-4/#valdef-font-family-system-ui) +| +[Plugin documentation](https://github.com/JLHwung/postcss-font-family-system-ui) + ## @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/MoOx/postcss-cssnext/issues?q=is%3Aopen+is%3Aissue+label%3A%22type%3A+feature+request%22). +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/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/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. +[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 513859d..e869080 100644 --- a/docs/content/index.md +++ b/docs/content/index.md @@ -2,6 +2,7 @@ template: Simple title: cssnext - Use tomorrow’s CSS syntax, today. --- +
@@ -24,6 +25,7 @@ title: cssnext - Use tomorrow’s CSS syntax, today. style="vertical-align: middle" src="https://ghbtns.com/github-btn.html?user=MoOx&repo=postcss-cssnext&type=star&count=true&size=large" > +
@@ -51,7 +53,10 @@ title: cssnext - Use tomorrow’s CSS syntax, today. automatic vendor prefixes
  • - custom properties & var() + custom properties & var() +
    • +
  • + custom properties set & @apply
  • reduced calc() @@ -69,7 +74,10 @@ title: cssnext - Use tomorrow’s CSS syntax, today. nesting
  • - color() function + image-set() function +
    • +
  • + color() function
  • hwb() function @@ -127,11 +135,32 @@ title: cssnext - Use tomorrow’s CSS syntax, today.
  • - overflow-wrap property + overflow-wrap property (word-wrap fallback)
    • +
  • + attribute case insensitive +
    • +
  • + rgb() function + + (functional-notation) + +
    • +
  • + hsl() function + + (functional-notation) + +
    • +
  • + system-ui font-family + + (font-family fallback) + +
    • "cssnext" ! diff --git a/docs/content/playground.html b/docs/content/playground.html index a288eb6..1145338 100644 --- a/docs/content/playground.html +++ b/docs/content/playground.html @@ -16,6 +16,19 @@ --highlightColor: hwb(190, 35%, 20%); } +/* custom properties set & @apply rule */ +:root { + --centered: { + display: flex; + align-items: center; + justify-content: center; + }; +} + +.centered { + @apply --centered; +} + /* custom media queries */ @custom-media --viewport-medium (width <= 50rem); @@ -37,6 +50,15 @@ @custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading { margin-top: 0 } +/* image-set function */ +.foo { + background-image: + image-set( + url(img/test.png) 1x, + url(img/test-2x.png) 2x + ); +} + /* colors stuff */ a { color: var(--highlightColor); @@ -44,6 +66,7 @@ } a:hover { color: gray(255, 50%) } a:active { color: rebeccapurple } +a:focus { background-color: rgb(255 153 0 / 33%); outline: 3px solid hsl(1turn 60% 50%); } a:any-link { color: color(var(--highlightColor) blackness(+20%)) } /* font stuff */ @@ -65,7 +88,17 @@ /* overflow-wrap fallback */ body { -overflow-wrap: break-word; +overflow-wrap: break-word; +} + +/* attribute case insensitive */ +[frame=hsides i] { +border-style: solid none; +} + +/* system-ui font-family */ +body { +font-family: system-ui; } diff --git a/docs/content/postcss.md b/docs/content/postcss.md index 460ec0a..5a8a124 100644 --- a/docs/content/postcss.md +++ b/docs/content/postcss.md @@ -7,43 +7,39 @@ subtitle: How to migrate from cssnext to postcss-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). +If you're using [PostCSS](https://github.com/postcss/postcss) in your build +process, and you 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`...) . +At first, before PostCSS became popular, cssnext was designed to be a complete +tool. Thus, cssnext included 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. +directly (so they can easily adjust and choose their CSS transformations). So we +decided to make the integration of cssnext simpler by providing a simple (real) +plugin. -Also, having to maintain severals cssnext and PostCSS runners that does almost -the same is not optimal. +Also, having to maintain several cssnext and PostCSS runners that do almost the +same thing is not optimal. ### Migration -If you were using cssnext with some options here is what you need to know: +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 +* `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 +* `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). @@ -53,7 +49,8 @@ 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). +These options were just proxy to +[PostCSS source map options](https://github.com/postcss/postcss/blob/master/docs/source-maps.md). #### Examples @@ -66,10 +63,10 @@ $ npm install postcss postcss-import postcss-url postcss-cssnext postcss-browser With the previous lines you might think 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. +might not be interested in some options. -Now that you have the appropriate plugins, here are some examples with some runners -and previous default cssnext behavior. +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) @@ -77,23 +74,24 @@ and previous default cssnext behavior. $ 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``. +Here is an example of the JS config you might use with something like +`$ postcss input.css -o output.css`. + +**postcss.config.js** ```js -{ - "use": [ - "postcss-import", - "postcss-url", - "postcss-cssnext", +module.exports = { + plugins: [ + require("postcss-import"), + require("postcss-url"), + require("postcss-cssnext"), // add your "plugins" here // ... // and if you want to compress - // "cssnano", - "postcss-browser-reporter", - "postcss-reporter" + // require('cssnano'), + require("postcss-browser-reporter") ] -} +}; ``` ##### [grunt-postcss](https://www.npmjs.com/package/grunt-postcss) @@ -114,13 +112,14 @@ grunt.initConfig({ // add your "plugins" here // ... // and if you want to compress - // require("cssnano")(), + // Disable autoprefixer, because it's already included in cssnext + // require("cssnano")({ autoprefixer: false }), require("postcss-browser-reporter")(), - require("postcss-reporter")(), + require("postcss-reporter")() ] }, dist: { - src: 'css/*.css' + src: "css/*.css" } } }); @@ -134,26 +133,28 @@ $ 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')) - ) -}) +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 + // Disable autoprefixer, because it's already included in cssnext + // require("cssnano")({ autoprefixer: false }), + require("postcss-browser-reporter")(), + require("postcss-reporter")() + ]) + ) + .pipe(gulp.dest("./dest")); +}); ``` ##### [postcss-loader](https://www.npmjs.com/package/postcss-loader) @@ -168,12 +169,12 @@ module.exports = { module: { loaders: [ { - test: /\.css$/, - loader: "style-loader!css-loader!postcss-loader" + test: /\.css$/, + loader: "style-loader!css-loader!postcss-loader" } ] }, - postcss: function (webpack) { + postcss: function(webpack) { return [ require("postcss-import")({ addDependencyTo: webpack }), require("postcss-url")(), @@ -183,12 +184,11 @@ module.exports = { // 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")(), - ] + require("postcss-reporter")() + ]; } -} +}; ``` -**With those examples, you got it. -Feel free to adjust the configuration with the appropriate -[PostCSS runner](/setup/#usage).** +**With these examples, you'll have future facing CSS. 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 088a08a..34640d0 100644 --- a/docs/content/setup.md +++ b/docs/content/setup.md @@ -8,7 +8,8 @@ backgroundModifier: darkTeam ## Installation -postcss-cssnext is available on [npm](https://www.npmjs.org/package/postcss-cssnext) +postcss-cssnext is available on +[npm](https://www.npmjs.org/package/postcss-cssnext) ```console $ npm install postcss postcss-cssnext @@ -40,7 +41,6 @@ PostCSS runner that suits your workflow: [`cssnext` is dead. Long live to `postcss-cssnext`.](/postcss/) - ## Wait, what is PostCSS? [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 e233e28..f921931 100644 --- a/docs/content/usage.md +++ b/docs/content/usage.md @@ -10,15 +10,13 @@ little bit. You will find below all the available **options**. ## `browsers` -_(default: -[browserslist default](https://github.com/ai/browserslist#readme) +_(default: [browserslist default](https://github.com/ai/browserslist#readme) `> 1%, last 2 versions, Firefox ESR, Opera 12.1`)_ -Allows you to specify your browser scope. -**This option enables or disables `features` according to -[caniuse](http://caniuse.com/) database.** -This is the exact same option that you might know from Autoprefixer. -Since cssnext includes Autoprefixer, the option is propagated. +Allows you to specify your browser scope. **This option enables or disables +`features` according to [caniuse](http://caniuse.com/) database.** This is the +exact same option that you might know from Autoprefixer. Since cssnext includes +Autoprefixer, the option is propagated. See [Browserslist](https://github.com/ai/browserslist#queries) queries syntax to adjust this option to your needs. @@ -32,33 +30,46 @@ _(default: all features depending on your `browsers` options)_ **You should probably use `browsers` option instead of this one.** -Object containing key of features to enable/disable. -_Features are enabled by default: no key means feature is enabled_. +Object containing key of features to enable/disable. _Features are enabled by +default: no key means feature is enabled_. Keys can be found by looking in +[src/features.js](https://github.com/MoOx/postcss-cssnext/blob/master/src/features.js). ```js //eg: disable custom properties support -var output = cssnext(input, { - features: { - customProperties: false - } -}) + +var postcss = require("postcss"); +var cssnext = require("postcss-cssnext"); + +postcss([ + cssnext({ + features: { + customProperties: false + } + }) +]); ``` -Each feature is based on PostCSS plugins & can get its own options. -To pass options to a feature, you can just pass an object to the feature: +Each feature is based on PostCSS plugins & can get its own options. To pass +options to a feature, you can just pass an object to the feature: ```js //eg: pass variables -var output = cssnext(input, { - features: { - customProperties: { - variables: { - mainColor: "red", - altColor: "blue", + +var postcss = require("postcss"); +var cssnext = require("postcss-cssnext"); + +postcss([ + cssnext({ + features: { + customProperties: { + variables: { + mainColor: "red", + altColor: "blue" + } } } - } -}) + }) +]); ``` ## `warnForDuplicates` @@ -67,11 +78,17 @@ _(default: true)_ This option should be left with its default value, unless you really know what you are doing. -**Most tutorial on the internet are wrong (probably 99%) -and show provide duplicates in their examples. -(eg: autoprefixer + cssnext - but cssnext already includes autoprefixer).** +**Most tutorial on the internet are wrong (probably 99%) and show provide duplicates +in their examples. (eg: autoprefixer + cssnext - but cssnext already includes autoprefixer).** _In order to fix this, here is a warning. You are welcome._ +## `warnForDeprecations` + +_(default: true)_ + +This option should be left with its default value, unless you are aware of the +risk and plan to handle the situation. + --- **To know all available options, please check corresponding postcss plugin by diff --git a/docs/scripts/build.js b/docs/scripts/build.js index bb56245..7b8ed12 100644 --- a/docs/scripts/build.js +++ b/docs/scripts/build.js @@ -1,131 +1,115 @@ -import path from "path" +/* eslint-disable import/max-dependencies */ +import path from "path"; -import { sync as rm } from "rimraf" -import color from "chalk" +import { sync as rm } from "rimraf"; +import color from "chalk"; -import Metalsmith from "metalsmith" -import markdown from "metalsmith-md" -import addFilenames from "metalsmith-filenames" -import url from "metalsmith-url" -import rename from "metalsmith-rename" +import Metalsmith from "metalsmith"; +import markdown from "metalsmith-md"; +import addFilenames from "metalsmith-filenames"; +import url from "metalsmith-url"; +import rename from "metalsmith-rename"; // import collections from "metalsmith-collections" // import rss from "metalsmith-rss" -import react from "metalsmith-react" +import react from "metalsmith-react"; +import nanoLogger from "nano-logger"; +import markdownIt from "markdown-it"; +import watch from "metalsmith-watch"; -import markdownIt from "markdown-it" -import markdownOptions from "./markdown" -import markdownItTocAndAnchor from "markdown-it-toc-and-anchor" +import markdownOptions from "./markdown"; +import markdownItTocAndAnchor from "markdown-it-toc-and-anchor"; -import webpack from "./webpack" -import pkg from "../../package" -import buildConfig from "../../build.config" -import webpackConfig from "../../webpack.config" +import pkg from "../../package"; +import buildConfig from "../../build.config"; +import webpackConfig from "../../webpack.config"; +import webpack from "./webpack"; +import devServer from "./webpack-dev-server"; -// dev -import watch from "metalsmith-watch" -import devServer from "./webpack-dev-server" +const log = nanoLogger("./build"); -import nanoLogger from "nano-logger" -const log = nanoLogger("./build") +JSON.stringify(buildConfig, null, 2) + .split("\n") + .forEach(l => log(l)); -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. // This allows us to get hashes in filename and pass them to the build -rm(path.join(__dirname, "..", "dist")) +rm(path.join(__dirname, "..", "dist")); -const smith = new Metalsmith(path.join(__dirname, "..")) +const smith = new Metalsmith(path.join(__dirname, "..")); smith -.source("content") -.destination("dist") -// clean is made before -.clean(false) - -// convert markdown -.use( - markdown({ - markdownIt: markdownIt(markdownOptions) - .use(markdownItTocAndAnchor, { - tocFirstLevel: 2, - }), - }) -) - -// useful for some homemade plugins -.use( - addFilenames() -) - -// add url meta data with some replacements -.use( - url([ - mdToHtmlReplacement, - [ /index\.html?$/, "" ], - ]) -) -// wrap .html into react `template:` -.use( - react({ - pattern: [ - "**/*.md", - "**/*.html", - ], - templatesPath: "src/layouts", - defaultTemplate: "Default", - before: "", - data: { - pkg, - metadata: smith.metadata(), - }, - }) -) - -.use( - rename([ - mdToHtmlReplacement, - // no .html at the end of urls - [ /\.html$/, "/index.html" ], - // ensure we only have index.html, no index/index - [ /index\/index\.html$/, "index.html" ], - ]) -) + .source("content") + .destination("dist") + // clean is made before + .clean(false) + + // convert markdown + .use( + markdown({ + markdownIt: markdownIt(markdownOptions).use(markdownItTocAndAnchor, { + tocFirstLevel: 2 + }) + }) + ) + + // useful for some homemade plugins + .use(addFilenames()) + + // add url meta data with some replacements + .use(url([mdToHtmlReplacement, [/index\.html?$/, ""]])) + // wrap .html into react `template:` + .use( + react({ + pattern: ["**/*.md", "**/*.html"], + templatesPath: "src/layouts", + defaultTemplate: "Default", + before: "", + data: { + pkg, + metadata: smith.metadata() + } + }) + ) + + .use( + rename([ + mdToHtmlReplacement, + // no .html at the end of urls + [/\.html$/, "/index.html"], + // ensure we only have index.html, no index/index + [/index\/index\.html$/, "index.html"] + ]) + ); const webpackComputedConfig = { ...webpackConfig, entry: { - index: [ - "./docs/src/index", - ], - playground: [ - "./docs/src/modules/playground/index", - ], + index: ["./docs/src/index"], + playground: ["./docs/src/modules/playground/index"] }, output: { path: path.join(__dirname, "..", "dist"), filename: "[name].js", - publicPath: "/", - }, -} + publicPath: "/" + } +}; // for development, we build metalsmith first, then we serve via // webpack-dev-server which build assets too (no hashes involved) if (buildConfig.__DEV_SERVER__) { smith.metadata().assets = { - version: String((new Date()).getTime()), + version: String(new Date().getTime()), scripts: [ "/index.js", - `http://${ - buildConfig.__SERVER_HOSTNAME__ - }:${ + `http://${buildConfig.__SERVER_HOSTNAME__}:${ buildConfig.__LR_SERVER_PORT__ - }/livereload.js`, - ], + }/livereload.js` + ] // css is handled by the js via webpack style-loader - } + }; smith .use( watch({ @@ -134,50 +118,44 @@ if (buildConfig.__DEV_SERVER__) { paths: { "${source}/**/*": true, "src/layouts/**/*": "**/*.md", - "src/modules/**/*": "**/*.md", - }, + "src/modules/**/*": "**/*.md" + } }) ) - .build((err) => { + .build(err => { if (err) { - throw err + throw err; } devServer(webpackComputedConfig, { protocol: buildConfig.__SERVER_PROTOCOL__, host: buildConfig.__SERVER_HOSTNAME__, port: buildConfig.__SERVER_PORT__, - open: process.argv.includes("--open"), - }) - }) -} - -// for production we build assets first to be able to pass some assets hashes -// to metalsmith -else { - webpack(webpackComputedConfig, log, (stats) => { - log(color.green("✓ Assets build completed")) + open: process.argv.includes("--open") + }); + }); +} else { + // for production we build assets first to be able to pass some assets hashes + // to metalsmith + webpack(webpackComputedConfig, log, stats => { + log(color.green("✓ Assets build completed")); smith.metadata().assets = { version: stats.hash, - scripts: [ - "/index.js", - ], - ...buildConfig.__PROD__ + scripts: ["/index.js"], + ...(buildConfig.__PROD__ ? { - stylesheets: [ - "/index.css", - ], - } - : {}, - } + stylesheets: ["/index.css"] + } + : {}) + }; smith.build(buildErr => { if (buildErr) { - throw buildErr + throw buildErr; } - log(color.green("✓ Static build completed")) - }) - }) + log(color.green("✓ Static build completed")); + }); + }); } diff --git a/docs/scripts/markdown.js b/docs/scripts/markdown.js index 9113a3a..e24f816 100644 --- a/docs/scripts/markdown.js +++ b/docs/scripts/markdown.js @@ -1,16 +1,16 @@ -import hljs from "highlight.js" +import hljs from "highlight.js"; export default { html: true, linkify: true, typographer: true, highlight: (code, lang) => { - code = code.trim() + code = code.trim(); // language is recognized by highlight.js if (lang && hljs.getLanguage(lang)) { - return hljs.highlight(lang, code).value + return hljs.highlight(lang, code).value; } // fallback to auto - return hljs.highlightAuto(code).value - }, -} + return hljs.highlightAuto(code).value; + } +}; diff --git a/docs/scripts/webpack-dev-server.js b/docs/scripts/webpack-dev-server.js index ad03005..65906fb 100644 --- a/docs/scripts/webpack-dev-server.js +++ b/docs/scripts/webpack-dev-server.js @@ -1,10 +1,10 @@ -import webpack from "webpack" -import webpackNanoLogs from "webpack-nano-logs" -import WebpackDevServer from "webpack-dev-server" -import opn from "opn" -import logger from "nano-logger" +import webpack from "webpack"; +import webpackNanoLogs from "webpack-nano-logs"; +import WebpackDevServer from "webpack-dev-server"; +import opn from "opn"; +import logger from "nano-logger"; -const log = logger("webpack-dev-server") +const log = logger("webpack-dev-server"); export default (config, options) => { options = { @@ -13,71 +13,53 @@ export default (config, options) => { port: 3000, open: true, noDevEntriesTest: /^tests/, - ...(options || {}), - } + ...(options || {}) + }; - const serverUrl = `${options.protocol}${options.host}:${options.port}` + const serverUrl = `${options.protocol}${options.host}:${options.port}`; const devEntries = [ `webpack-dev-server/client?${serverUrl}`, - "webpack/hot/only-dev-server", - ] + "webpack/hot/only-dev-server" + ]; const devConfig = { ...config, - debug: true, - watch: true, - colors: true, - progress: true, entry: { // add devEntries - ...Object.keys(config.entry) - .reduce( - (acc, key) => { - // some entries do not need extra stuff - acc[key] = key.match(options.noDevEntriesTest) !== null - ? config.entry[key] - : [ - ...devEntries, - ...config.entry[key], - ] - return acc - }, - {} - ), + ...Object.keys(config.entry).reduce((acc, key) => { + // some entries do not need extra stuff + acc[key] = + key.match(options.noDevEntriesTest) !== null + ? config.entry[key] + : [...devEntries, ...config.entry[key]]; + return acc; + }, {}) }, plugins: [ ...(config.plugins || []), ...(options.plugins || []), - new webpack.NoErrorsPlugin(), new webpack.HotModuleReplacementPlugin(), - webpackNanoLogs, - ], - eslint: { - ...config.eslint, - emitWarning: true, - }, - } + webpackNanoLogs + ] + }; - return new WebpackDevServer( - webpack(devConfig), - { - https: options.protocol === "https://", - contentBase: config.output.path, - hot: true, - stats: { - colors: true, - // hide all chunk dependencies because it's unreadable - chunkModules: false, - // noize - assets: false, - }, - noInfo: true, - }) - .listen(options.port, options.host, () => { - log(`Dev server started on ${serverUrl}`) - if (options.open) { - opn(`${serverUrl}`) - } - }) -} + return new WebpackDevServer(webpack(devConfig), { + https: options.protocol === "https://", + contentBase: config.output.path, + hot: true, + stats: { + colors: true, + // hide all chunk dependencies because it's unreadable + chunkModules: false, + // noize + assets: false + }, + noInfo: true + }).listen(options.port, options.host, () => { + log(`Dev server started on ${serverUrl}`); + if (options.open) { + opn(`${serverUrl}`); + } + }); +}; diff --git a/docs/scripts/webpack.js b/docs/scripts/webpack.js index 9de629e..11fad7c 100644 --- a/docs/scripts/webpack.js +++ b/docs/scripts/webpack.js @@ -1,30 +1,24 @@ -import webpack from "webpack" -import color from "chalk" +import webpack from "webpack"; +import color from "chalk"; export default (webpackConfig, log, cb) => { webpack(webpackConfig, (err, stats) => { if (err) { - throw err + throw err; } if (stats.hasErrors()) { - stats.compilation.errors.forEach( - item => log(...[ - color.red("Error:"), - ...item.message.split("\n"), - ]) - ) - throw new Error("webpack build failed with errors") + stats.compilation.errors.forEach(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"), - ]) - ) + stats.compilation.warnings.forEach(item => + log(...[color.yellow("Warning:"), ...item.message.split("\n")]) + ); } - cb(stats) - }) -} + cb(stats); + }); +}; diff --git a/docs/src/index.css b/docs/src/index.css index 88c0794..219c0f8 100644 --- a/docs/src/index.css +++ b/docs/src/index.css @@ -1,58 +1,1970 @@ -@charset "UTF-8"; +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +audio, +canvas, +progress, +video { + display: inline-block; + vertical-align: baseline; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +[hidden], +template { + display: none; +} + +a { + background-color: transparent; +} + +a:active, +a:hover { + outline: 0; +} + +abbr[title] { + border-bottom: 1px dotted; +} + +b, +strong { + font-weight: 700; +} + +dfn { + font-style: italic; +} + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +mark { + background: #ff0; + color: #000; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +img { + border: 0; +} + +svg:not(:root) { + overflow: hidden; +} + +figure { + margin: 1em 40px; +} + +hr { + -webkit-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +pre { + overflow: auto; +} + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +button, +input, +optgroup, +select, +textarea { + color: inherit; + font: inherit; + margin: 0; +} + +button { + overflow: visible; +} + +button, +select { + text-transform: none; +} + +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} + +button[disabled], +html input[disabled] { + cursor: default; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +input { + line-height: normal; +} + +input[type="checkbox"], +input[type="radio"] { + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 0; +} + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +input[type="search"] { + -webkit-appearance: textfield; + -webkit-box-sizing: content-box; + box-sizing: content-box; +} + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +fieldset { + border: 1px solid silver; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +legend { + border: 0; + padding: 0; +} + +textarea { + overflow: auto; +} + +optgroup { + font-weight: 700; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} + +:not(body) { + background-repeat: no-repeat; + background-position: 50%; + background-size: cover; +} + +html { + border-collapse: collapse; +} + +* { + border-collapse: inherit; +} + +html { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +*, +:after, +:before { + -webkit-box-sizing: inherit; + box-sizing: inherit; +} + +body, +html { + margin: 0; + padding: 0; +} + +[hidden] { + display: none !important; +} + +.r-Grid { + display: block; + font-size: 0; + padding: 0; + margin: 0; +} + +.r-Grid--withGutter { + margin: 0 -8px; + margin: 0 -0.5rem; +} + +.r-Grid--withGutter > .r-Grid-cell { + padding: 0 8px; + padding: 0 0.5rem; +} + +.r-Grid-cell { + display: inline-block; + font-size: 16px; + font-size: 1rem; + width: 100%; + padding: 0; +} + +.r-Grid-cell, +.r-Grid-cell--alignTop { + vertical-align: top; +} + +.r-Grid-cell--alignMiddle { + vertical-align: middle; +} + +.r-Grid-cell--alignBottom { + vertical-align: bottom; +} + +.r-all--1of12 { + width: 8.33333%; +} + +.r-all--1of10 { + width: 10%; +} + +.r-all--1of8 { + width: 12.5%; +} + +.r-all--1of6, +.r-all--2of12 { + width: 16.66667%; +} + +.r-all--1of5, +.r-all--2of10 { + width: 20%; +} + +.r-all--1of4, +.r-all--2of8, +.r-all--3of12 { + width: 25%; +} + +.r-all--3of10 { + width: 30%; +} + +.r-all--1of3, +.r-all--2of6, +.r-all--4of12 { + width: 33.33333%; +} + +.r-all--3of8 { + width: 37.5%; +} + +.r-all--2of5, +.r-all--4of10 { + width: 40%; +} + +.r-all--5of12 { + width: 41.66667%; +} + +.r-all--1of2, +.r-all--2of4, +.r-all--3of6, +.r-all--4of8, +.r-all--5of10, +.r-all--6of12 { + width: 50%; +} + +.r-all--7of12 { + width: 58.33333%; +} + +.r-all--3of5, +.r-all--6of10 { + width: 60%; +} + +.r-all--5of8 { + width: 62.5%; +} + +.r-all--2of3, +.r-all--4of6, +.r-all--8of12 { + width: 66.66667%; +} + +.r-all--7of10 { + width: 70%; +} + +.r-all--3of4, +.r-all--6of8, +.r-all--9of12 { + width: 75%; +} + +.r-all--4of5, +.r-all--8of10 { + width: 80%; +} + +.r-all--5of6, +.r-all--10of12 { + width: 83.33333%; +} + +.r-all--7of8 { + width: 87.5%; +} + +.r-all--9of10 { + width: 90%; +} + +.r-all--11of12 { + width: 91.66667%; +} + +.r-all--1of1, +.r-all--2of2, +.r-all--3of3, +.r-all--4of4, +.r-all--5of5, +.r-all--6of6, +.r-all--8of8, +.r-all--10of10, +.r-all--12of12 { + width: 100%; +} + +.r-all--hidden { + display: none; +} + +.r-all--visible { + display: inline-block; +} + +@media (max-width: 90em) { + .r-maxXL--1of12 { + width: 8.33333%; + } + + .r-maxXL--1of10 { + width: 10%; + } + + .r-maxXL--1of8 { + width: 12.5%; + } + + .r-maxXL--1of6, + .r-maxXL--2of12 { + width: 16.66667%; + } + + .r-maxXL--1of5, + .r-maxXL--2of10 { + width: 20%; + } + + .r-maxXL--1of4, + .r-maxXL--2of8, + .r-maxXL--3of12 { + width: 25%; + } + + .r-maxXL--3of10 { + width: 30%; + } + + .r-maxXL--1of3, + .r-maxXL--2of6, + .r-maxXL--4of12 { + width: 33.33333%; + } + + .r-maxXL--3of8 { + width: 37.5%; + } + + .r-maxXL--2of5, + .r-maxXL--4of10 { + width: 40%; + } + + .r-maxXL--5of12 { + width: 41.66667%; + } + + .r-maxXL--1of2, + .r-maxXL--2of4, + .r-maxXL--3of6, + .r-maxXL--4of8, + .r-maxXL--5of10, + .r-maxXL--6of12 { + width: 50%; + } + + .r-maxXL--7of12 { + width: 58.33333%; + } + + .r-maxXL--3of5, + .r-maxXL--6of10 { + width: 60%; + } + + .r-maxXL--5of8 { + width: 62.5%; + } + + .r-maxXL--2of3, + .r-maxXL--4of6, + .r-maxXL--8of12 { + width: 66.66667%; + } + + .r-maxXL--7of10 { + width: 70%; + } + + .r-maxXL--3of4, + .r-maxXL--6of8, + .r-maxXL--9of12 { + width: 75%; + } + + .r-maxXL--4of5, + .r-maxXL--8of10 { + width: 80%; + } + + .r-maxXL--5of6, + .r-maxXL--10of12 { + width: 83.33333%; + } + + .r-maxXL--7of8 { + width: 87.5%; + } + + .r-maxXL--9of10 { + width: 90%; + } + + .r-maxXL--11of12 { + width: 91.66667%; + } + + .r-maxXL--1of1, + .r-maxXL--2of2, + .r-maxXL--3of3, + .r-maxXL--4of4, + .r-maxXL--5of5, + .r-maxXL--6of6, + .r-maxXL--8of8, + .r-maxXL--10of10, + .r-maxXL--12of12 { + width: 100%; + } + + .r-maxXL--hidden { + display: none; + } + + .r-maxXL--visible { + display: inline-block; + } +} + +@media (max-width: 65em) { + .r-maxL--1of12 { + width: 8.33333%; + } + + .r-maxL--1of10 { + width: 10%; + } + + .r-maxL--1of8 { + width: 12.5%; + } + + .r-maxL--1of6, + .r-maxL--2of12 { + width: 16.66667%; + } + + .r-maxL--1of5, + .r-maxL--2of10 { + width: 20%; + } + + .r-maxL--1of4, + .r-maxL--2of8, + .r-maxL--3of12 { + width: 25%; + } + + .r-maxL--3of10 { + width: 30%; + } + + .r-maxL--1of3, + .r-maxL--2of6, + .r-maxL--4of12 { + width: 33.33333%; + } + + .r-maxL--3of8 { + width: 37.5%; + } + + .r-maxL--2of5, + .r-maxL--4of10 { + width: 40%; + } + + .r-maxL--5of12 { + width: 41.66667%; + } + + .r-maxL--1of2, + .r-maxL--2of4, + .r-maxL--3of6, + .r-maxL--4of8, + .r-maxL--5of10, + .r-maxL--6of12 { + width: 50%; + } + + .r-maxL--7of12 { + width: 58.33333%; + } + + .r-maxL--3of5, + .r-maxL--6of10 { + width: 60%; + } + + .r-maxL--5of8 { + width: 62.5%; + } + + .r-maxL--2of3, + .r-maxL--4of6, + .r-maxL--8of12 { + width: 66.66667%; + } + + .r-maxL--7of10 { + width: 70%; + } + + .r-maxL--3of4, + .r-maxL--6of8, + .r-maxL--9of12 { + width: 75%; + } + + .r-maxL--4of5, + .r-maxL--8of10 { + width: 80%; + } + + .r-maxL--5of6, + .r-maxL--10of12 { + width: 83.33333%; + } + + .r-maxL--7of8 { + width: 87.5%; + } + + .r-maxL--9of10 { + width: 90%; + } + + .r-maxL--11of12 { + width: 91.66667%; + } + + .r-maxL--1of1, + .r-maxL--2of2, + .r-maxL--3of3, + .r-maxL--4of4, + .r-maxL--5of5, + .r-maxL--6of6, + .r-maxL--8of8, + .r-maxL--10of10, + .r-maxL--12of12 { + width: 100%; + } + + .r-maxL--hidden { + display: none; + } + + .r-maxL--visible { + display: inline-block; + } +} + +@media (max-width: 50em) { + .r-maxM--1of12 { + width: 8.33333%; + } + + .r-maxM--1of10 { + width: 10%; + } + + .r-maxM--1of8 { + width: 12.5%; + } + + .r-maxM--1of6, + .r-maxM--2of12 { + width: 16.66667%; + } + + .r-maxM--1of5, + .r-maxM--2of10 { + width: 20%; + } + + .r-maxM--1of4, + .r-maxM--2of8, + .r-maxM--3of12 { + width: 25%; + } + + .r-maxM--3of10 { + width: 30%; + } + + .r-maxM--1of3, + .r-maxM--2of6, + .r-maxM--4of12 { + width: 33.33333%; + } + + .r-maxM--3of8 { + width: 37.5%; + } + + .r-maxM--2of5, + .r-maxM--4of10 { + width: 40%; + } + + .r-maxM--5of12 { + width: 41.66667%; + } + + .r-maxM--1of2, + .r-maxM--2of4, + .r-maxM--3of6, + .r-maxM--4of8, + .r-maxM--5of10, + .r-maxM--6of12 { + width: 50%; + } + + .r-maxM--7of12 { + width: 58.33333%; + } + + .r-maxM--3of5, + .r-maxM--6of10 { + width: 60%; + } + + .r-maxM--5of8 { + width: 62.5%; + } + + .r-maxM--2of3, + .r-maxM--4of6, + .r-maxM--8of12 { + width: 66.66667%; + } + + .r-maxM--7of10 { + width: 70%; + } + + .r-maxM--3of4, + .r-maxM--6of8, + .r-maxM--9of12 { + width: 75%; + } + + .r-maxM--4of5, + .r-maxM--8of10 { + width: 80%; + } + + .r-maxM--5of6, + .r-maxM--10of12 { + width: 83.33333%; + } + + .r-maxM--7of8 { + width: 87.5%; + } + + .r-maxM--9of10 { + width: 90%; + } + + .r-maxM--11of12 { + width: 91.66667%; + } + + .r-maxM--1of1, + .r-maxM--2of2, + .r-maxM--3of3, + .r-maxM--4of4, + .r-maxM--5of5, + .r-maxM--6of6, + .r-maxM--8of8, + .r-maxM--10of10, + .r-maxM--12of12 { + width: 100%; + } + + .r-maxM--hidden { + display: none; + } + + .r-maxM--visible { + display: inline-block; + } +} + +@media (max-width: 30em) { + .r-maxS--1of12 { + width: 8.33333%; + } + + .r-maxS--1of10 { + width: 10%; + } + + .r-maxS--1of8 { + width: 12.5%; + } + + .r-maxS--1of6, + .r-maxS--2of12 { + width: 16.66667%; + } + + .r-maxS--1of5, + .r-maxS--2of10 { + width: 20%; + } + + .r-maxS--1of4, + .r-maxS--2of8, + .r-maxS--3of12 { + width: 25%; + } + + .r-maxS--3of10 { + width: 30%; + } + + .r-maxS--1of3, + .r-maxS--2of6, + .r-maxS--4of12 { + width: 33.33333%; + } + + .r-maxS--3of8 { + width: 37.5%; + } + + .r-maxS--2of5, + .r-maxS--4of10 { + width: 40%; + } + + .r-maxS--5of12 { + width: 41.66667%; + } + + .r-maxS--1of2, + .r-maxS--2of4, + .r-maxS--3of6, + .r-maxS--4of8, + .r-maxS--5of10, + .r-maxS--6of12 { + width: 50%; + } + + .r-maxS--7of12 { + width: 58.33333%; + } + + .r-maxS--3of5, + .r-maxS--6of10 { + width: 60%; + } + + .r-maxS--5of8 { + width: 62.5%; + } + + .r-maxS--2of3, + .r-maxS--4of6, + .r-maxS--8of12 { + width: 66.66667%; + } + + .r-maxS--7of10 { + width: 70%; + } + + .r-maxS--3of4, + .r-maxS--6of8, + .r-maxS--9of12 { + width: 75%; + } + + .r-maxS--4of5, + .r-maxS--8of10 { + width: 80%; + } + + .r-maxS--5of6, + .r-maxS--10of12 { + width: 83.33333%; + } + + .r-maxS--7of8 { + width: 87.5%; + } + + .r-maxS--9of10 { + width: 90%; + } + + .r-maxS--11of12 { + width: 91.66667%; + } + + .r-maxS--1of1, + .r-maxS--2of2, + .r-maxS--3of3, + .r-maxS--4of4, + .r-maxS--5of5, + .r-maxS--6of6, + .r-maxS--8of8, + .r-maxS--10of10, + .r-maxS--12of12 { + width: 100%; + } + + .r-maxS--hidden { + display: none; + } + + .r-maxS--visible { + display: inline-block; + } +} + +@media (min-width: 30.01em) { + .r-minS--1of12 { + width: 8.33333%; + } + + .r-minS--1of10 { + width: 10%; + } + + .r-minS--1of8 { + width: 12.5%; + } + + .r-minS--1of6, + .r-minS--2of12 { + width: 16.66667%; + } + + .r-minS--1of5, + .r-minS--2of10 { + width: 20%; + } + + .r-minS--1of4, + .r-minS--2of8, + .r-minS--3of12 { + width: 25%; + } + + .r-minS--3of10 { + width: 30%; + } + + .r-minS--1of3, + .r-minS--2of6, + .r-minS--4of12 { + width: 33.33333%; + } + + .r-minS--3of8 { + width: 37.5%; + } + + .r-minS--2of5, + .r-minS--4of10 { + width: 40%; + } + + .r-minS--5of12 { + width: 41.66667%; + } + + .r-minS--1of2, + .r-minS--2of4, + .r-minS--3of6, + .r-minS--4of8, + .r-minS--5of10, + .r-minS--6of12 { + width: 50%; + } + + .r-minS--7of12 { + width: 58.33333%; + } + + .r-minS--3of5, + .r-minS--6of10 { + width: 60%; + } + + .r-minS--5of8 { + width: 62.5%; + } + + .r-minS--2of3, + .r-minS--4of6, + .r-minS--8of12 { + width: 66.66667%; + } + + .r-minS--7of10 { + width: 70%; + } + + .r-minS--3of4, + .r-minS--6of8, + .r-minS--9of12 { + width: 75%; + } + + .r-minS--4of5, + .r-minS--8of10 { + width: 80%; + } + + .r-minS--5of6, + .r-minS--10of12 { + width: 83.33333%; + } + + .r-minS--7of8 { + width: 87.5%; + } + + .r-minS--9of10 { + width: 90%; + } + + .r-minS--11of12 { + width: 91.66667%; + } + + .r-minS--1of1, + .r-minS--2of2, + .r-minS--3of3, + .r-minS--4of4, + .r-minS--5of5, + .r-minS--6of6, + .r-minS--8of8, + .r-minS--10of10, + .r-minS--12of12 { + width: 100%; + } + + .r-minS--hidden { + display: none; + } + + .r-minS--visible { + display: inline-block; + } +} + +@media (min-width: 50.01em) { + .r-minM--1of12 { + width: 8.33333%; + } + + .r-minM--1of10 { + width: 10%; + } + + .r-minM--1of8 { + width: 12.5%; + } + + .r-minM--1of6, + .r-minM--2of12 { + width: 16.66667%; + } + + .r-minM--1of5, + .r-minM--2of10 { + width: 20%; + } + + .r-minM--1of4, + .r-minM--2of8, + .r-minM--3of12 { + width: 25%; + } + + .r-minM--3of10 { + width: 30%; + } + + .r-minM--1of3, + .r-minM--2of6, + .r-minM--4of12 { + width: 33.33333%; + } + + .r-minM--3of8 { + width: 37.5%; + } + + .r-minM--2of5, + .r-minM--4of10 { + width: 40%; + } + + .r-minM--5of12 { + width: 41.66667%; + } + + .r-minM--1of2, + .r-minM--2of4, + .r-minM--3of6, + .r-minM--4of8, + .r-minM--5of10, + .r-minM--6of12 { + width: 50%; + } + + .r-minM--7of12 { + width: 58.33333%; + } + + .r-minM--3of5, + .r-minM--6of10 { + width: 60%; + } + + .r-minM--5of8 { + width: 62.5%; + } + + .r-minM--2of3, + .r-minM--4of6, + .r-minM--8of12 { + width: 66.66667%; + } + + .r-minM--7of10 { + width: 70%; + } + + .r-minM--3of4, + .r-minM--6of8, + .r-minM--9of12 { + width: 75%; + } + + .r-minM--4of5, + .r-minM--8of10 { + width: 80%; + } + + .r-minM--5of6, + .r-minM--10of12 { + width: 83.33333%; + } + + .r-minM--7of8 { + width: 87.5%; + } + + .r-minM--9of10 { + width: 90%; + } + + .r-minM--11of12 { + width: 91.66667%; + } + + .r-minM--1of1, + .r-minM--2of2, + .r-minM--3of3, + .r-minM--4of4, + .r-minM--5of5, + .r-minM--6of6, + .r-minM--8of8, + .r-minM--10of10, + .r-minM--12of12 { + width: 100%; + } + + .r-minM--hidden { + display: none; + } + + .r-minM--visible { + display: inline-block; + } +} + +@media (min-width: 65.01em) { + .r-minL--1of12 { + width: 8.33333%; + } + + .r-minL--1of10 { + width: 10%; + } + + .r-minL--1of8 { + width: 12.5%; + } + + .r-minL--1of6, + .r-minL--2of12 { + width: 16.66667%; + } + + .r-minL--1of5, + .r-minL--2of10 { + width: 20%; + } + + .r-minL--1of4, + .r-minL--2of8, + .r-minL--3of12 { + width: 25%; + } + + .r-minL--3of10 { + width: 30%; + } + + .r-minL--1of3, + .r-minL--2of6, + .r-minL--4of12 { + width: 33.33333%; + } + + .r-minL--3of8 { + width: 37.5%; + } + + .r-minL--2of5, + .r-minL--4of10 { + width: 40%; + } + + .r-minL--5of12 { + width: 41.66667%; + } + + .r-minL--1of2, + .r-minL--2of4, + .r-minL--3of6, + .r-minL--4of8, + .r-minL--5of10, + .r-minL--6of12 { + width: 50%; + } + + .r-minL--7of12 { + width: 58.33333%; + } + + .r-minL--3of5, + .r-minL--6of10 { + width: 60%; + } + + .r-minL--5of8 { + width: 62.5%; + } + + .r-minL--2of3, + .r-minL--4of6, + .r-minL--8of12 { + width: 66.66667%; + } + + .r-minL--7of10 { + width: 70%; + } + + .r-minL--3of4, + .r-minL--6of8, + .r-minL--9of12 { + width: 75%; + } + + .r-minL--4of5, + .r-minL--8of10 { + width: 80%; + } + + .r-minL--5of6, + .r-minL--10of12 { + width: 83.33333%; + } + + .r-minL--7of8 { + width: 87.5%; + } + + .r-minL--9of10 { + width: 90%; + } + + .r-minL--11of12 { + width: 91.66667%; + } + + .r-minL--1of1, + .r-minL--2of2, + .r-minL--3of3, + .r-minL--4of4, + .r-minL--5of5, + .r-minL--6of6, + .r-minL--8of8, + .r-minL--10of10, + .r-minL--12of12 { + width: 100%; + } + + .r-minL--hidden { + display: none; + } + + .r-minL--visible { + display: inline-block; + } +} + +@media (min-width: 90.01em) { + .r-minXL--1of12 { + width: 8.33333%; + } + + .r-minXL--1of10 { + width: 10%; + } + + .r-minXL--1of8 { + width: 12.5%; + } + + .r-minXL--1of6, + .r-minXL--2of12 { + width: 16.66667%; + } + + .r-minXL--1of5, + .r-minXL--2of10 { + width: 20%; + } + + .r-minXL--1of4, + .r-minXL--2of8, + .r-minXL--3of12 { + width: 25%; + } + + .r-minXL--3of10 { + width: 30%; + } + + .r-minXL--1of3, + .r-minXL--2of6, + .r-minXL--4of12 { + width: 33.33333%; + } + + .r-minXL--3of8 { + width: 37.5%; + } + + .r-minXL--2of5, + .r-minXL--4of10 { + width: 40%; + } + + .r-minXL--5of12 { + width: 41.66667%; + } + + .r-minXL--1of2, + .r-minXL--2of4, + .r-minXL--3of6, + .r-minXL--4of8, + .r-minXL--5of10, + .r-minXL--6of12 { + width: 50%; + } + + .r-minXL--7of12 { + width: 58.33333%; + } + + .r-minXL--3of5, + .r-minXL--6of10 { + width: 60%; + } + + .r-minXL--5of8 { + width: 62.5%; + } + + .r-minXL--2of3, + .r-minXL--4of6, + .r-minXL--8of12 { + width: 66.66667%; + } + + .r-minXL--7of10 { + width: 70%; + } + + .r-minXL--3of4, + .r-minXL--6of8, + .r-minXL--9of12 { + width: 75%; + } + + .r-minXL--4of5, + .r-minXL--8of10 { + width: 80%; + } + + .r-minXL--5of6, + .r-minXL--10of12 { + width: 83.33333%; + } + + .r-minXL--7of8 { + width: 87.5%; + } + + .r-minXL--9of10 { + width: 90%; + } + + .r-minXL--11of12 { + width: 91.66667%; + } + + .r-minXL--1of1, + .r-minXL--2of2, + .r-minXL--3of3, + .r-minXL--4of4, + .r-minXL--5of5, + .r-minXL--6of6, + .r-minXL--8of8, + .r-minXL--10of10, + .r-minXL--12of12 { + width: 100%; + } + + .r-minXL--hidden { + display: none; + } + + .r-minXL--visible { + display: inline-block; + } +} + +.r-VerticalRhythm { + font-size: 16px; + font-size: 1rem; + line-height: 25px; + line-height: 1.5625rem; +} + +.r-VerticalRhythm .h1, +.r-VerticalRhythm .h2, +.r-VerticalRhythm .h3, +.r-VerticalRhythm .h4, +.r-VerticalRhythm .h5, +.r-VerticalRhythm .h6, +.r-VerticalRhythm h1, +.r-VerticalRhythm h2, +.r-VerticalRhythm h3, +.r-VerticalRhythm h4, +.r-VerticalRhythm h5, +.r-VerticalRhythm h6 { + margin-top: 0; +} + +.r-VerticalRhythm .h1, +.r-VerticalRhythm h1 { + font-size: 33.177px; + font-size: 2.0736rem; + line-height: 50px; + line-height: 3.125rem; + padding-top: 6.5px; + padding-top: 0.40625rem; + margin-bottom: 18.5px; + margin-bottom: 1.15625rem; +} + +.r-VerticalRhythm .h2, +.r-VerticalRhythm h2 { + font-size: 27.648px; + font-size: 1.728rem; +} + +.r-VerticalRhythm .h2, +.r-VerticalRhythm .h3, +.r-VerticalRhythm h2, +.r-VerticalRhythm h3 { + line-height: 25px; + line-height: 1.5625rem; + padding-top: 6.5px; + padding-top: 0.40625rem; + margin-bottom: 18.5px; + margin-bottom: 1.15625rem; +} + +.r-VerticalRhythm .h3, +.r-VerticalRhythm h3 { + font-size: 23.04px; + font-size: 1.44rem; +} + +.r-VerticalRhythm .h4, +.r-VerticalRhythm h4 { + font-size: 19.2px; + font-size: 1.2rem; +} + +.r-VerticalRhythm .h4, +.r-VerticalRhythm .h5, +.r-VerticalRhythm h4, +.r-VerticalRhythm h5 { + line-height: 25px; + line-height: 1.5625rem; + padding-top: 6.5px; + padding-top: 0.40625rem; + margin-bottom: 18.5px; + margin-bottom: 1.15625rem; +} + +.r-VerticalRhythm .h5, +.r-VerticalRhythm h5 { + font-size: 16px; + font-size: 1rem; +} + +.r-VerticalRhythm .h6, +.r-VerticalRhythm h6 { + font-size: 13.333px; + font-size: 0.83333rem; + line-height: 25px; + line-height: 1.5625rem; + padding-top: 6.5px; + padding-top: 0.40625rem; + margin-bottom: 18.5px; + margin-bottom: 1.15625rem; +} -/* base */ -@import "normalize.css/normalize.css"; -@import "cssrecipes-defaults"; +.r-VerticalRhythm .h5 .r-VerticalRhythm h6, +.r-VerticalRhythm .h6, +.r-VerticalRhythm h5 { + text-decoration: underline; +} -/* grid */ -@import "cssrecipes-custom-media-queries"; -@import "cssrecipes-grid"; -@import "cssrecipes-utils"; +.r-VerticalRhythm small { + font-size: 0.83333em; +} -@import "cssrecipes-vertical-rhythm"; -@import "cssrecipes-vertical-rhythm/lib/ratio/minor-third.css"; +.r-VerticalRhythm dl, +.r-VerticalRhythm fieldset, +.r-VerticalRhythm figure, +.r-VerticalRhythm hr, +.r-VerticalRhythm ol, +.r-VerticalRhythm p, +.r-VerticalRhythm pre, +.r-VerticalRhythm table, +.r-VerticalRhythm ul { + margin-top: 0; + margin-bottom: 25px; + margin-bottom: 1.5625rem; +} -@import "react-svg-inline/lib/index.css"; -@import "./modules/Header"; -@import "./modules/Footer"; -@import "./modules/playground"; +.r-VerticalRhythm-helper { + position: relative; + overflow: auto; +} -@custom-media --r-maxXL (max-width: 90em); -@custom-media --r-minXL (min-width: 90.01em); +.r-VerticalRhythm-helper:after { + content: ""; + z-index: 100000; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 1px, transparent 0) 0 + 0 / 100% 1.5625rem, + linear-gradient(180deg, rgba(0, 0, 0, 0.16749999999999998), transparent 1px) + 0 0.78125rem / 100% 1.5625rem, + linear-gradient(180deg, rgba(0, 0, 0, 0.08499999999999999), transparent 1px) + 0 0.39063rem / 100% 1.5625rem, + linear-gradient(180deg, rgba(0, 0, 0, 0.08499999999999999), transparent 1px) + 0 1.17188rem / 100% 1.5625rem; +} -:root { - --cssnext-Color-blue: #318edf; - --cssnext-Color-purple: #8053ca; - --cssnext-Color-green: #46C340; +.SVGInline { + -webkit-transform: translateZ(0); + transform: translateZ(0); + vertical-align: middle; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -/** - * generic typography - */ +.SVGInline-svg { + width: inherit; + height: inherit; + line-height: inherit; + color: inherit; + fill: currentColor; +} -html { - /*height: 100%;*/ +.cssnext-Header { + line-height: 62.5px; + line-height: 3.90625rem; +} + +@media (min-width: 50.01em) { + .cssnext-Header { + position: fixed; + top: 0; + left: 0; + right: 0; + background: hsla(0, 0%, 100%, 0.99); + z-index: 1; + -webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); + box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); + } +} + +.cssnext-Header-logo { + display: block; + text-align: center; + font-size: 24px; + font-size: 1.5rem; +} + +@media (min-width: 50.01em) { + .cssnext-Header-logo { + display: inline-block; + margin: 0 1rem 0 0; + } +} + +.cssnext-Header-logo:before { + display: none; +} + +.cssnext-Header-logo-img { + display: inline-block; + vertical-align: middle; + height: 1em; + width: 5.33333em; + margin-right: 3.2px; + margin-right: 0.2rem; +} + +.cssnext-Header-logo-img-svg { + display: block; +} + +.cssnext-Header-version { + font-size: 11.6px; + font-size: 0.725rem; + padding: 0 16px; + padding: 0 1rem; + -webkit-transition: 0.2s; + transition: 0.2s; +} + +@media (min-width: 50.01em) { + .cssnext-Header-version { + position: absolute; + bottom: -1.5rem; + left: 2.66667em; + line-height: 1; + color: #ccc; + opacity: 0.4; + } + + .cssnext-Header-logo:hover .cssnext-Header-version { + opacity: 0.8; + } +} + +@media (max-width: 50em) { + .cssnext-Header-nav { + display: block; + text-align: center; + } +} + +@media (min-width: 50.01em) { + .cssnext-Header-nav { + text-align: right; + } +} + +.cssnext-Header-nav-item { + padding: 0 16px; + padding: 0 1rem; + display: inline-block; + height: 62.5px; + height: 3.90625rem; +} + +.cssnext-Header-nav-item:before { + bottom: 15.25px; + bottom: 0.95313rem; + -webkit-transform: scaleX(0.5) translateY(0.1rem); + transform: scaleX(0.5) translateY(0.1rem); +} + +.cssnext-Header-nav-item:focus:before, +.cssnext-Header-nav-item:hover:before { + -webkit-transform: scaleX(0.65); + transform: scaleX(0.65); +} + +.cssnext-Header-nav-item--active, +.cssnext-Header-nav-item--active:visited { + color: #fff; + background: linear-gradient( + 160deg, + rgba(49, 142, 223, 0.9), + rgba(128, 83, 202, 0.9) + ); +} + +.js-Headroom { + -webkit-transition: 0.2s; + transition: 0.2s; +} + +.js-Headroom--hide { + -webkit-transform: translateY(-100%); + transform: translateY(-100%); +} + +@media (min-width: 90.01em) { + .js-Headroom--hide .cssnext-Header-logo { + position: absolute; + top: 4.90625rem; + left: 1rem; + height: 1em; + filter: url('data:image/svg+xml;charset=utf-8,#filter'); + -webkit-filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px #fff); + filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px #fff); + } + + .js-Headroom--hide .cssnext-Header-logo-img { + vertical-align: top; + } + + .js-Headroom--hide .cssnext-Header-version { + color: #000; + } +} + +.cssnext-Footer { + font-size: 0.83333em; + text-align: center; + padding: 50px 0 25px; + padding: 3.125rem 0 1.5625rem; + border-top: 1px solid rgba(0, 0, 0, 0.1); +} + +.cssnext-Playground { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + font-family: Menlo, Consolas, Monaco, monospace; + color: #3072ab; +} + +.cssnext-Playground-console { + position: absolute; + top: 50%; + left: 50%; + right: 0; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + margin: 16px; + margin: 1rem; + padding: 16px; + padding: 1rem; + color: #fff; + background-color: rgba(0, 0, 0, 0.75); + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 3px; + opacity: 0.75; + -webkit-transition: 0.2s; + transition: 0.2s; + background: linear-gradient(160deg, #318edf, #8053ca); + -webkit-box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.2); + box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.2); +} + +.cssnext-Playground-console:hover { + opacity: 0.9; +} + +.cssnext-Playground-console:empty { + opacity: 0; +} + +.cssnext-Playground-console a { + color: inherit; +} + +.cssnext-Playground-console-footer { + opacity: 0.5; +} + +.cssnext-Playground-console:hover .cssnext-Playground-console-footer { + opacity: 0.75; +} + +.cssnext-Playground-container { + -ms-flex: 1; + flex: 1; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} + +.cssnext-Playground-container, +.cssnext-Playground-section { + -webkit-box-flex: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.cssnext-Playground-section { + -ms-flex: 1; + flex: 1; +} + +.cssnext-Playground-code { + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + border: 0; margin: 0; padding: 0; + padding: 16px; + padding: 1rem; + font: inherit; + color: inherit; + text-shadow: inherit; + background: inherit; + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; +} + +.cssnext-Playground-code:active, +.cssnext-Playground-code:focus { + border: 0; + outline: 0; +} - background: #f1f1f1 +.cssnext-Playground-code--to { + color: #318edf; + border-left: 1px solid !important; + -o-border-image: linear-gradient( + rgba(49, 142, 223, 0), + #318edf 25%, + #8053ca 50%, + #318edf 75%, + rgba(49, 142, 223, 0) + ) + 1 1 stretch !important; + border-image: -webkit-gradient( + linear, + left top, + left bottom, + from(rgba(49, 142, 223, 0)), + color-stop(25%, #318edf), + color-stop(50%, #8053ca), + color-stop(75%, #318edf), + to(rgba(49, 142, 223, 0)) + ) + 1 1 stretch !important; + border-image: linear-gradient( + rgba(49, 142, 223, 0), + #318edf 25%, + #8053ca 50%, + #318edf 75%, + rgba(49, 142, 223, 0) + ) + 1 1 stretch !important; +} + +html { + background: #f1f1f1; +} + +body, +html { + margin: 0; + padding: 0; } body { - /*min-height: 100%;*/ + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; + font-family: Avenir Next, Calibri, Calibri Light, Segoe UI, Segoe UI Light, + Myanmar Text, sans-serif; +} - font-family: Avenir Next, Calibri, Calibri Light, Segoe UI, Segoe UI Light, Myanmar Text, sans-serif; +::-moz-selection { + color: #fff; + background: #428bca; } ::selection { color: #fff; - background: #428BCA; + background: #428bca; } a, @@ -63,28 +1975,31 @@ a:visited { text-decoration: none; } - a::before { - content: ""; - position: absolute; - height: 1px; - left: 0; - right: 0; - bottom: 0; +a:before { + content: ""; + position: absolute; + height: 1px; + left: 0; + right: 0; + bottom: 0; + background: currentColor; + opacity: 0.25; + -webkit-transform: scaleX(0.85) translateY(0.085rem); + transform: scaleX(0.85) translateY(0.085rem); + -webkit-transition: 0.2s; + transition: 0.2s; +} - background: currentColor; - opacity: .25; +a:focus:before, +a:hover:before { + opacity: 0.75; + -webkit-transform: scaleX(0.95); + transform: scaleX(0.95); +} - transform: scaleX(.85) translateY(.085rem); - transition: .2s; - } - a:hover::before, - a:focus::before { - opacity: 0.75; - transform: scaleX(.95); - } - a:active::before { - opacity: .2; - } +a:active:before { + opacity: 0.2; +} h1, h2, @@ -99,337 +2014,436 @@ h6 { } hr { - opacity: .4; - margin: 4rem 0 !important; /* yeah... */ + opacity: 0.4; + margin: 64px 0 !important; + margin: 4rem 0 !important; } -/** - * customise recipes - */ - .r-Grid { width: 100%; margin: 0 auto; + padding: 0 16px; padding: 0 1rem; } - @media (--r-minL) { - .r-Grid { - max-width: 65rem; - padding: 0; - } + +@media (min-width: 65.01em) { + .r-Grid { + max-width: 65rem; + padding: 0; } - /*@media (--r-minM) { .r-Grid { width: 70rem } }*/ - /*@media (--r-minXL) { .r-Grid { width: 70rem } }*/ +} -/** - * mardown plugins - */ .markdownIt-Anchor { - opacity: .4; + opacity: 0.4; } - @media (--r-minL) { - .markdownIt-Anchor { - margin-left: -1.5rem; - } +@media (min-width: 65.01em) { + .markdownIt-Anchor { + margin-left: -1.5rem; } +} - .markdownIt-Anchor:hover { - opacity: .8; - } +.markdownIt-Anchor:hover { + opacity: 0.8; +} .markdownIt-TOC { list-style: none; - padding: .8rem 1rem; - - font-size: var(--r-small-fontSize); - - border: 1px solid color(#000 a(.2)); + padding: 12.8px 16px; + padding: 0.8rem 1rem; + font-size: 0.83333em; + border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; - opacity: .7; + opacity: 0.7; + -webkit-transition: 0.2s; + transition: 0.2s; +} - transition: .2s; +.markdownIt-TOC:hover { + opacity: 0.85; } - .markdownIt-TOC:hover { - opacity: .85; - } +.markdownIt-TOC li { + padding-left: 12.8px; + padding-left: 0.8rem; + position: relative; +} - .markdownIt-TOC li::before { - content: "› "; - padding-right: .4rem; - opacity: .6; - font-size: var(--r-small-fontSize); - } +.markdownIt-TOC li:before { + content: "\203A "; + opacity: 0.6; + font-size: 0.83333em; + position: absolute; + left: 0; +} - .markdownIt-TOC ul { - list-style: none; - margin: 0; - padding: 0 1rem; - } +.markdownIt-TOC ul { + list-style: none; + margin: 0; + padding: 0 16px; + padding: 0 1rem; +} -@media (--r-minM) { - /* use sticky when it's on the right */ +@media (min-width: 50.01em) { .js-markdownIt-TOCPlaceholder { + position: -webkit-sticky; position: sticky; top: 3rem; } .js-markdownIt-TOCPlaceholder .markdownIt-TOC { margin: 2rem 0 2rem 1rem; - /* cheat a little about t he layout */ width: 120%; } } - -/** - * cssnext stuff - */ - .cssnext-Icon { display: inline-block; - - width: 1.2em; /* required for IE */ + width: 1.2em; height: 1.2em; line-height: 1; vertical-align: middle; - color: inherit; fill: currentColor; - -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - transform: translate3d(0,0,0); /* fix webkit/blink poor rendering issues */ + -webkit-transform: translateZ(0); + transform: translateZ(0); +} + +.r-VerticalRhythm { + font-size: 13.332px; + font-size: 0.8333rem; } -.r-VerticalRhythm {font-size: .8333rem} -@media (--r-minM) { - .r-VerticalRhythm {font-size: 1rem} +@media (min-width: 50.01em) { + .r-VerticalRhythm { + font-size: 1rem; + } } -@media (--r-minM) { - .cssnext-Body {padding-top: calc(var(--r-lineHeight) * 2.5)} +@media (min-width: 50.01em) { + .cssnext-Body { + padding-top: 3.90625rem; + } } -.cssnext-Center { text-align: center } +.cssnext-Center { + text-align: center; +} .cssnext-Light { color: #fff; font-weight: 300; } - .cssnext-Light a { color: #fff !important } - .cssnext-Light a::before { background: #f1f1f1 } +.cssnext-Light a { + color: #fff !important; +} + +.cssnext-Light a:before { + background: #f1f1f1; +} .cssnext-Jumbotron { overflow: auto; + padding: 96px 0; padding: 6rem 0; } - .cssnext-Jumbotron + :not(.cssnext-Jumbotron) { margin-top: var(--r-lineHeight) } - - .cssnext-Jumbotron--default { - background: linear-gradient(160deg, - color(var(--cssnext-Color-purple) l(-5%) a(.9)), - color(var(--cssnext-Color-blue) a(.9)) - ), - url("assets/delorean-back.jpg") no-repeat 50% 50%/cover - ; - } - - .cssnext-Jumbotron--whiteRoad { - background: linear-gradient(160deg, - color(var(--cssnext-Color-purple) l(90%) a(.9)), - color(var(--cssnext-Color-blue) l(90%) a(.9)) - ), - url("assets/road.jpg") no-repeat 50% 10%/cover - ; - } - .cssnext-Jumbotron--darkRoad { - background: linear-gradient(160deg, - color(var(--cssnext-Color-blue) a(.9)), - color(var(--cssnext-Color-purple) a(.9)) - ), - url("assets/road.jpg") no-repeat 50% 10%/cover - ; - } - .cssnext-Jumbotron--darkDeloreanFront { - background: linear-gradient(160deg, - color(var(--cssnext-Color-purple) l(-10%) a(.95)), - color(var(--cssnext-Color-blue) l(-5%) a(.9)) - ), - url("assets/delorean-front.jpg") no-repeat 50% 70%/cover - ; - } - .cssnext-Jumbotron--lightFast { - background: linear-gradient(160deg, - color(var(--cssnext-Color-blue) l(90%) a(.9)), - color(var(--cssnext-Color-purple) l(90%) a(.9)) - ), - url("assets/fast.jpg") no-repeat 50% 50%/cover - ; - } - .cssnext-Jumbotron--darkTeam { - background: linear-gradient(160deg, - color(var(--cssnext-Color-blue) a(.95)), - color(var(--cssnext-Color-purple) a(.95)) - ), - url("assets/team.jpg") no-repeat 50% 50%/cover - ; - } - .cssnext-Jumbotron--cssrecipes { - background: linear-gradient(160deg, - color(var(--cssnext-Color-blue) a(.85)), - color(var(--cssnext-Color-green) a(.85)) - ), - url("assets/engine.jpg") no-repeat 50% 50%/cover - ; - } - - .cssnext-Jumbotron-title { - display: block; - font-size: calc(var(--r-h1-fontSize) * 1.5); - line-height: calc(var(--r-h1-lineHeight) * 1.5); - font-weight: 400; - margin: 6rem auto; - text-shadow: 0 .1rem .1rem rgba(0, 0, 0, 0.4); - } +.cssnext-Jumbotron + :not(.cssnext-Jumbotron) { + margin-top: 25px; + margin-top: 1.5625rem; +} - .cssnext-Jumbotron-title--smaller { - font-size: var(--r-h1-fontSize); - line-height: var(--r-h1-lineHeight); - } +.cssnext-Jumbotron--default { + background: linear-gradient( + 160deg, + rgba(115, 64, 196, 0.9), + rgba(49, 142, 223, 0.9) + ), + url(assets/delorean-back.jpg) no-repeat 50% 50% / cover; +} -.cssnext-List { - margin: 0 4rem var(--r-lineHeight); - /*margin-right: 0 !important ;*/ +.cssnext-Jumbotron--whiteRoad { + background: linear-gradient( + 160deg, + rgba(226, 216, 243, 0.9), + rgba(211, 231, 248, 0.9) + ), + url(assets/road.jpg) no-repeat 50% 10% / cover; +} + +.cssnext-Jumbotron--darkRoad { + background: linear-gradient( + 160deg, + rgba(49, 142, 223, 0.9), + rgba(128, 83, 202, 0.9) + ), + url(assets/road.jpg) no-repeat 50% 10% / cover; +} + +.cssnext-Jumbotron--darkDeloreanFront { + background: linear-gradient( + 160deg, + rgba(103, 55, 179, 0.95), + rgba(33, 128, 212, 0.9) + ), + url(assets/delorean-front.jpg) no-repeat 50% 70% / cover; +} + +.cssnext-Jumbotron--lightFast { + background: linear-gradient( + 160deg, + rgba(211, 231, 248, 0.9), + rgba(226, 216, 243, 0.9) + ), + url(assets/fast.jpg) no-repeat 50% 50% / cover; +} + +.cssnext-Jumbotron--darkTeam { + background: linear-gradient( + 160deg, + rgba(49, 142, 223, 0.95), + rgba(128, 83, 202, 0.95) + ), + url(assets/team.jpg) no-repeat 50% 50% / cover; +} + +.cssnext-Jumbotron--cssrecipes { + background: linear-gradient( + 160deg, + rgba(49, 142, 223, 0.85), + rgba(70, 195, 64, 0.85) + ), + url(assets/engine.jpg) no-repeat 50% 50% / cover; +} + +.cssnext-Jumbotron-title { + display: block; + font-size: 49.766px; + font-size: 3.1104rem; + line-height: 75px; + line-height: 4.6875rem; + font-weight: 400; + margin: 96px auto; + margin: 6rem auto; + text-shadow: 0 1.6px 1.6px rgba(0, 0, 0, 0.4); + text-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.4); } -.cssnext-FeaturesList { +.cssnext-Jumbotron-title--smaller { + font-size: 33.177px; + font-size: 2.0736rem; + line-height: 50px; + line-height: 3.125rem; +} +.cssnext-List { + margin: 0 64px 25px; + margin: 0 4rem 1.5625rem; } -@media (--r-maxS) { + +@media (max-width: 30em) { .cssnext-FeaturesList { margin: 0; } } - .cssnext-FeaturesList li::before { - content: "› "; - padding-right: .4rem; - opacity: .6; - font-size: var(--r-small-fontSize); - } +.cssnext-FeaturesList li:before { + content: "\203A "; + padding-right: 6.4px; + padding-right: 0.4rem; + opacity: 0.6; + font-size: 0.83333em; +} - .cssnext-FeaturesList-small { - opacity: .6; - font-size: var(--r-small-fontSize); - } +.cssnext-FeaturesList-small { + opacity: 0.6; + font-size: 0.83333em; +} .cssnext-Section { - margin: 0 auto var(--r-lineHeight); - /*max-width: 50rem;*/ + margin: 0 auto 25px; + margin: 0 auto 1.5625rem; } - .cssnext-Section-title { text-align: center } - - .cssnext-Section-content { - - } +.cssnext-Section-title { + text-align: center; +} - .cssnext-Section-highlight { - display: block; - text-align: center; - margin: var(--r-lineHeight); - } +.cssnext-Section-highlight { + display: block; + text-align: center; + margin: 25px; + margin: 1.5625rem; +} - .cssnext-Section-link { - text-align: center; - font-size: var(--r-small-fontSize); - color: var(--cssnext-Color-blue); - } +.cssnext-Section-link { + text-align: center; + font-size: 0.83333em; + color: #318edf; +} - .cssnext-Section-link:hover { color: var(--cssnext-Color-purple) } +.cssnext-Section-link:hover { + color: #8053ca; +} .cssnext-Tools { text-align: center; - font-size: var(--r-h3-fontSize); - line-height: calc(var(--r-h3-lineHeight)*2); + font-size: 23.04px; + font-size: 1.44rem; + line-height: 50px; + line-height: 3.125rem; font-weight: 300; } - @media (--r-minM) { - .cssnext-Tools { - width: 75%; - margin: auto; - } - } - .cssnext-Tools a { - font-weight: 400; +@media (min-width: 50.01em) { + .cssnext-Tools { + width: 75%; + margin: auto; } +} - .cssnext-Tools a:nth-child(2n+1) { - color: var(--cssnext-Color-blue); - } +.cssnext-Tools a { + font-weight: 400; +} - .cssnext-Tools a:nth-child(2n) { - color: var(--cssnext-Color-purple); - } +.cssnext-Tools a:nth-child(odd) { + color: #318edf; +} -.cssnext-INeedSpace { - margin-top: calc(var(--r-lineHeight) * 2); - margin-bottom: calc(var(--r-lineHeight) * 2); +.cssnext-Tools a:nth-child(2n) { + color: #8053ca; } +.cssnext-INeedSpace { + margin-top: 50px; + margin-top: 3.125rem; + margin-bottom: 50px; + margin-bottom: 3.125rem; +} .cssnext-Callout { - font-size: var(--r-small-fontSize); + font-size: 0.83333em; + padding: 16px 16px 0; padding: 1rem 1rem 0; - margin-bottom: var(--r-lineHeight); - border: 1px solid color(#000 a(.1)); - border-left-width: .2rem; + margin-bottom: 25px; + margin-bottom: 1.5625rem; + border: 1px solid rgba(0, 0, 0, 0.1); + border-left-width: 3.2px; + border-left-width: 0.2rem; border-radius: 3px; } - .cssnext-Callout--danger { border-left-color: #d9534f; } - .cssnext-Callout--danger .cssnext-Callout-title { color: #ce4844; } +.cssnext-Callout--danger { + border-left-color: #d9534f; +} + +.cssnext-Callout--danger .cssnext-Callout-title { + color: #ce4844; +} + +.cssnext-Callout--warning { + border-left-color: #f0ad4e; +} + +.cssnext-Callout--warning .cssnext-Callout-title { + color: #aa6708; +} - .cssnext-Callout--warning { border-left-color: #f0ad4e; } - .cssnext-Callout--warning .cssnext-Callout-title { color: #aa6708; } +.cssnext-Callout--info { + border-left-color: #318edf; +} - .cssnext-Callout--info { border-left-color: var(--cssnext-Color-blue); } - .cssnext-Callout--info .cssnext-Callout-title { color: color(var(--cssnext-Color-blue) b(+20%)); } +.cssnext-Callout--info .cssnext-Callout-title { + color: #3072ab; +} pre { + margin: 16px 0; margin: 1rem 0; + padding: 16px; padding: 1rem; - - font-size: var(--r-small-fontSize); + font-size: 0.83333em; font-weight: 400; - - color: color(var(--cssnext-Color-blue) l(-10%)); - border: 1px solid #DDD; + color: #1e73be; + border: 1px solid #ddd; border-radius: 0.3em; - background: color(#fafafa a(.6)); + background: hsla(0, 0%, 98%, 0.6); } - .hljs-comment { - opacity: .4; - } +.hljs-comment { + opacity: 0.4; +} - .hljs-comment:hover { - opacity: .6; - } +.hljs-comment:hover { + opacity: 0.6; +} - .hljs-keyword { - font-weight: bold; - } +.hljs-keyword { + font-weight: 700; +} - .hljs-class, - .hljs-tag, - .hljs-keyword, - .hljs-pseudo, - .hljs-function { - color: var(--cssnext-Color-purple); - } +.hljs-class, +.hljs-function, +.hljs-keyword, +.hljs-pseudo, +.hljs-tag { + color: #8053ca; +} + +#carbonads { + display: block; + overflow: hidden; + margin: 3em auto 0; + padding: 1em; + max-width: 330px; + border: 1px solid rgba(178, 185, 230, 0.6); + border-radius: 3px; + background-color: rgba(132, 143, 215, 0.25); + font-size: 12px; + line-height: 1.5; +} + +#carbonads a { + color: inherit; +} + +#carbonads a:before { + height: 0; +} + +#carbonads a:hover { + color: inherit; +} + +#carbonads span { + position: relative; + display: block; + overflow: hidden; +} + +.carbon-img { + float: left; + margin-right: 1em; +} + +.carbon-img img, +.carbon-text { + display: block; +} + +.carbon-text { + float: left; + max-width: calc(100% - 130px - 1em); + text-align: left; +} + +.carbon-poweredby { + position: absolute; + right: 0; + bottom: 0; + display: block; + font-size: 11px; +} diff --git a/docs/src/index.js b/docs/src/index.js index 1c84732..17cba32 100644 --- a/docs/src/index.js +++ b/docs/src/index.js @@ -1,9 +1,9 @@ -import "./favicon.png" -import "./index.css" +import "./favicon.png"; +import "./index.css"; // import "./modules/polyfills" // move the toc in a grid cell -import "./modules/move-toc" +import "./modules/move-toc"; // sort of sticky header -import "./modules/headroom" +import "./modules/headroom"; diff --git a/docs/src/layouts/Default.js b/docs/src/layouts/Default.js index 07b0568..ed32bb8 100644 --- a/docs/src/layouts/Default.js +++ b/docs/src/layouts/Default.js @@ -1,150 +1,135 @@ -import React, { Component, PropTypes } from "react" -import cx from "classnames" +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import cx from "classnames"; -import dashify from "../modules/dashify" +import dashify from "../modules/dashify"; -import Html from "../modules/Html" -import Head from "../modules/Head" -import Body from "../modules/Body" +import Html from "../modules/Html"; +import Head from "../modules/Head"; +import Body from "../modules/Body"; class Default extends Component { - getChildContext() { return { pkg: this.props.pkg, // collections: this.props.collections, - file: this.props.file, - } + file: this.props.file + }; } render() { - const { - file, - } = this.props - const footer = file.footer === undefined ? true : file.footer + const { file } = this.props; + const footer = file.footer === undefined ? true : file.footer; if (!file.title) { - console.log(`${file.filename} doesn't have a title`) + console.log(`${file.filename} doesn't have a title`); } return (
    - { - file.title && + {file.title && (

    - { file.title } + {file.title}

    - } - { - file.subtitle && + )} + {file.subtitle && ( - { file.subtitle } + {file.subtitle} - } + )}
    - { - file.incomplete && + {file.incomplete && (
    -
    - { "Incomplete" } -
    +
    {"Incomplete"}

    - { - "This documentation is still a work in progress. " - } + {"This documentation is still a work in progress. "}
    - { "Pull requests" } + {"Pull requests"} - { - " expanding on existing or adding additional content " + - " are " - } - { "extremely" }{ " appreciated." } + {" expanding on existing or adding additional content " + + " are "} + {"extremely"} + {" appreciated."}

    - } + )}
    - { - footer && + {footer && (
    -
    - - { "Try postcss-cssnext in your browser now." } - -
    +
    + + {"Try postcss-cssnext in your browser now."} + +
    - } - + )} - ) + ); } } @@ -152,13 +137,13 @@ Default.propTypes = { pkg: PropTypes.object.isRequired, metadata: PropTypes.object.isRequired, // collections: PropTypes.object.isRequired, - file: PropTypes.object.isRequired, -} + file: PropTypes.object.isRequired +}; Default.childContextTypes = { pkg: PropTypes.object.isRequired, // collections: PropTypes.object.isRequired, - file: PropTypes.object.isRequired, -} + file: PropTypes.object.isRequired +}; -export default Default +export default Default; diff --git a/docs/src/layouts/Simple.js b/docs/src/layouts/Simple.js index 8669af9..4e41162 100644 --- a/docs/src/layouts/Simple.js +++ b/docs/src/layouts/Simple.js @@ -1,49 +1,47 @@ -import React, { Component, PropTypes } from "react" +import React, { Component } from "react"; +import PropTypes from "prop-types"; -import Html from "../modules/Html" -import Head from "../modules/Head" -import Body from "../modules/Body" +import Html from "../modules/Html"; +import Head from "../modules/Head"; +import Body from "../modules/Body"; class Simple extends Component { - getChildContext() { return { pkg: this.props.pkg, // collections: this.props.collections, - file: this.props.file, - } + file: this.props.file + }; } render() { - const { - file, - } = this.props - const footer = file.footer === undefined ? true : file.footer + const { file } = this.props; + const footer = file.footer === undefined ? true : file.footer; if (!file.title) { - console.log(`${file.filename} doesn't have a title`) + console.log(`${file.filename} doesn't have a title`); } return (
    - ) + ); } } @@ -51,13 +49,13 @@ Simple.propTypes = { pkg: PropTypes.object.isRequired, metadata: PropTypes.object.isRequired, // collections: PropTypes.object.isRequired, - file: PropTypes.object.isRequired, -} + file: PropTypes.object.isRequired +}; Simple.childContextTypes = { pkg: PropTypes.object.isRequired, // collections: PropTypes.object.isRequired, - file: PropTypes.object.isRequired, -} + file: PropTypes.object.isRequired +}; -export default Simple +export default Simple; diff --git a/docs/src/modules/Analytics/index.js b/docs/src/modules/Analytics/index.js index 1437a67..1872961 100644 --- a/docs/src/modules/Analytics/index.js +++ b/docs/src/modules/Analytics/index.js @@ -1,24 +1,22 @@ -import React, { Component } from "react" +import React, { Component } from "react"; -import isogram from "isogram" +import isogram from "isogram"; export default class Analytics extends Component { render() { return ( - ) + minify: true + }) + }} + /> + ); } } diff --git a/docs/src/modules/Body/index.js b/docs/src/modules/Body/index.js index fb446b2..a131212 100644 --- a/docs/src/modules/Body/index.js +++ b/docs/src/modules/Body/index.js @@ -1,55 +1,46 @@ -import React, { Component, PropTypes } from "react" +import React, { Component } from "react"; +import PropTypes from "prop-types"; -import Header from "../Header" -import Footer from "../Footer" -import Analytics from "../Analytics" +import Header from "../Header"; +import Footer from "../Footer"; +import Analytics from "../Analytics"; class Body extends Component { render() { - const { - version, - scripts, - footer, - } = this.props + const { version, scripts, footer } = this.props; return ( -
    - { this.props.children } + {this.props.children} -