npm:@instructure/ui-presets

README

category: packages

@instructure/ui-presets

Shared config for building and testing UI code.

Installation

yarn add --dev @instructure/ui-presets

Babel

In your .babelrc file:

{
  "presets": ["@instructure/ui-presets/babel"]
}

To pass in more options, you can make your own preset:

/* babelrc.js */
module.exports = {
  presets: [[ require('@instructure/ui-presets/babel'), {
    themeable: true,
    coverage: Boolean(process.env.COVERAGE)
  }]]
}

Webpack

In your Webpack config file:

/* webpack.config.js */
{
  plugins: require('@instructure/ui-presets/webpack/plugins'),
  module: {
    rules: require('@instructure/ui-presets/webpack/module/rules')
  },
  resolveLoader: require('@instructure/ui-presets/webpack/resolveLoader')
}

Karma

In your Karma config file:

/* karma.config.js */
const path = require('path')
module.exports = require('@instructure/ui-presets/karma')({
  bundle: './tests.bundle.js',
  coverageThreshold: {
    global: {
      lines: 91
    },
    each: {
      lines: 50
    }
  },
  coverageDirectory: path.join(__dirname, '../../coverage/ui-core')
})

PostCSS

In your PostCSS config file:

/* postcss.config.js */
module.exports = require('@instructure/ui-presets/postcss')({
  before: {
    plugin: 'postcss-nested',
    insert: [
      [require.resolve('postcss-input-range')]
    ]
  },
  nesting: false // Set to true to use postcss-nesting instead of postcss-nested, defaults to false
})

Eslint

/* .eslintrc.js */
module.exports = require('@instructure/ui-presets/eslint')

StyleLint

/* stylelint.config.js */
module.exports = require('@instructure/ui-presets/stylelint')

Themeable Components

If your application already has a babel config and webpack config, and it is costly to convert fully to the ui-presets, you can introduce themeable components incrementally by adding the appropriate loader and resolve loader to your existing webpack config.

/* webpack.config.js */
{
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: [/node_modules/],
        use: [ 'babel-loader', 'themeable-css-loader' ]
      }
    ]
  },
  resolveLoader: require('@instructure/ui-presets/webpack/resolveLoader')
}

@instructure/ui-presetsdeprecated

Usage no npm install needed!