Unverified Commit 0bada789 authored by Alex Pott's avatar Alex Pott
Browse files

Issue #3060153 by lauriii, alexpott, finnsky, Wim Leers, xjm, catch: Use...

Issue #3060153 by lauriii, alexpott, finnsky, Wim Leers, xjm, catch: Use PostCSS in core, initially only for Claro
parent 2a5c62de
Loading
Loading
Loading
Loading
+20 −12
Original line number Diff line number Diff line
@@ -8,6 +8,10 @@
    "node": ">= 8.11"
  },
  "scripts": {
    "build": "yarn build:css & yarn build:js",
    "watch": "yarn watch:css & yarn watch:js",
    "build:css": "cross-env BABEL_ENV=legacy node ./scripts/css/postcss-build.js",
    "watch:css": "cross-env BABEL_ENV=legacy node ./scripts/css/postcss-watch.js",
    "build:js": "cross-env BABEL_ENV=legacy node ./scripts/js/babel-es6-build.js",
    "build:js-dev": "cross-env NODE_ENV=development BABEL_ENV=legacy node ./scripts/js/babel-es6-build.js",
    "watch:js": "cross-env BABEL_ENV=legacy node ./scripts/js/babel-es6-watch.js",
@@ -21,6 +25,7 @@
    "prettier": "prettier --write \"./**/*.es6.js\" \"./tests/Drupal/Nightwatch/**/*.js\""
  },
  "devDependencies": {
    "autoprefixer": "^9.6.1",
    "babel-core": "^6.26.0",
    "babel-plugin-add-header-comment": "^1.0.3",
    "babel-preset-env": "^1.4.0",
@@ -40,6 +45,11 @@
    "minimist": "^1.2.0",
    "mkdirp": "^0.5.1",
    "nightwatch": "^1.2.1",
    "postcss": "^7.0.18",
    "postcss-calc": "^7.0.1",
    "postcss-custom-properties": "^9.0.2",
    "postcss-header": "^1.0.0",
    "postcss-import": "^12.0.1",
    "prettier": "^1.14.0",
    "stylelint": "^9.10.1",
    "stylelint-checkstyle-formatter": "^0.1.1",
@@ -68,9 +78,14 @@
          [
            "env",
            {
              "modules": false,
              "targets": {
                "browsers": [
              "modules": false
            }
          ]
        ]
      }
    }
  },
  "browserslist": [
    "ie >= 9",
    "edge >= 13",
    "firefox >= 5",
@@ -79,10 +94,3 @@
    "chrome >= 56"
  ]
}
            }
          ]
        ]
      }
    }
  }
}

core/postcss.config.js

0 → 100644
+20 −0
Original line number Diff line number Diff line
module.exports = ctx => ({
  map: !ctx.env || ctx.env !== 'production' ? { inline: false } : false,
  plugins: [
    require('postcss-custom-properties')({
      preserve: false,
      // Breaks style lint and unnecessary if preserve set to false.
      // exportTo: 'dist-css/variables.css',
      importFrom: [
        './themes/claro/css/src/base/variables.css'
      ]
    }),
    require("postcss-calc"),
    require('autoprefixer')({
      cascade: false
    }),
    require('postcss-header')({
      header: `DO NOT EDIT THIS FILE.\nSee the following change record for more information,\nhttps://www.drupal.org/node/2815083\n@preserve`,
    }),
  ]
});
+15 −0
Original line number Diff line number Diff line
const fs = require('fs');
const log = require('./log');
const compile = require('./compile');

module.exports = (filePath) => {
  log(`'${filePath}' is being processed.`);
  // Transform the file.
  compile(filePath, function write(code) {
    const fileName = filePath.slice(0, -9);
    // Write the result to the filesystem.
    fs.writeFile(`${fileName}.css`, code, () => {
      log(`'${filePath}' is finished.`);
    });
  });
};
+23 −0
Original line number Diff line number Diff line
const chalk = require('chalk');
const fs = require('fs');
const log = require('./log');
const compile = require('./compile');

module.exports = (filePath) => {
  log(`'${filePath}' is being checked.`);
  // Transform the file.
  compile(filePath, function check(code) {
    const fileName = filePath.slice(0, -9);
    fs.readFile(`${fileName}.css`, function read(err, data) {
      if (err) {
        log(chalk.red(err));
        process.exitCode = 1;
        return;
      }
      if (code !== data.toString()) {
        log(chalk.red(`'${filePath}' is not updated.`));
        process.exitCode = 1;
      }
    });
  });
};
+40 −0
Original line number Diff line number Diff line
const chalk = require('chalk');
const log = require('./log');
const fs = require('fs');
const postcss = require('postcss');
const postcssCustomProperties = require('postcss-custom-properties');
const postcssCalc = require("postcss-calc");
const postcssImport = require('postcss-import');
const autoprefixer = require('autoprefixer');
const postcssHeader = require('postcss-header');

module.exports = (filePath, callback) => {
  // Transform the file.
  fs.readFile(filePath, (err, css) => {
    postcss([
      postcssImport(),
      postcssCustomProperties({
        // Remove converted properties from the generated code. This needs to be
        // set to ensure that CSS minifiers don't remove the generated values.
        preserve: false,
      }),
      postcssCalc,
      autoprefixer({
        // Output without visual cascade for more consistency with existing
        // Drupal CSS.
        cascade: false
      }),
      postcssHeader({
        header: `/*\n * DO NOT EDIT THIS FILE.\n * See the following change record for more information,\n * https://www.drupal.org/node/2815083\n * @preserve\n */\n`,
      }),
    ])
    .process(css, { from: filePath })
    .then(result => {
      callback(result.css);
    })
    .catch(error => {
      log(chalk.red(error));
      process.exitCode = 1;
    });
  });
};
Loading