├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── gulpfile.js ├── index.js ├── README.md ├── .eslintrc ├── package.json ├── test └── test.js └── LICENSE /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | 3 | node_modules/ 4 | 5 | test/ 6 | .travis.yml 7 | 8 | gulpfile.js 9 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - iojs 5 | - "0.12" 6 | - "0.10" 7 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## v1.0.0 2 | 3 | - Convert `block_element--modifier` class names style into camel case style 4 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | 3 | gulp.task('lint', function () { 4 | var eslint = require('gulp-eslint'); 5 | return gulp.src(['index.js', 'test/*.js', 'gulpfile.js']) 6 | .pipe(eslint()) 7 | .pipe(eslint.format()) 8 | .pipe(eslint.failAfterError()); 9 | }); 10 | 11 | gulp.task('test', function () { 12 | var mocha = require('gulp-mocha'); 13 | return gulp.src('test/*.js', { read: false }).pipe(mocha()); 14 | }); 15 | 16 | gulp.task('default', ['lint', 'test']); 17 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var postcss = require('postcss'); 2 | 3 | var pattern = /[-_.]+([a-zA-Z0-9])/g; 4 | 5 | function replacer (g) { 6 | 7 | var character = g[g.length - 1]; 8 | 9 | return g[0] === '.' ? '.' + character.toLowerCase() : character.toUpperCase(); 10 | } 11 | 12 | module.exports = postcss.plugin('postcss-camel-case', function() { 13 | 14 | return function (css) { 15 | 16 | css.walkRules(function (rule) { 17 | 18 | rule.selector = rule.selector.replace(pattern, replacer); 19 | }); 20 | }; 21 | }); 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # postcss-camel-case 2 | PostCSS plugin to convert CSS selector names to camelCase 3 | 4 | Turns `.block_element--modifier` into `.blockElementModifier`. Basically the plugin does convert any class names with `-`, `_` punctuations into `camelCase` style. 5 | 6 | ## Warnings 7 | Removing `-` and `_` characters from CSS class names may cause naming conflits: 8 | ``` 9 | .my-class -> .myClass 10 | .my_class -> .myClass 11 | ``` 12 | 13 | ## Why? 14 | Because camel cased properties feels more natural in JavaScript. It is mainly built for [CSS Modules](https://github.com/css-modules/css-modules). 15 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "no-unused-expressions": [0], 4 | "no-underscore-dangle": [0], 5 | "no-reserved-keys": [2], 6 | "no-multi-spaces": [0], 7 | "no-extra-parens": [2], 8 | "no-unused-vars": [2], 9 | "no-loop-func": [0], 10 | "key-spacing": [0], 11 | "max-len": [2], 12 | "strict": [0], 13 | "indent": [2], 14 | "quotes": [2, "single", "avoid-escape"], 15 | "curly": [0] 16 | }, 17 | "env": { 18 | "mocha": true, 19 | "node": true 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-camel-case", 3 | "version": "1.0.1", 4 | "description": "PostCSS plugin to convert CSS selector names to camelCase", 5 | "keywords": ["postcss", "css", "postcss-plugin", "selector", "camel case"], 6 | "author": "Roman Liutikov ", 7 | "license": "MIT", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/roman01la/postcss-camel-case.git" 11 | }, 12 | "dependencies": { 13 | "postcss": "^4.1.9" 14 | }, 15 | "devDependencies": { 16 | "gulp-eslint": "^0.12.0", 17 | "gulp-mocha": "^2.0.1", 18 | "chai": "^2.3.0", 19 | "gulp": "^3.8.11" 20 | }, 21 | "scripts": { 22 | "test": "gulp" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | var postcss = require('postcss'); 2 | var expect = require('chai').expect; 3 | 4 | var plugin = require('../'); 5 | 6 | var test = function (input, output, opts, done) { 7 | postcss([ plugin(opts) ]).process(input).then(function (result) { 8 | expect(result.css).to.eql(output); 9 | expect(result.warnings()).to.be.empty; 10 | done(); 11 | }).catch(function (error) { 12 | done(error); 13 | }); 14 | }; 15 | 16 | describe('postcss-camel-case', function() { 17 | 18 | it('should convert BEM style class names', function (done) { 19 | test('.block_element--modifier {}', '.blockElementModifier {}', {}, done); 20 | }); 21 | 22 | it('should convert uppercased BEM style class names', function (done) { 23 | test('.Block_Element--Modifier {}', '.blockElementModifier {}', {}, done); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright 2015 Roman Liutikov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | --------------------------------------------------------------------------------