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')
}