@sitegeist/conventional
Bundles sitegeist's frontend toolchain for TYPO3 projects (with and without fluid-components)
Features
- Enables centralized design tokens in a json/json5 file which can be used in sass files, javascript as well as TYPO3 and fluid components
- Easy imports of multiple sass/js files via glob
- Automatic polyfills for new JavaScript features with babel (respects browserslist of project)
- Minifies frontend assets and generates source map files
- Browser Update Note
- Stylelint for (CSS, SASS, SCSS) and Standard Linting (JS)
- Autoprefixing of modern CSS properties for older browsers (respects browserslist of project)
- SVG-Spritemap generation from single SVG files, optionally with name-prefixes
Planned features
- Autoprefixing of CSS classes (similar to CSS modules) for selected sass files
Usage
npx @sitegeist/conventional init
- Outputs instructions to install conventional
- Creates default
conventional.config.json
After the setup procedure, your package.json should look something like this:
{
"scripts": {
"build": "conventional build",
"watch": "conventional watch",
"lint": "conventional lint"
},
"devDependencies": {
"@sitegeist/conventional": "^1.4"
}
}
Configuration
All configuration is done in conventional.config.json in your package root folder:
{
"minify": true,
"sourceMaps": true,
"autoprefixer": true,
"browserUpdateNote": false,
"sass": {
"inputFiles": {
"Main": "./Resources/Private/Sass/Main.scss",
"Additional": "./Resources/Private/Sass/Additional.scss"
},
"outputPath": "./Resources/Public/Css/",
"outputFilePattern": "[name].min.css"
},
"js": {
"inputFiles": {
"Main": "./Resources/Private/JavaScript/Main.js",
"Additional": "./Resources/Private/JavaScript/Additional.js"
},
"outputPath": "./Resources/Public/JavaScript/",
"outputFilePattern": "[name].min.js"
}
}
see also conventional.config.json
Stylelint configuration
By default, conventional uses the stylelint-config-sass-guidelines. To add your own configuration, place a .stylelintrc.json file into your project root. You can add a complete custom set of rules or extend the standard-rules like this:
{
"extends": "stylelint-config-sass-guidelines",
"rules": {
"indentation": "tab",
"number-leading-zero": null
}
}
Available Commands
conventional init
conventional build
conventional build:sass
conventional build:js
conventional build:spritemap
conventional watch
conventional watch:sass
conventional watch:js
conventional watch:spritemap
conventional lint
conventional lint:sass
conventional lint:js
Planned commands
conventional test
conventional test:css
conventional test:js