css fixes, move to basscss@7

.cssnext

@@ -6,7 +6,7 @@
 
 var fs = require('fs');
 var path = require('path');
-var cssnext = require('cssnext');
+var postcss = require('postcss');
 
 var inputFolderName = 'cssnext/';
 var outputFolderName = 'styles/';
@@ -20,8 +20,11 @@ fs.readdir(cssnextPath, function (err, files) {
     files.forEach(function (file) {
         console.log('%s -> %s', inputFolderName+file, outputFolderName+file);
         var input = fs.readFileSync(path.join(cssnextPath, file), 'utf8');
-        var output = cssnext(input);
-        fs.writeFileSync(path.join(__dirname, outputFolderName+file), output);
+        postcss([require('postcss-cssnext')])
+        .process(input)
+        .then(function (result) {
+            fs.writeFileSync(path.join(__dirname, outputFolderName+file), result.css);
+        });
     });
     console.log(' ');
 });

examples/app.js

@@ -97,7 +97,7 @@ class PureComponents extends React.Component {
                 </h3>
                 <div className="mb2">Play or pause track.</div>
                 <PlayButton
-                    className="button button-big button-outline button-grow orange rounded mb2"
+                    className="btn btn-outline orange rounded mb2"
                     playing={playing}
                     seeking={seeking}
                     seekingIcon={seekingIcon}
@@ -120,7 +120,7 @@ class PureComponents extends React.Component {
                     </a>
                 </h3>
                 <div className="mb2">Switch to the next track in a playlist.</div>
-                <NextButton className="button button-big button-outline button-grow orange rounded mb2" />
+                <NextButton className="btn btn-outline orange rounded mb2" />
                 <pre><code className="html">{`<NextButton
     className={String}
     onNextClick={Function}
@@ -135,7 +135,7 @@ class PureComponents extends React.Component {
                     </a>
                 </h3>
                 <div className="mb2">Return to the previous track in a playlist.</div>
-                <PrevButton className="button button-big button-outline button-grow orange rounded mb2" />
+                <PrevButton className="btn btn-outline orange rounded mb2" />
                 <pre><code className="html">{`<PrevButton
     className={String}
     onPrevClick={Function}
@@ -146,9 +146,10 @@ class PureComponents extends React.Component {
                 <div className="mt2">
                     <strong><i>Important note:</i></strong> All buttons accept <code className="black bg-darken-1 rounded">soundCloudAudio</code> prop which
                     when passed will add actions to buttons automagically (e.g. play or pause, go to prev or next track),
-                    {' callback function used in '}<code className="black bg-darken-1 rounded">onTogglePlay</code>,
-                     <code className="black bg-darken-1 rounded">onNextClick</code> and
-                     <code className="black bg-darken-1 rounded">onPrevClick</code> will still be called after.
+                    {' callback function used in '}
+                    <code className="black bg-darken-1 rounded">onTogglePlay</code>{", "}
+                    <code className="black bg-darken-1 rounded">onNextClick</code>{", and "}
+                    <code className="black bg-darken-1 rounded">onPrevClick</code>{" will still be called after."}
                 </div>
                 <hr />
 
@@ -243,7 +244,7 @@ class CustomPlayer extends React.Component {
                 <h2 className="m0">{track.title}</h2>
                 <h3 className="mt0">by {track.user.username}</h3>
                 <button
-                    className="button button-small bg-teal"
+                    className="btn btn-primary bg-teal"
                     onClick={this.play.bind(this)}
                 >
                     {playing ? 'Pause' : 'Play'}
@@ -398,8 +399,8 @@ class App extends React.Component {
                     <img src="./assets/soundcloud.png" width="90" className="mt2" />
                     <h1 className="h1 caps mt2 mb0">React Sound Player</h1>
                     <p className="h3 mt1 mb2">Create custom SoundCloud players with React.js</p>
-                    <a href="https://github.com/soundblogs/react-soundplayer" className="h4 button button-outline button-big mb3 mt2 mr2 b2">View on Github</a>
-                    <a href="#ExamplePlayers" className="h4 button bg-orange button-big mb3 mt2 b2">Check Examples</a>
+                    <a href="https://github.com/soundblogs/react-soundplayer" className="h4 btn btn-outline mb3 mt2 mr2 b2">View on Github</a>
+                    <a href="#ExamplePlayers" className="h4 btn bg-orange btn-primary mb3 mt2 b2">Check Examples</a>
                 </header>
                 <div className="container">
                     {/* getting started */}
@@ -443,11 +444,11 @@ const { SoundCloudLogoSVG } = Icons;
 
 // the list of available icons:
 const {
-SoundCloudLogoSVG,
-PlayIconSVG,
-PauseIconSVG,
-NextIconSVG,
-PrevIconSVG
+    SoundCloudLogoSVG,
+    PlayIconSVG,
+    PauseIconSVG,
+    NextIconSVG,
+    PrevIconSVG
 } = Icons;
 `}</code></pre>
 

examples/main.css

@@ -3,6 +3,7 @@
 @import '../cssnext/cover.css';
 @import 'highlight.js/styles/github.css';
 @import 'basscss';
+@import 'basscss-button-transparent';
 
 .b2 {
     border-width: 2px;

examples/package.json

@@ -2,7 +2,7 @@
   "main": "app.js",
   "scripts": {
     "start": "watchify . -o bundle.js -v -d",
-    "build-css": "../node_modules/cssnext/dist/bin.js main.css styles.css -c",
+    "build-css": "./node_modules/postcss-cli/bin/postcss -c './postcss.config.json'",
     "build-js": "browserify . -o bundle.js",
     "build-js-prod": "browserify app.js | uglifyjs -cm > bundle.min.js",
     "build-dev": "npm run build-css && npm run build-js",
@@ -21,9 +21,15 @@
   },
   "devDependencies": {
     "babelify": "^7.3.0",
+    "basscss": "^7.1.1",
+    "basscss-button-transparent": "^1.1.1",
     "browserify": "^13.1.0",
+    "cssnano": "^3.7.3",
     "envify": "^3.4.1",
     "highlight.js": "^8.5.0",
+    "postcss-cli": "^2.5.2",
+    "postcss-cssnext": "^2.7.0",
+    "postcss-import": "^7.1.3",
     "uglify-js": "^2.7.0",
     "watchify": "^3.7.0"
   }

examples/players/BackgroundSoundPlayer.js

@@ -16,7 +16,7 @@ class Player extends Component {
                 </div>
                 <div className="flex flex-center px2 relative z1">
                     <PlayButton
-                        className="flex-none h2 mr2 button button-transparent button-grow rounded"
+                        className="flex-none h2 mr2 btn button-transparent rounded"
                         {...this.props}
                     />
                     <Progress

examples/players/BasicSoundPlayer.js

@@ -7,7 +7,7 @@ class Player extends Component {
         let { track, currentTime } = this.props;
         return (
             <div className="p1 mb3 mt3 flex flex-center bg-darken-1 red rounded">
-                <PlayButton className="flex-none h4 mr2 button button-transparent button-grow rounded" {...this.props} />
+                <PlayButton className="flex-none h4 mr2 btn button-transparent rounded" {...this.props} />
                 <h2 className="h5 nowrap caps flex-auto m0">{track ? track.title : 'Loading...'}</h2>
                 <Timer className="h6 mr1" duration={track ? track.duration / 1000 : 0} currentTime={currentTime} {...this.props} />
             </div>

examples/players/PlaylistSoundPlayer.js

@@ -47,7 +47,7 @@ class Player extends Component {
         }
 
         let tracks = playlist.tracks.map((track, i) => {
-            let classNames = ClassNames('flex flex-center full-width left-align button button-transparent', {
+            let classNames = ClassNames('flex flex-center col-12 left-align btn button-transparent', {
                 'is-active': this.state.activeIndex === i
             });
 
@@ -82,16 +82,16 @@ class Player extends Component {
 
                     <div className="flex flex-center">
                         <PrevButton
-                            className="flex-none h3 button button-narrow button-transparent button-grow rounded"
+                            className="flex-none h3 btn button-transparent rounded"
                             onPrevClick={this.prevIndex.bind(this)}
                             {...this.props}
                         />
                         <PlayButton
-                            className="flex-none h2 button button-transparent button-grow rounded"
+                            className="flex-none h2 btn button-transparent rounded"
                             {...this.props}
                         />
                         <NextButton
-                            className="flex-none h3 button mr2 button-narrow button-transparent button-grow rounded"
+                            className="flex-none h3 btn mr2 button-transparent rounded"
                             onNextClick={this.nextIndex.bind(this)}
                             {...this.props}
                         />

examples/players/ProgressSoundPlayer.js

@@ -8,7 +8,7 @@ class Player extends Component {
 
         return (
             <div className="p2 border navy mt1 mb3 flex flex-center rounded">
-                <PlayButton className="flex-none h4 mr2 button white button-big button-outline button-grow bg-orange circle" {...this.props} />
+                <PlayButton className="flex-none h4 mr2 btn white btn-outline bg-orange circle" {...this.props} />
                 <div className="flex-auto">
                     <h2 className="h4 nowrap m0">{track ? track.user.username : ''}</h2>
                     <h2 className="h4 nowrap caps m0">{track ? track.title : ''}</h2>

examples/postcss.config.json

@@ -0,0 +1,6 @@
+{
+    "use": ["postcss-import", "postcss-cssnext", "cssnano"],
+    "input": "main.css",
+    "output": "styles.css",
+    "cssnano": {"autoprefixer": false}
+}

package.json

@@ -37,12 +37,12 @@
     "babel-preset-es2015": "^6.13.1",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-0": "^6.5.0",
-    "basscss": "^7.0.0",
-    "cssnext": "^1.2.3",
     "eslint": "^3.2.2",
     "eslint-config-airbnb": "^10.0.0",
     "eslint-plugin-import": "^1.12.0",
     "eslint-plugin-jsx-a11y": "^2.0.1",
-    "eslint-plugin-react": "^6.0.0"
+    "eslint-plugin-react": "^6.0.0",
+    "postcss": "^5.1.1",
+    "postcss-cssnext": "^2.7.0"
   }
 }