Create a style pipeline from scratch taking advantage of and future-proof css with , as well as variable sharing between css and js. postcss cssnext Setting up a basic for postcss with gulp is fairly straightforward. Cssnext also allows us to specify variables in a central file that can be used across your entire codebase. This means that you can standardise styles further, for those cases where styling in both css and javascript is sometimes unavoidable (e.g. data visualization). workflow javascript I will mainly focus on providing support for variables, custom media queries and partial imports. In order to keep this tutorial reasonably short I can’t cover more than that, but I hope that by the end you will have enough of an overview to be able to add your own plugins to take advantage of more advanced features of postcss. The source code for this examples can be found on . github 1. Basic setup for gulp To get started initialise a new folder with npm. In this folder you will need a src and css folder. The src folder will contain the uncompiled css, and the css folder will contain the processed/compiled css files. $ mkdir postcss-starter-gulp && cd postcss-starter-gulp$ npm init...$ mkdir src css 2. Add gulp dependencies Next you will have to install gulp and some additional gulp packages. Make sure that they are all listed in . package.json $ npm install gulp gulp-postcss autoprefixer postcss-cssnext postcss-partial-import --save-dev 3. Add gulpfile Create a in the root of your project. Here’s what the file should look like: gulpfile.js // gulpfile.js var gulp = require("gulp")var postcss = require("gulp-postcss")var partialImport = require("postcss-partial-import")var cssnext = require("postcss-cssnext") gulp.task("css:build", function() {var processors = [partialImport(),cssnext({browsers: ["> 1%"],})]return gulp.src("./src/main.css").pipe(postcss(processors)).pipe(gulp.dest("./css"))}) gulp.task("default", function() {gulp.watch("./src/**/*.css", ["css:build"])}) Our gulpfile contains two tasks, one for building the css files, and the default task for watching the src directory for changes. The watcher will run the build command when anything in the src folder changes. The build task will look for a main.css file in the src directory, and will process that file using the processors specified (in this case partialImport and cssnext). . The processed css will be output to the directory. Cssnext will transform the css to be compatible with browsers that have more than 1% market share (according to caniuse database) ./css To run the gulp tasks in our project without installing gulp globally, we need to add some npm scripts to our . package.json // package.json ..."scripts": {"css:watch": "gulp","css:build": "gulp css:build","test": "echo \"Error: no test specified\" && exit 1"},... Now we can run the gulp tasks using npm, and . $ npm run css:watch $ npm run css:build 4. Add sample css Create a main.css file in the src directory and add some sample css (as shown below) to check the compilation process. // ./src/main.css :root {--color-blue: #2196F3;--color-pink: #E91E63;} @custom-media --md-viewport (min-width: 62em); .blue-container {background: var(--color-blue);} media (--md-viewport) {.blue-container {background: var(--color-pink);}} @ Once you run the gulp task via npm… $ npm run css:build …the above css should successfully compile to this: // ./css/main.css .blue-container {background: #2196F3;} media (min-width: 62em) {.blue-container {background: #E91E63;}} @ 5. Add js variables and js media queries To go one step further, we can make the variables and available for both css files and javascript files. To do this you will have to create a , a , and alter and . color-blue color-pink ./src/styleVariables.js ./src/mediaQueries.js ./src/main.css gulpfile.js To begin with, remove all variable definitions and custom media query definitions from main.css. You should be left with this: // ./src/main.css .blue-container {background: var(--color-blue);} media (--md-viewport) {.blue-container {background: var(--color-pink);}} @ Next, define your variables in a simple javascript object in . ./src/styleVariables.js // ./src/styleVariables.js module.exports = {"color-blue": "#2196F3","color-pink": "#E91E63",} Then define your media queries also as a simple javascript object in . ./src/mediaQueries.js // ./src/mediaQueries.js module.exports = {"md-viewport": "(min-width: 62em)",} Finally, you will have to make the cssnext processor aware of the existence of styleVariables.js and mediaQueries.js. In order to do that you will have to add some code to . To do this, import the and into your gulpfile and plug them into the cssnext options. gulpfile.js styleVariables.js mediaQueries.js // gulpfile.js var gulp = require("gulp")var postcss = require("gulp-postcss")var partialImport = require("postcss-partial-import")var cssnext = require("postcss-cssnext") var styleVariables = require("./src/styleVariables")var mediaQueries = require("./src/mediaQueries") gulp.task("css:build", function() {var processors = [partialImport(),cssnext({browsers: ["> 1%"], })]return gulp.src("./src/main.css").pipe(postcss(processors)).pipe(gulp.dest("./css"))}) features: {customProperties: {variables: styleVariables,},customMedia: {extensions: mediaQueries,}} gulp.task("default", function() {gulp.watch("./src/**/*.css", ["css:build"])}) So now you have a simple postcss processor that allows you to share variables between css and js. For other cool stuff that you can add to this setup, check out the . postcss github repo You can find the code used for this tutorial on . github is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising & sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories
