How to use the stylus function in stylus

To help you get started, we’ve selected a few stylus 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 mtojo / rollup-plugin-stylus-css-modules / index.js View on Github external
async transform(code, id) {
      if (!filter(id)) {
        return null;
      }

      const compiledId = `${id}.css`;
      let obj = cache[compiledId];

      if (!obj) {
        // compile Stylus
        const style = stylus(code);
        const relativePath = path.relative(process.cwd(), id);
        style.set('filename', relativePath);
        if (sourceMap) {
          style.set('sourcemap', {inline: true});
        }
        if (fn) {
          style.use(fn);
        }
        const css = await style.render();

        // CSS Modules
        obj = await cssModules.load(css, relativePath, null);

        cache[compiledId] = obj;
      }
github egoist / rollup-plugin-postcss / test / build.js View on Github external
new Promise((resolve, reject) => {
      const renderer = stylus(content, {
        filename: id,
        sourcemap: { inline: true }
      })
      renderer.render((err, code) => {
        if (err) {
          return reject(err)
        }
        resolve({ code, map: renderer.sourcemap })
      })
    })
github MilkZoft / MakingDevelopers / src / app.js View on Github external
compile: (str, path) => {
        return stylus(str)
          .set('filename', path)
          .set('compress', true);
      }
    })
github Autarc / react-htmltree / build / tasks / src-lib.js View on Github external
readFile(path.resolve(path.dirname(file.path), includePath), (error, data) => {
          const css = stylus(data.toString()).render()
          postcss([
            autoprefixer({
              browsers: ['last 2 versions']
            }),
            cssnano
          ])
          .process(css)
          .then(function (result) {
            return callback(`"${result.css}"`)
          })
        })
      }))
github shesek / spark-wallet / client / serve.js View on Github external
const compileStyl = (str, filename) => stylus(str).set('filename', filename).use(nib())
    , bswatchPath = path.resolve(require.resolve('bootswatch/package'), '..', 'dist')
github flatpickr / flatpickr / build.ts View on Github external
return new Promise((resolve, reject) => {
    stylus(src, {
      compress,
    } as any)
      .include(`${__dirname}/src/style`)
      .include(`${__dirname}/src/style/themes`)
      .use(
        stylusAutoprefixer({
          browsers: pkg.browserslist,
        })
      )
      .render((err: Error | undefined, css: string) =>
        !err ? resolve(css) : reject(err)
      );
  });
}
github shesek / spark-wallet / assets.js View on Github external
const compileStyl = (str, filename) =>
    stylus(str)
    .set('filename', filename)
    .set('include css', true)
    .set('compress', app.settings.env == 'production')
    .use(require('nib')())
    .import('nib')
github jsonmaur / jumpsuit / src / cli / watch.js View on Github external
const dCssStyle = debounce((cb) => {
  const ms = Date.now()
  log('updating styles...')

  const input = path.resolve(process.cwd(), 'src/app.styl')
  const output = path.resolve(process.cwd(), 'dist/app.css')

  stylus(fs.readFileSync(input, 'utf8'))
    .set('include css', true)
    .set('hoist atrules', true)
    .use(nib())
    .import(path.resolve(__dirname, '../../node_modules/nib/lib/nib/index.styl'))
    .set('paths', [
      path.resolve(process.cwd(), 'src'),
    ])
    .render((err, css) => {
      if (err) return cb(err)

      fs.writeFileSync(output, css)
      log('styles updated', chalk.dim(`(${Date.now() - ms}ms)`))
      triggerCssRefresh()
    })
}, 300)
github meteor-vue / vue-meteor / packages / vue-stylus / vue-stylus.js View on Github external
readFile (filePath) {
      return fs.readFileSync(filePath, 'utf8')
    },
  }

  function processSourcemap (sourcemap) {
    delete sourcemap.file
    sourcemap.sourcesContent = sourcemap.sources.map(importer.readFile)
    sourcemap.sources = sourcemap.sources.map((filePath) => {
      return parseImportPath(filePath) || filePath
    })

    return sourcemap
  }

  let renderer = stylus(source)
    .use(nib())
    .set('filename', basePath)
    .set('sourcemap', { inline: false, comment: false })
    .set('cache', true)
    .set('importer', importer)

  renderer.render((err, css) => {
    if (err) {
      cb(err, null)
    } else {
      renderer.deps(basePath).forEach(file => dependencyManager.addDependency(file))
      const map = processSourcemap(renderer.sourcemap)
      cb(null, {
        css,
        map,
      })