How to use the node-sass.renderSync function in node-sass

To help you get started, we’ve selected a few node-sass examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github wordpress-mobile / gutenberg-mobile / sass-transformer.js View on Github external
function transform( src, filename, options ) {
	if ( typeof src === 'object' ) {
		// handle RN >= 0.46
		( { src, filename, options } = src );
	}

	const exts = [
		// add the platform specific extension, first in the array to take precedence
		options.platform === 'android' ? '.android.scss' : '.ios.scss',
		'.native.scss',
		'.scss',
	];

	if ( filename.endsWith( '.scss' ) || filename.endsWith( '.sass' ) ) {
		const result = sass.renderSync( {
			data: src,
			includePaths: [ path.dirname( filename ), ...autoImportIncludePaths ],
			importer( url /*, prev, done */ ) {
				// url is the path in import as is, which LibSass encountered.
				// prev is the previously resolved path.
				// done is an optional callback, either consume it or return value synchronously.
				// this.options contains this options hash, this.callback contains the node-style callback

				const urlPath = path.parse( url );
				const importerOptions = this.options;
				const incPaths = importerOptions.includePaths.slice( 0 ).split( ':' );
				if ( urlPath.dir.length > 0 ) {
					incPaths.unshift( path.resolve( path.dirname( filename ), urlPath.dir ) ); // add the file's dir to the search array
				}
				const f = findVariant( urlPath.name, exts, incPaths );
github infor-design / enterprise / scripts / build / sass.js View on Github external
function compileSass(options = {}) {
  // set default options
  /* eslint-disable-next-line */
  options = Object.assign({
    importer: onceImporter(),
    style: 'expanded'
  }, options);

  // Render the CSS/Map result
  const result = sass.renderSync(options);
  const fileWritePromises = [];

  const originalOutFile = `${options.outFile}`;
  options.file = path.resolve(options.file);
  options.outFile = path.resolve(options.outFile);

  // Build directories
  createDirs(dirs);

  // Write the result to file
  fileWritePromises.push(writeFile(options.outFile, result.css).then((err) => {
    if (err) {
      logger('error', `Error: ${err}`);
    }
    logger('success', `Built "${originalOutFile}"`);
  }));
github pmowrer / node-sass-json-importer / test / index.js View on Github external
function render() {
      sass.renderSync({
        file: './test/fixtures/include-paths/style.scss',
        includePaths: ['./test/fixtures/include-paths/foo'],
        importer: jsonImporter(),
      });
    }
github korniychuk / angular-autofocus-fix / old / tools / gulp / inline-resources.js View on Github external
function buildSass(content, sourceFile) {
  try {
    const result = sass.renderSync({
      data: content,
      file: sourceFile,
      importer: tildeImporter
    });
    return result.css.toString()
  } catch (e) {
    console.error('\x1b[41m');
    console.error('at ' + sourceFile + ':' + e.line + ":" + e.column);
    console.error(e.formatted);
    console.error('\x1b[0m');
    return "";
  }
}
github harryy2510 / ngx-img / gulpfile.js View on Github external
const styleProcessor = (stylePath, ext, styleFile, callback) => {
  /**
   * Remove comments, autoprefixer, Minifier
   */
  const processors = [
    stripInlineComments,
    autoprefixer,
    cssnano
  ];

  if (/\.(scss|sass)$/.test(ext[0])) {
    let sassObj = sass.renderSync({ file: stylePath });
    if (sassObj && sassObj['css']) {
      let css = sassObj.css.toString('utf8');
      postcss(processors).process(css).then(function (result) {
        result.warnings().forEach(function (warn) {
          gutil.warn(warn.toString());
        });
        styleFile = result.css;
        callback(null, styleFile);
      });
    }
  }
};
github linkedin / eyeglass / packages / broccoli-eyeglass / lib / broccoli_sass_compiler.js View on Github external
  return new RSVP.Promise(resolve => resolve(sass.renderSync(options)));
}
github grommet / grommet / templates / todo-app-modular / ssr / server.js View on Github external
var webpackRequire = require('enhanced-require')(module, {
  resolve: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules|bower_components/
      }
    ]
  }
});

var server = express();
var TodoApp = React.createFactory(webpackRequire('../src/js/TodoApp'));

var theme = sass.renderSync({
  file: 'node_modules/grommet/scss/grommet-core/index',
  includePaths: [path.resolve(__dirname, '../node_modules')]
});

var PORT = 8050;

var app = express();

app.set('view engine', 'ejs');

app.use(compression());

app.use(morgan('tiny'));

app.use(bodyParser.json());
github elmsln / WCFactory / packages / generator-wcfactory / generators / init / templates / elements / rh-icon-panel / gulpfile.js View on Github external
.readFileSync(path.join("./src", templateUrl))
            .toString()
            .trim();

          html = decomment(html);

          const [
            ,
            styleUrl
          ] = /get\s+styleUrl\([^)]*\)\s*{\s*return\s+"([^"]+)"/.exec(
            oneLineFile
          );

          const styleFilePath = path.join("./src", styleUrl);

          let cssResult = sass.renderSync({
            file: styleFilePath
          }).css;

          cssResult = stripCssComments(cssResult).trim();

          return `${classStatement}
  get html() {
    return \`
<style>
${cssResult}
</style>
${html}\`;
  }
`;
        }
      )
github snphq / react-starter-boilerplate / tools / hooks.js View on Github external
preprocessCss: (data, filename) =>
      sass.renderSync({
        data,
        file: filename,
        importer: url => ({
          file: url.replace('~styles', './src/styles'),
        }),
      }).css,
    rootDir: path.resolve(process.cwd(), 'src'),
github mlaursen / react-md / packages / dev-utils / src / utils / createThemes.ts View on Github external
async function compile(theme: string): Promise {
  const [primary, secondary, weight, tone] = getThemeVariables(theme);
  const data = `@import '@react-md/theme/dist/scss/color-palette';

$rmd-theme-primary: $${primary}-500;
$rmd-theme-secondary: $${secondary}-a-${weight};
$rmd-theme-light: ${tone === "light"};

@import 'react-md/dist/scss/styles';
`;

  const outFile = join(cssDist, `react-md.${theme}.min.css`);
  const unmodifiedCSS = renderSync({
    data,
    outFile,
    sourceMap: false,
    includePaths: [tempStylesDir],
  }).css.toString();

  const { css } = await postcss([
    postcssPresetEnv({ stage: 3, autoprefixer: { flexbox: "no-2009" } }),
    postcssFlexbugsFixes(),
    sorting({
      order: ["custom-properties", "declarations"],
      "properties-order": "alphabetical",
      "unspecified-properties-position": "bottom",
    }),
    combineMediaQueries(),
    combineDuplicatedSelectors,