├── .babelrc
├── .editorconfig
├── .eslintrc
├── .github
└── workflows
│ ├── bump.yml
│ ├── deploy.yml
│ └── verify.yml
├── .gitignore
├── .npmignore
├── .nvmrc
├── .vscode
└── settings.json
├── LICENSE
├── README.md
├── examples
└── vue-jss-example
│ ├── .babelrc
│ ├── .browserslistrc
│ ├── .eslintrc
│ ├── .gitignore
│ ├── LICENCE
│ ├── README.md
│ ├── package.json
│ ├── public
│ ├── favicon.ico
│ └── index.html
│ ├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ ├── Button.vue
│ │ └── HelloWorld.vue
│ └── main.js
│ └── webpack.config.js
├── logo.svg
├── package-lock.json
├── package.json
├── package.md
├── src
├── index.js
├── index.test.js
└── utils
│ ├── create-vue-model-projection.js
│ └── create-vue-model-projection.test.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | "@babel/plugin-proposal-class-properties",
4 | "@babel/plugin-proposal-object-rest-spread"
5 | ],
6 | "presets": [
7 | "@babel/preset-env"
8 | ],
9 | "env": {
10 | "test": {
11 | "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | charset = utf-8
7 | trim_trailing_whitespace = false
8 | insert_final_newline = false
9 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "env": {
4 | "node": true
5 | },
6 | "extends": [
7 | "google"
8 | ],
9 | "parserOptions": {
10 | "parser": "babel-eslint",
11 | "ecmaVersion": 2018,
12 | "sourceType": "module"
13 | },
14 | "ignorePatterns": ["build/", "examples/"],
15 | "rules": {
16 | "max-len": "off",
17 | "linebreak-style": "off"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/.github/workflows/bump.yml:
--------------------------------------------------------------------------------
1 | name: Bump version
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 |
8 | jobs:
9 | bump:
10 | name: Bump project version
11 | runs-on: ubuntu-latest
12 | env:
13 | SKIP_CI_FLAG: skip CI
14 | PRE_RELEASE_ID: next
15 | if: "!contains(github.event.head_commit.message, '[skip CI]')"
16 | steps:
17 | - name: Checkout to current repository branch
18 | uses: actions/checkout@v1
19 |
20 | - name: Setup GitHub Actions local user
21 | run: |
22 | git config --local user.email "actions@github.com"
23 | git config --local user.name "GitHub Actions"
24 |
25 | - name: Read Node.js® version from .nvmrc file
26 | id: nvmrc
27 | run: echo ::set-output name=NVMRC::$(cat .nvmrc)
28 |
29 | - name: Setup locked Node.js® version
30 | uses: actions/setup-node@v1
31 | with:
32 | node-version: "${{ steps.nvmrc.outputs.NVMRC }}"
33 |
34 | - id: version
35 | name: Bump project version
36 | run: |
37 | if ${{ github.event.ref == 'refs/heads/master' }}; then
38 | echo ::set-output name=NEW_VERSION::$(npm version prerelease --preid=$PRE_RELEASE_ID --no-git-tag-version)
39 | elif ${{ contains(github.event.ref, 'refs/heads/release') }}; then
40 | echo ::set-output name=NEW_VERSION::$(npm version patch --no-git-tag-version)
41 | fi
42 |
43 | - name: Commit and push new version
44 | run: |
45 | git add package.json
46 | git add package-lock.json
47 | git commit -m "[skip CI] ⚙️ Set version to ${{ steps.version.outputs.NEW_VERSION }}"
48 |
49 | - name: Push changes
50 | uses: ad-m/github-push-action@master
51 | with:
52 | github_token: "${{ secrets.GITHUB_TOKEN }}"
53 |
54 | skip:
55 | name: Skip CI
56 | runs-on: ubuntu-latest
57 | if: "contains(github.event.head_commit.message, '[skip CI]')"
58 | steps:
59 | - name: Skip CI log
60 | run: echo "Skip CI for a '${{github.event.head_commit.message}}' commit"
61 |
--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
1 | name: Deploy
2 |
3 | on:
4 | release:
5 | types: [created]
6 |
7 | jobs:
8 | verify:
9 | name: Verify production bundle
10 | runs-on: ubuntu-latest
11 | steps:
12 | - name: Checkout to current repository branch
13 | uses: actions/checkout@v1
14 |
15 | - name: Read Node.js® version from .nvmrc file
16 | id: nvmrc
17 | run: echo ::set-output name=NVMRC::$(cat .nvmrc)
18 |
19 | - name: Setup locked Node.js® version
20 | uses: actions/setup-node@v1
21 | with:
22 | node-version: "${{ steps.nvmrc.outputs.NVMRC }}"
23 |
24 | - name: Cache Node.js® packages
25 | uses: actions/cache@v1
26 | with:
27 | path: ~/.npm
28 | key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
29 | restore-keys: |
30 | ${{ runner.os }}-npm-
31 |
32 | - name: Install npm dependencies
33 | run: npm ci
34 |
35 | - name: Check linting
36 | run: npm run lint
37 |
38 | - name: Run unit tests
39 | run: npm run test
40 |
41 | - name: Build plugin
42 | run: npm run build
43 |
44 | publish:
45 | needs: [verify]
46 | name: Publish artifact on npmjs.org registry
47 | runs-on: ubuntu-latest
48 | steps:
49 | - name: Checkout to current repository branch
50 | uses: actions/checkout@v1
51 |
52 | - name: Read Node.js® version from .nvmrc file
53 | id: nvmrc
54 | run: echo ::set-output name=NVMRC::$(cat .nvmrc)
55 |
56 | - name: Setup locked Node.js® version
57 | uses: actions/setup-node@v1
58 | with:
59 | node-version: "${{ steps.nvmrc.outputs.NVMRC }}"
60 | registry-url: https://registry.npmjs.org/
61 |
62 | - name: Cache Node.js® packages
63 | uses: actions/cache@v1
64 | with:
65 | path: ~/.npm
66 | key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
67 | restore-keys: |
68 | ${{ runner.os }}-npm-
69 |
70 | - name: Install npm dependencies
71 | run: npm ci
72 |
73 | - name: Build plugin
74 | run: npm run build
75 |
76 | - name: Replace README.md with package.md which more suitable for npmjs.org registry
77 | run: |
78 | rm README.md
79 | mv package.md README.md
80 |
81 | - name: Update logo image source link in README.md file
82 | env:
83 | GITHUB_RAW_PATH: https://github.com/${{ github.repository }}/raw/${{ github.sha }}
84 | run: sed -i "s|./logo.svg|$GITHUB_RAW_PATH/logo.svg?sanitize=true|g" README.md
85 |
86 | - name: Read current package.json version
87 | id: version
88 | run: echo ::set-output name=PACKAGE_VERSION::$(grep -Po '"'"version"'"\s*:\s*"\K([^"]*)' package.json)
89 |
90 | - name: Publish package at npmjs.org registry
91 | # TODO - Get release tag by $(echo ${{ steps.version.outputs.PACKAGE_VERSION }} | grep -oP "\d+\.\d+\.\d+\-\K([^\.]*)")
92 | run: |
93 | if ${{ contains(steps.version.outputs.PACKAGE_VERSION, 'next') }}; then
94 | npm publish --tag next
95 | else
96 | npm publish
97 | fi
98 | env:
99 | NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
100 |
--------------------------------------------------------------------------------
/.github/workflows/verify.yml:
--------------------------------------------------------------------------------
1 | name: Verify build
2 |
3 | on:
4 | push:
5 | paths-ignore:
6 | - ".github/**"
7 | - ".vscode/**"
8 | - "examples/**"
9 |
10 | jobs:
11 | verify:
12 | name: Verify current commit
13 | runs-on: ubuntu-latest
14 | steps:
15 | - name: Checkout to current repository branch
16 | uses: actions/checkout@v1
17 |
18 | - name: Read Node.js® version from .nvmrc file
19 | id: nvmrc
20 | run: echo ::set-output name=NVMRC::$(cat .nvmrc)
21 |
22 | - name: Setup locked Node.js® version
23 | uses: actions/setup-node@v1
24 | with:
25 | node-version: "${{ steps.nvmrc.outputs.NVMRC }}"
26 |
27 | - name: Cache Node.js® packages
28 | uses: actions/cache@v1
29 | with:
30 | path: ~/.npm
31 | key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
32 | restore-keys: |
33 | ${{ runner.os }}-npm-
34 |
35 | - name: Install npm dependencies
36 | run: npm ci
37 |
38 | - name: Check linting
39 | run: npm run lint
40 |
41 | - name: Run unit tests
42 | run: npm run test
43 |
44 | - name: Build plugin
45 | run: npm run build
46 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Misc
2 | .DS_Store
3 | node_modules
4 |
5 | # Build files
6 | /build
7 | *.tgz
8 |
9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 |
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | # Misc
2 | .DS_Store
3 |
4 | # Editor directories and files
5 | .idea
6 | .vscode
7 | *.suo
8 | *.ntvs*
9 | *.njsproj
10 | *.sln
11 | *.sw?
12 |
13 | # CI and development stuff
14 | .github
15 | /examples
16 |
17 | # Configuration files
18 | .babelrc
19 | .editorconfig
20 | .eslintrc
21 | .nvmrc
22 | webpack.config.js
23 |
24 | # Test suites
25 | *.test.js
26 |
27 | # Log files
28 | yarn-debug.log*
29 | yarn-error.log*
30 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 12.14
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "eslint.enable": true,
3 | "eslint.validate": [
4 | "javascript",
5 | "vue"
6 | ],
7 | "cSpell.words": [
8 | "unmanage"
9 | ],
10 | }
11 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright © 2019-2020 Arkadiusz S. Krauzowicz | cube11
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, 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,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
3 |
5 | Vue JSS Plugin
6 |
7 |
13 |
14 | The Vue JSS plugin implements one of the most flexible CSS-in-JS framework in Vue.js components. About JSS you can read more in the 📖 JSS documentation .
15 |
16 |
17 | ### Table of content
18 |
19 | - [Usage](#usage)
20 | - [Installation](#installation)
21 | - [Development](#development)
22 | - [Examples](#examples)
23 | - [Test](#test)
24 | - [Production](#production)
25 | - [License](#license)
26 |
27 | ## Usage
28 |
29 | The plugin usage section was moved to separate file that is published as README file on npm registry. Check README page for your plugin version on npmjs.org [plugin page](https://www.npmjs.com/package/vue-jss-plugin), or go to the latest draft of [package README](./package.md) file and check [Usage section](./package.md#usage)
30 |
31 | ## Installation
32 |
33 | ### Environment
34 |
35 | Project was initially designed to be run over **Node.js®** 12.14.0 LTS, and that version is locked in `.nvmrc` file. There shouldn't be much troubles to run it on other version, but if there will be any please use [nvm](https://github.com/nvm-sh/nvm) to switch to declared version of **Node.js®**.
36 |
37 | ```sh
38 | $ nvm install
39 | $ nvm use
40 | ```
41 |
42 | ### Dependencies
43 |
44 | The project uses **npm** as a package manager, so use only **npm** to install all project dependencies.
45 |
46 | ```sh
47 | $ npm install
48 | ```
49 |
50 | ## Development
51 |
52 | ```sh
53 | $ npm run start
54 | ```
55 |
56 | ## Examples
57 |
58 | // TODO
59 |
60 | ## Tests
61 |
62 | The project contains configured eslint setup and test cases driven by jest. Before build should be run to make sure that every feature works well.
63 |
64 | ```sh
65 | $ npm run lint
66 | $ npm run test
67 | ```
68 |
69 | ## Production
70 |
71 | ```sh
72 | $ npm run build
73 | ```
74 |
75 | ## License
76 |
77 | Released under the MIT [License](./LICENSE). Copyright © 2019-2020 Arkadiusz S. Krauzowicz
78 |
--------------------------------------------------------------------------------
/examples/vue-jss-example/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | "@babel/plugin-proposal-class-properties",
4 | "@babel/plugin-proposal-object-rest-spread"
5 | ],
6 | "presets": [
7 | "@babel/preset-env"
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/examples/vue-jss-example/.browserslistrc:
--------------------------------------------------------------------------------
1 | last 5 version
2 | > 5%
3 | not dead
4 | IE 11
5 |
--------------------------------------------------------------------------------
/examples/vue-jss-example/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "env": {
4 | "browser": true,
5 | "es6": true
6 | },
7 | "extends": [
8 | "google",
9 | "plugin:vue/recommended"
10 | ],
11 | "parserOptions": {
12 | "parser": "babel-eslint",
13 | "ecmaVersion": 2018,
14 | "sourceType": "module"
15 | },
16 | "plugins": [
17 | "vue",
18 | "html"
19 | ],
20 | "rules": {
21 | "max-len": "off",
22 | "linebreak-style": "off"
23 | }
24 | }
--------------------------------------------------------------------------------
/examples/vue-jss-example/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 |
5 | # local env files
6 | .env.local
7 | .env.*.local
8 |
9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 |
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 |
--------------------------------------------------------------------------------
/examples/vue-jss-example/LICENCE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2019 Arkadiusz S. Krauzowicz | cube11
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, 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,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/examples/vue-jss-example/README.md:
--------------------------------------------------------------------------------
1 | # Vue JSS Example
2 | [](https://travis-ci.org/arktosk/vue-jss-project)
3 |
4 | ## Project setup
5 | ```
6 | npm install
7 | ```
8 |
9 | ### Compiles and hot-reloads for development
10 | ```
11 | npm run serve
12 | ```
13 |
14 | ### Compiles and minifies for production
15 | ```
16 | npm run build
17 | ```
18 |
19 | ### Run your tests
20 | ```
21 | npm run test
22 | ```
23 |
24 | ### Lints and fixes files
25 | ```
26 | npm run lint
27 | ```
28 |
--------------------------------------------------------------------------------
/examples/vue-jss-example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-jss-example",
3 | "description": "Vue JSS Plugin implementation example",
4 | "version": "1.1.1",
5 | "private": true,
6 | "scripts": {
7 | "start": "webpack-dev-server --config=webpack.config.js --env.NODE_ENV=development --watch",
8 | "build": "rimraf build && webpack --config=webpack.config.js --env.NODE_ENV=production",
9 | "lint": "eslint {public,src}/**/*.{html,js,vue}",
10 | "test": "exit 0;"
11 | },
12 | "dependencies": {
13 | "color": "^3.1.2",
14 | "vue": "^2.6.10",
15 | "vue-jss-plugin": "^1.1.1"
16 | },
17 | "devDependencies": {
18 | "@babel/core": "^7.6.0",
19 | "@babel/plugin-proposal-class-properties": "^7.5.5",
20 | "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
21 | "@babel/plugin-syntax-dynamic-import": "^7.2.0",
22 | "@babel/preset-env": "^7.6.0",
23 | "babel-eslint": "^10.0.3",
24 | "babel-loader": "^8.0.6",
25 | "eslint": "^6.4.0",
26 | "eslint-config-google": "^0.14.0",
27 | "eslint-plugin-html": "^6.0.0",
28 | "eslint-plugin-vue": "^5.2.3",
29 | "file-loader": "^4.2.0",
30 | "html-loader": "^0.5.5",
31 | "html-webpack-plugin": "^3.2.0",
32 | "rimraf": "^3.0.0",
33 | "terser-webpack-plugin": "^2.0.1",
34 | "url-loader": "^2.1.0",
35 | "vue-loader": "^15.7.1",
36 | "vue-template-compiler": "^2.6.10",
37 | "webpack": "^4.40.2",
38 | "webpack-cli": "^3.3.8",
39 | "webpack-dev-server": "^3.8.0"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/examples/vue-jss-example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arktosk/vue-jss-plugin/fe74d4f40d002b96494313f97e1ed499578f4f49/examples/vue-jss-example/public/favicon.ico
--------------------------------------------------------------------------------
/examples/vue-jss-example/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | <%= htmlWebpackPlugin.options.title %>
8 |
9 |
10 |
11 | We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/examples/vue-jss-example/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
12 |
16 |
17 |
19 |
20 |
51 |
--------------------------------------------------------------------------------
/examples/vue-jss-example/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arktosk/vue-jss-plugin/fe74d4f40d002b96494313f97e1ed499578f4f49/examples/vue-jss-example/src/assets/logo.png
--------------------------------------------------------------------------------
/examples/vue-jss-example/src/components/Button.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 | Component № {{ _uid }}
10 |
11 |
12 |
13 |
79 |
80 |
81 |
--------------------------------------------------------------------------------
/examples/vue-jss-example/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
{{ message }}
4 |
5 | For a guide and recipes on how to configure / customize this project,vue-cli documentation .
13 |
14 |
15 | Installed CLI Plugins
16 |
17 |
43 |
44 | Essential Links
45 |
46 |
88 |
89 | Ecosystem
90 |
91 |
133 |
135 |
136 |
168 |
--------------------------------------------------------------------------------
/examples/vue-jss-example/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './App.vue';
3 | import jssPlugin from 'vue-jss-plugin/src';
4 |
5 | Vue.config.productionTip = false;
6 |
7 | Vue.use(jssPlugin, {WYSIWYG: true});
8 |
9 | new Vue({
10 | render: (render) => render(App),
11 | }).$mount('#app');
12 |
--------------------------------------------------------------------------------
/examples/vue-jss-example/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const {EnvironmentPlugin, HotModuleReplacementPlugin} = webpack = require('webpack');
3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
4 | const TerserPlugin = require('terser-webpack-plugin');
5 | const {VueLoaderPlugin} = require('vue-loader');
6 | const {name} = require('./package.json');
7 |
8 | module.exports = (env = {}) => {
9 | process.env.NODE_ENV = env.NODE_ENV || 'production';
10 |
11 | return {
12 | entry: path.resolve(process.cwd(), 'src/main.js'),
13 | mode: process.env.NODE_ENV || 'production',
14 | devtool: (process.env.NODE_ENV === 'development') ? 'eval-source-map' : 'none',
15 | output: {
16 | path: path.resolve(process.cwd(), 'build/'),
17 | filename: (process.env.NODE_ENV === 'development') ? `js/${name}.bundle.js` : `js/${name}-[hash].bundle.js`,
18 | },
19 | resolve: {
20 | extensions: ['.js', '.json', '.vue'],
21 | },
22 | devServer: {
23 | hot: true,
24 | watchOptions: {
25 | poll: true,
26 | },
27 | compress: true,
28 | port: 9000,
29 | },
30 | module: {
31 | rules: [
32 | {
33 | test: /\.vue$/,
34 | loader: 'vue-loader',
35 | exclude: /node_modules/,
36 | options: {
37 | hotReload: process.env.NODE_ENV === 'development',
38 | },
39 | },
40 | {
41 | test: /\.js$/,
42 | loader: 'babel-loader',
43 | exclude: /node_modules/,
44 | },
45 | {
46 | test: /\.(png|jpe?g|gif)$/i,
47 | loader: 'file-loader',
48 | options: {
49 | outputPath: 'images',
50 | },
51 | },
52 | ],
53 | },
54 | optimization: {
55 | minimize: process.env.NODE_ENV !== 'development',
56 | minimizer: [
57 | new TerserPlugin({
58 | include: /\.js$/,
59 | extractComments: false,
60 | }),
61 | ],
62 | },
63 | plugins: [
64 | new EnvironmentPlugin(['NODE_ENV']),
65 | new HtmlWebpackPlugin({
66 | title: 'Vue JSS Example',
67 | template: 'public/index.html',
68 | favicon: 'public/favicon.ico',
69 | minify: process.env.NODE_ENV !== 'development',
70 | }),
71 | new HotModuleReplacementPlugin(),
72 | new VueLoaderPlugin(),
73 | ],
74 | };
75 | };
76 |
--------------------------------------------------------------------------------
/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
8 |
24 |
25 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-jss-plugin",
3 | "version": "1.2.4-next.0",
4 | "description": "JSS implementation plugin for Vue.js",
5 | "keywords": [
6 | "css-in-js",
7 | "jss",
8 | "styles",
9 | "vue",
10 | "vue-jss"
11 | ],
12 | "homepage": "https://github.com/arktosk/vue-jss-plugin/blob/master/README.md",
13 | "bugs": {
14 | "url": "https://github.com/arktosk/vue-jss-plugin/issues"
15 | },
16 | "repository": {
17 | "type": "git",
18 | "url": "https://github.com/arktosk/vue-jss-plugin.git",
19 | "directory": "packages/vue-jss-plugin"
20 | },
21 | "license": "MIT",
22 | "author": {
23 | "name": "Arkadiusz S. Krauzowicz",
24 | "email": "arkadiusz.krauzowicz@cube11.pl",
25 | "url": "https://cube11.pl/"
26 | },
27 | "files": [
28 | "src/**/*.js",
29 | "!src/**/*.test.js",
30 | "build/**"
31 | ],
32 | "main": "build/vue-jss-plugin.umd.js",
33 | "module": "src/index.js",
34 | "scripts": {
35 | "build": "webpack --config=webpack.config.js",
36 | "clean": "rimraf build",
37 | "lint": "eslint src/**/*.js",
38 | "start": "webpack --config=webpack.config.js --watch",
39 | "test": "jest"
40 | },
41 | "dependencies": {
42 | "jss": "^9.8.7",
43 | "jss-preset-default": "^4.5.0"
44 | },
45 | "devDependencies": {
46 | "@babel/core": "^7.5.5",
47 | "@babel/plugin-proposal-class-properties": "^7.5.5",
48 | "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
49 | "@babel/preset-env": "^7.5.5",
50 | "@vue/test-utils": "^1.0.0-beta.29",
51 | "babel-eslint": "^10.0.3",
52 | "babel-jest": "^24.9.0",
53 | "babel-loader": "^8.0.6",
54 | "eslint": "^6.2.2",
55 | "eslint-config-google": "^0.14.0",
56 | "jest": "^24.9.0",
57 | "rimraf": "^3.0.0",
58 | "vue": "^2.6.10",
59 | "vue-template-compiler": "^2.6.10",
60 | "webpack": "^4.39.3",
61 | "webpack-cli": "^3.3.7"
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/package.md:
--------------------------------------------------------------------------------
1 |
3 |
5 |
6 | # Vue JSS Plugin
7 |
8 | The Vue JSS plugin implements one of the most flexible CSS-in-JS framework inside Vue.js components. About JSS you can read more in the 📖 [JSS documentation](https://cssinjs.org).
9 |
10 | ## Installation
11 |
12 | The plugin contains bundled-in [JSS](https://www.npmjs.com/package/jss) package, so install only **vue-jss-plugin** by **npm** or **yarn**.
13 |
14 | ```sh
15 | $ npm install vue-jss-plugin
16 | ```
17 |
18 | ## Usage
19 |
20 | In your main app file import **vue** and **vue-jss-plugin**, then use it as a regular plugin.
21 |
22 | ```js
23 | import Vue from 'vue';
24 | import jssPlugin from 'vue-jss-plugin';
25 |
26 | Vue.use(jssPlugin);
27 | ```
28 |
29 | Adding styles to component options allows you to automatically inject jss to project and assign classes names to component scoped variable. Read more about JSS syntax in the [JSS Syntax documentation](https://cssinjs.org/jss-syntax/).
30 |
31 | ```js
32 | import HelloWorld from './components/HelloWorld.vue';
33 |
34 | const styles = {
35 | app: {
36 | fontFamily: '"Avenir", Helvetica, Arial, sans-serif',
37 | WebkitFontSmoothing: 'antialiased',
38 | MozOsxFontSmoothing: 'grayscale',
39 | textAlign: 'center',
40 | marginTop: '60px',
41 |
42 | // Reactive style example:
43 | // Vue component instance is passed as first argument, so you can use there all props, data, computed values.
44 | color: ({themeColor}) => themeColor,
45 | },
46 | };
47 |
48 | export default {
49 | name: 'app',
50 | // Add JSS rules as styles in component configuration:
51 | styles,
52 | components: {
53 | HelloWorld,
54 | },
55 | data() {
56 | return {
57 | themeColor: '#2c3e50',
58 | };
59 | },
60 | mounted() {
61 | this.$classes; // All available classes names from JSS rules.
62 | },
63 | };
64 | ```
65 |
66 | In template you can use `$classes` variable to get component scoped class name.
67 |
68 | ```html
69 |
70 |
71 |
72 |
73 |
75 | ```
76 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import {create, getDynamicStyles, SheetsRegistry, SheetsManager} from 'jss';
2 | import jssPresetDefault from 'jss-preset-default';
3 | import {createVueModelProjection} from './utils/create-vue-model-projection';
4 |
5 | export const sheetsRegistry = new SheetsRegistry();
6 | export const sheetsManager = new SheetsManager();
7 |
8 | const NODE_ENV = process.env.NODE_ENV || 'production';
9 |
10 | /**
11 | * Plugin class.
12 | * @class
13 | */
14 | export class VueJssPlugin {
15 | /**
16 | * Plugin installation interface.
17 | * @param {Vue} Vue - Vue Instance.
18 | * @param {Object} options - Plugin settings.
19 | * @return {void}
20 | */
21 | install(Vue, {
22 | preset = jssPresetDefault,
23 | jss = create(),
24 | WYSIWYG = false,
25 | // TODO: Pass here vue instance to store theme reactive data, in future add vuex support
26 | } = {}) {
27 | this.WYSIWYG = WYSIWYG;
28 | this.jss = jss;
29 | this.jss.setup({...preset()});
30 |
31 | Vue.prototype.$jss = this.jss;
32 | Vue.prototype.$sheetsRegistry = sheetsRegistry;
33 | Vue.prototype.$sheetsManager = sheetsManager;
34 |
35 | this.createVueMixin(Vue);
36 | }
37 | /**
38 | * Create plugin mixin.
39 | * @param {Vue} Vue - Vue Instance.
40 | * @return {void}
41 | */
42 | createVueMixin(Vue) {
43 | const _plugin = this;
44 |
45 | Vue.mixin({
46 | beforeCreate() {
47 | const componentName = this.$options.name ? this.$options.name : this.$root === this ? 'Root' : this.$options._componentTag || this._uid;
48 |
49 | if (typeof this.$options.styles !== 'object') return;
50 |
51 | if (!this.$sheetsManager.get(componentName)) {
52 | const styleSheet = _plugin.jss.createStyleSheet(this.$options.styles, {
53 | name: componentName,
54 | link: true,
55 | meta: NODE_ENV !== 'production' ? componentName : null,
56 | });
57 | // TODO: Do not attach style sheet when is empty (all styles are dynamic)
58 | this.$sheetsManager.add(componentName, styleSheet);
59 | this.$sheetsRegistry.add(styleSheet);
60 | }
61 |
62 | this.$styleSheet = this.$sheetsManager.get(componentName);
63 | this.$classes = Object.assign({}, this.$styleSheet.classes);
64 |
65 | let dynamicStyles = getDynamicStyles(this.$options.styles);
66 | if (!dynamicStyles) return;
67 |
68 | dynamicStyles = Object.keys(dynamicStyles).reduce((styles, rule) => {
69 | if (!this.$styleSheet.classes[rule]) return styles;
70 | styles[rule] = {
71 | [`.${this.$styleSheet.classes[rule]}&`]: dynamicStyles[rule],
72 | };
73 | return styles;
74 | }, {});
75 |
76 | this.$dynamicStyleSheet = _plugin.jss.createStyleSheet(dynamicStyles, {
77 | name: componentName,
78 | generateClassName: (rule) => NODE_ENV !== 'production' ? `${this.$classes[rule.key]}-${this._uid}` : `${this.$classes[rule.key]}${this._uid}`,
79 | link: true,
80 | meta: NODE_ENV !== 'production' ? `${componentName}-${this._uid}` : null,
81 | });
82 |
83 | // Assign reactive classes into static ones
84 | Object.keys(this.$dynamicStyleSheet.classes).forEach((rule) => {
85 | if (this.$styleSheet.classes[rule]) {
86 | this.$classes[rule] = [
87 | ...(Array.isArray(this.$styleSheet.classes[rule]) ? this.$styleSheet.classes[rule] : [this.$styleSheet.classes[rule]]),
88 | this.$dynamicStyleSheet.classes[rule],
89 | ];
90 | } else {
91 | this.$classes[rule] = this.$dynamicStyleSheet.classes[rule];
92 | }
93 | });
94 |
95 | sheetsRegistry.add(this.$dynamicStyleSheet);
96 | },
97 | beforeMount() {
98 | if (_plugin.WYSIWYG && this.$dynamicStyleSheet) {
99 | // TODO: Find a way how to keep reactivity between component and style sheet without all these unnecessary watchers...
100 | // IDEA: Use one Vue instance as style sheet config store with clean API
101 | [...Object.keys(this.$props || {}), ...Object.keys(this.$data || {})].forEach((reactiveProperty) => {
102 | this.$watch(`${reactiveProperty}`, (newValue) => {
103 | // if (NODE_ENV === 'development') console.log(`${this.$options.name} [${this._uid}] :: @watch :: ${reactiveProperty} -> ${newValue}`, newValue);
104 | this.$dynamicStyleSheet.update(createVueModelProjection(this));
105 | });
106 | });
107 | }
108 |
109 | if (!this.$styleSheet) return;
110 | this.$sheetsManager.manage(this.$options.name);
111 | if (!this.$dynamicStyleSheet) return;
112 | this.$dynamicStyleSheet.update(createVueModelProjection(this)).attach();
113 | },
114 | beforeDestroy() {
115 | if (typeof this.$options.styles !== 'object') return;
116 | this.$sheetsManager.unmanage(this.$options.name);
117 | if (!this.$sheetsManager.get(this.$options.name)) this.$sheetsRegistry.remove(this.$styleSheet);
118 | this.$sheetsRegistry.remove(this.$styleSheet);
119 | if (this.$dynamicStyleSheet) {
120 | this.$sheetsRegistry.remove(this.$dynamicStyleSheet);
121 | this.$dynamicStyleSheet.detach();
122 | }
123 | },
124 | });
125 | }
126 | }
127 |
128 | export default new VueJssPlugin();
129 |
--------------------------------------------------------------------------------
/src/index.test.js:
--------------------------------------------------------------------------------
1 | import {mount, createLocalVue} from '@vue/test-utils';
2 | import jssPlugin from './';
3 |
4 | const localVue = createLocalVue();
5 | localVue.use(jssPlugin);
6 |
7 | const styles = {
8 | label: {
9 | display: 'block',
10 | color: 'rgb(66, 185, 131)', // #42b983
11 | textAlign: 'center',
12 | },
13 | };
14 |
15 | const testComponent = localVue.component('test-component', {
16 | styles,
17 | template: `Let's test the World!
`,
18 | });
19 |
20 | describe('Mounted component', () => {
21 | const wrapper = mount(testComponent, {localVue});
22 | test('received class after JSS injection', () => {
23 | expect(wrapper.vm.$classes).toHaveProperty('label');
24 | });
25 |
26 | test('has proper class name for JSS rule', () => {
27 | expect(wrapper.classes()).toContain('label-0-1-1');
28 | });
29 |
30 | test('has applied proper styles', () => {
31 | const wrapperStyles = window.getComputedStyle(wrapper.element);
32 |
33 | expect(wrapperStyles.display).toBe('block');
34 | expect(wrapperStyles.color).toBe('rgb(66, 185, 131)');
35 | expect(wrapperStyles.textAlign).toBe('center');
36 | });
37 | });
38 |
--------------------------------------------------------------------------------
/src/utils/create-vue-model-projection.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Create projection of V-Model, contains data, props, computed properties.
3 | * @param {Vue} VueInstance - Vue instance.
4 | * @return {*} - Data projection of props, data and computed properties from Vue instance.
5 | * @private
6 | */
7 | export const createVueModelProjection = (VueInstance) => {
8 | const $props = VueInstance.$props;
9 | const $data = VueInstance.$data;
10 | const $computed = {};
11 |
12 | if (typeof VueInstance.$options.computed === 'object') {
13 | Object.keys(VueInstance.$options.computed).forEach((key) => {
14 | // TODO: Traverse object tree to get plain values.
15 | $computed[key] = VueInstance[key];
16 | });
17 | }
18 |
19 | return {
20 | ...$props,
21 | ...$data,
22 | ...$computed,
23 | };
24 | };
25 |
--------------------------------------------------------------------------------
/src/utils/create-vue-model-projection.test.js:
--------------------------------------------------------------------------------
1 | import {mount, createLocalVue} from '@vue/test-utils';
2 | import {createVueModelProjection} from './create-vue-model-projection';
3 |
4 | const localVue = createLocalVue();
5 |
6 | const testComponent = localVue.component('test-component', {
7 | props: [
8 | 'testStringProp',
9 | ],
10 | data() {
11 | return {
12 | testStringData: 'data',
13 | };
14 | },
15 | computed: {
16 | testComputedStringData() {
17 | return `computed ${this.testStringProp} and ${this.testStringData}`;
18 | },
19 | },
20 | template: `Let's test the World!
`,
21 | });
22 |
23 | describe('Vue Model projection', () => {
24 | const wrapper = mount(testComponent, {
25 | propsData: {
26 | testStringProp: 'prop',
27 | },
28 | });
29 | const vueModelProjection = createVueModelProjection(wrapper.vm);
30 | test('has created proper projection from props', () => {
31 | expect(vueModelProjection.testStringProp).toBe('prop');
32 | });
33 | test('has created proper projection from data', () => {
34 | expect(vueModelProjection.testStringData).toBe('data');
35 | });
36 | test('has created proper projection from computed properties', () => {
37 | expect(vueModelProjection.testComputedStringData).toBe('computed prop and data');
38 | });
39 | });
40 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 | const project = require('./package.json');
3 |
4 | module.exports = {
5 | mode: 'production',
6 | entry: './src/index.js',
7 | output: {
8 | library: project.name,
9 | libraryTarget: 'umd',
10 | umdNamedDefine: true,
11 | filename: `${project.name}.umd.js`,
12 | path: (__dirname + '/build'),
13 | },
14 | module: {
15 | rules: [{
16 | test: /\.js$/,
17 | include: [__dirname + '/src'],
18 | loader: 'babel-loader',
19 | }],
20 | },
21 | plugins: [
22 | new webpack.BannerPlugin([
23 | project.description,
24 | '',
25 | `@version ${project.version}`,
26 | `@copyright ${project.author.name} ${new Date().getFullYear()}`,
27 | `@website ${project.homepage}`,
28 | `@license ${project.license}`,
29 | ].join('\n')),
30 | ],
31 | };
32 |
--------------------------------------------------------------------------------
4 | 
8 | 
16 |