All files / packages/design-system/scripts/helpers gulp.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
import autoprefixer from 'autoprefixer';
import gulpPostcss from 'gulp-postcss';
import gulpMinifyCss from 'gulp-clean-css';
import gulpPrettier from 'gulp-prettier';
import paths from './paths';
 
var gulpSass = require('gulp-sass')(require('sass'));
 
/*
 * ==================
 * Helper to re-purpose gulp-sass rules
 * ==================
 */
export const writeScss = (options) =>
  gulpSass({
    precision: 3,
    includePaths: [paths.ui, paths.node_modules],
    ...options,
  }).on('error', gulpSass.logError);
 
/*
 * ==================
 * Helper to re-purpose post-css rules
 * ==================
 */
export const writePostCss = (bonusPlugins) => {
  const plugins = [autoprefixer({ remove: false })];
  Array.prototype.push.apply(plugins, bonusPlugins);
  return gulpPostcss(plugins);
};
 
/*
 * ==================
 * Helper to re-purpose minify rules
 * ==================
 */
 
export const writeMinifyCss = (options) =>
  gulpMinifyCss({ advanced: false, roundingPrecision: '-1', ...options });
 
/*
 * ==================
 * Helper to re-purpose prettier rules
 * ==================
 */
 
export const writePrettierCss = (options) =>
  gulpPrettier({
    arrowParens: 'avoid',
    bracketSpacing: true,
    htmlWhitespaceSensitivity: 'css',
    printWidth: 120,
    proseWrap: 'always',
    quoteProps: 'as-needed',
    semi: true,
    singleQuote: false,
    tabWidth: 2,
    trailingComma: 'none',
    useTabs: false,
    ...options,
  });
 
/*
 * ==================
 * Helper to write an auto-generation warning to a stylesheet
 * ==================
 */
export const writeAutoGenerationWarning = (content) => {
  const removeDeprecateCss = /(@import 'deprecate';)/g;
  const removeBlameCss = /(@import 'blame';)/g;
  let message = `
/*
  This file is automatically generated.
  Please do not edit or check in changes to this file.
  If you need changes made, please contact the Design System team.
*/
`;
  const importInit = `
@import 'dist/scss/init';
`;
  content = content.replace(removeDeprecateCss, '').replace(removeBlameCss, '');
  // break content into individual lines
  const contentLines = content.matchAll(/^.*$/gim);
  const useLines = [];
  let formattedContent = [];
 
  // extract any `@use` line to ensure they're first
  for (const line of contentLines) {
    // if line starts with `@use`, store it in the useLines array
    if (line[0].startsWith(`@use`)) {
      useLines.push(line[0]);
      // if not pass it to the formattedContent array
    } else {
      formattedContent.push(line[0]);
    }
  }
 
  // generate prefix by joining useLines and adding importInit to it
  const prefixLines = useLines.join(`\n`) + importInit;
 
  // generate a single string of the formattedContent array
  formattedContent = formattedContent.join(`\n`);
 
  let css = `${message}${prefixLines}${formattedContent}`;
  return css;
};